FirebaseはGoogleが提供する開発プラットフォームです。Firebaseを効果的に使うことで、開発のスピードを上げてコストを削減できる可能性があります。
例えば、Firebase Authenticationを使えば簡単に会員制サイトを構築できますし、Firebase Realtime Databaseを使えば自社でDBサーバを用意しなくてもデータの保存が可能です。
Firebase Local Emulator Suiteは、Firebaseのサービスをローカル環境で使うためのエミュレータです。
開発の段階から本番環境のサービスを使う場合、テスト用のデータを外部から見られたり、開発中もコストが発生したりと、不都合があるかもしれません。エミュレータを使うことで、本番環境にデータをアップロードせずに、ローカル環境でFirebaseを試せます。
この記事では、Firebase Local Emulator Suiteを使うために最初に行う設定を紹介します。なお、プログラミング言語はReactおよびTypeScriptを使用します。
- 間違っている可能性もあるので自己責任で参考にしてください。
- ReactやTypeScriptの基本的な部分などは省略しています。
- 事前にNode.jsのインストールが必要です。
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
npmを使う場合、Firebase CLIのコマンドを使うにはpackage.jsonのscriptsに登録する必要があります。一方でnpxを使う場合、事前に登録しなくてもコマンドを実行できます。
Firebaseのアカウント登録とプロジェクトの作成
Firebaseのエミュレータを使う場合、Firebaseのサイトでアカウント登録を行い、プロジェクトの作成とアプリの追加を行う必要があります。
Firebaseのサイトに行き、先ほどのGoogleアカウントでアカウント登録を行います。
現時点では、無料のSparkプランと有料のBlazeプランがあります。Sparkプランの方は、使用量や利用できる機能に制限があります。とりあえず試すだけならSparkプランで良いと思います。
Firebaseの管理画面から、プロジェクトの作成とアプリの追加を行います。すると、プロジェクトIDやウェブAPIキーなどが発行されるので、後述するエミュレータの接続で使います。
Firebaseプロジェクトの初期化とエミュレータのセットアップ
以下のコマンドで、Firebaseのプロジェクトを初期化します。
npx firebase init
セットアップが始まって下記のように質問が表示されるので、順番に回答していきます。
質問の内容はバージョンなどによって変わる可能性があります。質問と回答はあくまでもサンプルなので、ご自身の環境に合わせて修正してください。
Are you ready to proceed?
y
Which Firebase features do you want to set up for this directory?
Emulators: Set up local emulators for Firebase products
※セットアップする機能をスペースで選択。ここではエミュレータだけを選択。
Please select an option
Use an existing project
Select a default Firebase project for this directory
先ほどFirebaseの管理画面で作成したプロジェクトを選択
※作業ディレクトリとFirebaseのプロジェクトを紐づけ
Which Firebase emulators do you want to set up?
Authentication Emulator
Database Emulator
※使用するエミュレータの機能。ここではAuthenticationとRealtime Databaseを選択。
Which port do you want to use for the auth emulator?
何も入力せずEnterを押す(デフォルトの9099番ポートが使用される)
※Authenticationのエミュレータのポート番号
Which port do you want to use for the database emulator?
何も入力せずEnterを押す(デフォルトの9000番ポートが使用される)
※Realtime Databaseのエミュレータのポート番号
Would you like to enable the Emulator UI?
y
Which port do you want to use for the Emulator UI
何も入力せずEnterを押す(空いているポートが使用される)
※エミュレータの管理画面のポート番号
Would you like to download the emulators now?
y
セットアップが完了すると、firebase.jsonと.firebasercが生成されます。firebase.jsonには、先ほど設定したエミュレータのポート番号などが記述されています。
エミュレータを使うには、JDK(Java)がインストールされている必要があります。未設定の場合には、JDKのインストールおよびPATHの設定を行ってください。
JDKのダウンロード
https://jdk.java.net/
JDKのインストールおよびPATHの設定(参考サイト)
https://www.javadrive.jp/start/install/index1.html
エミュレータの起動
セットアップが完了したので、以下のコマンドでエミュレータを起動します。
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=""
- 環境変数は「REACT_APP_」という文字で始まる必要があります。
- REACT_APP_AUTHDOMAINにポート番号を含めると「Firebase: Error (auth/argument-error)」というエラーが発生しました。ポート番号を削除するとエラーが消えると思います。
- 環境変数を書き換えた場合、「ctrl+c」で開発サーバを停止して再起動しないと反映されません。
- 「.env.local」といった本番環境用の環境変数が別途必要です。
上記の環境変数をプログラムから読み込みますが、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ライブラリを削除するという移行の流れになると思います。