Firebase Local Emulator Suiteの設定方法

FirebaseはGoogleが提供する開発プラットフォームです。Firebaseを効果的に使うことで、開発のスピードを上げてコストを削減できる可能性があります。

例えば、Firebase Authenticationを使えば簡単に会員制サイトを構築できますし、Firebase Realtime Databaseを使えば自社でDBサーバを用意しなくてもデータの保存が可能です。

Firebase Local Emulator Suiteは、Firebaseのサービスをローカル環境で使うためのエミュレータです。

開発の段階から本番環境のサービスを使う場合、テスト用のデータを外部から見られたり、開発中もコストが発生したりと、不都合があるかもしれません。エミュレータを使うことで、本番環境にデータをアップロードせずに、ローカル環境でFirebaseを試せます。

この記事では、Firebase Local Emulator Suiteを使うために最初に行う設定を紹介します。なお、プログラミング言語はReactおよびTypeScriptを使用します。

Reactのプロジェクトを作成

create-react-appを使うと、プロジェクトのひな型を作成できます。プロジェクト名は「firebase-test」にしていますが、自由に変えてください。

npx create-react-app firebase-test --template typescript --use-npm

「--template typescript」のオプションをつけると、デフォルトでTypeScriptを利用できます。

パッケージマネージャーはyarnがインストールされている環境ではデフォルトでyarnが使われます。npmを使いたい場合は「--use-npm」のオプションをつけます。この記事ではnpmをベースにするので、yarnの場合はコマンドを書き換えてください。

以下のコマンドで、開発サーバを立ち上げます。

cd firebase-test
npm start

「http://localhost:3000/」にアクセスしてReactの初期画面が表示されれば成功です。

詳細な設定

上記でプロジェクトの作成は終了ですが、以下のような詳細な設定は必要に応じて自由に行ってください。

Source Mapの無効化

デフォルトではビルドするとSource Mapが生成されて、ブラウザの開発者ツールなどを利用して第三者がソースを閲覧できます。それを防ぐため、.envファイルの環境変数でSource Mapの生成を無効化します。

GENERATE_SOURCEMAP=false

「.env.production」に記述した環境変数は、デフォルトでは「npm run build」でビルドを実行したときに読み込まれます。本番環境のみSource Mapを生成させないため、「.env.production」に記述しています。

必要なパッケージのインストール

例えば、React Routerを使う場合は以下のコマンドでインストールできます。

npm install react-router-dom
npm install @types/react-router-dom

Firebaseの初期設定

Firebaseのインストール

まずは、Firebase CLIをインストールします。

Firebase CLIは、Firebaseの開発に必要な様々なツールを提供します。これによってfirebaseコマンドが利用できるようになります。

npm install -D firebase-tools

node_modulesフォルダにインストールされます。「-D」オプションをつけると、package.jsonのdevDependenciesに追加されます。

次に、Firebaseの本体をインストールします。

npm install firebase

Firebaseに対してGoogleアカウントで認証を行います。Firebaseの使用やエラーについてレポートの送信を許可するか聞かれるので、YesかNoで回答します。

npx firebase login

Firebaseのアカウント登録とプロジェクトの作成

Firebaseのエミュレータを使う場合、Firebaseのサイトでアカウント登録を行い、プロジェクトの作成とアプリの追加を行う必要があります。

Firebaseのサイトに行き、先ほどのGoogleアカウントでアカウント登録を行います。

https://firebase.google.com/

現時点では、無料のSparkプランと有料のBlazeプランがあります。Sparkプランの方は、使用量や利用できる機能に制限があります。とりあえず試すだけならSparkプランで良いと思います。

Firebaseの管理画面から、プロジェクトの作成とアプリの追加を行います。すると、プロジェクトIDやウェブAPIキーなどが発行されるので、後述するエミュレータの接続で使います。

Firebaseプロジェクトの初期化とエミュレータのセットアップ

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

npx firebase init

セットアップが始まって下記のように質問が表示されるので、順番に回答していきます。

セットアップが完了すると、firebase.jsonと.firebasercが生成されます。firebase.jsonには、先ほど設定したエミュレータのポート番号などが記述されています。

エミュレータを使うには、JDK（Java）がインストールされている必要があります。未設定の場合には、JDKのインストールおよびPATHの設定を行ってください。

エミュレータの起動

セットアップが完了したので、以下のコマンドでエミュレータを起動します。

npx firebase emulators:start

