webpack - 在 Netlify 中设置构建环境变量

Question

我正在尝试为代码中不需要的 API key 设置环境变量。我的源 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

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

问题

dotenv-webpack预计会有 .env文件以在包的 webpack 构建期间加载到变量中。当 Netlify checkout 存储库时，.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>

注意事项和建议

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