firebase.initializeApp 在我的 dotenv 文件中找不到 API 键。 （下一个.js）

Question

我正在尝试在我的 Next.js 项目中实现 Firebase Auth。 身份验证系统工作得很好，但只有当我直接在initializeApp内声明API 密钥时。 例如：

import firebase from 'firebase/app'
import 'firebase/auth'

const app = !firebase.apps.length ? (
    firebase.initializeApp({
        apiKey: 'MY_KEY',
        authDomain: process.env.FIREBASE_DOMAIN,
        projectId: process.env.FIREBASE_PROJECT_ID,
        storageBucket: process.env.FIREBASE_SOTORAGE_BUCKET,
        messagingSenderId: process.env.FIREBASE_SENDER_ID,
        appId: process.env.FIREBASE_ID,
        measurementId: process.env.FIREBASE_MESUREMENT_ID,
    }) 
) : (firebase.app())

export default app

当我尝试使用.env文件获取 API 密钥时，next.js 抛出以下错误：“未处理的运行时错误错误：您的 API 密钥是否正确复制。”

我还尝试通过在next.config.js中添加 env 配置来添加这些变量，就像 Vercel 的建议https://nextjs.org/docs/api-reference/next.config.js/environment-variables 一样。 它也没有工作。

我当前的代码是这样的：

import firebase from 'firebase/app'
import 'firebase/auth'

const app = !firebase.apps.length ? (
    firebase.initializeApp({
        apiKey: process.env.FIREBASE_KEY,
        authDomain: process.env.FIREBASE_DOMAIN,
        projectId: process.env.FIREBASE_PROJECT_ID,
        storageBucket: process.env.FIREBASE_SOTORAGE_BUCKET,
        messagingSenderId: process.env.FIREBASE_SENDER_ID,
        appId: process.env.FIREBASE_ID,
        measurementId: process.env.FIREBASE_MESUREMENT_ID,
    }) 
) : (firebase.app())

export default app

我应该怎么做才能使initializeApp能够读取process.env.FIREBASE_KEY值？

Answer 1

Firebase CLI 不支持部署添加环境变量的函数。 你在 any.env 文件中拥有什么并不重要——部署后它们根本不会出现在流程环境中。

文档中解释了向 function 提供配置参数的文档化方法。 这些变量不会在 process.env 中显示为进程环境。 它们将出现在运行时由functions.config()返回的 object 中。

如果您确实必须拥有进程环境变量，那么您将无法使用您在.env 中的任何内容。 您可以改为使用 gcloud 来编写和部署您的 function 来指定 environment 。 但是，这将使您失去使用 Firebase CLI 的所有好处，因为它是一个完全不同的部署工具。

您也可以使用 Firebase CLI 进行部署，然后在使用 gcloud 部署后更新特定环境。

最重要的是，您尝试做的事情并不是非常简单或直接。 我建议学习如何使用 Firebase 提供的配置来简化此操作，但这意味着您必须将 in.env 中的内容复制到其配置系统中。

Answer 2

 const firebaseConfig = {
    apiKey: process.env.NEXT_PUBLIC_REACT_FIREBASE_API_KEY,
    authDomain: process.env.NEXT_PUBLIC_REACT_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.NEXT_PUBLIC_REACT_FIREBASE_PROJECT_ID,
    storageBucket: process.env.NEXT_PUBLIC_REACT_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.NEXT_PUBLIC_REACT_FIREBASE_MESSAGE_SENDER_ID,
    appId: process.env.NEXT_PUBLIC_REACT_FIREBASE_APP_ID,
    measurementId: 'G-measurement-id',
};

useEffect(() => {
    initializeApp(firebaseConfig);
    const messaging = getMessaging();
    onMessage(messaging, (payload) => {
        console.log('Message received. ', payload);
        // Update the UI to include the received message.
        setMessages([...messages, payload]);
    });

    resetUI();
})