こんにちは、株式会社FIXERの村上です。

この10月下旬あたりに公開されたGPT-4V（画像解析）があまりに便利すぎて感動しました！！

早速使ってみたく、GPT-4V を使用して AWSのクラウド構成図をもとにAWS CDK v2（TypeScript）のコード生成を試してみることにしました。

前提条件

下記の条件を満たしておきます。

AWSアカウント
AWS CDKを利用できるローカル環境（VMでも可!!）
- 参考：AWS CDK v2における基本コマンドの操作をハンズオン形式で学んでみる
ChatGPT Plus の課金ユーザーであること（大事）

いざ試してみた

１．AWSの構成図をGPT-4Vで解析する

本ブログで用意したAWSのクラウド構成図(※)はこちらです。

※ S3に配置したコンテンツをCloudFront経由で配信する

ChatGPTに問いかける文章は必要最低限でいきます（画像解析の能力を確認したいため）。

生成結果はこちらです！！！

生成された Resource モジュールはOpenAIの学習データを参照するためかなり古い（≒利用できない）ため公式リファレンスを読みながら人間の手で修正していきます。

２．CDKのソースコードを改修する

生成されたAWS CDKのコードをテキストエディタにコピペします。さっそくエラーの反応がありますね・・・

7行目、22行目のエラーを直したコードはこちらです。

TypeScriptimport { Construct } from 'constructs';
import * as cdk from 'aws-cdk-lib';
import * as s3 from 'aws-cdk-lib/aws-s3';
import * as cloudfront from 'aws-cdk-lib/aws-cloudfront';
import * as origins from 'aws-cdk-lib/aws-cloudfront-origins';

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

    // Amazon S3バケットの作成
    const websiteBucket = new s3.Bucket(this, 'WebsiteBucket', {
      removalPolicy: cdk.RemovalPolicy.DESTROY, // この行は本番環境では使用しないでください
      autoDeleteObjects: true, // この行も本番環境では使用しないでください
      publicReadAccess: false,
    });

    // CloudFrontのDistributionの作成
    const distribution = new cloudfront.Distribution(this, 'Distribution', {
      defaultBehavior: { 
        origin: new origins.S3Origin(websiteBucket),
        allowedMethods: cloudfront.AllowedMethods.ALLOW_ALL,
        // HTTPをHTTPSにリダイレクトする設定
        viewerProtocolPolicy: cloudfront.ViewerProtocolPolicy.REDIRECT_TO_HTTPS,
      }
    });

    // 出力
    new cdk.CfnOutput(this, 'CloudFrontDistributionURL', {
      value: distribution.distributionDomainName,
    });
  }
}

const app = new cdk.App();
new GenerateAwsCdkProjectStack(app, 'GenerateAwsCdkProjectStack');

３．デプロイする

5分ぐらい待機・・・

できた！

４．コンテンツ配信用の作業

静的ファイルをS3バケットに配置して、CloudFront経由で配信できるように実装していきます。

ChatGPTでリソースの設定を実装できると思いますが、いっぱいテキストを書くことを頑張りたくないため、手作業していきます。

S3バケットに適当なHTMLファイルのオブジェクトを配置してみます。
S3とCloudFrontを内部連携するために新しくオリジンアクセスを作成します。
CloudFrontのディストリビューションへ移り、既存オリジンを編集します。
① オリジンアクセスを「Origin access control settings (recommended)」へ変更する
② 指示されるバケットポリシーをS3バケットに差し替える