Gatsby 如何使用环境变量？答案

【问题标题】：How are Environment Variables used with Gatsby?Gatsby 如何使用环境变量？
【发布时间】：2018-07-24 11:25:30
【问题描述】：

在 GatsbyJS 的上下文中，应该如何使用环境变量？我已经阅读并重新阅读了official docs，但我仍然感到困惑。

具体来说：

在执行gatsby develop 时，盖茨比会自动读取.env.development 文件吗？
同样，它是否会忽略.env.development 文件而在执行gatsby build 时只读取.env.production？
您是否应该将.env.development 和.env.production 添加到.gitignore？
您是否应该手动将.env.* 文件复制（例如通过scp）到您的服务器？

【问题讨论】：

标签： environment-variables provisioning gatsby

【解决方案1】：

我使用了.env.development 和.env.production 文件，但不需要dotenv，因为我没有尝试将这些环境变量放入node.js。我想要 JS 文件中的这些环境变量。

Q1) 是的。如果您在根目录中创建 .env.development 文件，请添加这一行代码 IMG_URL=https://picsum.photos/200/300?image=1079，然后在您的 JS 中将这一行代码 <img src={'${process.env.IMG_URL}'} alt="" /> 添加到您的一个反应组件中的 render(){} 函数中。然后gatsby develop，你会看到图片

Q2) 是的。我创建了.env.development 和.env.production 文件，在开发中定义了一个变量，然后部署到生产环境中。 env 变量未在 .env.production 文件中定义。

Q3) 嗯，这可能取决于您的回购。如果是公共的或私人的。以及文件的内容。如果您将 .env 文件用于 API URL 等。那很好，但 Secrets 不应该在 .env 文件或 repo 中。

Q4) 我想说提交和部署通常是不同的。除非您在提交时设置了自动部署。我已将文件添加到我的 .gitignore，然后将所有本地文件复制到我的实时服务器。也许其他人对此有更好的答案。

也许这种方法可能更适合您alternative config 转至oliverbenns 评论

【讨论】：

文件（即.env.production）的内容是否在构建时读入包中，因此在托管服务器上实际上不需要？
是的，没错。我通过添加两个 .env 文件对此进行了测试。 .env.development 具有以下内容 IMG_URL=https://picsum.photos/200/300?image=1080 .env.production 具有以下内容 IMG_URL=https://picsum.photos/200/300?image=1079 在gatsby build 之后，在 /public 文件夹中搜索时，我注意到它已将 .env.production URL 构建到静态文件中
另外，您应该将 /public 文件夹上传到服务器，您的 .env 文件应该在项目的根目录中。所以他们不会到达服务器。