我正在构建一个 dockerized React 应用程序，需要为 API URL 定义一些环境变量。然而，React 在构建阶段注入了这些变量，所以每次环境变化时我都需要重建整个图像。这会减慢我的流程，因为我无法将同一个应用映像重复用于认证和生产。
我已经搜索了一些模式，现在我正在使用一个 JS 配置文件来动态注入环境，但它看起来并不是很简单。有人知道处理这个问题的更好方法吗？
【问题讨论】：
标签： javascript reactjs docker environment-variables
我最近遇到了同样的问题，然后我发布了一些包：@import-meta-env/*到npm来解决问题。
这个插件在一个特殊的 import.meta.env 对象上公开环境变量（深受 Vite 的启发）。
在生产期间，它将被静态地替换为占位符，而不是当前的环境变量。
因此，我们可以在任何地方运行脚本来使用系统中的环境变量填充文件。
您可以在https://iendeavor.github.io/import-meta-env/ 看到更多信息。
我还创建了一个 Docker 示例：https://github.com/iendeavor/import-meta-env/tree/main/packages/examples/docker-starter-example。
希望这对需要它的人有所帮助。
【讨论】：
您想要完成的是将“一次构建，多次部署”的原则应用于 ReactJS 应用程序。
以下文章介绍了执行此操作的一些可用选项： https://profinit.eu/en/blog/build-once-deploy-many-in-react-dynamic-configuration-properties/
一次构建，多次部署是软件的基本原则 发展。主要思想是对所有人使用相同的捆绑包 环境，从测试到生产。这种方法可以轻松 部署和可测试性，被认为是基本原则 的持续交付。它也是十二因子的一部分 方法。尽管它很重要，但它并没有收到显着的 在前端开发领域的支持，而 React 不是 例外。
文章提供的最简单的解决方案是基于外部配置文件。
外部配置文件：
// public/config.js
// provided by the customer as a resource in the public folder, after compilation
const apiUrl = "http://api.myservice.com";
const env = "TST";
网站根目录（index.html）：
<script src="%PUBLIC_URL%/config.js"></script>
<script>
window.config = { apiUrl, env };
</script>
换句话说，您的捆绑（构建/编译）应用应导入外部config.js 文件，并使用window 对象使其全局可用。
本文继续提供一些更高级和更精致的选项，但以上内容对于简单的用例应该足够了。
【讨论】：
是的，这确实是环境变量的问题。您想要实现的目标可以通过通常称为“远程配置”或“配置即服务 - CaaS”的服务来完成。此服务通知您的应用程序某些外部数据已更改。我强烈推荐LaunchDarkly 或Firebase，但你总是可以选择自己构建它（虽然不是一个快速的解决方案）。 避免多个环境构建的唯一方法是在 CaaS 上应用规则并根据谁请求（例如，基于请求的“Origin”标头）修改响应
【讨论】：