【Nuxt.js】Nuxt.js SSRモードでfirebaseにデプロイする手順 2020年版

概要

自作のNuxt.jsはSSRモードでfirebaseにホスティングしようとネットで方法を探してました。
見つかった記事は2019の物でちょっと古くて（実際その通りやったら詰んでしまう）困ってました。
そこでこの記事とこの動画を参考になんとかデプロイできました。

でもどれも英語だったのでせっかくなので日本語の記事を書こうと思った次第です。

手順を見たくない方へ

このボイラープレートをそのまま使う。

手順1

新規Nuxtアプリを作成する

npx create-nuxt-app firebase-firebase/src

注意
nuxt本体のソースコードを管理しやすいために/srcの中に入れてますが、そうしなくても良いです。ただ後述のfirebase.jsonのpredeployの設定をご自身のパスに合わせて修正してください。

手順2

まずfirebaseでアカウントを申請し、新規プロジェクトを作成してください。
nodeバージョンを10以上を使うため、プランはblazeにアップグレードしておいてください。（従量課金制なので、テストするだけなら課金されないはずなので安心してください）

次に下記のコマンドでfirebaseの設定ファイルを生成します。

npm install -g firebase-tools //firebase CLIをインストール
firebase init //設定ファイルを作成

設定は画像を参考して選んでください。
functionとhostingを選択

firebaseのプロジェクトを指定する

ホスティングの設定

設定後のフォルダーはこうなります

手順3

cloud functionを作成

SSRモードはnodeサーバーが必要なので、firebaseにcloud functionを入れる必要があります。
やってることはざっくりいうと、ルートにアクセスしたらレスボンスをそのままNuxtにレンダリングさせる。

/functions/index.js
こちらのコードを上記ファイルにコピペ

package.jsonを設定

nuxt-startを追加します。
nodeのバージョンは10以上じゃないといけないので(バージョン8はもうサポート終了しました。)ご注意を。

functions/package.json
こちらのコードを上記ファイルにコピペ

firebase.jsonを設定

ざっくりですが、各設定の説明は下記です。
functions.source: cloud functionにデプロイフォルダーを指定
functions.predeploy: firebase deployする前に、ビルドされたファイルを適宜のパスにコピーする

hosting.public: firebase hostingにデプロイするフォルダーを指定
hosting.predeploy: firebase deployする前に、ビルドされたファイルを適宜のパスにコピーする

rewrites.function: リクエストはすべて指定functionに処理させる。（ここではfunctions/index.jsのssrapp関数）

firebase.json
こちらのコードを上記ファイルにコピペ

手順4

次にnuxt.config.jsonをちょっとした修正が必要です。

手順5

設定は以上です。
あとはルートに戻り下記のコマンドを叩けばデプロイします。

firebase deploy

無事にデプロイできました！

終わりに

ここまでたどり着くため一日以上かかりました...この記事でお役に立てば嬉しい限りです。
日本語は母語ではないので拙い文章でしたが、ここまで見てくれてありがとうございます！