Firebaseエミュレータを使ってみた(Firestore編)

はじめに

Firebaseを利用したWebアプリ開発でDBとしてFirestoreを利用しています。 開発中の動作確認として、FirebaseエミュレータのFirestoreを利用してみました。

環境情報

$ sw_vers
ProductName:    macOS
ProductVersion: 12.3
BuildVersion:   21E230

$ node -v
v16.14.0

$ npm -v
8.5.4

• package.json
  • 動作確認(2022-04-11)時点では、firebase-tools内のminimistのバージョンが1.2.5
    • クリティカルエラーとなるため、1.2.6に強制変更

"dependencies": {
  // (省略)
  "firebase": "^9.6.10"
},
"devDependencies": {
  // (省略)
  "firebase-tools": "^10.6.0"
},
"overrides": {
  "minimist@1.2.5": "^1.2.6"
}

エミュレータの初期設定

エミュレータをインストールします。 インストール設定はfirebase.jsonに反映されます。

$ npx firebase init

# エミュレータを選択
? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm yo
ur choices. (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
 ◯ Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
 ◯ Hosting: Set up GitHub Action deploys
 ◯ Storage: Configure a security rules file for Cloud Storage
❯◉ Emulators: Set up local emulators for Firebase products
 ◯ Remote Config: Configure a template file for Remote Config
 ◯ Realtime Database: Configure a security rules file for Realtime Database and (optionally) provision default instance
 ◯ Firestore: Configure security rules and indexes files for Firestore

# 利用するエミュレータの選択: 今回はFirestoreのみ
? Which Firebase emulators do you want to set up? Press Space to select emulators, then Enter to confirm your choices. (Pres
s <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
❯◯ Authentication Emulator
 ◯ Functions Emulator
 ◉ Firestore Emulator
 ◯ Database Emulator
 ◯ Hosting Emulator
 ◯ Pub/Sub Emulator
 ◯ Storage Emulator

# ポート設定
? Which Firebase emulators do you want to set up? Press Space to select emulators, then Enter to confirm your choices. Firestore Emulator
? Which port do you want to use for the firestore emulator? 8080
? Would you like to enable the Emulator UI? Yes
? Which port do you want to use for the Emulator UI (leave empty to use any available port)?
? Would you like to download the emulators now? (y/N) y # エミュレータのインストール

エミュレータ起動

初回起動

初回起動は何もデータがないので、とりあえず起動

# 起動コマンド
$ npx firebase emulators:start

...
# エミュレータの画面(UI)を有効にしたので、以下のURLで確認できる
┌─────────────────────────────────────────────────────────────┐
│ ✔  All emulators ready! It is now safe to connect your app. │
│ i  View Emulator UI at http://localhost:4000                │
└─────────────────────────────────────────────────────────────┘

# Hostingはデプロイのため、元々設定していたので、表示されるが、今回は関係なし
┌───────────┬────────────────┬─────────────────────────────────┐
│ Emulator  │ Host:Port      │ View in Emulator UI             │
├───────────┼────────────────┼─────────────────────────────────┤
│ Firestore │ localhost:8080 │ http://localhost:4000/firestore │
├───────────┼────────────────┼─────────────────────────────────┤
│ Hosting   │ localhost:5000 │ n/a                             │
└───────────┴────────────────┴─────────────────────────────────┘
  Emulator Hub running at localhost:4400
  Other reserved ports: 4500

Issues? Report them at https://github.com/firebase/firebase-tools/issues and attach the *-debug.log files.

• Firestoreのデータ管理画面(http://localhost:4000/firestore)にアクセスして、データを作成できます。
  • 実際のFirestoreとはUIが異なります。(2022-04-14現在)

Firestoreのエミュレータ画面

エミュレータ上のデータについて

データのエクスポート

作成したデータを出力します。

(リポジトリ管理している場合はignore設定にエクスポートするフォルダを追加することを忘れずに)

$ npx firebase emulators:export <エクスポート先フォルダ>

生成されたデータ

コマンドを実行すると、フォルダ内にデータが生成されます。 生成されたデータはバイナリっぽいです。

<エクスポート先フォルダ>
├── firebase-export-metadata.json
└── firestore_export
    ├── all_namespaces
    │   └── all_kinds
    │       ├── all_namespaces_all_kinds.export_metadata
    │       └── output-0
    └── firestore_export.overall_export_metadata

データのインポート

一旦エミュレータを終了し、以下のコマンドで再起動します。

$ npx firebase emulators:start --import=<エクスポート先フォルダ>

まとめ

次回以降は以下のコマンドで、エミュレータ上のデータをそのまま利用できます。 エミュレータの起動コマンドのオプションはこちらに記載があります。

$ npx firebase emulators:start --import=<エクスポート先フォルダ> --export-on-exit=<エクスポート先フォルダ>

参考情報

• 公式ドキュメント