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

Question

我在尝试为我的 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, ...}

Answer 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?