Firebase Local Emulator Suite详解

news2024/11/15 23:56:36

在这里插入图片描述

文章目录

Firebase Local Emulator Suite 组件
安装和使用步骤
- 1. 安装 Firebase CLI
- 2. 初始化 Firebase 项目
- 3. 配置模拟器
- 4. 启动模拟器
- 5. 配置应用程序使用本地模拟器
常见用途

Firebase Local Emulator Suite 是一组本地服务，可以模拟 Firebase 平台的在线服务，帮助开发者在本地环境中开发和测试应用程序，而不必依赖实时的 Firebase 项目。以下是关于 Firebase Local Emulator Suite 的详细介绍及其使用方法。

Firebase Local Emulator Suite 组件

Authentication Emulator：模拟 Firebase Authentication，用于测试用户身份验证。
Firestore Emulator：模拟 Cloud Firestore 数据库。
Realtime Database Emulator：模拟 Firebase Realtime Database。
Storage Emulator：模拟 Firebase Storage。
Hosting Emulator：模拟 Firebase Hosting 环境。
Functions Emulator：模拟 Cloud Functions for Firebase。
Pub/Sub Emulator：模拟 Google Cloud Pub/Sub。

安装和使用步骤

1. 安装 Firebase CLI

首先确保安装了 Firebase CLI。如果尚未安装，请运行以下命令：

npm install -g firebase-tools

2. 初始化 Firebase 项目

在项目根目录下运行以下命令：

firebase init

选择要初始化的 Firebase 功能，并确保选择 “Emulators” 以启用本地模拟器。

3. 配置模拟器

在初始化过程中，选择你要使用的模拟器，例如 Firestore、Functions 等。初始化完成后，Firebase 会生成一个 firebase.json 配置文件，其中包含模拟器的配置。

4. 启动模拟器

在项目根目录下运行以下命令以启动所有配置的模拟器：

firebase emulators:start

你将看到类似如下的输出：

✔  All emulators ready! It is now safe to connect your app.

┌────────────────┬────────────────────────────────┐
│ Emulator       │ Host:Port                      │
├────────────────┼────────────────────────────────┤
│ Authentication │ localhost:9099                 │
│ Firestore      │ localhost:8080                 │
│ Functions      │ localhost:5001                 │
│ Hosting        │ localhost:5000                 │
│ Pub/Sub        │ localhost:8085                 │
│ Storage        │ localhost:9199                 │
└────────────────┴────────────────────────────────┘

┌────────────────┬────────────────────────────────┐
│ View Emulator  │ http://localhost:4000          │
└────────────────┴────────────────────────────────┘

这些是本地模拟器的地址和端口，可以在浏览器中打开 http://localhost:4000 查看模拟器套件的控制面板。

5. 配置应用程序使用本地模拟器

你需要将你的应用程序配置为使用本地模拟器。例如，使用 Firebase SDK 时，可以如下配置 Firestore 和 Authentication：

import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';

// 初始化 Firebase
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT_ID.appspot.com",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

firebase.initializeApp(firebaseConfig);

// 使用本地模拟器
if (window.location.hostname === 'localhost') {
  firebase.firestore().useEmulator('localhost', 8080);
  firebase.auth().useEmulator('http://localhost:9099');
}