firebase emulatorの使い方

#firebaseでfunctionsをemulatorに挑戦した忘備録です。

firebase emulatorとは

デプロイすることなく、ローカル環境で挙動を確認するための仕組みです。
参考　https://qiita.com/ak2ie/items/a50ea4e3da37f904bd1a

##環境
reactでバックエンドのためのfunctionsが実装されていること

firebase init の時にemulatorを選択すると、firebase.jsonに必要な設定がなされます。

上記を実施しない場合、直接firebase.jsonにアクセスできるポートを設定します。

firebase.json

{
  "emulators": {
    "hosting": {
      "port": 5000
    }
  }
},
\\ホスティング設定
{
  "hosting": {
    "public": "public", // ホスティングするファイルのディレクトリ
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
  }
}

フロントエンドからのアクセス

firebase.jsonで設定されたポート(5001等)へのアクセスURLを設定

firebase.jsの設定

firebase.js

functionsの起動

ターミナル

functions> funcitions emulators:start

ターミナルに表示されている内容を確認し、適宜訂正

状況を確認