Firebase hostingでSSRする際にcloud functionsとの連携(rewrites)が上手くいかない場合の解決策

VueでもReactでもなんでもいいが、Firebaseを使ってSSRを行おうとする場合、hostingとcloud functionsの連携が必須となる。

具体的には、以下のような"firebase.json"を書く。

firebase.json

{
  "functions": {
    "source": "functions",
  },
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "function": "ssr"
      }
    ]
  }
}

しかし、rewritesにて"source"全てを"function：ssr"に向かわせているにもかかわらず、一向にfunction内に入れずに困った。かなり長い間詰まっていた。

SSRする際はhosting対象に"index.html"があってはならない！！

なんとかstack overflowで見つけた話によると、firebase hostingは"/"において、hostingの対象（つまり"firebase.json"における"public"キーの値）内に"index.html"が含まれる場合、それを勝手に表示して指定されたfunctionを無視してしまうようだ。

どうりで、"rewrites"に"/ssr"などを指定した場合は動いたわけだ。

ということなので、SSRする場合は"hosting"の"public"には、静的アセットのみが含まれたフォルダを指定しよう。

firebase.json

  "hosting": {
    "public": "public/img",

"ignore"で"index.html"を無視させるのも有効

"firebase.json"の設定で、index.htmlを無視させるのが一番効率的かもしれない。

firebase.json

{
  "functions": {
    "source": "functions",
  },
  "hosting": {
    "public": "public",
    "ignore": [
      "index.html",     <---- ここ！！！
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "function": "ssr"
      }
    ]
  }
}