CloudFrontでウェブサイトを配信するとき、特定のファイルのみのキャッシュを無効化したいときの設定方法。例えば頻繁に内容が変わるHTMLファイルはキャッシュせず、更新頻度が少なかったり重いデータの画像やCSS・JavaScriptなどはCloudFrontでキャッシュさせたいときなど。

AWS CloudFrontの設定

今回は例として、HTMLファイルだけキャッシュの除外をする設定とします。

AWS CloudFrontから該当のディストリビューションを選択し、[ビヘイビア]に移動。[ビヘイビアを作成]を選択し新規作成します。[パスパターン]に*.htmlと入力。[オリジンとオリジングループ]でオリジンを選択してから、他のオプションは以下のように設定。

* オブジェクトを自動的に圧縮：Yes
* ビューワープロトコルポリシー：Redirect HTTP to HTTPS
* 許可された HTTP メソッド：GET, HEAD
* ビューワーのアクセスを制限する：No
* キャッシュキーとオリジンリクエスト：Legacy cache settings
* ヘッダー：なし
* クエリ文字列：すべて
* cookie：すべて
* オブジェクトキャッシュ：Customize
* 最小 TTL：0
* 最大 TTL：0
* デフォルト TTL：0

すべてのTTLを0にすることで、キャッシュされずに読み込まれます。上記を設定したら保存します。

設定の反映の確認方法

Webブラウザのネットワークヘッダーで確認できます。ChromeのWeb開発者ツールであれば[Network]からファイルを選択しレスポンスヘッダーのX-Cacheから確認できます。

CloudFrontのキャッシュになっている場合は、X-CacheがHit from cloudfrontになります。今回の場合CSSや画像ファイルはキャッシュされます。

一方キャッシュされていない場合はX-CacheがMiss from cloudfrontの値になります。これはキャッシュされずにオリジンから呼び出しているものになります。

注意点としては、該当のファイルはキャッシュされないためオリジンに負荷がかかるということです。S3やEC2から呼び出す場合は転送量やプロセッサの振る舞いに注意しましょう。

おしまい♥

タグ：AWS