Firebase Hosting上のNuxtアプリが動的ルーティングのページでリロードすると404になる時の対処法

はじめに

環境：nuxt:2.15.7, MacOS

Nuxtアプリ（ssr）をFirebase Hostingにデプロイして動的ルーティングを指定したページ（_id.vue）でリロードすると404になってしまったのでメモ。

例えば以下のようなディレクトリ構成だと、/articles/1、/articles/2のようなルーティングになる。

pages
├── articles
    ├── _id.vue

ローカルだと問題ないのだが、Firebase Hostingにデプロイしたアプリで/articles/1にアクセスしてリロードすると404エラーになってしまった。

対処法

Firebaseの公式を参考に、firebase.jsonの"hosting":{}内にrewritesを設定すると期待通りに動いた。

firebase.json

  "hosting": {
    "public": "dist",
+  "rewrites": [
+     {
+       "source": "**",
+       "destination": "/index.html"
+     }
+   ],
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
  }

最初のfirebaseの環境構築で質問責めされる時、答えようによってはデフォルトでrewritesが設定されるらしい。
後はご自身でカスタマイズして欲しい。