firebaseでエミュレーターを起動する

こんにちは、アプリケーション開発部門の岡田です。

現在自分はあるプロジェクトの作り始めにいるのですが、基本的に自分の会社ではバックエンドのfirebaseを使用して開発しています。
本番にデプロイするまでのテストの過程でvitestというテストツールも使いますが、より本番環境に近い状況での使用を確認するためにエミュレーターも使用しています。

そのため今回はその使用方法についてお話ししたい思います。
なお使用しているのは大まかに以下の４つです。
・vue3
・vite
・firebase
・typescript

ではfirebaseの初期設定はすでに終わっている体で話を進めていきます。

まず現在あるプロジェクトにてfirebase emulatorsの初期設定を行います。
ターミナルを起動し、プロジェクトのルートディレクトリ上でfirebase init emulatorsと入力してください。

すると次にどのエミュレータを使用するかの選択肢が表示されるので使いたいものを選んでください。



セットアップが完了したら、まずプロジェクト自体をローカル環境で起動します。その上でfirebase emulators:startと打ってみましょう。



UI画面ではエミュレーターの種類が並んでいると思います。もし仮にやっぱりstorageも使いたかった！となっても問題ありません。firebase init emulatorsと打つことで、再度使いたいemulatorsの種類を選び直すことができます。

さあこれでエミュレーターを使えるぞ！と思いきやまだ使えません。。。
init Firebaseされているファイル内で、emulatorへと繋げる処理を加えなければなりません。
今回自分はAuthentication,functions,firestoreの三つでテストしたかったのでこの三つを呼び出しています。
isEmulatorを定義しているのは、この部分をtrue,falseで切り替えることで簡単にemulator環境へと切り替えるためです。



これをセットした状態で、再度firebase emuators:startと打ってみましょう（先ほど起動したままなら念のため一旦ctrl+cでエミュレーターを止めて、再度起動してみましょう）

その状態で、起動しているプロジェクトのvueのlocalhostページをのぞいてみると。。。



画面下にエミュレーター起動中の文字が！これで実際のdbではなくエミュレータの仮想dbにつながることができました。
 

【Authenticationのテスト】

試しにAuthenticationのログイン機能を試してみます。

まずはエミュレーターUI上でAuthenticationタグをクリック。そしてAdd userをクリックしましょう。
ここで最低限の情報を設定します。Display name,Email(optional),passwordぐらいでいきましょう。
それでsaveすることでユーザー情報が追加されます。



次にプロジェクトのページ内にクリックイベントを追加します。
そのクリックイベントをトリガーにfirebaseで用意されている関数を使ったログインを実験してみます。
うまくいけばconsole上にユーザー情報が返ってきます。




ユーザー情報が表示されています！成功です！

【CloudFunctionのテスト】

続いてCloudFunctionのエミュレーターでのテストもやってみます。
functionsフォルダ内に関数を書き保存。



今回は単純なHello,Cloud Functions!とメッセージが表示されるhelloWorld関数を用意しました。
どれだけ関数は動いているかなとエミュレーターのUIタブからfunctionsの画面をのぞいてみます。

。。。って、あれ？関数名がないけど、動いてるの？
一度emulatorを止めて再起動してみます。しかしターミナル上でも先ほど用意した関数の名前の名の字も表示されていません。

実はこのままではCloud Functionsの関数をエミュレータ上で確認することはできません。
一度tsで書かれた内容をjsにコンパイルする必要があります。

そのためプロジェクトのpackage.json内に記載のbuildコマンドを実行し、一度コンパイルしてあげます。

その上でfirebase emulators:startとしてあげると。。。。
ターミナル上に関数名が表示されました！



続いてUI画面上では。。。



出ています！

では試しにこのhelloWorld関数を呼び出してみます。
新たにターミナルを起動し、その中でcurlを使用し関数を呼び出してみます。



成功です！
emulatorのUI側にも関数を起動した時間が記録されたものが更新されているのを確認できると思います。

firebaseの設定含め、何かと初期設定が自分は苦手なので備忘録も兼ねて紹介させていただきました。
見た方への助けとなれば幸いです。

それではまた！