Firestore ローカルエミュレーター

Firebase Local Emulator Suite は、Cloud Firestore、Realtime Database、Cloud Storage for Firebase、Authentication、Firebase Hosting、Cloud Functions、Pub/Sub、および Firebase Extensions を提供するローカル用の開発エミュレーターです。今回は、Firestore ローカルエミュレーターのセットアップと接続方法を紹介します。

Firestore エミュレーターのセットアップ

まず、Firebase CLI をインストールする必要があります

curl -sL https://firebase.tools | bash

インストール中に、ログインプロンプトが自動的に表示されるので、Google アカウントを使用してログインします。ログインプロンプトが表示されない場合は、firebase logout と firebase login を使用してログインします。

次に、Firebase プロジェクトを初期化します。

mkdir firebase-test

cd firebase-test

firebase init

次の手順に進む前に、Firebase Console で Firebase プロジェクトを作成していることを確認してください。以下のページで、Emulators: Set up local emulators for Firebase products を space キーを使用して選択し、Enter キーを使用して次のページに進みます。

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

You are about to initialize a Firebase project in this directory:

? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices. (Pre
ss <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
 ◯ Storage: Configure a security rules file for Cloud Storage
 ◯ Emulators: Set up local emulators for Firebase products
(Move up and down to reveal more choices)

プロジェクトのセットアップで、Web コンソールで作成した Firebase プロジェクトを選択します。次の選択肢で、すべてのオプションをデフォルトのままにしておきます。

=== Project Setup

First, let us associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we will just set up a default project.

? Please select an option: (Use arrow keys)
❯ Use an existing project
  Create a new project
  Add Firebase to an existing Google Cloud Platform project
  Do not set up a default project

初期化後、以下のコマンドを使用してローカル Firestore エミュレーターを起動します。

firebase emulators:start

以下のプロンプトが表示されたら、すべてのセットアップは成功です。おめでとうございます！

i  emulators: Starting emulators: firestore
i  firestore: Firestore Emulator logging to firestore-debug.log
✔  firestore: Firestore Emulator UI websocket is running on 9150.
i  ui: Emulator UI logging to ui-debug.log

┌─────────────────────────────────────────────────────────────┐
│ ✔  All emulators ready! It is now safe to connect your app. │
│ i  View Emulator UI at http://127.0.0.1:4000/               │
└─────────────────────────────────────────────────────────────┘

┌───────────┬────────────────┬─────────────────────────────────┐
│ Emulator  │ Host:Port      │ View in Emulator UI             │
├───────────┼────────────────┼─────────────────────────────────┤
│ Firestore │ 127.0.0.1:8080 │ http://127.0.0.1:4000/firestore │
└───────────┴────────────────┴─────────────────────────────────┘
  Emulator Hub running at 127.0.0.1:4400
  Other reserved ports: 4500, 9150

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

Firebase ローカルエミュレータに接続する

node.js プロジェクトを初期化しましょう。先ほど作成した firebase-test ディレクトリ内で、次のコマンドを実行します。

npm init

npm install firebase

add-data.js という名前のファイルを作成します。このスクリプトは、データをローカルの Firestore に入力します。

// add-data.js

const firebaseConfig = {
  projectId: "<you-project-id>",
};
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
connectFirestoreEmulator(db, 'localhost', 8080);

const citiesRef = collection(db, "cities");

await setDoc(doc(citiesRef, "SF"), {
  name: "San Francisco", state: "CA", country: "USA",
  capital: false, population: 860000,
  regions: ["west_coast", "norcal"]
});

以上のデータは、Firestore エミュレーターの UI で確認できます。

query-data.js という名前のファイルを作成します。このスクリプトは Firestore のデータにアクセスします。

// query-data.js

const firebaseConfig = {
  projectId: "<you-project-id>",
};
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
connectFirestoreEmulator(db, 'localhost', 8080);

const docRef = doc(db, "cities", "SF");
const docSnap = await getDoc(docRef);

if (docSnap.exists()) {
  console.log("Document data:", docSnap.data());
} else {
  console.log("No such document!");
}

Reference

備考

Hakky ではエンジニアを募集中です！まずは話してみたいなどでも構いませんので、ぜひお気軽に採用ページからお問い合わせくださいませ。

Firestore ローカル エミュレーター