【AWS】S3とCloudFrontの連携方法を完全解説！キャッシュ制御とURLの使い方もバッチリ

1. CloudFrontとは？S3と連携する理由

1. CloudFrontとは？S3と連携する理由

CloudFront（クラウドフロント）は、AWSが提供するコンテンツ配信ネットワーク（CDN）です。S3と組み合わせることで、以下のようなメリットがあります。

• 世界中のエッジロケーションから高速配信
• キャッシュ機能によるアクセス高速化とコスト削減
• HTTPS対応とセキュリティ強化
• URLの統一・独自ドメイン対応が可能

S3単体でも静的ウェブサイトは公開できますが、CloudFrontを介すことでパフォーマンスとセキュリティが大きく向上します。

2. CloudFrontディストリビューションの作成手順

2. CloudFrontディストリビューションの作成手順

まずは、CloudFrontディストリビューションを作成して、S3バケットをオリジンとして指定します。

• オリジンドメイン：S3バケットの静的ホスティング用エンドポイント
• ビヘイビア：キャッシュポリシーやプロトコル設定を定義
• プロトコル：Redirect HTTP to HTTPSがおすすめ
• キャッシュポリシー：後述の「キャッシュ制御」で細かく解説

設定後、数分でCloudFrontのディストリビューションが有効になります。表示されるドメイン名（例：d1234abcd.cloudfront.net）が新しいURLになります。

3. S3とCloudFrontの連携ポイントと注意点

3. S3とCloudFrontの連携ポイントと注意点

S3バケットの設定にはいくつかのポイントがあります：

• 静的ウェブサイトホスティングを有効にしておく
• S3のパブリックアクセス制限を適切に設定（CloudFront経由での公開に注意）
• オリジンアクセスコントロール（OAC）またはオリジンアクセスアイデンティティ（OAI）の利用推奨

特にセキュリティ面では、CloudFrontからのアクセスだけを許可する設定を行いましょう。

4. CloudFrontのキャッシュ制御方法

4. CloudFrontのキャッシュ制御方法

CloudFrontでは、キャッシュの設定が重要です。古いファイルが表示され続ける原因にもなるため、正しいキャッシュ制御が必要です。

主に以下の方法があります：

• キャッシュポリシーの利用（デフォルトかカスタム作成）
• レスポンスヘッダーでCache-Controlを設定
• オブジェクトのバージョニング（URLにクエリ文字列やパスを追加）

例として、S3にアップロードするHTMLに次のようなHTTPヘッダーを付けると、キャッシュを防げます：

Cache-Control: no-cache, no-store, must-revalidate

これにより、CloudFrontやブラウザにキャッシュされず、常に最新ファイルを取得できます。

5. キャッシュの削除（無効化）方法

5. キャッシュの削除（無効化）方法

ファイル更新後、すぐにCloudFront経由で新しいコンテンツを表示させたい場合は、キャッシュの無効化（Invalidation）を行います。

マネジメントコンソールから次のように設定します：

• 対象のディストリビューションを選択
• 「Invalidations」から「Create Invalidation」
• パスに /* や /index.html などを指定

CLIでも実行可能です：

aws cloudfront create-invalidation --distribution-id ABCD123456 --paths "/*"

6. CloudFront経由のURLの仕組みと使い方

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を使うには、以下の追加設定が必要です：

1. ACMでSSL証明書を発行（バージニア北部）
2. CloudFrontで代替ドメイン名（CNAME）を設定
3. Route 53でAレコードをCloudFrontに向ける

この設定により、https://example.com で高速かつ安全なアクセスが可能になります。

7. CloudFrontの活用事例とベストプラクティス

7. CloudFrontの活用事例とベストプラクティス

CloudFrontとS3の連携は、以下のような場面で特に効果を発揮します：

• 画像や動画の配信（大量アクセス時も高速）
• React/VueなどのSPAのデプロイ
• ランディングページやキャンペーンサイト

ベストプラクティスとしては以下が挙げられます：

• S3側のアクセス制御はOACまたはOAIで制限
• キャッシュ制御はファイルごとに細かく調整
• URLバージョニングを活用してキャッシュ問題を回避
• バージョンごとにフォルダ分け（例：/v1/index.html）もおすすめ

この記事を読んだ人からの質問

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

AWSのS3だけで静的サイトを公開するのと、CloudFrontを連携させるのでは何が違うのですか？

一番の大きな違いは、Webサイトの表示速度とセキュリティ、そして独自ドメイン運用の柔軟性です。S3単体でもWebホスティング機能を使えばサイト公開は可能ですが、サーバーの場所が特定のリージョン（例：東京など）に固定されるため、遠くの利用者には表示が遅くなることがあります。CloudFrontを連携させると、世界中に配置されたエッジロケーションという拠点からデータを配信するコンテンツ配信ネットワーク（CDN）として機能するため、アクセスを劇的に高速化できます。また、S3単体では難しいHTTPS化（SSL暗号化）もCloudFrontを通すことで簡単に実現でき、安全な通信を提供できるようになります。