为 Netlify 中的构建设置环境变量

Question

我正在尝试为代码中不需要的 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 将其添加到 'build environment variables'，并直接在构建命令中进行设置，但没有成功。

知道可能是什么问题吗？

Answer 1

警告：如果这是一个秘密密钥，。它只应由您的构建脚本使用，用于在构建期间创建您的内容。

问题

dotenv-webpack 期望有一个 .env 文件在你的包的 webpack 构建期间加载到你的变量中。当 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>

注意事项和建议

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

Answer 2

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

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

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

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

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

Answer 3

如果您使用的是 Nuxt JS，还有一种更 "straight forward" 的方法。

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

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

  },
  // ...

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

归功于 yann-linn and his answer on github。

Answer 4

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

在您的项目中访问它

Answer 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 密钥是机密的并且项目 public，那么您当然不应该只在前端输入环境变量。 API 键将出现在网站的源代码中，访问它的每个人都可以轻松访问。 Lambda function would be a better option.

Answer 6

您也可以使用 Netlify 的配置文件... 您可以找到文档 here。我还想让 same ENV 变量具有 different 值 per branch/environment。这个解决方法对我有用：

创建一个 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 中部署 ...

为 Netlify 中的构建设置环境变量

Set environment variable for build in Netlify

webpack

netlify

问题

解决方案

注意事项和建议