CDN でキャッシュ時間を変更した後にブラウザで確認する方法をまとめる
最近，担当しているサービスで AWS CloudFront(以下，CloudFront )のキャッシュ時間(Time To Live)の時間を変更する対応をした．
その時にキャッシュの時間が本当に変わったかを確認しようとした時に「アレ？そもそもどうやって確認するんだっけ？」とふと思い，色々調べたのでざっくりまとめておく．なおブラウザは Google Chrome を使用する．
調べるにはそもそも HTTP ヘッダーを知る必要がある
AWS CloudFront がどうのというわけではなく，どうやら HTTP ヘッダーについて理解する必要があることがわかった．
そのため，HTTP ヘッダーについての勉強が必要になるが，今回は「age」と「x-cache」について書いておく．下記の画面は CloudFront を使っているサイトで「Chrome DevTools」の 「Network」のタブを開いた状態で「Doc」を選択した状態でサイトのページにアクセスした時の画面である．
age
ページがキャシュされてからの経過時間を表す．単位は秒(s)．この場合だと17秒経過したことがわかる．
x-cache
キャッシュがヒットしたかがわかる．成功の場合は「Hit from CDNサービス名」，失敗した場合は「Miss from CDNサービス名」と出てくる．そもそもキャッシュが利用できているかを確認する時にみている．
調べ方
上記を踏まえて，CDN でキャッシュ時間を変更した後にブラウザで確認する方法としては，x-cache がヒットされていることと，再度ページにアクセスした時に age が変更したキャッシュ時間を過ぎずにリセットされているかを確認すれば良い．
例えば CloudFront でキャッシュ時間を 10 分，つまり 600 秒に変更した場合， age が 610等といったように変更したキャッシュ時間を超えずに 0 からカウントされているかを確認できれば OK となる．
まとめと所感
今回は CDN でキャッシュ時間を変更した後にブラウザで確認する方法についてまとめてみた．キャッシュといえば，今まではブラウザで「キャッシュを消す」というボタンをとりあえず押すみたいなことをよくやっていたが，CloudFront を触ったことをきっかけに HTTP ヘッダーを少し勉強するきっかけになって良かった．
HTTP ヘッダーは調べてみるとかなり奥が深いので今回の件をきっかけにさらに理解を深めていき，CDN やブラウザへの理解をさらに深めていきたい．
というか，別の機会でもっと HTTP ヘッダー についてわかったことを書いてみよう．
