FirebaseでSPAやりたいときの設定

SPA をおいてみたけど、 index.htmlからしか遷移できない！ってときに。

しばらく転送されてなかった

React(Gatsby)でサイトリニューアルしてからというもの、どんどん落ちる検索ランキング。
なんでかなーと思ったら、/index.html 以外、URLでの直接リンクで表示できないようになっていた。

原因は Firebase の設定

SPA の場合、ブラウザのアドレス欄の表示が変わってもすべて /index.html で表示されています。
そのまま /blog/post/react/react-on-firebase/ を表示させようとしても、そこには html ファイルがないため何も表示できません。

以前は nuxt.js でジェネレートしていたので大丈夫だったんですね。

この問題は、Firebase 側の設定ですべての HTML リクエストは /index.html を返してもらう必要があります。
リダイレクトではなく、フォワードのイメージですね。

設定は Firebase.json で

Firebase プロジェクトなら、ルートディレクトリに firebase.json ができているはず。
このホスティング設定に、フォワードの設定(rewrites)設定を入れます。

{
  "hosting": {
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

これで直リンクでもページが表示できるようになりました！

まあ、

firebase init

でプロジェクト初期化するときに、SPA選んでればいいんだけど。
プロジェクトの途中で切り替えると事故の元。