Question

Netlify上托管的我的盖茨比应用程序抛出有关我的Firebase配置的错误。

通过Netlify＆Gatsby将我的应用程序键入Firebase的正确语法是什么？

我的配置位于src / components / Firebase / firebase.js的顶部：

const config = {
  apiKey: process.env.API_KEY,
  authDomain: process.env.AUTH_DOMAIN,
  databaseURL: process.env.DATABASE_URL,
  projectId: process.env.PROJECT_ID,
  storageBucket: process.env.STORAGE_BUCKET,
  messagingSenderId: process.env.MESSAGING_SENDER_ID

};

在本地，位于我的gatsby-config.js顶部：

require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
 })

在Github上，因为Netlify有副本，所以我在gatsby-config.js中省略了require语句。

但是，我得到的是本地错误和Netlify错误：

Uncaught (in promise) code: "auth/invalid-api-key"
message: "Your API key is invalid, please check you have copied it 
correctly.

是的，我检查了一下，我的环境变量很好。

我认为这很简单。我的应用程序应该基于Netlify有副本的事实来访问配置数据。

在游戏中我看到，如果我直接通过firebase.js传递敏感的Firebase配置，则yy应用程序可以在本地和Netlify上运行。但是，显然这是一个禁忌。

在使用类似的设置进行工作时，其他人会遇到类似的结果吗？

Answer 1

以GATSBY_为前缀的OS Env Vars将在浏览器JavaScript中可用。

Gatsby要求您使用以下语法访问client side environment vars。在您的代码和Netlify应用程序控制台中更改它们。

const config = {
  apiKey: process.env.GATSBY_API_KEY,
  authDomain: process.env.GATSBY_AUTH_DOMAIN,
  databaseURL: process.env.GATSBY_DATABASE_URL,
  projectId: process.env.GATSBY_PROJECT_ID,
  storageBucket: process.env.GATSBY_STORAGE_BUCKET,
  messagingSenderId: process.env.GATSBY_MESSAGING_SENDER_ID

};

注意： Is it safe to expose Firebase apiKey to the public?

Answer 2

对于使用create-react-app的任何人，在您的环境变量中添加前缀REACT_APP_，将其添加到设置中的Netlify构建环境变量中，并已部署到Netlify站点上，但仍然可以看到

Uncaught (in promise) code: "auth/invalid-api-key", message: "Your API key is invalid, please check you have copied it correctly.

通过在Netlify上再次重新部署该应用程序即可解决我的案件。

键入Netlify env vars的正确语法是什么？

2 个答案: