[Nuxt] emulatorでNuxt & Cloud functionsの開発を速くする

はじめに

cloud functionsを修正したり、ログ差し込むだけで、いちいちデプロイして動作確認するのは時間がかかって面倒！
なので、開発中は一切デプロイが不要になるエミュレータを使うことをおすすめします！

前提

• Nuxt(Vue)とfirebase（Cloud functions）で既に開発していること
• この記事ではtypescriptで開発しています
• 最新版のfirebase-admin（確か古いfirebase-adminでは動作しなかった気がする）

// 簡単なディレクトリ構成
.
├── functions
└── nuxt

.runtimeconfig.json作成

functionsの環境変数をエミュレータで読み込むために.runtimeconfig.jsonを作成します

$ cd functions
$ touch .runtimeconfig.json

firebase functions:config:getの内容をコピーします

functionsのscript

functions/package.json

"scripts": {
    "emulate": "yarn build && firebase emulators:start --only functions --inspect-functions 9229",
    "watch": "./node_modules/.bin/tsc --watch"
  }

watchは修正した内容をemulatorに反映させるため必要

その他

functionsでemulator用に切り替えないといけないものがある場合は、process.env.FUNCTIONS_EMULATORで判定して対応する
（CloudSQLはsocketPathが設定されてると動かないとかがある）

Nuxt側

functionsのURLをエミュレータのものに差し替える

https://asia-northeast1-xxxxx.cloudfunctions.net
↓
http://localhost:5001/xxxxx/asia-northeast1

xxxxxはfirebaseのprojectIdが入る

firebase.initializeAppしているファイルがあると思うので、その下の行で以下の内容を記述

functions.useFunctionsEmulator('http://localhost:5001');

nuxtのscripts

EMULATEの環境変数を入れて、URLなどの切り替えをするといいと思います。

nuxt/package.json

"scripts": {
  "dev:emulate": "EMULATE=TRUE nuxt-ts"
}

実行

それぞれ別のタブで実行する

$ cd functions
$ yarn emulate

$ cd functions
$ yarn watch

$ cd nuxt
$ yarn dev:emulate