【AWS】S3とCloudFrontの連携方法を完全解説！キャッシュ制御とURLの使い方もバッチリ
生徒
「S3で静的サイトを公開したんですけど、読み込みが遅い気がします。もっと速くする方法ってありますか？」
先生
「それなら、CloudFrontをS3と連携して使うと高速化できますよ。ついでにキャッシュ制御やURLの扱いも柔軟になります。」
生徒
「CloudFrontって聞いたことはあるけど、S3とどうつなぐのか、URLはどうなるのかよくわかりません…」
先生
「それでは、S3とCloudFrontの連携手順から、キャッシュの制御方法、CloudFrontのURLの仕組みまで順番に解説しましょう！」
1. CloudFrontとは？S3と連携する理由
CloudFront（クラウドフロント）は、AWSが提供するコンテンツ配信ネットワーク（CDN）です。S3と組み合わせることで、以下のようなメリットがあります。
- 世界中のエッジロケーションから高速配信
- キャッシュ機能によるアクセス高速化とコスト削減
- HTTPS対応とセキュリティ強化
- URLの統一・独自ドメイン対応が可能
S3単体でも静的ウェブサイトは公開できますが、CloudFrontを介すことでパフォーマンスとセキュリティが大きく向上します。
2. CloudFrontディストリビューションの作成手順
まずは、CloudFrontディストリビューションを作成して、S3バケットをオリジンとして指定します。
- オリジンドメイン：S3バケットの静的ホスティング用エンドポイント
- ビヘイビア：キャッシュポリシーやプロトコル設定を定義
- プロトコル：
Redirect HTTP to HTTPSがおすすめ - キャッシュポリシー：後述の「キャッシュ制御」で細かく解説
設定後、数分でCloudFrontのディストリビューションが有効になります。表示されるドメイン名（例：d1234abcd.cloudfront.net）が新しいURLになります。
3. S3とCloudFrontの連携ポイントと注意点
S3バケットの設定にはいくつかのポイントがあります：
- 静的ウェブサイトホスティングを有効にしておく
- S3のパブリックアクセス制限を適切に設定（CloudFront経由での公開に注意）
- オリジンアクセスコントロール（OAC）またはオリジンアクセスアイデンティティ（OAI）の利用推奨
特にセキュリティ面では、CloudFrontからのアクセスだけを許可する設定を行いましょう。
4. CloudFrontのキャッシュ制御方法
CloudFrontでは、キャッシュの設定が重要です。古いファイルが表示され続ける原因にもなるため、正しいキャッシュ制御が必要です。
主に以下の方法があります：
- キャッシュポリシーの利用（デフォルトかカスタム作成）
- レスポンスヘッダーで
Cache-Controlを設定 - オブジェクトのバージョニング（URLにクエリ文字列やパスを追加）
例として、S3にアップロードするHTMLに次のようなHTTPヘッダーを付けると、キャッシュを防げます：
Cache-Control: no-cache, no-store, must-revalidate
これにより、CloudFrontやブラウザにキャッシュされず、常に最新ファイルを取得できます。
5. キャッシュの削除（無効化）方法
ファイル更新後、すぐにCloudFront経由で新しいコンテンツを表示させたい場合は、キャッシュの無効化（Invalidation）を行います。
マネジメントコンソールから次のように設定します：
- 対象のディストリビューションを選択
- 「Invalidations」から「Create Invalidation」
- パスに
/*や/index.htmlなどを指定
CLIでも実行可能です：
aws cloudfront create-invalidation --distribution-id ABCD123456 --paths "/*"
6. CloudFront経由のURLの仕組みと使い方
CloudFrontに連携した後は、URLがCloudFrontのドメインに変わります。例：
- 旧：
http://your-bucket.s3-website-ap-northeast-1.amazonaws.com/index.html - 新：
https://d1234abcd.cloudfront.net/index.html
独自ドメインとHTTPSを使うには、以下の追加設定が必要です：
- ACMでSSL証明書を発行（バージニア北部）
- CloudFrontで代替ドメイン名（CNAME）を設定
- Route 53でAレコードをCloudFrontに向ける
この設定により、https://example.com で高速かつ安全なアクセスが可能になります。
7. CloudFrontの活用事例とベストプラクティス
CloudFrontとS3の連携は、以下のような場面で特に効果を発揮します：
- 画像や動画の配信（大量アクセス時も高速）
- React/VueなどのSPAのデプロイ
- ランディングページやキャンペーンサイト
ベストプラクティスとしては以下が挙げられます：
- S3側のアクセス制御はOACまたはOAIで制限
- キャッシュ制御はファイルごとに細かく調整
- URLバージョニングを活用してキャッシュ問題を回避
- バージョンごとにフォルダ分け（例：
/v1/index.html）もおすすめ
