現場実践｜静的サイト・CDN設計

CloudFront + S3で作る静的Webサイト・CDN設計の実践

「WordPressやEC2なしでWebサイトを作れるの？」——S3に静的ファイルを置いてCloudFrontで配信するサーバーレスWebサイト構成の設定方法・HTTPSの設定・カスタムドメインの設定を解説します。

読了目安：約18分更新日：2026年3月

💡 CloudFront+S3の静的サイト構成はEC2が不要のため運用コストがほぼゼロ。個人ブログ・ポートフォリオサイト・ランディングページに最適で、グローバルなCDN配信でパフォーマンスも高い構成です。

この記事を書いた人

現役ITエンジニア・IT講師（経験14年）

CCNA・CCNP 取得LPIC-1 保有SES現場を複数経験

CloudFront+S3を使ったサーバーレスWebサイト構築を複数プロジェクトで担当してきた立場から解説します。

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 "/*"