CDNの画像とキャッシュの扱いについての理解を整理しておきます。
前提
CDNから画像を取得する流れ
上記画像のコンテンツはhtmlですが、画像として参照して下さい。
①キャッシュない場合、まずはCDNから画像を読み込む。
②その後、ローカルにキャッシュする。
③次にアクセス行ったときはmax-ageをみて期限切れであれば、CDNを参照する。
④CDNで画像更新がなければ、 HTTP 304 Not Modifiedが返却され、ローカルキャッシュを参照する。
⑤CDNで画像更新があればCDNから画像を取得してローカルキャッシュを更新する。
max-ageの設定例
1 ブラウザに一切、キャッシュさせたくない場合
サーバからクライアントへのHTTP応答ヘッダ → Cache-Control "no-cache"
常時、アクセスが必要な動画コンテンツなどはこの設定にした方が安全。
ローカルキャッシュされないので、常にサーバーにアクセスが発生します。
2 ブラウザにキャッシュさせるけど、変更ないか都度確認するようにしたい
サーバからクライアントへのHTTP応答ヘッダ → Cache-Control "max-age=0" → Expires "Mon, 26 Jul 1997 05:00:00 GMT"
最初から既に期限切れ。
期限切れなので、常にサーバーに画像が更新されているか確認します。
変更なしであれば、 HTTP 304 Not Modified が返却され、画像を返却をせずに通信量を減らせます。
この場合は、ローカルキャッシュが参照されます。
3 ブラウザにキャッシュさせ、都度確認はそれほど必要ない
サーバからクライアントへのHTTP応答ヘッダ → Cache-Control "max-age=秒数" 例：86400など（この場合は1日） → Expires "ここに期限の日時"
max-ageの期限に達していない限り、ブラウザはサーバに問い合わせを行いません。
期限がきれた後の挙動は、2と同じです。
キャッシュ対象
一般的には2パターンの指定方法があります。
サブドメイン指定
- サブドメイン配下の全ファイルをCDN経由にする
- サブドメイン配下に画像や動画などデータ量が多いファイルを集めておいて、キャッシュする
- メリデメ：ファイル転送量は削減できるが、根本的なサーバへの負荷は減らせない可能性がある
ドメイン指定
- サイトすべてをCDN経由にする
- ファイル単位でキャッシュするかどうかを設定
- メリデメ：全ファイルをキャッシュできるが、更新しても反映されないという事故が発生しうる
