Firebaseエミュレータの使い方を実例で解説（起動・停止・データ保存・仮想コンソールへのアクセス方法）

firebase init

{
  "firestore": {
    "database": "(default)",
    "location": "asia-northeast1",
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "emulators": {
    "firestore": {
      "port": 8080
    },
    "ui": {
      "enabled": true
    },
    "singleProjectMode": true
  }
}

#Firebaseエミュレーターを使わない場合はfalseにする
NEXT_PUBLIC_USE_FIREBASE_EMULATOR=true

import { initializeApp } from "firebase/app";
import { getFirestore, connectFirestoreEmulator } from "firebase/firestore";  //connectFirestoreEmulatorを追加
import { getAuth, connectAuthEmulator } from "firebase/auth";                 //connectAuthEmulatorを追加
import { getFunctions, connectFunctionsEmulator } from "firebase/functions";  //connectFunctionsEmulatorを追加
import { getStorage, connectStorageEmulator } from "firebase/storage";        //connectStorageEmulatorを追加

// localhostの場合、接続先をエミュレーターに切り替える
if (process.env.NEXT_PUBLIC_USE_FIREBASE_EMULATOR === 'true' && process.env.NODE_ENV === 'development') {
  
  connectFirestoreEmulator(db, "localhost", 8080);
  connectAuthEmulator(auth, "http://localhost:9099");
  connectFunctionsEmulator(functions, "localhost", 5001);
  connectStorageEmulator(storage, "localhost", 9199);
  
}

import { initializeApp, getApps } from "firebase/app";
import { getFirestore, connectFirestoreEmulator } from "firebase/firestore";  //connectFirestoreEmulatorを追加
import { getAuth, connectAuthEmulator } from "firebase/auth";                 //connectAuthEmulatorを追加
// import { getFunctions, connectFunctionsEmulator } from "firebase/functions";  //connectFunctionsEmulatorを追加
// import { getStorage, connectStorageEmulator } from "firebase/storage";        //connectStorageEmulatorを追加

//process.envで環境変数を読み込む
const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};


//各サービスのインスタンスを作成
//// Next.jsは開発中に何度もリロードされるため、二重初期化を防ぐこの書き方が推奨されます
const app = getApps().length === 0 ? initializeApp(firebaseConfig) : getApps()[0];

const db = getFirestore(app);
const auth = getAuth(app);


// 開発環境の場合、接続先をエミュレーターに切り替える（本番につなぎたい場合は.env.localの変数をfalseにする）
if (process.env.NEXT_PUBLIC_USE_FIREBASE_EMULATOR === 'true' && process.env.NODE_ENV === 'development') {
  
  connectFirestoreEmulator(db, "localhost", 8080);
  connectAuthEmulator(auth, "http://localhost:9099");
  // connectFunctionsEmulator(functions, "localhost", 5001);
  // connectStorageEmulator(storage, "localhost", 9199);
  
}

export { app, db, auth };

if (process.env.NEXT_PUBLIC_USE_FIREBASE_EMULATOR === 'true' && process.env.NODE_ENV === 'development') {・・・}

if (process.env.NODE_ENV === 'development') {・・・}

if (location.hostname === "localhost") {・・・}

if (typeof window !== "undefined" && window.location.hostname === "localhost") {・・・}

firebase emulators:start

firebase emulators:start --import=./saved-data --export-on-exit