【Nuxt.js】Firebase Hostingで404ページに遷移されない対処法

Nuxt.js + Firebase Hostingでgenerateによる静的ファイル生成時に404ページに遷移されない問題の対処法をメモしておきます。

Nuxt.jsでgenerateした静的ファイル以外のページにアクセスした際、404に遷移しない

公式ではfallback: trueにすることで、404.html を自動的に検出するとのことでしたが、404に遷移されず。。

よくよく確認すると「複数のサービス（例えば Netlify）では」と書いてあったので、もしかするとFirebase Hostingでは別の設定する必要があるのではないかと気づきました。

参考：API: generate プロパティ

firebase.jsonでルートディレクトリを正しく設定する

firebase.jsonで確認すると、全ルートがindex.htmlファイルに遷移していたため、404が投げられることがなかったというわけです。

・firebase.json

ここをルートディレクトリに指定することで404の遷移が正しく機能しました。
“source”: “**” → “source”: “/”

・firebase.json

以上、Nuxt.jsでgenerateした404ページが正しく遷移されない時の対処法でした。