CloudFront + S3で作る静的Webサイト・CDN設計の実践
現場実践｜静的サイト・CDN設計
CloudFront + S3で作る静的Webサイト・CDN設計の実践
「WordPressやEC2なしでWebサイトを作れるの？」——S3に静的ファイルを置いてCloudFrontで配信するサーバーレスWebサイト構成の設定方法・HTTPSの設定・カスタムドメインの設定を解説します。
💡 CloudFront+S3の静的サイト構成はEC2が不要のため運用コストがほぼゼロ。個人ブログ・ポートフォリオサイト・ランディングページに最適で、グローバルなCDN配信でパフォーマンスも高い構成です。
1. CloudFront + S3の構成図
この構成の流れは「ユーザーのブラウザ → CloudFront（エッジロケーション）→ S3（オリジン）」です。CloudFrontがS3のコンテンツをキャッシュして世界中のエッジロケーションから配信するため、オリジンへのアクセスを大幅に削減できます。また、S3バケットをパブリック公開せずにCloudFrontのOAC（Origin Access Control）経由でのみアクセスを許可する設定が推奨です。
2. S3バケットの静的ウェブホスティング設定
# S3バケットの作成
aws s3 mb s3://my-website-bucket --region ap-northeast-1
# ファイルのアップロード
aws s3 sync ./dist/ s3://my-website-bucket/ --delete
# CloudFrontキャッシュを無効化（デプロイ後）
aws cloudfront create-invalidation \
--distribution-id EXAMPLEID \
--paths "/*"3. ACM（AWS Certificate Manager）でHTTPS化
1
ACMで証明書を発行する（us-east-1リージョン）
CloudFrontにはus-east-1（バージニア北部）リージョンのACM証明書のみ使用できる。証明書の発行はus-east-1で行う。
2
CloudFrontディストリビューションに証明書を設定
CloudFrontの設定でカスタムSSL証明書に先ほどのACM証明書を指定する。
3
Route 53でAliasレコードを設定
Route 53でカスタムドメイン→CloudFrontのFQDNへのAliasレコードを作成する。
4. CI/CDパイプラインとの統合
GitHub ActionsでS3へのデプロイとCloudFrontキャッシュの無効化を自動化することで「mainブランチにマージしたら自動でWebサイトが更新される」パイプラインを構築できます。GitHub OIDC認証を使うことでAWSアクセスキーの管理が不要になります。
📌 この記事のポイント
- CloudFront+S3の静的サイト構成はEC2不要・コストほぼゼロ・グローバルCDN配信の三拍子揃った構成
- S3バケットはパブリック公開せずCloudFrontのOAC（Origin Access Control）経由でのみアクセスを許可する
- ACM証明書はus-east-1で発行してCloudFrontに適用し、Route 53でAliasレコードを設定する流れ
キャリアの疑問、一緒に解決しませんか？
Route Bloomでは、インフラ系ITエンジニアを目指す方への個別サポートを行っています。2026年7月からフリーランス講師として本格始動予定です。
ABOUT ME
