Zenn
Closed11

NxでCloud Functions for Firebaseをいい感じにやる手順

Angular
Firebase
Nx
uuyu-guuyu-g
npx create-nx-workspace nx-fire-functions
cd nx-fire-functions

フロントはAngularで作るけれど、Nxのsccafoldはemptyで行ってあとでAngularを入れたほうがproject.jsonが別れて良さそう。

uuyu-guuyu-g

フロントとbackendを生成する。

npx nx generate @nrwl/angular:application --name=app
npx nx generate @nrwl/node:application --name=firebase

firebase appにFirebase関連のファイル(firestore.rules)とかをまとめたらいいんじゃないかと思ってる。

uuyu-guuyu-g

firebase initをmonorepoのrootで実行する。hostingの設定などappsをまたぎうるのでrootに置かざるをえないかなぁと言う感じ

🟧オレンジの箇所で apps/firebase に設定ファイルを作成。
🟥赤色の箇所が注意点で、npm install をするか聞かれるがNx側でインストールするのでここでは実行しないように注意。ESLintの設定もここでは設定しない。

uuyu-guuyu-g

Functionsに必要なライブラリを改めてrootにインストール

npm install firebase-admin firebase-functions
npm install -D firebase-functions-test

firebase initで生成されるFunctionsの依存ライブラリはちょっと古めみたい。

uuyu-guuyu-g

package.jsonをapps/firebase/src内に作ります。

apps/firebase/src/package.json
{
  "main": "main.js",
  "engines": {
    "node": "14"
  },
  "dependencies": {
    "firebase-admin": "^10.0.0",
    "firebase-functions": "^3.16.0"
  }
}
uuyu-guuyu-g

次にapps/firebaseのproject.jsonを編集します。ここの変更がなんのために必要なのかがちょっとあいまい。nx serve firebase した時の挙動が違うみたいなんだけどいまいちわかってない。

ビルド結果にpackage.jsonが含まれる必要があるので options.assets にpackage.jsonを追加。

apps/firebase/project.json
    "build-node": { // 👈 "build"からリネーム
      "executor": "@nrwl/node:build",
      "outputs": ["{options.outputPath}"],
      "options": {
        "outputPath": "dist/apps/firebase",
        "main": "apps/firebase/src/main.ts",
        "tsConfig": "apps/firebase/tsconfig.app.json",
        "assets": [
          "apps/firebase/src/assets",
          "apps/firebase/src/package.json" // 👈 追記
         ]
      }
    },
    "build": { // 👈 あらためて追加
      "executor": "@nrwl/workspace:run-commands",
      "options": {
        "command": "nx run firebase:build-node"
      }
    },
uuyu-guuyu-g

最後に firebase.json を変更します。predeploy を削除し、source をdist配下のpathにし、ignoreにも追加します。

firebase.json
  "functions": {
    "source": "dist/apps/firebase",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
  },
uuyu-guuyu-g

あとは

nx serve firebase

と

firebase emulators:start --only functions --inspect-functions

別のターミナルで実行してあげれば functionsのエミュレーターとbuild のwatchが動きます

uuyu-guuyu-g

最後にデプロイ用のコマンドをproject.jsonに追加します。

project.json
    "deploy-functions": {
      "executor": "@nrwl/workspace:run-commands",
      "options": {
        "command": "firebase deploy --only functions"
      }
    },
    "deploy": {
      "executor": "@nrwl/workspace:run-commands",
      "options": {
        "commands": [
          {
            "command": "nx run firebase:build"
          },
          {
            "command": "nx run firebase:deploy-functions"
          }
        ],
        "parallel": false
      }
    },

これで

nx deploy firebase

でfunctionsがデプロイされます。

このスクラップは2021/12/07にクローズされました