FirebaseのFunctionsの関数をローカルでエミュレーションする方法

nuxt.js＋Firebaseでの開発にて、Functionsの関数をローカルでデバッグしたくなった時に辿り着いた方法を備忘録として残します。Functionsへのdeployはそこそこに時間がかかるのでデバッグが大変ですが、ローカルでエミュレーションすることで大幅に時間を短縮できます。

追記(2021/03/30)：こちらの方法は残念ながらバックグラウンド関数トリガー（firestoreのドキュメントの変更をトリガーにするなど）では使用できない様です。functions.https.onCallトリガーなどで使用可能となっています。

結論

1. firebaseに関するプラグインを下記の様に設定する

/plugins/firebase.js

import firebase from 'firebase/app'
import 'firebase/firestore'
import 'firebase/auth'
import 'firebase/storage'
import 'firebase/functions'
import config from '~/firebaseConfig.json'

if (!firebase.apps.length) {
  firebase.initializeApp({ ...config })
}

export default ({ app }, inject) => {
  inject('firebase', firebase)
  inject('firestore', firebase.firestore())
  inject('fireAuth', firebase.auth())
  inject('fireStorage', firebase.storage())
  inject('fireFunc', firebase.functions())
}

// 下記がローカルでFunctionsの関数をエミュレーションする設定
// Functionsサーバーを利用する際はコメントアウトでOK
//-------------------------------------------------------
const functions = firebase.functions()
functions.useFunctionsEmulator('http://localhost:5000')
//-------------------------------------------------------

2. 1つ目のterminalにて「firebase serve --only functions」で関数のエミュレーション開始

3. 2つ目のterminalにて「npm run dev」で開発サーバーを起動

この手順でFunctionsの内容の編集とデバッグを同時進行で行うことができるはずです。

補足：Functionsのロケーションをデフォルトから変更する場合

下記の様にFunctionsのロケーションを設定し、「this.$fireFunc~~」のようにFunctionsを呼び出す場合、Functionsのサーバーにアクセスしてしまうため、ローカルでエミュレーションできません。ローカルでエミュレーションする際は、デフォルトのFunctionsのサーバーにアクセスするように設定します。

/plugins/firebase.js

import firebase from 'firebase/app'
import 'firebase/firestore'
import 'firebase/auth'
import 'firebase/storage'
import 'firebase/functions'
import config from '~/firebaseConfig.json'

if (!firebase.apps.length) {
  firebase.initializeApp({ ...config })
}

export default ({ app }, inject) => {
  inject('firebase', firebase)
  inject('firestore', firebase.firestore())
  inject('fireAuth', firebase.auth())
  inject('fireStorage', firebase.storage())
  // ↓ロケーションを東京に変更、ローカルでエミュレーションする際はこちらはコメントアウトする
  inject('fireFunc', firebase.app().functions('asia-northeast1')) 
  // ↓ローカルでエミュレーションする際はこちらを使用
  // inject('fireFunc', firebase.functions())
}

const functions = firebase.functions()
functions.useFunctionsEmulator('http://localhost:5000') //このままでは機能しない

最後に

読んでいただきありがとうございます。
同じ問題に直面した方のお役に立てたら幸いです。

当方初学者のため、間違いの訂正/アドバイス歓迎しております。

参考記事
ローカル環境でCloud Functions for Firebase（特にCallable関数）の動作テストをする
Cloud Functions のロケーション