firebase.initializeApp 在我的 dotenv 文件中找不到 API 密钥。 (Next.js)答案

【问题标题】：firebase.initializeApp can't find the API key in my dotenv file. (Next.js)firebase.initializeApp 在我的 dotenv 文件中找不到 API 密钥。 (Next.js)
【发布时间】：2021-03-23 15:46:59
【问题描述】：

我正在尝试在我的 Next.js 项目中实现 Firebase 身份验证。身份验证系统工作得很好，但只有当我在 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 值？

【问题讨论】：

标签： javascript node.js firebase google-cloud-functions next.js

【解决方案1】：

Firebase CLI 不支持部署添加环境变量的函数。任何 .env 文件中的内容都无关紧要 - 它们根本不会在部署后出现在进程环境中。

documentation 中解释了为您的函数提供配置参数的记录方法。这些变量不会在 process.env 中显示为进程环境。它们会在运行时出现在functions.config() 返回的对象中。

如果您确实必须拥有进程环境变量，那么您将无法使用 .env 中的任何内容。你可以改为write and deploy your function using gcloud to specify environment。但是，这会让您失去使用 Firebase CLI 的所有好处，因为它是一个完全不同的部署工具。

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

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

【讨论】：

谢谢，道格。我进行了必要的更改，该应用现在可以正常运行了！
太棒了！如果您发现此答案有帮助，则 Stack Overflow 习惯于使用左侧的按钮投票并接受正确的答案。

【解决方案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();
})

【讨论】：