15

我正在尝试为我的代码中不需要的 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 到“构建环境变量”中，也可以直接在构建命令中设置它，但没有成功。

知道可能是什么问题吗？

4

6 回答 6

25

警告：如果这是一个密钥，您将不希望在返回给客户端的任何包中公开此环境变量值。它只能由您的构建脚本使用，用于在构建期间创建您的内容。

问题

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>

注意事项和建议

  • 不要将此方法用于面向公众的存储库[open]，因为任何 PR 或分支部署都可能在您的代码中创建一个简单的脚本来公开 API_KEY
  • 0上面的示例脚本是为了简单起见，因此，如果脚本失败，部署将失败，使您使用的任何脚本都能够使用除此之外的代码出错。
于 2018-01-26T17:38:38.437 回答
20

您可以通过执行以下操作设置 Dotenv-webpack 以加载系统环境变量以及您在 .env 文件中声明的那些：

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

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

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

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

于 2018-06-02T12:06:01.677 回答
6

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

在此处输入图像描述

于 2019-04-20T17:58:55.673 回答
4

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

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

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

  },
  // ...

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

归功于yann -linn和他在github上的回答。

于 2019-03-13T10:40:25.783 回答
1

您还可以在 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 函数将是一个更好的选择。

于 2020-09-16T20:40:12.643 回答
0

您也可以使用 Netlify 的配置文件...您可以在此处找到文档。我也想拥有相同的 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 ...

于 2020-09-26T10:07:33.227 回答