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で記述しているが、環境に合わせて、書き直してください)
<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のコードは以下のようになります。
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などもお試しください。