Firebase HostingのPage Not Foundを解決する

Nuxt.js の SSG で作成したサイトを Firebase Hosting にデプロイしたところ,Page Not Foundというエラーが表示されてしまいました.

アプリケーション構成

SSG で作成したサイトはサブディレクトリに index.html が生成されるように設定されています.

参考:Nuxt - Nuxt configuration file

また,ビルド時にローカルサーバで起動してもクエリを正しく認識できませんでした(最後にスラッシュがついてしまうため).

これを解決するため,最後のスラッシュ(trailing slash)を取り除く設定を追加します.

参考:Nuxt - The router Property

エラー内容

This file does not exist and there was no index.html found in the current directory or 404.html in the root directory.

サブディレクトリ下に index.html が存在しています.初期接続時はページが表示されていましたが,パスがうまく認識できないのかリロードすると上記エラーが表示されます.

また,ローカルサーバ上で起動している場合はリロードしても正しく機能していました.

Firebaseの設定

ローカルでは正しい動作をしているので,Firebase の設定を変更すれば対応できそうです.

まず,rewrites の設定を追加し,ページのルーティングと呼び出すファイルを紐づけます.正規表現も利用可能です.

次に,URLの最後にスラッシュを付与しないように設定を変更します.これは必須ではありません.

(作成したサイトではクエリパラメータを使用していたため,最後にスラッシュが付与されると動作しなくなってしまう不具合が同時に発生していました.)

firebase.json

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

参考:ホスティング動作を構成する  |  Firebase Documentation

Nuxt.jsでサブディレクトリ下に index.html を生成するのではなく,<page>.html として生成することも可能です.

Firebase Hosting は .html 拡張子がついたファイルを表示する際に,デフォルトで .html を消したルーティングを行うようになっています.

そのため,Nuxt.js でどちらの設定を利用しても,Firebase Hosting 上での見た目は変わりません.