应用程序未连接到 firebase 模拟器，但连接到生产环境

Question

我有一个连接到 firebase 项目的 React 应用程序。

在运行 firebase emulators:start 上，我得到以下输出。

firebase emulators:start
i  emulators: Starting emulators: auth, functions, firestore, hosting, storage
⚠  functions: The following emulators are not running, calls to these services from the Functions emulator will affect production: database, pubsub
✔  functions: Using node@16 from host.
i  firestore: Firestore Emulator logging to firestore-debug.log
i  hosting: Serving hosting files from: build
✔  hosting: Local server: http://localhost:5011
i  ui: Emulator UI logging to ui-debug.log
i  functions: Watching "/Users/{username}/{app}/functions" for Cloud Functions...
✔  functions[us-central1-addFirestoreEvents]: firestore function initialized.

┌─────────────────────────────────────────────────────────────┐
│ ✔  All emulators ready! It is now safe to connect your app. │
│ i  View Emulator UI at http://localhost:4000                │
└─────────────────────────────────────────────────────────────┘

┌────────────────┬────────────────┬─────────────────────────────────┐
│ Emulator       │ Host:Port      │ View in Emulator UI             │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Authentication │ localhost:9099 │ http://localhost:4000/auth      │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Functions      │ localhost:5001 │ http://localhost:4000/functions │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Firestore      │ localhost:8080 │ http://localhost:4000/firestore │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Hosting        │ localhost:5011 │ n/a                             │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Storage        │ localhost:9199 │ http://localhost:4000/storage   │
└────────────────┴────────────────┴─────────────────────────────────┘
  Emulator Hub running at localhost:4400
  Other reserved ports: 4500

Issues? Report them at https://github.com/firebase/firebase-tools/issues and attach the *-debug.log files.
 
i  hosting: 127.0.0.1 - - [27/Mar/2022:11:12:53 +0000] "GET / HTTP/1.1" 200 584 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.83 Safari/537.36"
i  hosting: 127.0.0.1 - - [27/Mar/2022:11:12:53 +0000] "GET /static/js/main.60d5b53b.js HTTP/1.1" 200 928509 "http://localhost:5011/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.83 Safari/537.36"
i  hosting: 127.0.0.1 - - [27/Mar/2022:11:12:53 +0000] "GET /favicon.ico HTTP/1.1" 200 15406 "http://localhost:5011/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.83 Safari/537.36"
i  hosting: 127.0.0.1 - - [27/Mar/2022:11:13:30 +0000] "GET /manifest.json HTTP/1.1" 200 494 "http://localhost:5011/enter" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.83 Safari/537.36"
i  hosting: 127.0.0.1 - - [27/Mar/2022:11:13:30 +0000] "GET /static/js/main.60d5b53b.js.map HTTP/1.1" 200 6816096 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.83 Safari/537.36"

在我的索引函数中，我像这样初始化应用程序

let fapp
if (!getApps().length) {
  // if (window.location.hostname === 'localhost') {
  //   initializeApp({})
  // } else {
  //   fapp = initializeApp(firebaseConfig)
  // }
  fapp = initializeApp({})
}

// Auth exports
export const auth = getAuth()
connectAuthEmulator(auth, 'http://localhost:9099')

// Firestore exports
// export const db = getFirestore(fapp)
export const db = getFirestore()
connectFirestoreEmulator(db, 'localhost', 8080)

现在当我去托管 URL 'https://localhost:5011" 并尝试登录时。(signInAnonymously) 它使用生产配置而不是模拟器。甚至数据库也已连接到生产环境。

OS details
Mac version 12.3

node version 16.4.0
firebase cli version 10.5.0
npm version 8.3.0

正在添加我的 firebase.json 文件

{
    "firestore": {
        "rules": "firestore.rules",
        "indexes": "firestore.indexes.json"
    },
    "functions": {
        "predeploy": "npm --prefix \"$RESOURCE_DIR\" run build"
    },
    "hosting": {
        "public": "build",
        "ignore": [
            "firebase.json",
            "**/.*",
            "**/node_modules/**"
        ],
        "rewrites": [
            {
                "source": "**",
                "destination": "/index.html"
            }
        ]
    },
    "storage": {
        "rules": "storage.rules"
    },
    "emulators": {
        "auth": {
            "port": 9099
        },
        "firestore": {
            "port": 8080
        },
        "hosting": {
            "port": 5011
        },
        "storage": {
            "port": 9199
        },
        "ui": {
            "enabled": true
        }
    }

Answer 1

我在这里发现了问题，只是想 post 它。

在运行启动 firebase emulators:start 时，所有服务都已启动。但是，我需要运行本地主机上的应用程序，不应连接到位于 localhost:port 的托管应用程序。我只是运行 npm 运行启动并使用 localhost:3000 进行调试，所有模拟器都正常工作

TLDR：运行 npm start/dev 脚本，它们将连接到模拟器，不要使用托管 URL（即 firebase 运行s 和提供）

应用程序未连接到 firebase 模拟器，但连接到生产环境

app does not connect to firebase emulators but connects to production

javascript

firebase

firebase-tools

firebase-authentication

google-cloud-firestore