firebaseを使ってnuxtのサーバーサイドレンダリングを試す

概要

nuxt(ssr)をfirebaseにデプロイする自分用の手順

nuxtのサーバーサイドレンダリングは、firebaseのHostingの他にfunctionsも利用する必要がある（らしい）

手順通り実行することでデプロイは可能だが、その後どうしたらどうできるかまでは未検証

参考

手順

リポジトリ作成

リポジトリ名はtest02にした

npx create-nuxt-app test02

✨  Generating Nuxt.js project in test02
? Project name: test02
? Programming language: TypeScript
? Package manager: Npm
? UI framework: Bootstrap Vue
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? What is your GitHub username? gosshys
? Version control system: Git

• Nuxt.js modulesはいらない
• Liting tools, Testing frameworkは外した
• Rendering modeをSSRにする

できあがったらリポジトリのディレクトリへ移動する

cd test02

firebaseの初期化

firebase init

? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. 
 ◯ Database: Deploy Firebase Realtime Database Rules
 ◉ Firestore: Deploy rules and create indexes for Firestore
 ◉ Functions: Configure and deploy Cloud Functions
❯◉ Hosting: Configure and deploy Firebase Hosting sites
 ◯ Storage: Deploy Cloud Storage security rules
 ◯ Emulators: Set up local emulators for Firebase features
 ◯ Remote Config: Get, deploy, and rollback configurations for Remote Config

• Firestore, Functions, Hostingを選択
• Firestoreは必須ではない

? Please select an option: 
  Use an existing project 
❯ Create a new project 
  Add Firebase to an existing Google Cloud Platform project 
  Don't set up a default project

• Create a new projectを選択

? Please select an option: Create a new project
i  If you want to create a project in a Google Cloud organization or folder, please use "firebase projects:create" instead, and return to this command when you've created the project.
? Please specify a unique project id (warning: cannot be modified afterward) [6-30 characters]:
 test02-123456789
? What would you like to call your project? (defaults to your project ID) 
✔ Creating Google Cloud Platform project
✔ Adding Firebase resources to Google Cloud Platform project

🎉🎉🎉 Your Firebase project is ready! 🎉🎉🎉

Project information:
   - Project ID: test02-123456789
   - Project Name: test02-123456789

• unique project idはurlになるので、適当に一意になるように入力する

=== Firestore Setup

Error: It looks like you haven't used Cloud Firestore in this project before. Go to https://console.firebase.google.com/project/test02-123456789/firestore to create your Cloud Firestore database.

• Firestoreをコンソールから事前に作成しろと出るのでコンソール上のURLからコンソールに移動する

• Create databaseを押す

• production modeを選択。test modeでもいい。

• regionはasia-northeast1が東京、asia-northeast2が大阪
• ただし、下の方にもでてくるがfunctionsがus-central1縛りの現状を考えると、あえてus-central1にすべきな気もする

できた

もう一度、firebase initを実行

firebase init

? Please select an option: Use an existing project
? Select a default Firebase project for this directory: test02-123456789 (test02-123456789)
i  Using project test02-123456789 (test02-123456789)

=== Firestore Setup

Firestore Security Rules allow you to define how and when to allow
requests. You can keep these rules in your project directory
and publish them with firebase deploy.

? What file should be used for Firestore Rules? firestore.rules

? What file should be used for Firestore indexes? firestore.indexes.json

? What language would you like to use to write Cloud Functions? JavaScript

• ここはJavaScriptにしたが、Type scriptのやり方がわからなかっただけ

? Do you want to use ESLint to catch probable bugs and enforce style? No

ここはNとすべきらしい

? Do you want to install dependencies with npm now? Yes

? What do you want to use as your public directory? public

? Configure as a single-page app (rewrite all urls to /index.html)? No

ここはNらしい

? Set up automatic builds and deploys with GitHub? No

Nとしないと、Githubにリポジトリがないと進めなくなるようでした(弱気)

✔  Firebase initialization complete!

vi firebase.json

ここは参考ページのとおりに修正

{
 "functions": {
   "functions": {
     "source": "functions"
   }
 },
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "hosting": {
    "public": "static",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
   "rewrites": [
     {
       "source": "**",
       "function": "ssr"
     }
   ]
  }
}

functionsの設定

cd functions

npm install --save nuxt

vi package.json

{
  "name": "functions",
  "description": "Cloud Functions for Firebase",
  "scripts": {
    "serve": "firebase emulators:start --only functions",
    "shell": "firebase functions:shell",
    "start": "npm run shell",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log"
  },
  "engines": {
    "node": "12"
  },
  "main": "index.js",
  "dependencies": {
    "firebase-admin": "^9.2.0",
    "firebase-functions": "^3.11.0",
    "bootstrap": "^4.5.2",
    "bootstrap-vue": "^2.17.3",
    "nuxt": "^2.14.8"
  },
  "devDependencies": {
    "firebase-functions-test": "^0.2.0"
  },
  "private": true
}

