在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到"构建环境变量",并且还直接在构建命令中设置它,但没有成功.

知道可能是什么问题吗？

Answer 1

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

问题

dotenv-webpack期望.env在捆绑包的webpack构建过程中有一个要加载变量的文件.当Netlify检出存储库时,.env它不存在,因为它有充分的理由.gitignore.

解

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

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如果脚本失败,则部署将失败.

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

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