🦑

#2【キャッシュ】フォワードプロキシのキャッシュが原因で古いCSSが適用される？(Chrome,Squid,Nginx)

2025/03/28に公開

本記事の結論

WEBサーバのコンテンツを更新しても、フォワードプロキシに古いキャッシュが残っている場合、それを削除するまで古いコンテンツが表示され続けてしまう。

前情報

構築編は#1を参照

ブラウザおよびフォワードプロキシのキャッシュによる挙動を確認するため、こんなかんじの構成を作りました。

WEBオリジンサーバ : 192.168.12.55
HTMLとCSSのコンテンツを保管する。(Nginx1.14.1)
WEBキャッシュサーバ : 192.168.12.56
オリジンサーバのコンテンツキャッシュを行い、クライアントからのアクセスを受け付ける。なおコンテンツの有効期限は1分で、基本的に最新のコンテンツを取りに行く仕様。(Nginx1.14.1)
フォワードプロキシ : 192.168.12.57
クライアントからのHTTPアクセスを中継し、一度ダウンロード(アクセス)したコンテンツは60分間キャッシュに保持する。(Squid4.15)
クライアントPC : 192.168.12.X(DHCP)
HTTPアクセスを行う。使用するブラウザはChrome Ver.134。

今回は実際にコンテンツにアクセスします。
なおフォワードプロキシのログを常時吐かせておくため、ターミナルを2画面立ち上げ以下を打鍵しておきます。

tail -f /var/log/squid/access.log | grep index.html
tail -f /var/log/squid/access.log | grep style.css

普通にアクセス

まずは普通にWEBにアクセスし、ブラウザとフォワードプロキシにコンテンツをキャッシュさせます。

初回アクセス
index.htmlおよびstyle.cssのステータスは200です。

X-CacheはいずれもMISSでした。ちゃんとコンテンツがダウンロードされていますね。

以下は打鍵時のフォワードプロキシのログです。こちらも当然TCP_MISS。

# HTML
1742742281.969      2 192.168.12.6 TCP_MISS/200 719 GET http://192.168.12.56/index.html - HIER_DIRECT/192.168.12.56 text/html
# CSS
1742742282.009      2 192.168.12.6 TCP_MISS/200 586 GET http://192.168.12.56/style.css - HIER_DIRECT/192.168.12.56 text/css

リロード(F5)
リロード実施時のステータスはHTMLが304(Not Modified)、CSSが200。
ただし、CSSのみブラウザのキャッシュから表示していました。

X-CacheはHTMLがHITとなっており、フォワードプロキシのキャッシュから表示されているようです。
一方でCSSはMISSとなっていますが、これはブラウザキャッシュの情報なので意味はなさそう。

フォワードプロキシのログはHTMLのみで、CSSはありませんでした。
ブラウザキャッシュを表示した場合、打鍵してもプロキシのログに残らないんですね。
てかHTMLのログがTCP_REFRESH_UNMODIFIED/304になってる・・・HITじゃないの？

# HTML
1742742559.032      2 192.168.12.6 TCP_REFRESH_UNMODIFIED/304 310 GET http://192.168.12.56/index.html - HIER_DIRECT/192.168.12.56 -
# CSS
ログなし

Squidのドキュメントで確認したところ、TCP_REFRESH_UNMODIFIEDは「HTTPリクエストの再検証がサーバに送信されたけど、304ステータスが生成されたよ」みたいなニュアンスでした。
一応WEBキャッシュサーバに問い合わせはしたけど、304ステータスだったのでキャッシュから表示したってことなのかな？
https://wiki.squid-cache.org/SquidFaq/SquidLogs

若干の疑問は残りますが、これで通常アクセスは完了。
各サーバのコンテンツ保有状況は以下のようになりました。

オリジンサーバのCSSを修正

オリジンサーバのCSSの一部を修正し、文字が赤く表示されるようにします。

/var/www/html/style.css(一部抜粋)

p {
    font-weight: bold;
    font-size: 1.2em;
    color: red;  /* 赤 */
}

修正後のコンテンツ保有状況は以下。赤いのが新しいコンテンツです。
キャッシュサーバはまだ新しいCSSを取得していませんが、キャッシュの有効期限を1分に設定しており、アクセスがあればほぼ確実に最新のコンテンツ取得に走るため以下のような表示にしています。

初回アクセス
一度ブラウザを落として打鍵しましたが画面の表示は変わらず。古いCSSが適用されたままでした。
開発者ツールの情報を見るに、いずれもブラウザキャッシュから表示されているもよう。ステータスコードやX-Cacheの値は関係ないんだろうな。

フォワードプロキシのログがないことからも、ブラウザキャッシュが表示されていることがわかります。

# HTML
ログなし
# CSS
ログなし

リロード(F5)
リロードしましたが、表示は変わらず古いCSSのままです。
ただしステータスが304になりました。今度はフォワードプロキシまでアクセスしてそう。

X-CacheはHITです。

ログが残っていたので、やはりフォワードプロキシまではアクセスが届いているもよう。
なおCSSのログにある「INM」とは「If-None-Match」の略らしい。TCP_REFRESH_UNMODIFIEDもTCP_INM_HITもコンテンツに更新がないか検証してるはずなんだけど、何故かキャッシュから返す挙動になってますね。

# HTML
1742743506.952      2 192.168.12.6 TCP_REFRESH_UNMODIFIED/304 310 GET http://192.168.12.56/index.html - HIER_DIRECT/192.168.12.56 -
# CSS
1742743506.962      0 192.168.12.6 TCP_INM_HIT/304 268 GET [http://192.168.12.56](http://192.168.12.56/) style.css - HIER_NONE/- text/css

シークレットウィンドウ
ブラウザキャッシュが無い状態ではどうかと思い、シークレットウィンドウで打鍵しました。
が、こちらもCSSは古いままでした。

プロキシのログはTCP_MEM_HIT。やはりプロキシが古いCSSをキャッシュから返してますね。

# HTML
1742744106.777      0 192.168.12.6 TCP_MEM_HIT/200 726 GET [http://192.168.12.56](http://192.168.12.56/) index.html - HIER_NONE/- text/html
# CSS
1742744106.803      0 192.168.12.6 TCP_MEM_HIT/200 595 GET [http://192.168.12.56](http://192.168.12.56/) style.css - HIER_NONE/- text/css

フォワードプロキシのキャッシュ削除

プロキシのキャッシュディレクトリを削除し、初期化します。

systemctl stop squid
rm -rf /var/spool/squid/* && squid -z
systemctl start squid

初回アクセス
一度ブラウザを落として打鍵すると、ちゃんと新しいCSSが適用されていました。
HTMLはブラウザキャッシュから、CSSはコンテンツ更新が走ってますね(MISS)。

プロキシのログからも、CSSのみコンテンツダウンロードが行われていることが分かります(TCP_MISS)。

# HTML
ログ無し
# CSS
1742744934.544      3 192.168.12.6 TCP_MISS/200 584 GET http://192.168.12.56/style.css - HIER_DIRECT/192.168.12.56 text/css

WEBサーバのコンテンツを更新しても、フォワードプロキシに古いキャッシュが残っている場合、それを削除するまで古いコンテンツが表示され続けてしまうんですね(あくまで今回構築した条件では)。

本記事の結論

前情報

普通にアクセス

オリジンサーバのCSSを修正

フォワードプロキシのキャッシュ削除

Discussion