Firebase Emulatorでローカル開発環境を構築する

Firebase開発で一番怖いのはこれ。

「気づかず本番プロジェクトに接続してしまう」

そこで本記事では Firebase Emulator Suite を Docker 上にフル構築し、

• Auth
• Firestore
• Storage
• Cloud Functions
• Pub/Sub

をローカルで再現します。

クラウド接続不要・課金ゼロ・安全な開発環境を実現します。

---

🎯 この記事でできること

• Firebase主要サービスをローカル再現
• 認証フローの動作確認
• Firestore / Storage の動作検証
• Functions連携テスト
• Pub/Subエミュレーター利用
• チームで同一環境共有
• 本番誤接続事故の防止

---

🏗 全体構成

Frontend / Backend
        ↓
Firebase Emulator Suite (Docker)
  ├ Auth
  ├ Firestore
  ├ Storage
  ├ Functions
  └ Pub/Sub

---

🐳 docker-compose.yml（環境変数で接続管理）

version: "3.9"

services:
  firebase:
    build: ./firebase
    ports:
      - "4000:4000"   # Emulator UI
      - "9099:9099"   # Auth
      - "8080:8080"   # Firestore
      - "9199:9199"   # Storage
      - "5001:5001"   # Functions
      - "8085:8085"   # Pub/Sub
    environment:
      GCLOUD_PROJECT: local-project
      FIRESTORE_EMULATOR_HOST: firebase:8080
      FIREBASE_AUTH_EMULATOR_HOST: firebase:9099
      FIREBASE_STORAGE_EMULATOR_HOST: firebase:9199
      PUBSUB_EMULATOR_HOST: firebase:8085
    volumes:
      - firebase_data:/root/.config/firebase

volumes:
  firebase_data:

---

🐳 firebase/Dockerfile

FROM node:18

WORKDIR /app
RUN npm install -g firebase-tools

COPY firebase.json .
COPY .firebaserc .

CMD firebase emulators:start \
  --project local-project \
  --import=./data \
  --export-on-exit

---

⚙️ firebase.json

{
  "emulators": {
    "auth": { "port": 9099 },
    "firestore": { "port": 8080 },
    "storage": { "port": 9199 },
    "functions": { "port": 5001 },
    "pubsub": { "port": 8085 },
    "ui": { "enabled": true, "port": 4000 }
  }
}

---

🧩 フロントエンド実装例（namespace API）

<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-storage.js"></script>

firebase.initializeApp({ projectId: "local-project" });

firebase.auth().useEmulator("http://localhost:9099");
firebase.firestore().useEmulator("localhost", 8080);
firebase.storage().useEmulator("localhost", 9199);

---

🛠 Backend（Admin SDK）

const admin = require("firebase-admin");

admin.initializeApp({
  projectId: process.env.GCLOUD_PROJECT,
});

---

🔥 Firestore 実装例

await firebase.firestore()
  .collection("users")
  .doc("user1")
  .set({ name: "local-user", role: "admin" });

const doc = await firebase.firestore()
  .collection("users")
  .doc("user1")
  .get();

console.log(doc.data());

---

📦 Storage 実装例

const fileRef = firebase.storage().ref("images/test.png");

await fileRef.put(file);

const url = await fileRef.getDownloadURL();
console.log(url);

---

☁️ Cloud Functions例

const functions = require("firebase-functions");

exports.createUserDoc = functions.auth.user().onCreate((user) => {
  const admin = require("firebase-admin");
  return admin.firestore().collection("users").doc(user.uid).set({
    email: user.email,
    createdAt: new Date(),
  });
});

---

⚠️ ハマりポイント

症状	原因
エミュレーター繋がらない	localhost指定ミス
Functions動かない	Nodeバージョン不一致
データ消える	--import/export未設定
Storage失敗	バケット名設定忘れ

---

💾 データ永続化

--import と --export-on-exit によりデータ保持可能。

---

✨ この構成のメリット

• 本番データ保護
• 課金ゼロ
• チーム再現性100%
• 認証〜Functionsまで統合テスト可能
• Pub/Sub含めイベント駆動検証可能
• DevEx大幅向上

---

🏁 まとめ

Firebase Emulator Suite を Docker で統合することで、

クラウド依存なしのフルスタックFirebase環境

を安全に構築できます。

開発速度と品質を同時に上げたいチームに最適な構成です。