あらすじ
ある日、Webアプリケーションの機能改善を実装して、最新バージョンとしてデプロイしました。しかし、ユーザには改善された挙動になっていないと言われてしまいました。そのときは、Webページを開き直してもらうことで解決しました。
根本的な解決法を調べてみると、どうやらユーザ側のブラウザでindex.htmlがキャッシュされており、サーバに新バージョンを問い合わせることなくキャッシュされたHTMLファイルが使用されていることが原因だとわかりました。
では、何をすればいいの？
ブラウザ側でキャッシュされたindex.htmlを使用する前に、サーバに新しいバージョンがあるか問い合わせるように設定すればいいらしい。
そのためには、HTTPレスポンスヘッダーのCache-Controlにno-cacheを設定すると1。
私のWebアプリケーションはSPAなので、index.htmlについての設定を考えればいいね多分。
ということで、以下のように設定すればいいみたい。
Cache-Control: no-cache
なるほど～。
それで、これをどこに書けば良いんだろう。
・・・
この記事には書いてないな。じゃあそれを別で調べるか。
・・・
ここにもないな。
・・・・・・
・・・・・・・・・・・・
・・・・・・・・・・・・・・・・・・・・・・・・
そして数年後……「教えてGeminiさん」
どこに書けばいい？
結論として、Cache-Controlの設定を書く場所は、開発やデプロイの環境によって異なります。以下に、主要な環境での設定場所を書いていきます。
要約
| 環境 | 設定ファイル | 設定ファイルの場所 |
|---|---|---|
| Nginx | nginx.conf |
/etc/nginx/nginx.conf または sites-available/ 内 |
| Apache |
.htaccess / httpd.conf
|
公開ディレクトリ直下 または サーバー設定ディレクトリ |
| Cloudflare Pages | _headers |
プロジェクトの公開ディレクトリ |
| Vercel | vercel.json |
プロジェクトのルートディレクトリ |
| Netlify |
_headers / netlify.toml
|
プロジェクトのルートディレクトリ |
| Firebase Hosting | firebase.json |
プロジェクトのルートディレクトリ |
| AWS CloudFront | レスポンスヘッダーポリシー | AWSマネジメントコンソール上の設定 |
1. Webサーバー・プロキシ（インフラ層）
最も一般的で、静的ファイル（画像・CSS・JS）に対して一括で設定するのに向いています。
Nginx
nginx.confで設定します。
server {
listen 80;
server_name example.com;
root /var/www/html;
# index.html に設定
location = /index.html {
add_header Cache-Control "no-cache";
}
}
Apache
.htaccessやhttpd.confで設定します。
# index.html に設定
<Files "index.html">
Header set Cache-Control "no-cache"
</Files>
2. ホスティングサービス・CDN（エッジ層）
モダンなWeb開発で非常によく使われる場所です。
Cloudflare Pages
プロジェクトのルートディレクトリへ置く_headersファイルで設定します。
# index.html に設定
/index.html
Cache-Control: no-cache
Vercel
vercel.jsonで設定します。
{
"headers": [
{
"source": "/index.html",
"headers": [
{
"key": "Cache-Control",
"value": "no-store"
}
]
}
]
}
Netlify
netlify.tomlか、もしくはCloudflare Pagesと同様に_headersで設定します。
[[headers]]
for = "/index.html"
[headers.values]
Cache-Control = "no-cache"
Firebase Hosting
firebase.jsonで設定します。
{
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"headers": [
{
"source": "/index.html",
"headers": [
{
"key": "Cache-Control",
"value": "no-cache"
}
]
}
]
}
}
AWS CloudFront
キャッシュポリシーの設定画面で設定します。
ありがとうGeminiさん
キャッシュ設定をしてデプロイしたら、無事新しいバージョンのファイルを取ってきてくれました。めでたしめでたし。
それにしても環境が多い。
-
完全にキャッシュさせたくない場合は、
no-storeを設定します。 ↩