S3 + CloudFront 静的ウェブサイト

AWS S3 と CloudFront を使った静的ウェブサイトのサンプル構成です。

構成

ユーザー → CloudFront (HTTPS) → S3 バケット (OAC 経由)

項目	値
URL	https://tokita202603.com
S3 バケット	tokita-s3-cloudfront-website-20260313
リージョン	ap-northeast-1 (東京)
IaC	AWS CDK (TypeScript)

ディレクトリ構成

.
├── html/          # 静的コンテンツ
├── cdk/           # CDK スタック (TypeScript)
├── docs/          # 詳細設計書
├── PROMPT.md      # プロンプト記録
└── TODO.md        # 作業項目

デプロイ手順

前提条件

• AWS CLI 設定済み (aws configure)
• Node.js インストール済み

初回デプロイ

# CDK 依存パッケージのインストール
cd cdk && npm install

# ACM 証明書のリクエスト (us-east-1)
aws acm request-certificate \
  --domain-name tokita202603.com \
  --validation-method DNS \
  --region us-east-1

# CDK デプロイ
npx cdk deploy

コンテンツの更新

aws s3 sync html/ s3://tokita-s3-cloudfront-website-20260313/ --delete

# CloudFront キャッシュ無効化
aws cloudfront create-invalidation \
  --distribution-id <DISTRIBUTION_ID> \
  --paths "/*"

リソースの削除

# S3 バケットを空にする
aws s3 rm s3://tokita-s3-cloudfront-website-20260313 --recursive

# CDK でリソース削除
npx cdk destroy

詳細設計

docs/design.md を参照。