Firebase をローカルで使うエミュレーターの起動、シードデータの設定、データの永続化方法

• 2023年11月28日
• Firebase,
• Developer Experience

ローカルに自分だけが使える Firebase を起動して、チームメンバーに影響を与えず色々と実験したい場合はありませんか？すでにそういった環境を用意している人でも、エミュレーターを起動するたびにデータを入れ直すことを煩わしく思ってる人もいるのではないでしょうか？

本記事では、Firebase をローカルで使うためのエミュレーターの起動方法から、エミュレーターへのシードデータのインポート方法や、終了後のデータの永続化方法を解説します。

Firebase プロジェクトを初期化 #

Firebase エミュレーターを使うと、ローカルで開発用の Firebase を起動できます。エミュレーターを使うには、ローカルで Firebase プロジェクトを初期化する必要があります。プロジェクトの初期化には Firebase の CLI コマンドが必要です。インストールしていなければ以下のコマンドでインストールします。

$ npm install -g firebase-tools

以下のコマンドで Firebase プロジェクトを初期化します。

$ firebase init

コマンドを実行すると、以下のようにどの Firebase の機能を使うかを尋ねられます。カーソルキーの上下で矢印を動かし、スペースキーで選択します。

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  /path/to/your-project

? Which Firebase features do you want to set up for this directory? Press
Space to select features, then Enter to confirm your choices. (Press <space>
to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
❯◯ Realtime Database: Configure a security rules file for Realtime Database
and (optionally) provision default instance
 ◯ Firestore: Configure security rules and indexes files for Firestore
 ◯ Functions: Configure a Cloud Functions directory and its files
 ◯ Hosting: Configure files for Firebase Hosting and (optionally) set up
 GitHub Action deploys
 ◯ Hosting: Set up GitHub Action deploys
(Move up and down to reveal more choices)

開発中のアプリで使用する機能の他に、エミュレーター（Emulators: Set up local emulators for Firebase products）も忘れず選択します。

質問に答えていくと、以下のようにどのエミュレーターを使うかを尋ねられます。アプリで使用している機能と同じエミュレーターを選択しましょう。

=== Emulators Setup
? Which Firebase emulators do you want to set up? Press Space to select
emulators, then Enter to confirm your choices. (Press <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

Firebase エミュレーターの起動 #

Firebase CLI の emulators:exec コマンドを使うと、エミュレーターを起動しながら任意のコマンドを実行できます。アプリの開発サーバーに Vite を使っていれば、以下のコマンドでエミュレーターと開発サーバーの両方を起動できます。

$ firebase emulators:exec --ui "VITE_USE_EMULATORS=true vite"

--ui オプションを付けることで、http://localhost:4000 にエミュレーター UI が立ち上がります。ブラウザーからアクセスして、データを確認したり、更新したりできます。

VITE_USE_EMULATORS=true は必須ではありませんが、アプリのコードでエミュレーターに接続するかどうかを分岐するためにセットします。エミュレーターの挙動は Firebase 本体と異なる場合があるため、環境変数などで切りかえられるようにすると便利です。

アプリのコードでは、Firebase の初期化時にエミュレーターに接続するための関数を呼びます。先ほどセットした VITE_USE_EMULATORS に値が入っていれば、connectFirestoreEmulator や connectAuthEmulator を呼び出してエミュレーターに接続します。

import { initializeApp } from 'firebase/app'
import { getAuth, connectAuthEmulator } from 'firebase/auth'
import {
  initializeFirestore,
  connectFirestoreEmulator,
} from 'firebase/firestore'

// Firebase の初期化
const app = initializeApp({
  // ...
})

// Firestore
export const db = initializeFirestore(app)

// Authentication
export const auth = getAuth(app)

// 環境変数が指定されていればエミュレーターに接続する
if (import.meta.env.VITE_USE_EMULATORS) {
  connectFirestoreEmulator(db, '127.0.0.1', 8080)
  connectAuthEmulator(auth, 'http://127.0.0.1:9099', { disableWarnings: true })
}

ここまでで Firebase エミュレーターの起動と、アプリからエミュレーターへの接続ができ、開発を進められます。しかし、エミュレーターは終了すると保存されたデータがすべて破棄されるため、エミュレーターを起動し直すたびに必要なデータを追加する必要があります。例えば、ログインが必要なアプリであれば、毎回ユーザー登録を行わなければなりません。

こういった手間を削減するために、次の節では、エミュレーターにシードデータを追加する方法を解説します。

Firebase エミュレーターにシードデータを追加 #

前の節で起動したアプリ、または、エミュレーター UI（http://localhost:4000）を使って、シードにしたいデータを作成します。例えば、ユーザー登録後のデータをシードにしたければ、アプリでユーザー登録のフローを完了します。

その後、以下のコマンドを実行し、エミュレーターに保存されたデータをファイルとして emulator-seed ディレクトリにエクスポートします。

$ firebase emulators:export emulator-seed

エミュレーターの起動コマンドに --import=emulator-seed を追加し、次回以降の起動でエクスポートされたシードデータを読み込むようにします。

$ firebase emulators:exec --ui --import=emulator-seed "VITE_USE_EMULATORS=true vite"

Firebase エミュレーターのデータを永続化 #

単にエミュレーターの終了後もデータを保持したいだけの場合は、以下のように --import と --export-on-exit の両方を指定します。エミュレーターの終了時にデータを保存し、次回の起動では保存したデータをそのまま読み込みます。

$ firebase emulators:exec --ui --import=emulator-data --export-on-exit "VITE_USE_EMULATORS=true vite"

結論 #

Firebase で開発を始める時はリモートの Firebase をそのまま使う場合が多いと思いますが、開発が進んでくると、本記事で紹介したようなエミュレーターが必要な場面もでてきます。シードデータを用意したり、エミュレーターの終了後もデータを永続化することは地味ですが、開発者体験を向上させるために重要です。アプリ自体の開発だけでなく、こういった環境整備もこまめにやることで生産性を高く保ったまま開発が進められるでしょう。