NxでCloud Functions for Firebaseをいい感じにやる手順
uuyu-gNxでのmonorepo構成でCloud Functions for Firebase(以降 Functions)をいい感じに構成するまでの手順。
こちらの記事を参考に進めていく。
uuyu-gnpx create-nx-workspace nx-fire-functions
cd nx-fire-functions
フロントはAngularで作るけれど、Nxのsccafoldはemptyで行ってあとでAngularを入れたほうがproject.jsonが別れて良さそう。
uuyu-g次に個別に Angular, Node をinstall
npm install -D @nrwl/angular @nrwl/node
フロントとbackendを生成する。
npx nx generate @nrwl/angular:application --name=app
npx nx generate @nrwl/node:application --name=firebase
firebase appにFirebase関連のファイル(firestore.rules)とかをまとめたらいいんじゃないかと思ってる。
uuyu-gfirebase initをmonorepoのrootで実行する。hostingの設定などappsをまたぎうるのでrootに置かざるをえないかなぁと言う感じ
🟧オレンジの箇所で apps/firebase に設定ファイルを作成。
🟥赤色の箇所が注意点で、npm install をするか聞かれるがNx側でインストールするのでここでは実行しないように注意。ESLintの設定もここでは設定しない。
uuyu-gFunctionsに必要なライブラリを改めてrootにインストール
npm install firebase-admin firebase-functions
npm install -D firebase-functions-test
firebase initで生成されるFunctionsの依存ライブラリはちょっと古めみたい。
uuyu-gpackage.jsonをapps/firebase/src内に作ります。
{
"main": "main.js",
"engines": {
"node": "14"
},
"dependencies": {
"firebase-admin": "^10.0.0",
"firebase-functions": "^3.16.0"
}
}
次にapps/firebaseのproject.jsonを編集します。ここの変更がなんのために必要なのかがちょっとあいまい。nx serve firebase した時の挙動が違うみたいなんだけどいまいちわかってない。
ビルド結果にpackage.jsonが含まれる必要があるので options.assets にpackage.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"
}
},
最後に firebase.json を変更します。predeploy を削除し、source をdist配下のpathにし、ignoreにも追加します。
"functions": {
"source": "dist/apps/firebase",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
},
あとは
nx serve firebase
と
firebase emulators:start --only functions --inspect-functions
別のターミナルで実行してあげれば functionsのエミュレーターとbuild のwatchが動きます
uuyu-g最後にデプロイ用のコマンドを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がデプロイされます。