Firebase Local Emulator Suiteを使ってみたときの備忘録。
初期設定
# バージョンの確認。CLIがv8.14.0以降じゃないと使えない。 $ firebase --version # Firebase自体の初期設定 $ firebase init # Emulator Suiteの初期設定 $ firebase init emulators
コマンドを実行すると、使うものを聞かれるので、選択して設定を完了する。
Nuxtアプリからエミュレータを使うようにする
エミュレータを使うかどうかは明示的に設定する必要がある。
// firebase.ts import firebase from "firebase/app"; import "firebase/auth"; import "firebase/firestore"; import "firebase/functions"; if (!firebase.apps.length) { // いつもの初期化 firebase.initializeApp({ apiKey: process.env.API_KEY, authDomain: process.env.AUTH_DOMAIN, projectId: process.env.PROJECT_ID, storageBucket: process.env.STORAGE_BUCKET, messagingSenderId: process.env.MESSAGING_SENDER_ID, appId: process.env.APP_ID, measurementId: process.env.MEASUREMENT_ID }); firebase.auth().useDeviceLanguage(); // Emulatorの有効化 if (process.env.NODE_ENV != "production") { // Authentication用の設定 firebase.auth().useEmulator("http://localhost:9099/"); // Cloud Functions用の設定 const functions = firebase.app().functions("asia-northeast1"); functions.useEmulator("localhost", 5001); // Firestore用の設定 firebase.firestore().settings({ host: "localhost:8081", ssl: false }); } } export default firebase;
各ポートは、firebase.json
に記載されているものを設定すればOK。
エミュレータを起動する
以下のコマンドを実行すると、設定したエミュレータが起動する。
$ firebase emulators:start
エミュレータを起動した状態で、
# nuxtアプリの起動
$ npm run dev
とすると、エミュレータに接続した状態で、動作確認ができるようになる。
エミュレータを停止するときは、Ctrl+C
で終了する。
エミュレータのデータを次回起動時にも残しておくようにする
なにもしないと、エミュレータを停止するとデータは削除される。
テスト用に初期データを用意しておきたい場合とかように、
エミュレータ内のデータをexport/importできるようになっている。
ただ、永続化できるのはFirestoreやRealtime Database限定。。
以下のオプションを使うと、
- 停止時にデータを
./.emulator
にexportし、(--export-on-exit
) - 起動時に
./.emulator
からimport(--import=./.emulator
)
してくれるようになる。
$ firebase emulators:start --import=./.emulator --export-on-exit
本番データをエミュレータ内に取り込む
import機能があるので、それを使うと本番データも取り込めるっぽい。
ネットワーク越しでもアクセスできるようにする
スマホでの確認とか、localhost以外からアクセスできるようにしたい場合は、
firebase.jsonにhost
を設定すればよいっぽい。
// firebase.json "emulators": { "auth": { "host": "0.0.0.0", "port": 9099 }, "firestore": { "host": "0.0.0.0", "port": 8081 }, "ui": { "enabled": true }, "functions": { "host": "0.0.0.0", "port": 5001 }, "hosting": { "host": "0.0.0.0", "port": 5000 } }
あとは、~/plugins/firebase.ts
やnuxt.config.ts
の設定を変えればOK。
// ~/plugins/firebase.ts // Emulatorの有効化 if (process.env.NODE_ENV != "production") { // Authentication用の設定 firebase.auth().useEmulator("http://192.168.0.2:9099/"); // Cloud Functions用の設定 const functions = firebase.app().functions("asia-northeast1"); functions.useEmulator("192.168.0.2", 5001); // Firestore用の設定 firebase.firestore().settings({ host: "192.168.0.2:8081", ssl: false }); }
// nuxt.config.ts import { NuxtConfig } from "@nuxt/types"; const config: NuxtConfig = { server: { port: 3000, host: "0.0.0.0" }, }; export default config;
ハマったところ
使ってみて、いくつかハマった。。
Cloud Functions
- ビルドしないと反映されない
- TypeScriptを使ってる場合、読み込んでいるのは、コンパイルされたjsなので、ビルドしないと反映されない。。
- Functions側は特に設定しなくてもOK。
エミュレータ上で起動しているときは、勝手に接続先がエミュレータになってる
Authentication
- ユーザのimport/export機能はない
- なので、Firestoreのデータだけが残る状態になる
- ユーザを都度作成する必要がある
少しつまずくところがあるけど、初期の確認などだとかなり便利(´ω`)
以上!!