Amazon Q DeveloperのAgentic CodingでAWS CDKのソースを作成し簡易な構成図を書いてみる

はじめに

今回はAmazon Q Develper(以降Q Devと記載) のChat機能を使って、VS Code上でAWS CDKのコードを生成し、インフラ構成図を出力してみます。簡単な構成をどこまで表現できるのかを確認してみます。

AWS Builders IDの作成

Q DevのChat機能を無料範囲内で使うには以下のどちらかの登録が必要です。

• AWS Builders IDの登録
• IAM ユーザの作成

参考

https://aws.amazon.com/jp/q/developer/pricing/?nc1=h_ls

今回は、Builders IDを登録して使ってみます。Builders IDの登録は以下の画面の「Sign up with Builder ID」を選択して、登録を行ってください。

https://community.aws/builderid

※もし無料制限の範囲を超えて利用したい場合は、IAM Identity Center経由での利用を検討してください。

VS CodeにQ Devの拡張機能を追加

次にVS CodeにQ Devの拡張機能を追加します。今回はChatからAgentic Codingを使うのでこちらの拡張機能を追加してください。

Extention ID:amazonwebservices.amazon-q-vscode

Builders IDと接続

VS Codeの拡張機能上で「Personal account」を選択し、「Continue」を押下するとブラウザが開きます。

ブラウザ上で許可が求められるので、「アクセスを許可」で許可します。

処理が完了すると以下の画面になり、VS CodeのQ Dev拡張機能のChat画面で入力が可能になります。

Agentic Coding

ここからはAIエージェントに頼んでコーディングしてもらいます。Agentic codingはOFFにすると計画を立てることだけ実行させることも出来ます。どんな実装になるか分からないのでまずは計画を立ててもらいます。拡張機能を選択すると左下の</>となっているトグルをクリックしするとグレーになり、Agentic CodingがOFFになります。この状態で計画を立ててもらいます。

このディレクトリで以下の要件を満たすコードを作成したいです。計画を立ててください。

- インフラはAWS CDKで記述してください
- Lambda上でFunction URLを作成してください
- LambdaのコードはInlineでできるだけ単純なものにしてください

すると以下のような計画を立ててくれます。

想定した通りの内容なのでこのまま実装をお願いします。先程の</>のトグルをクリックすると青色のONの状態になるので実装を依頼します。

最終的には以下のような内容でコードが生成され、デプロイ手順も教えてくれます。

生成されたCDKのLambda部分は以下のようになっており、生成したままで使えました。

import * as cdk from 'aws-cdk-lib';
import * as lambda from 'aws-cdk-lib/aws-lambda';
import { Construct } from 'constructs';

export class CdkLambdaStack extends cdk.Stack {
  constructor(scope: Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props);

    const lambdaFunction = new lambda.Function(this, 'HelloWorldFunction', {
      runtime: lambda.Runtime.NODEJS_20_X,
      handler: 'index.handler',
      code: lambda.Code.fromInline(`
        exports.handler = async (event) => {
          return {
            statusCode: 200,
            body: JSON.stringify('Hello World from Lambda!')
          };
        };
      `)
    });

    new lambda.FunctionUrl(this, 'HelloWorldFunctionUrl', {
      function: lambdaFunction,
      authType: lambda.FunctionUrlAuthType.NONE
    });
  }
}

デプロイするとFunction URLsとして利用できます。

% curl https://xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.lambda-url.ap-northeast-1.on.aws/
"Hello World from Lambda!"%

構成図の作成

最後にこのコードをDraw.IOで描画してもらいます。プロンプトは以下のように設定してみます。

今のソースコードからDraw.ioでインフラ構成図を作成してください。
出力は、cdk-lambda-appディレクトリ配下にしてください。

一度目の生成では存在しないAPI Gatewayが描画されたのですが、削除するように指示すると、以下のようにそれなりに正しい構成図になることが確認できました。

ごく簡単な内容ならMCPを使わなくても最低限正しい構成を描けることが確認できました。

最後に

7/7はクラスメソッドの創立記念日です。お祝いのために軽いブログを書いてみました。

Q Dev Chatの使い方をこのブログで確認してもらえれば幸いです。