nginxキャッシュされたindex.html強制リロード

Question

サーバーの移行中に、新しいnginx構成にキャッシュ制御ディレクティブがありませんでした。したがって、index.html新しいコードをデプロイしても更新されないSPAにとって非常に悪いキャッシュが作成されました。index.htmlをキャッシュしないようにする必要があります。

これは、数日オンラインであった（悪い）nginx構成でした：

server {
  listen 80;

  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }

  error_page   500 502 503 504  /50x.html;

  location = /50x.html {
    root   /usr/share/nginx/html;
  }

}

設定を修正しました：

server {
  listen 80;

  root /usr/share/nginx/html;

  location / {
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
    add_header Cache-Control "no-store, no-cache, must-revalidate";
  }

  location ~* \.(js|jpg|jpeg|gif|png|svg|css)$ {
    add_header Cache-Control "max-age=31536000, public";
  }

  error_page   500 502 503 504  /50x.html;

  location = /50x.html {
    root   /usr/share/nginx/html;
  }

}

質問

過去数日以内に当社のWebページにアクセスしたクライアントは、古いindex.htmlをキャッシュしました。どうすればブラウザにキャッシュされたものを削除させることができindex.htmlますか？

Answer 1

クライアントがサーバーに新しいコンテンツを要求していない間は、ユーザー側（ブラウザー）でブラウザーのキャッシュを手動でリセットする方法はありません。この場合、SPAがキャッシュなしでダウンロードされるスクリプトへの便利なアクセスになります。この場合、このスクリプトを変更して強制リロードページを実行できます（ただし、注意してください。ページをロードするたびに永続的な強制リロードを防ぐためのフラグが必要です）。たとえば、サイトにGTMがある場合、これが役立ちます。

UPD：私はjsスペシャリストではありませんが、次のjsスクリプトのようにすべてのページにGTMタグを追加する必要があります。

function getCookie(name) {
  let matches = document.cookie.match(new RegExp(
    "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
  ));
  return matches ? decodeURIComponent(matches[1]) : undefined;
}

was_reloaded = getCookie('was_reloaded')
alert(was_reloaded)
if (was_reloaded != 'yes') {
        document.cookie = "was_reloaded=yes; path=/; max-age=3600;"
    location.reload();
} }