Nuxt.js + Firebase Hosting のクライアントサイドのみで動的ルーティングを行う
Firebase Hosting にクライアントサイドのコードのみ(サーバサイドを未使用)で動的ルーティングを行うにはちょっとしたコツが必要だった。
※サーバサイドのコードを実行するには Cloud Functions という機能を使えば良さそうだが、ここでは触れない。
動的ルーティングを伴う page の構成を以下とする。
pages
├── index.vue
├── login.vue
└── projects
├── _id.vue
└── index.vue
デフォルトのルーティングの設定だと個別のプロジェクトページのURLは以下のようになる。
https://localhost/projects/XXXXXXXXXXXXXX- ※XXXXXXXXXXXXXX は project の id
ローカルの yarn run dev では問題なく動作する。
ただし、このまま Firebase Hosting にデプロイしても一見動作するが、リロードすると以下のようなエラー画面が出てしまう。
$ yarn run build $ firebase deploy
おそらくサーバサイドのルーティングの処理を定義していないので、 https://localhost/projects/XXXXXXXXXXXXXX というURLを上手く捌けないらしい。
この場合、ルーティングの処理をクライアントサイドで処理できるよう、 router の mode を hash に変更すると良い。
nuxt.config.js に以下を追加
router: {
mode: 'hash'
},
上記の設定を行うことで、URLが以下のように変更され、Firebase 上でクライアントサイドのコードのみで動作するようになった (#が挿入される)
https://localhost/#/projects/XXXXXXXXXXXXXX
ブラウザのキャッシュが残っていたりしてすぐには反映されないかもしれない。その場合はキャッシュをクリアするか少し時間を置いてからアクセスするといい。
ちなみに、 firebase serve で動かすと、ローカルで Firebase Hosting 上で動いている相当の挙動を試すことができるようだ。
$ yarn run build $ firebase serve
また、今回は試していないが Cloud Functions を使ってサーバサイドの処理を記述すれば hash モードでなくても動的ルーティングを実現できそうなのでいずれやってみようと思う。
