1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Firebase Hostingのキャッシュ問題でハマった話

Posted at

はじめに

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が悪いわけではない

小さなことで詰まりましたが、一つずつ理解して進めた分、確実に前進できたと思います。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?