Zenn
🌟

GPT-4Vを活用して、AWS環境をサクッと構築する

2023/11/01に公開
AWS
AWS CDK
ChatGPT
tech

AWSの構成図をGPT-4Vで解析し、AWS CDK v2（TypeScript）のソースコードを生成してもらいました。

前提条件

  • AWSアカウントを用意します。
  • AWS CDKを実行できる環境を用意します。
    具体的な環境設定は、過去ブログが参考になります。
  • ChatGPT Plus の課金ユーザーであること。

1. AWSの構成図をGPT-4Vで解析する

今回、解析してもらうAWS構成図はこちらです。

必要そうな設定値を適当に入力して、GPT-4Vで解析してみます。

2. CDKのソースコードを改修する

生成されたCDKのコードをテキストエディタにコピペします。

エラーが7行目、22行目にあります・・・
ここは人間の手で修正していきます！！！

修正後のコードは、こちらです。

lib/generate-aws-cdk-project-stack.ts
import { 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');

3. デプロイする


5分ぐらい待機・・・

できた！

4. コンテンツ配信用の作業

「3. デプロイする」を実行後、リソースは生成されました。
次にS3バケットに適当なHTMLファイルのオブジェクトを配置してみます。

そして、CloudFrontへ移動します。
S3とClodFrontを内部連携するために新しくオリジンアクセスを作成します。

ディストリビューションへ移り、既存オリジンを編集します。

  • オリジンアクセスを「Origin access control settings (recommended)」へ変更する
  • 指示されるバケットポリシーをS3バケットに差し替える

最後に「ディストリビューションドメイン名/S3オブジェクト名」をブラウザで叩きます。
私は https://d2b8j6acjl8dwa.cloudfront.net/index.html となります。

さいごに

ChatGPT（GPT-4V）、めっちゃ便利ですよね✨
どの生成AIサービスでも同様ですが、プロンプトの作成が地味にめんどくさかったり、日本語でどう伝えればいいのかわからなかったりとテキストのデメリットを少し改善されてきて、GPT-4Vの登場は嬉しい限りです。
もう少し精度を向上させるチューニングができれば、IaCの永続的な課題であるモジュールの管理が不要になるかもしれません！！

参考

Discussion