Firebase Local Emulator Suiteについて

firebaseを開発環境で繋げてる時、クレジットカード登録しているし、使いすぎたら怖くない？？
ローカル環境で、firebase使えたらいいなーーーー。
そんな時に使えるのが、Firebase Local Emulator Suiteです

Firebase Local Emulator Suite は、アプリのビルドとテストをローカルで行うことのできる、デベロッパー向けの高度なツールセットです。使用できる機能には、Cloud Firestore、Realtime Database、Cloud Storage for Firebase、Authentication、Firebase Hosting、Cloud Functions（ベータ版）、Pub/Sub（ベータ版）、Firebase Extensions（ベータ版）があります。充実したユーザーインターフェースを備えており、アプリの本稼働やプロトタイピングにかかる時間を短縮できます。
-- Firebase ローカルエミュレータスイートの概要

The Firebase Local Emulator Suite is a set of advanced tools for developers looking to build and test apps locally using Cloud Firestore, Realtime Database, Cloud Storage for Firebase, Authentication, Firebase Hosting, Cloud Functions (beta), Pub/Sub (beta), and Firebase Extensions (beta). It provides a rich user interface to help you get running and prototyping quickly.
-- Introduction to Firebase Local Emulator Suite

Get Started

インストールのやり方について

インストール方法については、公式ドキュメントに従ってやっていきます。
公式ドキュメント

Emulator Suite をインストールする前に、以下が必要です。
Node.js バージョン 16.0 以降。
Java JDK バージョン 11 以降。

Emulator Suite をインストールするには:
1.Firebase CLI をインストールします。Firebase CLI をまだインストールしていない場合は、インストールしてください。Emulator Suite を使用するには、CLI バージョン 8.14.0 以降が必要です。次のコマンドを使用して、インストールしたバージョンを確認できます。

firebase --version

2.まだ行っていない場合は、画面の指示に従って使用するサービスを指定し、現在の作業ディレクトリを Firebase プロジェクトとして初期化します。

firebase init

3.Emulator Suite を設定します。このコマンドにより構成ウィザードが起動します。目的のエミュレータを選択し、対応するエミュレータのバイナリファイルをダウンロードして、デフォルトが適切でない場合はエミュレータポートを設定します。

firebase init emulators

エミュレータがインストールされると、Firebase CLI のバージョンを更新するまで、アップデートのチェックは行われず、追加の自動ダウンロードも行われません。

試しにAuthenticationを使ってみる

まずは、emulatorは無視して、公式ドキュメント通りに、firebaseのセットアップをしてください。

セットアップ時に以下のようにコードを記述しているはずです。

import { initializeApp } from 'firebase/app';

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);
}

ローカルでAuthenticationを使えるようにしよう

import { initializeApp } from 'firebase/app';
import { getAuth, connectAuthEmulator } from "firebase/auth";   // 追加
// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);

// 以下を追加
const isEmulating = window.location.hostname === "localhost";
  if (isEmulating) {
    const auth = getAuth(app);
    connectAuthEmulator(auth, "http://localhost:9099/auth");  // port番号は、自身で設定したものを用いる
  }

これで準備完了

入力フォームを作成(vueで記述しているが、環境に合わせて、書き直してください)

html

<form @submit.prevent="handleRegister">
  <p>新規登録</p>
  <label for="email">メールアドレス:</label>
  <input type="email" id="email" v-model="email" required>

  <label for="password">パスワード:</label>
  <input type="password" id="password" v-model="password" required>

  <button type="submit">新規登録</button>
</form>

javascriptのコードは以下のようになります。

ts

import { ref } from 'vue';
import { createUserWithEmailAndPassword, getAuth } from "firebase/auth";

const email = ref('');
const password = ref('');


const handleRegister = () => {
  // 新規登録の処理をここに追加
  const auth = getAuth();
  createUserWithEmailAndPassword(auth, email.value, password.value)
  .then((userCredential) => {
    // Signed in
    authUser.value = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    // ..
  });
};

以上で、ローカル環境でfirebaseを使えるようになりました。
公式ドキュメントを参考にfirestoreなどもお試しください。

快適なfirebase開発を🖐️

参考サイト