LoginSignup
5
3

More than 1 year has passed since last update.

@gosshys(takefumi goto)

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

Last updated at Posted at 2020-12-02

概要

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からコンソールに移動する

image.png

  • Create databaseを押す

image.png

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

image.png

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

image.png

image.png

image.png

image.png

できた

もう一度、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指定はできない

image.png
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を押す

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

再デプロイ

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

できた

image.png

画面遷移も可能

付録

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

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

5
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
5
3