ササっと解決！！firebaseのhostingで変更内容が反映されない時の対処法

皆さんこんにちは！

ここで質問なのですが、皆さんはフロントの部分を実際の環境でテストする際に何のアプリケーションを使っていますか？

色々あるとは思うのですが、多くの人はNetlify、firebaseなどを使うことが多いと思います。（主観）

今回は、その中でもfirebaseのHostingについて書いていこうと思います！

先日、いつものようにfirebase deployをコマンドで入力し、実際の環境ではどのように動くのか試してみたところ、deploy自体にエラーは無いものの変更内容が反映されない。。。

こりゃ、困った。

色々調べてみたところ、firebaseに限らずどうやらエラーが無く正常に動作している場合の多くは、キャッシュが原因らしい。

なので、firebase.jsonにキャッシュを消去する設定を加えてあげることで解決できるらしい。

以下のように、headersにキャッシュの設定を加えたら変更内容が反映されました！

firebase.json

{
    "hosting": {
        "public": "dist",
        "ignore": [
          "firebase.json",
          "**/.*",
          "**/node_modules/**"
        ],
        "rewrites": [ {
            "source": "**",
            "destination": "/index.html"
          } ],
        "headers": [{ 
            "source" : "**", 
            "headers" : [{ 
              "key" : "Cache-Control", 
              "value" : "max-age=300" 
          }] 
        }] 
      }
}

max-ageの説明についてはfirebaseのドキュメントを参照してください。

これで変更内容が反映されると思います！

以上、「ササっと解決！！firebaseのhostingで変更内容が反映されない時の対処法」でした！！！

良ければ、LGTM、コメントお願いします。

また、何か間違っていることがあればご指摘頂けると幸いです。

他にも初心者さん向けに記事を投稿しているので、時間があれば他の記事も見て下さい！！

Thank you for reading