S3 + CloudFront 静的Webサイト構成
S3に配置した静的サイトをCloudFrontで高速・安全に配信する基本構成です。S3直接公開を避け、OACでCloudFront経由のアクセスに限定します。
構成図
使用AWSサービス
サービス名をクリックすると、用語詳細ページへ移動します。
概要
S3 + CloudFrontは、静的Webサイトを低コストかつ高速に公開するための基本構成です。Next.jsの静的出力で生成したHTML、CSS、JavaScript、画像をS3へ配置し、ユーザーにはCloudFront経由で配信します。 S3バケットは直接公開せず、CloudFront Origin Access Controlを使ってCloudFrontからのアクセスだけを許可します。これにより、HTTPS配信、キャッシュ、S3直接公開防止をまとめて実現できます。
通信フロー
1. ユーザーがブラウザからサイトへHTTPSアクセスします。 2. CloudFrontがリクエストを受け取ります。 3. CloudFrontにキャッシュがあれば、そのままユーザーへ返します。 4. キャッシュがなければ、CloudFrontがOAC経由でS3から静的ファイルを取得します。 5. S3はCloudFront DistributionからのGetObjectだけを許可します。 6. HTML、CSS、JavaScript、画像がユーザーへ返されます。
設計ポイント
S3のStatic website hostingは使わず、通常のS3オリジンとしてCloudFrontに接続します。S3 Public Access Blockを有効にし、Bucket PolicyでCloudFrontからのアクセスだけを許可します。 CloudFrontではViewer Protocol PolicyをRedirect HTTP to HTTPSに設定します。独自ドメインを使う場合はRoute 53でDNSを管理し、ACM証明書をCloudFrontに紐づけます。CloudFront用ACM証明書はus-east-1で発行する点に注意します。
コスト設計
この構成はEC2、RDS、ALB、NAT Gatewayを使わないため、固定費を抑えやすいです。課金ポイントはS3の保存容量、S3リクエスト、CloudFrontのリクエスト数、CloudFrontからのデータ転送量です。 画像ファイルを軽量化し、CloudFrontキャッシュを活用することで、S3へのリクエスト数と転送量を抑えられます。CloudFront Invalidationはデプロイ時だけ実行します。
SAA試験ポイント
静的サイト公開、グローバル配信、HTTPS化、S3直接公開防止という条件が出たら、S3 + CloudFront + OACを候補にします。 S3をパブリックにしない設計、CloudFrontキャッシュ、ACM証明書のリージョン、Route 53 Aliasレコード、OACとBucket Policyの関係を押さえます。
このプロジェクトでの役割
AWS Cert Roadmap Lab本体の公開構成です。学習コンテンツは静的ファイルとして管理し、S3 + CloudFrontで配信します。これにより、個人開発MVPとして低コストで公開しながら、AWS設計意図をポートフォリオで説明できます。
他のAWS構成図も確認する
SAA対策では、AWSサービスを単体ではなく構成パターンとして理解することが重要です。