Nuxt.jsのWebアプリをFirebase(Cloud Functions/Firebase Hosting)でSSRする
URL: https://nuxt-firebase-demo-1355e.web.app/
GitHub: https://github.com/yuheijotaki/nuxt-firebase
SSRなのでFirebaseの Cloud Functions と Firebase Hosting を使います。
AWSでいうと
Cloud Functions は Lambda、
Firebase Hosting は S3
という扱いですかね。
色々な記事見たのですが、手順としては firebase functionsでnuxt.js v2.11.0をSSR - Qiita が比較的新しくこの通りでできました。
他にもこの手の記事はたくさんありますが、
Nuxtのビルドフォルダなどディレクトリ構成がごっちゃになったり、そもそもSPAのものだったり、人によってWebアプリ作成とFirebaseの設定順が違ったりするので、とりあえず1記事でデプロイまでできる状態に持っていってから調整するところ調整したほうがいいかなと思います。
下記おおまかな手順です。
事前準備
リポジトリ作成。nodenvなどでnodeのバージョンは10系に合わせる。
functions側（Cloud Functions）のNode.jsでローカルと同じように動かないと詰まることになるので、今の所10系が安定していそう。
create-nuxt-app
Nuxtアプリを作ります。
starter-template だとうまくFirebase連携がうまくいかなかったという記事もあったのでcreate-nuxt-appがおすすめ。
モジュールとかリンターは好きなようにしてOK。
後でも変更可ですが Choose rendering mode Universal は SSR で。
作ったら nuxt.config.js の buildDir を functions/nuxt にしておく。
Firebaseプロジェクト作成
コンソールから「プロジェクトを作成」 https://console.firebase.google.com/?hl=ja
アナリティクスはとりあえず無効にしておく。
Authentication や Database などいろいろ入ってますが使うのは Hosting と Functions。
firebase init
ここからはCLIインストールして操作
https://firebase.google.com/docs/cli?hl=ja
Mac npm だとうまくいかず curl でインストールした
$ curl -sL https://firebase.tools | bash
ログイン
$ firebase login # ブラウザで認証後 Success! Logged in as XXXXX@gmail.com
ブラウザでFirebaseとの紐付け後にCLIのログインが確認される。
プロジェクトリストの表示
$ firebase projects:list # さきほど作ったプロジェクト名が表示されればOK
プロジェクトのFirebase初期化
$ firebase init # Which Firebase CLI features は 2つ選択 ◉ Functions: Configure and deploy Cloud Functions ◉ Hosting: Configure and deploy Firebase Hosting sites # さきほど作ったプロジェクトを選択 ? Please select an option: Use an existing project ? Select a default Firebase project for this directory: nuxt-firebase-demo-1355e (nuxt-firebase-demo) i Using project nuxt-firebase-demo-1355e (nuxt-firebase-demo)
functions 設定
・firebase.json
rewrites function を nuxtApp に
・functions/package.json
node のエンジンを 8 → 10 に
axios と dotenv のモジュール追加
・functions/index.js
Express つかってSSRするように設定。ここはコピペしました。
デプロイ
# ビルド $ npm run build # ローカルでデプロイ内容確認 $ firebase serve http://localhost:5000/ で確認 # デプロイ $ firebase deploy
感想
Firebaseの認証詰まったり、Cloud Functions 思ったよりハマりポイントたくさんありましたが一応SSRできるっていうのを試せてみたので良かったです。 サーバレスってこういうことなんだっていうのはやっぱり触ってみるとわかりやすいです。 もう少しルーティングとかうまくいくか検証しないと案件とかでは怖いですが