こんにちは、Stです！
個人開発をしていると、「Webサイトの表示速度」や「サーバー代」に悩むことはありませんか？
そんな課題を一気に解決してくれる最強の組み合わせが、Amazon CloudFront × Amazon S3 による静的Webサイトホスティングです。
当サイト「CloudQuiz」も、実はEC2などのサーバーは一切使わず、このアーキテクチャで構築されています。おかげで月に数万PVあっても、サーバー代はほぼ数ドル（数十円〜数百円）に収まっており、レスポンスも爆速です。
今回は、AWS認定資格（SAAなど）でも頻出のこの構成について、わかりやすく解説します。
1. Amazon CloudFrontとは？
CloudFrontは、AWSが提供する**CDN（Contents Delivery Network）**サービスです。
世界中の数十カ所に配置された「エッジロケーション」と呼ばれるキャッシュサーバーのネットワークを利用し、ユーザーから最も物理的に近いサーバーからコンテンツを配信します。
通常の配信との違い
- CDNなし: 日本のユーザーがアメリカのサーバー（EC2など）にアクセスすると、太平洋を往復する通信時間（レイテンシ）が発生し、表示が遅くなります。
- CloudFrontあり: ユーザーの最寄りのエッジサーバー（例：東京や大阪）にデータがキャッシュされるため、アクセスした瞬間にデータが返ってきます。
2. なぜ S3 と組み合わせるのか？
Amazon S3 は容量無制限のオブジェクトストレージですが、「静的Webサイトホスティング」という機能を持っています。
HTML, CSS, JavaScript などの静的ファイルをS3にアップロードするだけで、Webサーバーを構築することなくサイトを公開できます。
しかし、S3単体で公開すると以下のデメリットがあります。
- SSL/TLS（HTTPS）通信が独自ドメインで使えない
- アクセスが集中した際にS3への読み取りリクエスト料金が高くなる
- 世界中からのアクセスに対してはレスポンスが遅い
これらをすべて解決するのが CloudFront です。
3. CloudFront × S3 の構成とメリット
CloudFront の「オリジン（データの取得元）」として S3 を指定することで、完璧な静的サイトが完成します。
メリット①：独自ドメインで無料のSSL証明書が使える
AWS Certificate Manager (ACM) で発行した無料のSSL証明書をCloudFrontにアタッチすることで、安全な HTTPS 通信（鍵マークがつく状態）を実現できます。
メリット②：アクセス急増（バズり）に耐えられる
テレビやSNSで紹介されてアクセスが急増しても、すべてエッジサーバー（CloudFront）のキャッシュが応答するため、元のS3にはほとんど負荷がかかりません。「サーバーが落ちる」という概念がほぼ無くなります。
メリット③：コストが圧倒的に安い
S3からのデータ転送料金よりも、CloudFrontからのデータ転送料金の方が安く設定されていることが多く、さらにキャッシュがヒットすればS3へのリクエスト料金も発生しません。個人開発の強い味方です。
4. セキュリティを高める「OAC」
S3とCloudFrontを連携する際、AWS認定資格で非常によく問われるのが**「S3バケットへの直接アクセスをどう防ぐか」**というセキュリティ設定です。
S3バケットを「パブリック公開」にしてしまうと、CloudFrontを経由せずにS3のURLに直接アクセスできてしまい、想定外の通信料が発生するリスクがあります。
これを防ぐために、Origin Access Control (OAC)（※旧OAI）という機能を使います。
OACを設定することで、「CloudFrontからのリクエストのみ、S3へのアクセスを許可する」という強力なアクセス制御が可能になります。構築の際は必ず設定しましょう！
まとめ
Next.js や React, Vue などのモダンなフロントエンドフレームワーク（SSG/SPA）と、CloudFront × S3 の相性は抜群です。
AWSを学び始めたばかりの方は、ぜひマネジメントコンソールから自分の手を動かして、この「爆速・激安・落ちない」アーキテクチャを構築してみてください！