在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到“构建环境变量”，并且还直接在构建命令中设置它，但没有成功。 / p>

知道可能是什么问题吗？

Answer 1

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

问题

dotenv-webpack期望在捆绑包的webpack构建期间加载变量.env。当Netlify检出存储库时，.env不存在，因为有充分理由它位于.gitignore。

解决方案

将您的API_KEY存储在Netlify build environment variables中，并在运行build命令之前使用脚本构建.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>

警告＆amp;建议

• 不要将此方法用于面向公众的存储库 [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

您还可以做的是定义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。

Answer 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。

Answer 5

如果您在Netlify中转到相应站点的设置，则在16下可以找到一个名为build&deploy的部分，您可以在此处轻松添加环境变量。如果将environment variables变量添加到环境变量，则可以通过MY_API_KEY在项目内部访问它。

Answer 6

您还可以使用Netlify的配置文件... 您可以找到文档here。 我也想拥有相同的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中进行部署...