为 React 应用程序配置 Firebase - 未定义的配置

Posted 2023-02-23

【中文标题】为 React 应用程序配置 Firebase - 未定义的配置

【英文标题】：Configuring Firebase for a React App - undefined config

【发布时间】：2019-03-23 20:30:02

【问题描述】：

我在尝试为我的 React 应用程序配置 Firebase 时遇到了问题。我已经学习了至少 10 个不同的教程，但无法将配置变量注册为已识别。

我使用的是 webpack，所以我的 webpack.config.json 有如下插件：

plugins: [
      CSSExtract,
      new webpack.DefinePlugin(
        'process.env.FIREBASE_API_KEY': JSON.stringify(process.env.FIREBASE_API_KEY),
        'process.env.FIREBASE_AUTH_DOMAIN': JSON.stringify(process.env.FIREBASE_AUTH_DOMAIN),
        'process.env.FIREBASE_DATABASE_URL': JSON.stringify(process.env.FIREBASE_DATABASE_URL),
        'process.env.FIREBASE_PROJECT_ID': JSON.stringify(process.env.FIREBASE_PROJECT_ID),
        'process.env.FIREBASE_STORAGE_BUCKET': JSON.stringify(process.env.FIREBASE_STORAGE_BUCKET),
        'process.env.FIREBASE_MESSAGING_SENDER_ID': JSON.stringify(process.env.FIREBASE_MESSAGING_SENDER_ID)
      )
    ],

然后，我有一个 .env.development 文件如下：

FIREBASE_API_KEY="1"
FIREBASE_AUTH_DOMAIN="2.firebaseapp.com"
FIREBASE_DATABASE_URL="https://3.firebaseio.com"
FIREBASE_PROJECT_ID="4"
FIREBASE_STORAGE_BUCKET="5.appspot.com"
FIREBASE_MESSAGING_SENDER_ID="6"

然后，我有一个 firebase/firebase.js 文件如下：

import * as firebase from 'firebase';
// import firebase from 'firebase/app';
// import 'firebase/auth';
// import database from 'firebase/database';
// import  firebase  from '@firebase/app';
// import '@firebase/auth';
// import * as firebaseui from 'firebaseui';
// import  settings  from './config';

// Initalize and export Firebase.
const prodConfig = 
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  databaseURL:process.env.FIREBASE_DATABASE_URL,
  projectId: process.env.FIREBASE_PROJECT_ID,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID
;

const devConfig = 
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  databaseURL:process.env.FIREBASE_DATABASE_URL,
  projectId: process.env.FIREBASE_PROJECT_ID,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID
;

const config = process.env.NODE_ENV === 'production'
  ? prodConfig
  : devConfig
  console.log(config);




if (!firebase.apps.length) 
  firebase.initializeApp(config);
  console.log(config);
;

const database = firebase.database();

const auth = firebase.auth();

export firebase, auth, database  ;

我一直在试图弄清楚为什么配置变量记录为未定义。

有没有人想出如何成功配置 Firebase 应用程序。我之前关于这个主题的问题建议删除 : 和 env.development 文件中的值之间的空格 - 但这对这个问题没有任何影响。没有任何变量按照控制台日志中的定义注册。

当我尝试在开发中启动它时，我收到一条错误消息：

Error: FIREBASE FATAL ERROR: Can't determine Firebase Database URL.  Be sure to include databaseURL option when calling firebase.initializeApp(). 

我的所有变量都记录为未定义：

apiKey: undefined, authDomain: undefined, databaseURL: undefined, projectId: undefined, storageBucket: undefined, ...

【参考方案1】：

您可以将您的 firebase 配置存储在一个单独的 js 文件中，如下所示：

var config = 
  apiKey: "APIKEY",
  authDomain: "AUTHDOMAIN",
  databaseURL: "URL"
  projectId: "ID"
  storageBucket: "BUCKET",
  messagingSenderId: "SENDER"
;

var app = Firebase.initializeApp(config);
export const db = app.database();

如果您担心暴露您的 firebase 配置，这是一个不错的选择：Is it safe to expose Firebase apiKey to the public?

【讨论】：

我不明白你的意思。我确实有一个单独的 js env 文件来保存我的配置变量。我在 firebase.js 中使用它来调用这些变量。

我的意思是你真的不需要单独的 env 文件，只需将你的配置放入 firebase.js 本身。

最好做一个单独的文件，这样它就不会推送到 git。我实际上只是尝试了您的建议并将配置变量放在 firebase.js 文件中，但我不再收到该错误 - 但是，这并不能解决 gitignore 的问题。

你能澄清一下你所说的 gitignore 问题是什么意思吗？如果您不想将 firebase.js 推送到 git，您可以在 .gitignore 文件中指定它，不是吗？

但是所有其他调用都无法使用它。测试环境，然后为测试、开发或生产提供变量可以解决这个问题。我把测试和开发环境。 gitignore 中的文件。