「http://localhost:4000」のURLにアクセスすると、エミュレータの管理画面が表示されます。（ポート番号は変わる可能性があります）

エミュレータの停止

エミュレータを起動しようとすると、以下のエラーが出て起動できないことがあります。

Error: Could not start Database Emulator, port taken.

前回エミュレータを起動したときのプロセスが正常に終了しておらず、ポートが空いていないことが原因と思われます。そのため、以下のコマンドでプロセスを終了させると起動が成功します。

npx kill-port 9000, 9099

エミュレータの接続

エミュレータの起動までできたら、プログラムからエミュレータに接続します。

まずは、プロジェクトのルートに「.env.development.local」というファイルを作り、Firebaseに接続するための環境変数を定義します。

Firebaseのサイトにログインして作成したアプリを表示すると、記載する内容が書かれています。以下はサンプルなので、それぞれの値を書き換えてください。エミュレータを使うサービスに関しては、ドメイン名の部分が「localhost」になります。

REACT_APP_APIKEY=""
REACT_APP_AUTHDOMAIN="localhost"
REACT_APP_DATABASEURL="http://localhost:9000/?ns=プロジェクトID"
REACT_APP_PROJECT_ID=""
REACT_APP_STORAGE_BUCKET=""
REACT_APP_MESSAGING_SENDER_ID=""
REACT_APP_APP_ID=""

上記の環境変数をプログラムから読み込みますが、Firebaseのバージョンによって書き方が変わります。そこで、インストールされているFirebaseのバージョンを調べます。

npx firebase --version

記載時点ではバージョン9が最新です。バージョン9はバージョン8よりも軽量で、バージョン8の開発は将来的に凍結されると公式サイトに記載されています。

そのため、現在はバージョン9が推奨されており、デフォルトではバージョン9がインストールされます。

バージョン9の場合、firebase.tsといったファイルを作成して、以下のような接続処理を記述します。「process.env.環境変数名」で環境変数の値を取得できます。

import { initializeApp } from "firebase/app";
import { getAuth, connectAuthEmulator } from "firebase/auth";
import { getDatabase, connectDatabaseEmulator } from "firebase/database";

const firebaseConfig = {
	apiKey: process.env.REACT_APP_APIKEY,
	authDomain: process.env.REACT_APP_AUTHDOMAIN,
	databaseURL: process.env.REACT_APP_DATABASEURL,
	projectId: process.env.REACT_APP_PROJECT_ID,
	storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
	messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
	appId: process.env.REACT_APP_APP_ID,
};

const app = initializeApp(firebaseConfig);

export const db = getDatabase(app);
export const auth = getAuth(app);
if (window.location.hostname === "localhost") {
	connectDatabaseEmulator(db, "localhost", 9000);
	connectAuthEmulator(auth, "http://localhost:9099");
}

Firebase AuthenticationとRealtime Databaseを使う場合の書き方です。別のサービスも使用する場合は修正してください。

参考として、バージョン8の書き方も紹介しておきます。

import firebase from "firebase/app";
import "firebase/auth";
import "firebase/database";

const firebaseConfig = {
	apiKey: process.env.REACT_APP_APIKEY,
	authDomain: process.env.REACT_APP_AUTHDOMAIN,
	databaseURL: process.env.REACT_APP_DATABASEURL,
	projectId: process.env.REACT_APP_PROJECT_ID,
	storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
	messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
	appId: process.env.REACT_APP_APP_ID,
};

firebase.initializeApp(firebaseConfig);

export const db = firebase.database();
export const auth = firebase.auth();
if (window.location.hostname === "localhost") {
	db.useEmulator("localhost", 9000);
	auth.useEmulator("http://localhost:9099");
}

Firebaseのバージョンアップ

上記のように、バージョン8とバージョン9では様々な違いがあります。

そのため、現在バージョン8で稼働しているシステムをバージョン9に移行したい場合、単純にFirebaseのバージョンを入れ替えるだけではなく、ソースコード上のメソッドなども修正する必要があります。

書き換える部分が多い場合、移行用のCompatライブラリが用意されています。Compatライブラリを使用するには、以下のようにimportを書き換えます。

import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/database";

試していないので分かりませんが、Compatライブラリを使うとバージョン9のFirebase上でバージョン8のプログラムが動くと思います。そのため、少しずつメソッドなどをバージョン9に合わせて書き換えていき、最終的にCompatライブラリを削除するという移行の流れになると思います。