はじめに
Firebase Hosting に React(Vite)アプリをデプロイしたのに、
青い「Firebase Hosting Setup Complete」画面のまま変わらない現象が発生しました。
一度デプロイし直しても変化がなくて詰まりましたが、
実は 原因は「Firebase」ではなく「ブラウザのキャッシュ」 でした。
問題
Firebase へのデプロイは成功している(ログにもエラーなし)
スマホで開くと新しい画面が表示される
でも PC ではずっと古い画面(青いFirebaseページ)のまま
原因
ブラウザ(特に Chrome)は、
ページを速く開くために HTMLや画像を一時保存(キャッシュ) しています。
つまり、
Firebase上では新しいファイルが公開済み
でもブラウザは「前に保存した古いHTML」をそのまま表示していた
そのため、Firebase側を直してもPCでは古い画面が残るという現象に。
解決法
一言で言うと:「キャッシュを無視して再読み込みする」です。
方法1:ショートカットで強制リロード
Chrome でサイトを開いた状態で以下を押す
Ctrl + Shift + R (Macは Cmd + Shift + R)
➡ キャッシュを無視して最新のファイルを取得できます。
方法2:シークレットモードで開く
Ctrl + Shift + N
シークレットモードではキャッシュが使われないため、
常に最新のページが表示されます。
まとめ
デプロイ後に画面が更新されないときは、まず「キャッシュ」を疑う
Firebaseが悪いわけではない
小さなことで詰まりましたが、一つずつ理解して進めた分、確実に前進できたと思います。