デザイナから苦情あり。CSSを更新してディプロイしてもブラウザ上で変化が確認できず、ブラウザでページを強制リロードして初めて変化が現れるとのこと。恐らくキャッシュに関係した問題だろう。そういえば以前、前任のフロントエンドプログラマと前任のインフラエンジニアがキャッシュが云々と色々いじっていたっけな。
ブラウザ組み込みの開発者ツールでHTTPレスポンスをダンプしたところ以下の記述を発見。キャッシュされているデータを使うように常にブラウザに強いている。どうやらく前任者が試行錯誤したままの状態で放置したのだろう。これじゃあCSSを更新しても反映されなくて当然だ。
|
1 2 |
Cache-Control:"public, max-age=315360000" Expires:"Thu, 31 Dec 2037 23:55:55 GMT" |
政治的な理由でNginxの設定変更は僕には許されていないので、データセンタのインフラ担当に依頼して以下のように変更してもらって解決。
|
1 |
Cache-Control: "public, max-age=1, must-revalidate" |
ブラウザのキャッシュコントロールを正しく理解する
以下の記事がわかりやすかったのでリンク＆まとめ。
ブラウザのキャッシュコントロールを正しく理解する – Qiita
http://qiita.com/hkusu/items/d40aa8a70bacd2015dfa
①ブラウザに一切、キャッシュさせたくない場合
|
1 |
Cache-Control "no-cache" |
②ブラウザにキャッシュさせるけど、変更ないか都度確認するようにしたい
|
1 2 |
Cache-Control "max-age=0" Expires "Mon, 26 Jul 1997 05:00:00 GMT" |
③ブラウザにキャッシュさせ、都度確認はそれほど必要ない
|
1 2 |
Cache-Control "max-age=秒数" 例：86400など（この場合は1日） Expires "ここに期限の日時" |
参考サイト
Leverage Browser Caching | PageSpeed Insights | Google Developers
https://developers.google.com/speed/docs/insights/LeverageBrowserCaching
Page caching with Nginx – whitespace
http://whitequark.org/blog/2014/04/05/page-caching-with-nginx/
HTTPヘッダチューニング Expiresヘッダについて | REDBOX Labo
http://blog.redbox.ne.jp/http-header-expires.html
Expiresヘッダを追加しよう! | dogmap.jp
https://dogmap.jp/2007/09/04/add-an-expires-header/
たった数分！ページ高速化のためhtaccessでキャッシュ設定は絶対やっておこう！
https://syncer.jp/page-cache-setting
ブログ – expiresヘッダを調整して画像の通信量を抑制する
https://principle-works.jp/blog/setup-expires-header-and-reduce-image-traffics/