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

【问题标题】：What's the proper syntax to keying into Netlify env vars?键入 Netlify env vars 的正确语法是什么？
【发布时间】：2019-01-06 19:14:49
【问题描述】：

我在 Netlify 上托管的 Gatsby 应用引发了关于我的 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 上，我在 gatsby-config.js 中省略了 require 语句，因为 Netlify 有一个副本。

然而，我得到的是本地和 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 上运行。但是，显然这是不行的。

其他人在使用类似的设置时遇到类似的结果吗？

【问题讨论】：

github.com/gatsbyjs/gatsby/issues/7381

标签： reactjs firebase-authentication gatsby netlify

【解决方案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?

【讨论】：

谢谢大家！那行得通。我需要 gatsby-config.js 中的 require("dotenv")..，在我的 .env 中我使用了 GATSBY_ 前缀。

【解决方案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 上重新部署应用程序即可解决我的问题。

【讨论】：