CloudFront + S3で作る静的Webサイト・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化
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レコードを設定する流れ
キャリアの疑問、一緒に解決しませんか？
Infra Academyでは、インフラ系ITエンジニアを目指す方への個別サポートを行っています。2026年7月からフリーランス講師として本格始動予定です。
資格取得後のキャリアに、AI活用という選択肢を
資格取得の先に現場でのIT効率化を任される場面が増えます。職場のルーティン業務にAIをどう組み込めるか、無料のセルフ診断（3問・約1分）でヒントが得られます。
この記事を読んでいる方へのおすすめ：
本記事はRoute Bloom編集部が公式ドキュメント・技術仕様書の一次情報をもとに作成しています。ITインフラ・技術情報は急速に変化するため、実装前に最新の公式ドキュメントをご確認ください。情報の正確性には万全を期していますが、最新情報は各公式サイトをご確認ください。
本記事はRoute Bloom編集部が各ベンダー公式ドキュメント・エンジニア監修をもとに作成しています。インフラ・クラウド構築は環境により異なります。本番環境への適用前に必ずテストを実施してください。情報の正確性には万全を期していますが、最新情報は各公式ドキュメントをご確認ください。
この記事で学んだスキルをさらに深めたい方へ
AWS・クラウド技術をさらに深く学びたい方に。試験対策から実践まで網羅した参考書を活用しましょう。
Amazonアソシエイトプログラムを利用しています。
