CloudFrontのカスタムHTTPヘッダーとCache-Control入門ガイド

初心者でもわかるウェブパフォーマンスとキャッシュ最適化の基礎
CloudFrontとは？

Amazon CloudFrontは、AWSが提供するCDN（コンテンツ配信ネットワーク）サービスです。世界中のエッジロケーションを活用して、ウェブサイトやアプリケーションのコンテンツを高速に配信します。

CloudFrontの図 Amazon CloudFrontは、AWSが提供するCDN（コンテンツ配信ネットワーク）サービスです。10個のノード（円形）、1個のコンポーネント（矩形）、矢印や接続線で構成された図。ラベル: オリジン、👤、👤、👤、👤 オリジン 👤 👤 👤 👤
CloudFrontの主なメリット:
  • ウェブサイトの読み込み時間を短縮
  • オリジンサーバーの負荷を軽減
  • 大規模なトラフィック処理が可能
  • セキュリティの向上
HTTPヘッダーとは？

HTTPヘッダーは、ウェブブラウザとサーバー間で交換される追加情報です。これらはリクエストやレスポンスの詳細を提供し、どのようにデータを処理すべきかを指示します。

GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0
Accept: text/html
Accept-Language: ja
...

レスポンスヘッダーの例:

HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1234
Date: Tue, 11 Mar 2025 12:00:00 GMT
Cache-Control: max-age=3600
...
CloudFrontのカスタムHTTPヘッダー

CloudFrontでは、オリジンに送信するリクエストや、ビューワーに送信するレスポンスにカスタムHTTPヘッダーを追加できます。

カスタムヘッダーの主な用途:
  • オリジンの識別
  • セキュリティの強化
  • カスタムコンテンツの提供
  • 分析・モニタリング

CloudFrontは自動的に以下のようなヘッダーも追加します:

  • X-Edge-Location : リクエストを処理したエッジロケーション
  • X-Cache : キャッシュヒット/ミス情報
  • X-Amz-Cf-Id : リクエスト識別子
Cache-Controlヘッダーの基本

Cache-Controlは、コンテンツのキャッシュ方法を指定するHTTPレスポンスヘッダーです。このヘッダーを使って、CloudFrontやブラウザがどのようにコンテンツをキャッシュするかをコントロールできます。

ディレクティブ 説明 例
max-age コンテンツがキャッシュ可能な最大秒数 Cache-Control: max-age=3600
(1時間キャッシュ)
s-maxage 共有キャッシュ（CloudFrontなど）に対する最大秒数 Cache-Control: s-maxage=86400
(CDNで1日キャッシュ)
no-cache 再検証なしでキャッシュを使用しない Cache-Control: no-cache
no-store 一切キャッシュしない Cache-Control: no-store
public 任意のキャッシュで保存可能 Cache-Control: public, max-age=86400
private ブラウザのみでキャッシュ可能、CDNでは不可 Cache-Control: private, max-age=3600
注意: private ディレクティブを使用すると、CloudFrontはそのコンテンツをキャッシュしません。これはユーザー固有のコンテンツに適しています。
CloudFrontでのCache-Control活用方法

CloudFrontでは、オリジンから送られるCache-Controlヘッダーに基づいてキャッシュを管理しますが、CloudFrontの設定でこれをオーバーライドすることも可能です。

CloudFrontでのCache-Control活用方法の図 CloudFrontでは、オリジンから送られるCache-Controlヘッダーに基づいてキャッシュを管理しますが、CloudFrontの設定でこれをオーバーライドすることも可能です。3個のコンポーネント（矩形）、矢印や接続線で構成された図。7個のラベル付き要素を含む。 ブラウザ CloudFront オリジン リクエスト レスポンス + Cache-Control キャッシュミス時のみ レスポンス + Cache-Control

静的コンテンツの最適化

画像、CSS、JavaScriptなどの静的コンテンツは長時間キャッシュするのが効果的です。

Cache-Control: public, max-age=31536000

これにより、コンテンツは1年間キャッシュされます。更新時には、ファイル名にバージョンやハッシュを含めることで、新しいバージョンを確実に取得できます。

動的コンテンツの管理

頻繁に更新される動的コンテンツは、短時間のキャッシュか再検証を設定します。

Cache-Control: no-cache

この設定では、CloudFrontは毎回オリジンに再検証を行います。または、短時間キャッシュする場合:

Cache-Control: max-age=60

個人向けコンテンツの保護

ユーザー固有の情報を含むページは、CDNでキャッシュしないようにします。

Cache-Control: private, max-age=0

これにより、CloudFrontはこのコンテンツをキャッシュせず、各リクエストをオリジンに転送します。

CloudFrontでのキャッシュ設定

CloudFrontのディストリビューション設定で、オリジンのCache-Controlヘッダーを上書きできます。

  1. CloudFrontコンソールでディストリビューションを選択
  2. 「動作」タブでキャッシュ動作を編集
  3. 「最小TTL」「デフォルトTTL」「最大TTL」値を設定
ベストプラクティス:
  • 静的アセット: 長時間キャッシュ（max-age=31536000）+ ファイル名にバージョン
  • HTML: 短時間キャッシュ（max-age=300）または再検証（no-cache）
  • API応答: 適切なキャッシュ時間を設定するか、個別に設定
  • 個人データ: privateディレクティブを使用してCDNキャッシュを防止
カスタムヘッダーとCache-Controlの組み合わせ例

カスタムヘッダーとCache-Controlを組み合わせることで、より柔軟なコンテンツ配信が可能になります。

地域別コンテンツのカスタマイズ

# CloudFrontからオリジンへのカスタムヘッダー
X-Country-Code: JP

# オリジンからのレスポンス
Cache-Control: public, max-age=3600, s-maxage=86400
Vary: X-Country-Code

Vary ヘッダーを使用すると、同じURLでも国別に異なるキャッシュバージョンを保持できます。

デバイスタイプ別の最適化

# CloudFrontの設定でUser-Agentに基づくカスタムヘッダー
X-Device-Type: mobile

# オリジンからのレスポンス
Cache-Control: public, max-age=21600
Vary: X-Device-Type

この設定により、モバイルとデスクトップで最適化された異なるバージョンをキャッシュできます。

注意点: Vary ヘッダーを過剰に使用すると、キャッシュヒット率が低下する可能性があります。重要な差異のみに使用しましょう。
まとめ

カスタムHTTPヘッダーのポイント

  • CloudFrontからオリジンへのリクエストにカスタムヘッダーを追加できる
  • セキュリティやコンテンツのカスタマイズに有効
  • 分析やデバッグのためのヘッダーも追加可能
  • 地域やデバイスに基づくコンテンツの最適化に活用

Cache-Controlのポイント

  • コンテンツ種類に応じた適切なキャッシュ戦略を選択
  • 静的コンテンツは長時間、動的コンテンツは短時間キャッシュ
  • 個人データには private ディレクティブを使用
  • CloudFrontの設定でオリジンのCache-Controlを上書き可能

適切なHTTPヘッダーとCache-Control設定により、ウェブサイトのパフォーマンス、セキュリティ、ユーザー体験を大幅に向上させることができます。コンテンツの特性に合わせて最適な設定を選択しましょう。

Created by SSuzuki1063

AWS SAP Learning Resources