この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
こんにちは、せーのです。今日はまさにAWSらしい、痒い所に手が届くアップデートをご紹介します。
CloudFrontのTTL
CloudFrontはそんなに頻繁に更新しないような画像、JS、CSSファイル等のキャッシュに使うのであれば特段の設定なく絶大な威力を発揮しますが、威力が絶大故になかなか思い通りに動いてくれない、というお話もよく聞きます。その内の一つが「キャッシュTTL」に関する設定です。まずはこの記事を御覧ください。
CloudFrontのキャッシュ時間(TTL)はどの程度なのか
例えばS3の画像をCloudFrontで配信する場合、24時間がデフォルトでキャッシュされます。何も設定を加えなければ画像を差し替えようが削除しようが24時間は同じ画像が表示され続けます。これを15分くらいのキャッシュでどんどん更新していきたい、という場合は各画像オブジェクトに対してmeta-dataでmax-age=900のような細かいキャッシュコントロールヘッダを付ける必要がありました。これを手動でやるのはとても手間がかかるのでLambdaに登録して自動でつけよう、みたいなことをしたりしていたわけです。
Amazon S3の画像をAWS Cloudfrontで配信するキャッシュコントロールをAWS Lambdaで自動化する
Maximum TTL / Default TTL
今回のアップデートはCloudFrontの設定画面にMimimum TTLに加えて新たに「Maximum TTL」「Default TTL」が加わりました！
これにより個々のオブジェクトにキャッシュTTLを加える手間が設定一つでだいぶ緩和されることになります。更にこの設定はBehavior毎に有効になるので「JSファイルのDefault TTLはこれ、png画像はこれ」というように細かく指定することでキャッシュ管理が楽になります。
Maximum TTL / Default TTLの追加でTTL設定はどうなる？
さて今回のアップデートにてCloudFrontに「Maximum TTL」「Default TTL」が設定できるようになりました。これによってCloudFrontのキャッシュコントロールはどのような優先順位になるのでしょう。まとめてみました。
※前提としてキャッシュには「CloudFrontによるキャッシュ（クラウドから配信されるオブジェクトのキャッシュ）」と「ブラウザのキャッシュ（ブラウザの機能としてローカルにされるキャッシュ）」がありますので、ちょっとややこしいですがゆっくり理解していきましょう。
一覧表(CloudFrontのキャッシュ)
| Minimum TTL = 0の場合 | Minimum TTL > 0の場合 | |
|---|---|---|
| オリジンにCache-Control max-ageがある場合 | Maximum TTLとCache-Control max-ageの値の小さい方 | Cache-Control max-ageの値が Minimum TTLより小さい場合 - Minimum TTLの値 Minimum TTLより大きく、Maximum TTLより小さい場合 - Cache-Control max-ageの値 Maximum TTLより大きい場合 - Maximum TTLの値 |
| オリジンにCache-Control max-ageがない場合 | Default TTLの値 | Minimum TTLとDefault TTLの値の大きい方 |
| オリジンにCache-Control max-ageとCache-Control s-maxageがある場合 | Maximum TTLとCache-Control s-maxageの値の小さい方 | Cache-Control s-maxageの値が Minimum TTLより小さい場合 - Minimum TTLの値 Minimum TTLより大きく、Maximum TTLより小さい場合 - Cache-Control s-maxageの値 Maximum TTLより大きい場合 - Maximum TTLの値 |
| オリジンにExpiresヘッダがある場合 | Maximum TTLとExpiresの値の小さい方 | Expiresの値が Minimum TTLより小さい場合 - Minimum TTLの値 Minimum TTLより大きく、Maximum TTLより小さい場合 - Expiresの値 Maximum TTLより大きい場合 - Maximum TTLの値 |
| オリジンのキャッシュディレクティブがprivateである場合 - Cache-Control: no-cache, no-storeあり/なしに関わらず | キャッシュしない | Minimum TTLの値 |
オリジンにCache-Control max-ageがある場合
Minimum TTL = 0の場合
CloudFrontのキャッシュはMaximum TTLとCache-Control max-ageの値の小さい方
ブラウザのキャッシュはCache-Control max-ageの値
Minimum TTL > 0の場合
CloudFrontのキャッシュはCache-Control max-ageの値が Minimum TTLより小さい場合 - Minimum TTLの値 Minimum TTLより大きく、Maximum TTLより小さい場合 - Cache-Control max-ageの値 Maximum TTLより大きい場合 - Maximum TTLの値
ブラウザのキャッシュはCache-Control max-ageの値
オリジンにCache-Control max-ageがない場合
Minimum TTL = 0の場合
CloudFrontのキャッシュはDefault TTLの値
ブラウザのキャッシュはブラウザ標準に準拠する
Minimum TTL > 0の場合
CloudFrontのキャッシュはMinimum TTLとDefault TTLの値の大きい方
ブラウザのキャッシュはブラウザ標準に準拠する
オリジンにCache-Control max-ageとCache-Control s-maxageがある場合
Minimum TTL = 0の場合
CloudFrontのキャッシュはMaximum TTLとCache-Control s-maxageの値の小さい方
ブラウザのキャッシュはCache-Control max-ageの値
Minimum TTL > 0の場合
CloudFrontのキャッシュはCache-Control s-maxageの値が Minimum TTLより小さい場合 - Minimum TTLの値 Minimum TTLより大きく、Maximum TTLより小さい場合 - Cache-Control s-maxageの値 Maximum TTLより大きい場合 - Maximum TTLの値
ブラウザのキャッシュはCache-Control max-ageの値
オリジンにExpiresヘッダがある場合
Minimum TTL = 0の場合
CloudFrontのキャッシュはMaximum TTLとExpiresの値の小さい方
ブラウザのキャッシュはExpiresの値
Minimum TTL > 0の場合
CloudFrontのキャッシュはExpiresの値が Minimum TTLより小さい場合 - Minimum TTLの値 Minimum TTLより大きく、Maximum TTLより小さい場合 - Expiresの値 Maximum TTLより大きい場合 - Maximum TTLの値
ブラウザのキャッシュはExpiresの値
オリジンのキャッシュディレクティブがprivateである場合 - Cache-Control: no-cache, no-storeあり/なしに関わらず
Minimum TTL = 0の場合
CloudFrontはキャッシュしない
ブラウザはキャッシュしない
Minimum TTL > 0の場合
CloudFrontのキャッシュはMinimum TTLの値
ブラウザはキャッシュしない
まとめ
いかがでしょうか。一発でこれを覚えるのはさすがに厳しいので「Mimimum TTL / Maximum TTLはヘッダより強い」「ブラウザのキャッシュはヘッダが優先される」「何も設定しなければDefault TTLの値になる」くらいのざっくりで覚えておいて、実際に設定する際にこの記事を参考にして頂ければと思います。