时间戳

首页 > 解决方案 > React & Webpack & Docker：在运行时将环境注入到 docker-container

reactjs - React & Webpack & Docker：在运行时将环境注入到 docker-container

问题描述

您好尝试使用 Docker 和 Webpack 部署我的 React-App。我的问题是我想在运行时注入我的环境变量。

如果我运行我的 docker，我希望 env ENV_TEST 具有值 testValue

docker run -p 8080:8080 -e ENV_TEST=testValue client

Webpack 文件：

new webpack.DefinePlugin({
    "process.env.ENV_TEST": JSON.stringify(
        process.env.ENV_TEST
    ),
}),

码头工人文件：

ENV ENV_TEST=default

反应：

console.log(process.env.ENV_TEST)
//-->default

目前我的 ENV_TEST 具有默认值（从构建时形成 Docker 文件）。如果我没有在我的 Docker-File 中定义值，则 ENV_TEST 是未定义的。如果我运行我的 docker 容器，-e ENV_TEST=testValue我想用值 testValue 覆盖默认值。

感谢任何帮助

标签： reactjsdockerwebpackenvironment-variables

解决方案

您不能在运行时覆盖此 env 变量，因为它的运行时是客户端浏览器（我猜它是对标签的反应应用程序死亡）。

它的值在构建时被覆盖，并且从那里该值被硬编码在 js 包中。

您可以将动态值传递给 html，并让您的应用程序从那里读取它。

＃＃＃编辑

// index.html

<html>
...
  <body>
    <script>
       window.TEST_ENV = '<%= EJVaraibale %>';
    </script>
  </body>
</html>

推荐阅读