在 Netlify 中设置构建环境变量答案

【问题标题】：Set environment variable for build in Netlify在 Netlify 中设置构建环境变量
【发布时间】：2018-01-25 23:20:23
【问题描述】：

我正在尝试为我的代码中不需要的 API 密钥设置环境变量。我的源 javascript 看起来像这样：

.get(`http://api-url-and-parameters&api-key=${process.env.API_KEY}`)

我正在使用 webpack 和包 dotenv-webpack https://www.npmjs.com/package/dotenv-webpack 在 gitignored .env 文件中设置 API_KEY ，它在我的本地运行良好。我还希望能够在通过 Netlify 部署时设置该变量，我尝试通过 GUI 将其添加到“构建环境变量”中，并直接在构建命令中设置它，但没有成功。

知道可能是什么问题吗？

【问题讨论】：

要明确一点——你是在构建时使用 webpack 运行该 JS，而不是打算在浏览时做某事，对吧？
是的，我应该澄清一下，但正如标题所示，这仅在构建时调用，在运行时不会暴露在任何地方。

标签： webpack netlify

【解决方案1】：

警告：如果这是一个密钥，you will not want to expose this environment variable value in any bundle that gets returned to the client。它只能由您的构建脚本用于在构建期间创建您的内容。

问题

dotenv-webpack 期望在你的 bundle 的 webpack 构建期间有一个 .env 文件加载到你的变量中。当 Netlify 签出存储库时，.env 不存在，因为它在 .gitignore 中是有充分理由的。

解决方案

将您的 API_KEY 存储在 Netlify build environment variables 中，并在运行构建命令之前使用脚本构建 .env。

scripts/create-env.js

const fs = require('fs')
fs.writeFileSync('./.env', `API_KEY=${process.env.API_KEY}\n`)

将脚本作为构建的一部分运行

node ./scripts/create-env.js && <your_existing_webpack_build_command>

注意事项和建议

不要将此方法用于面向公众的存储库 [open]，因为任何 PR 或分支部署都可能在您的代码中创建一个简单的脚本来公开 API_KEY
上面的示例脚本是为了简单起见，所以请让您使用的任何脚本都能够使用0 以外的代码出错，这样如果脚本失败，部署就会失败。

【讨论】：

这是一个很好的答案，得到了 Netlify 支持团队的完全认可！ “构建环境变量”部分位于您的构建和部署设置页面上 - 第二个“卡片”向下
谢谢，这就像一个魅力。我已经完成了一半，但没有意识到您可以使用 Netlify 即时创建文件。
经过大量谷歌搜索后，我找到了这个解决方案，它对我有用，但很奇怪，Netlify @fool 上没有官方文档
@DanChristian 可能您在官方文档中看不到这一点的原因是这不符合环境变量的一般解决方案规则，因为 Netlify 支持许多构建解决方案。如果您的项目需要 .env 设置，我的解决方案确实可以解决问题，但如果您想使用它作为替代方案，它确实会有所帮助。环境变量通常可以在构建时访问。
@JBalin OP 没有使用他所说的前端代码中的键。当被问到时，OP 甚至在 cmets 中说明了这一点。仅在他的构建过程中。我同意你的观点，他不应该在客户端代码中使用这些键。

【解决方案2】：

您可以设置 Dotenv-webpack 以加载系统环境变量以及您在 .env 文件中声明的环境变量，方法是：

  plugins: [
    new Dotenv({
        systemvars: true
    })
  ]

即设置 webpack dotenv 插件的 systemvars 属性为 true。

请注意，具有相同名称的系统环境变量将覆盖 .env 文件中定义的那些。

来源：https://www.npmjs.com/package/dotenv-webpack#properties

【讨论】：

我想知道为什么这不是一个被接受的答案。我发现它非常干净用于 CI 目的
这 100% 应该是公认的答案，就像一个魅力！

【解决方案3】：

如果您进入 Netlify 中相应站点的设置，在 build&deploy 下您可以找到一个名为 environment variables 的部分，您可以轻松地从那里添加您的环境变量。如果您将MY_API_KEY 变量添加到环境变量中，您将能够通过process.env.MY_API_KEY 在您的项目中访问它。

【讨论】：

如果我想拥有相同的键环境变量，但每个环境（开发、阶段、产品环境）具有不同的值？？
那么你提到的每个环境的构建应该是不同的。您可能应该为不同的环境有单独的 git 分支，并为每个环境有不同的 netlify 构建。

【解决方案4】：

如果您使用的是 Nuxt JS，则有一种更“直截了当”的方法。

只需像这样编辑nuxt.config.js：

module.exports = {
  env: {
    GOOGLE_API_KEY: process.env.GOOGLE_API_KEY

  },
  // ...

然后像往常一样通过build environment variables将GOOGLE_API_KEY添加到Netlify。

感谢yann-linn 和他在github 上的回答。

【讨论】：

【解决方案5】：

您还可以定义一个global constant in Webpack。在 UI 中定义的 Netlify 环境变量将使用它。你不需要 dotenv 或 dotenv-webpack。

webpack.config.js

const webpack = require("webpack");

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      "process.env.API_KEY": JSON.stringify(process.env.API_KEY)
    }),
  ]
}

但是，如果您的 API 密钥是机密的并且项目是公开的，那么您当然不应该只在前端输入环境变量。 API 密钥将出现在网站的源代码中，访问它的每个人都可以轻松访问。 Lambda function would be a better option.

【讨论】：

【解决方案6】：

您也可以使用 Netlify 的配置文件... 您可以找到文档here。另外，我希望 same ENV 变量具有不同值每个分支/环境。这种解决方法对我有用：

创建一个 netlify.toml 文件，如：

[build]
  NUXT_ENV_BASE_API = "/api"
  NUXT_ENV_HOST_DOMAIN = "https://your-domain.gr"

[context.branch-deploy]
  environment = { NUXT_ENV_BASE_API = "/dev-api", NUXT_ENV_HOST_DOMAIN = "https://dev.your-domain.gr" }

[context.production]
  environment = { NUXT_ENV_BASE_API = "/api", NUXT_ENV_HOST_DOMAIN = "https://your-domain.gr" }

并部署在 Netlify ...

【讨论】：