Nuxt.js を Firebase Hosting, Function で SSR する

コストかけずに始めていざとなったらスケールするインフラとして Firebase が気になっている。
そしてWebのフロントエンドで疲弊しないための選択肢として Vue.js が同じく気になりだした。
SPA(SinglePageApplication)やるとSSR(ServerSideRendering)がサービスの性質によっては必要になるので、そこをどう実現するのかを試してた。

参考資料

Nuxt.js は公式ガイドが非常に充実していて、日本語もある。

はじめに - Nuxt.js

公式が一番の近道。
あとは参考にすべき実装は Qiita やブログではなく、以下のリポジトリが一番わかりやすかった。

github.com

解説

まず通常の静的サイトホスティングであれば Nuxt.js の公式に Firebase へのデプロイ方法が書いてあるので、SSRが不要であれば以下のドキュメント通りに実現するのがよい。

ルーティング - Nuxt.js

SSRをやる場合、フロントのURLは Firebase Hosting から払い出される xxx.firebaseapp.com になるが、Hosting するのはアセットのみで、各ページのルーティングURLへのアクセスは裏側の Functions にリライトする形となる。
上にあげたリポジトリのコードを読んでいて、この点に気づくまでに時間がかかった。。

以下の Firebase ドキュメントにリライトの適用ルールについて記載されている。

Customize Hosting Behavior | Firebase

そういうことか“指定された source にファイルまたはフォルダが存在しない場合、Firebase Hosting はリライトルールを適用し、HTTP リダイレクトの代わりに、指定された destination ファイルの実際の… https://t.co/oIJj4IHHAV
— kheiakiyama (@kheiakiyama) September 14, 2018

他にやること

SSR は検索サービスにページをインデックスしてもらうのが目的の一つだと思う(クライアントの負荷軽減など他にもあるが)が、サイトマップの生成などやることは他にもありそうだ。

感想

Vue.js ならびに Nuxt.js は全部入りって感が強く、比較すべきではないが React やWebPackなどでどう組み合わせるか考えるのが億劫な人にはちょうどいいソリューションだと感じている。
自分にとってはフロントエンドの裏側に API サーバーを Go で書きたいとかやりたいことがそっち方面に広がっているので、学習コストがそこそこに済むものを使っていきたい。
とはいえやっていくうちに悪いところも見えてくるに違いない。