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

Question

我正在努力弄清楚我为React应用程序配置Firebase的尝试出了什么问题。我已经遵循了至少10个不同的教程，但无法让配置变量注册为已识别的。

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)
      })
    ],

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：未定义,AuthDomain：未定义,DatabaseUrl：未定义,ProjectId：未定义,StorageBucket：未定义, …}

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配置，这是一篇很好的读物：向公众公开firebase apiKey是否安全？