最初にbootstrapの依存を追加したのでここにも追加する必要がある
(バージョン等は上位ディレクトリのpackage.jsで確認できる)

    "bootstrap": "^4.5.2",
    "bootstrap-vue": "^2.17.3",

再度、npm install

npm install

※これをやらないとdeploy後に画面描画時にエラーがでる

vi index.js

const functions = require('firebase-functions');

// // Create and Deploy Your First Cloud Functions
// // https://firebase.google.com/docs/functions/write-firebase-functions
//
// exports.helloWorld = functions.https.onRequest((request, response) => {
//   functions.logger.info("Hello logs!", {structuredData: true});
//   response.send("Hello from Firebase!");
// });

const { Nuxt } = require('nuxt');
const nuxt = new Nuxt({
   buildDir: 'ssr',
   dev: false
});

exports.ssr = functions.https.onRequest(async (req, res) => {
   await nuxt.ready()
   return nuxt.render(req, res)
})

ここで、cloud functionsのregionを東京にしたいという気持ちも出てくるが、以下の制約があるためregion指定はできない

https://firebase.google.com/docs/functions/locations?hl=ja

上位ディレクトリに移動

cd ..

vi package.json

{
  "name": "test02",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt-ts",
    "build": "nuxt-ts build && npm run build:copy:ssr",
    "build:copy:ssr": "rimraf functions/ssr && mkdirp functions/ssr && cp -R .nuxt/dist functions/ssr/dist",
    "start": "nuxt-ts start",
    "generate": "nuxt-ts generate"
  },
  "dependencies": {
    "@nuxt/typescript-runtime": "^2.0.0",
    "bootstrap": "^4.5.2",
    "bootstrap-vue": "^2.17.3",
    "core-js": "^3.6.5",
    "nuxt": "^2.14.6"
  },
  "devDependencies": {
    "@nuxt/types": "^2.14.6",
    "@nuxt/typescript-build": "^2.0.3"
  }
}

以下の部分を修正

    "build": "nuxt-ts build && npm run build:copy:ssr",
    "build:copy:ssr": "rimraf functions/ssr && mkdirp functions/ssr && cp -R .nuxt/dist functions/ssr/dist",

npm install

• これはいらないかも

デプロイ(functions含む)

npm run build && firebase deploy

nodeのバージョンが10?以上だと、無料プランだとデプロイできない。8とか10はディスコンが決まっているので、デフォルトの12でデプロイするために、支払いアカウントを作成して、Blazeプランに変更する

Error: HTTP Error: 400, Boilling account for project '423603410634' is not found. Billing must be enabled for activation of service(s) 'cloudbuild.googleapis.com,containerregistry.googleapis.com' to proceed.

支払いアカウントを追加

Project OverviewのヨコのギアマークからUsage and billingを押す

再デプロイ

npm run build && firebase deploy

=== Deploying to 'test02-123456789'...

i  deploying firestore, functions, hosting
i  firestore: reading indexes from firestore.indexes.json...
i  cloud.firestore: checking firestore.rules for compilation errors...
✔  cloud.firestore: rules file firestore.rules compiled successfully
i  functions: ensuring required API cloudfunctions.googleapis.com is enabled...
i  functions: ensuring required API cloudbuild.googleapis.com is enabled...
⚠  functions: missing required API cloudbuild.googleapis.com. Enabling now...
✔  functions: required API cloudfunctions.googleapis.com is enabled
✔  functions: required API cloudbuild.googleapis.com is enabled
✔  firestore: deployed indexes in firestore.indexes.json successfully
i  firestore: latest version of firestore.rules already up to date, skipping upload...
i  functions: preparing functions directory for uploading...
i  functions: packaged functions (537.49 KB) for uploading
✔  functions: functions folder uploaded successfully
i  hosting[test02-123456789]: beginning deploy...
i  hosting[test02-123456789]: found 2 files in static
✔  hosting[test02-123456789]: file upload complete
✔  firestore: released rules firestore.rules to cloud.firestore
i  functions: creating Node.js 12 function ssr(us-central1)...
✔  functions[ssr(us-central1)]: Successful create operation. 
Function URL (ssr): https://us-central1-test02-123456789.cloudfunctions.net/ssr
i  hosting[test02-123456789]: finalizing version...
✔  hosting[test02-123456789]: version finalized
i  hosting[test02-123456789]: releasing new version...
✔  hosting[test02-123456789]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/test02-123456789/overview
Hosting URL: https://test02-123456789.web.app

できた

画面遷移も可能

付録

以下が表示されたら、GCP側の設定が必要

Your client does not have permission to get URL /ssr/ from this server.