CDKでS3＋index.htmlを作って、Web公開してみる。

admin

1日前

AWSをIaC(Infrastrucre As Code)できるCDK(Cloud Developer Kit)を使ってみた。

lib/cdk-sample-system-stack.ts

import * as cdk from 'aws-cdk-lib';
import { Construct } from 'constructs';
import * as s3 from 'aws-cdk-lib/aws-s3';
import * as s3deploy from 'aws-cdk-lib/aws-s3-deployment';

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

    //  S3バケット（静的ウェブサイト用）
    const websiteBucket = new s3.Bucket(this, 'WebsiteBucket', {
      websiteIndexDocument: 'index.html', // デフォルトのHTMLファイル
      publicReadAccess: true, // 誰でもアクセス可能にする
      blockPublicAccess: s3.BlockPublicAccess.BLOCK_ACLS, //パブリックアクセスブロックを解除
      removalPolicy: cdk.RemovalPolicy.DESTROY, // `cdk destroy` で削除可能
      autoDeleteObjects: true, // バケットの中身も削除
    });

    //  S3 に HTML ファイルをデプロイ
    new s3deploy.BucketDeployment(this, 'DeployWebsite', {
      sources: [s3deploy.Source.asset('./frontend')], // `frontend/` フォルダをアップロード
      destinationBucket: websiteBucket,
    });

    //  バケットのURLを出力
    new cdk.CfnOutput(this, 'WebsiteURL', {
      value: websiteBucket.bucketWebsiteUrl,
    });
  }
}

import * as cdk from 'aws-cdk-lib';

import { Construct } from 'constructs';

import * as s3 from 'aws-cdk-lib/aws-s3';

import * as s3deploy from 'aws-cdk-lib/aws-s3-deployment';

export class YoutubeCommentSystemStack extends cdk.Stack {

constructor(scope: Construct, id: string, props?: cdk.StackProps) {

super(scope, id, props);

// S3バケット（静的ウェブサイト用）

const websiteBucket = new s3.Bucket(this, 'WebsiteBucket', {

websiteIndexDocument: 'index.html', // デフォルトのHTMLファイル

publicReadAccess: true, // 誰でもアクセス可能にする

blockPublicAccess: s3.BlockPublicAccess.BLOCK_ACLS, //パブリックアクセスブロックを解除

removalPolicy: cdk.RemovalPolicy.DESTROY, // `cdk destroy` で削除可能

autoDeleteObjects: true, // バケットの中身も削除

});

// S3 に HTML ファイルをデプロイ

new s3deploy.BucketDeployment(this, 'DeployWebsite', {

sources: [s3deploy.Source.asset('./frontend')], // `frontend/` フォルダをアップロード

destinationBucket: websiteBucket,

});

// バケットのURLを出力

new cdk.CfnOutput(this, 'WebsiteURL', {

value: websiteBucket.bucketWebsiteUrl,

});

}

frontend/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>My S3 Website</title>
</head>
<body>
    <h1>Welcome to my S3 website!</h1>
    <p>This is a simple static site hosted on AWS S3.</p>
</body>
</html>

<!DOCTYPE html>

<head>

<title>My S3 Website</title>

</head>

<body>

<h1>Welcome to my S3 website!</h1>

<p>This is a simple static site hosted on AWS S3.</p>

</body>

</html>

cdk deploy で実行されるけど、背後で色々やっている！！

Outputs:
WebsiteURL = http://your-bucket-name.s3-website-ap-northeast-1.amazonaws.com

CDK が作成したリソース一覧

リソース種類	リソース名（CDK 内部名）	説明
S3 バケット	WebsiteBucket (WebsiteBucket75C24D94)	静的ウェブサイトホスティング用
S3 バケットポリシー	WebsiteBucket/Policy (WebsiteBucketPolicyE10E3262)	S3 をパブリックアクセス可能にする
Lambda レイヤー	DeployWebsite/AwsCliLayer (DeployWebsiteAwsCliLayer17DBC421)	AWS CLI (`aws s3 cp` など) を実行するためのレイヤー
IAM ロール	Custom::CDKBucketDeployment/ServiceRole	`aws s3 cp` を実行する Lambda のロール
IAM ポリシー	Custom::CDKBucketDeployment/ServiceRole/DefaultPolicy	S3 のファイル管理権限を持つ
Lambda 関数（オブジェクト削除用）	Custom::S3AutoDeleteObjectsCustomResourceProvider/Handler	`autoDeleteObjects: true` のための削除用 Lambda
カスタムリソース	DeployWebsite/CustomResource/Default	`index.html` を S3 にアップロードする処理

✅ CDK が追加で作成した「独自の仕組み」

Lambda（AWS CLI を実行する用） → aws s3 cp で S3 にファイルをアップロード
IAM ロール & ポリシー → Lambda が S3 にアクセスできるようにする
カスタムリソース → s3.BucketDeployment をトリガーする仕組み

S3 に HTML をアップロードするだけなら、手動で aws s3 cp を使う方がシンプル！

index.htmlの修正を、S3に反映したい場合

# cloudformationを修正して、もう一回最初からやり直しするので時間がかかる(最初ほどではない)
cdk deploy

# 静的ファイルだけなら、こっちの方が簡単にアップロードされる。
aws s3 sync ./frontend s3://[バケット名]/

# cloudformationを修正して、もう一回最初からやり直しするので時間がかかる(最初ほどではない)

cdk deploy

# 静的ファイルだけなら、こっちの方が簡単にアップロードされる。

aws s3 sync ./frontend s3://[バケット名]/

CDK が作成したリソース一覧

✅ CDK が追加で作成した「独自の仕組み」

関連記事