SSRモードのNuxt を Firebaseにホストするまでの手順

SPAモードならスタティックファイルのホスティングでいいと思うけど、SSRでやりたいのでその方法を調べた。

リポジトリ

• master: https://github.com/sterashima78/firebase-nuxt-example
• 以下の作業が完了した時点: https://github.com/sterashima78/firebase-nuxt-example/tree/v1

Firebaseのプロジェクト作る

https://console.firebase.google.com に行ってアカウントとプロジェクトを作る。

firebase-toolsが入ってなかったら

npm i -g firebase-tools 

ひな形を作る

参考:

• https://ja.nuxtjs.org/guide/installation/
• https://firebase.google.com/docs/functions/get-started
• https://firebase.google.com/docs/hosting/quickstart

mkdir firebase-nuxt-example #今回のプロジェクトroot
npx create-nuxt-app app # nuxtのテンプレート
firebase login
firebase init functions # SSRをfunctionで行う
firebase init hosting # 静的ファイルを配信するのに使う

各設定変更

firebaseの設定

参考:

• https://firebase.google.com/docs/hosting/full-config

• https://firebase.google.com/docs/functions/manage-functions

• hosting.public で指定したディレクトリがHostingされる

• hosting.rewrites はHostingされたファイルがない時に設定どおりにリダイレクトされる

  • ここでは全部 app という関数へ流すように指定

• functions.source で指定したディレクトリにfunctionsで使われるファイルを入れる

firebase.json

{
  "hosting": {
    "public": "dist/client",
    "ignore": [
      "firebase.json",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "function": "app"
      }
    ]
  },
  "functions": {
    "source": "dist/server"
  }
}

functionsで使う依存を追加

cd functions && npm install --save express nuxt

functionsで使う設定

nodejsのバージョンを10にする

functions/package.json

{
  "name": "functions",
  "description": "Cloud Functions for Firebase",
  "scripts": {
    "serve": "firebase serve --only functions",
    "shell": "firebase functions:shell",
    "start": "npm run shell",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log"
  },
  "engines": {
    "node": "10"
  },
  "dependencies": {
    "express": "^4.17.1",
    "firebase-admin": "~7.0.0",
    "firebase-functions": "^2.3.0",
    "nuxt": "^2.8.0"
  },
  "devDependencies": {
    "firebase-functions-test": "^0.1.6"
  },
  "private": true
}

functionsで呼び出す関数を定義

参考：

• https://firebase.google.com/docs/functions/http-events
• https://ja.nuxtjs.org/api/nuxt-render-route

hostingからリダイレクトされる app という関数で公開

functions/index.js

const functions = require('firebase-functions');
const { Nuxt } = require('nuxt')
const app = require('express')()
const nuxt = new Nuxt({
  dev: false,
  buildDir: '.nuxt',
  build: {
    publicPath: '/'
  }
})

function handler(req, res) {
  nuxt.renderRoute('/', { req }).then(result => {
    res.send(result.html)
  }).catch(e => {
    res.send(e)
  })
}

app.use(handler)
exports.app = functions.https.onRequest(app)

ビルド

dist以下に必要なファイルを配置する

• .nuxt は functionsに必要
• .nuxt/dist/client はHostingで配信する
• static もHostingで配信する

build.sh

rm -rf dist
mkdir -p dist
# server
cp -R functions dist/server
cp -R app/.nuxt dist/server/
#client
cp -R app/static dist/client
cp -R app/.nuxt/dist/client/* dist/client/

動作確認

firebase serve

デプロイ

firebase deploy

終わりに

• SSRをする際はFunctionsを使う
• NuxtをExpressと一緒に使う
• 静的ファイルはHostingで配信する

ここから AuthenticationやFirestoreを追加していきたい。