无法与 Firebase 实时数据库模拟器交互

时间:2021-04-24 16:46:56

标签: reactjs firebase firebase-realtime-database

我目前在尝试与实时数据库模拟器交互时遇到问题。模拟器已在端口 9030 上启动并运行,并且能够通过模拟器 ui 与其交互。

我的 firebase.js 设置如下(删除了配置值):

import firebase from "firebase/app"
import "firebase/auth"
import "firebase/database"

export const config = {
  apiKey: "",
  authDomain: "",
  databaseURL:
    "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: "",
}

function initFirebase() {
  if (!firebase.apps.length) {
    firebase.initializeApp(config)
  }
}

initFirebase()

const rtdb = firebase.database()

console.log(location.hostname)
if (location.hostname === "localhost") {
  console.log("emulator db")
  // Point to the RTDB emulator running on localhost.
  rtdb.useEmulator("localhost", 9030)
}

const auth = firebase.auth

export default firebase
export { rtdb, auth }

console.log("emulator db") 被击中,从我从文档中可以看出,这是使用方法 useEmulator() 的正确方法?

我尝试读取/写入的任何数据都来自/发送到托管在 firebase 上的 prod 数据库,而不是模拟器。

我觉得我错过了一些非常明显的东西。

作为参考,我的 firebase.json:

  "database": {
    "rules": "database.rules.json"
  },
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "hosting": {
    "public": "dist",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  },
  "emulators": {
    "auth": {
      "port": 9010
    },
    "firestore": {
      "port": 9020
    },
    "database": {
      "port": 9030
    },
    "hosting": {
      "port": 9040
    },
    "ui": {
      "enabled": true
    }
  }
}```

1 个答案:

答案 0 :(得分:1)

@keremistan 的评论让我进入了本教程:https://www.youtube.com/watch?v=pkgvFNPdiEs

Google 的文档中没有提到这一点。他们在视频中使用的技巧来修改配置变量以连接到正确的 URL。没有提及 useEmulator()

  const firebaseConfig = {
    apiKey: process.env.NEXT_PUBLIC_FB_API_KEY,
    authDomain: process.env.NEXT_PUBLIC_FB_AUTH_DOMAIN,
    databaseURL: process.env.NEXT_PUBLIC_FB_DATABASE_URL,
    projectId: process.env.NEXT_PUBLIC_FB_PROJECT_ID,
    storageBucket: process.env.NEXT_PUBLIC_FB_STORAGE_BUCKET,
    messagingSenderId: process.env.NEXT_PUBLIC_FB_MESSAGING_SENDER_ID,
    appId: process.env.NEXT_PUBLIC_FB_APP_ID,
    measurementId: process.env.NEXT_PUBLIC_FB_MEASUREMENT_ID,
  }
  
  if (process.env.NODE_ENV === "development") {
    const emulatorUrl = `http://localhost:9000?ns=${process.env.NEXT_PUBLIC_FB_PROJECT_ID}`;
    firebaseConfig.databaseURL = emulatorUrl
  }