Docker：React App 不读取环境变量答案

【问题标题】：Docker : React App doesn't read environment variableDocker：React App 不读取环境变量
【发布时间】：2021-03-08 18:28:01
【问题描述】：

我有一个使用 Docker 运行的 React 应用程序。我想在 dev、staging 和 prod 环境中部署相同的 docker 映像。

我的 React 环境变量 (REACT_APP_PARAM) 的值因每个环境而异。

我的 dockerfile 看起来像这样：

…

COPY . .

ARG REACT_APP_PARAM

ENV REACT_APP_PARAM $ REACT_APP_PARAM

…

我使用这个 Dockecompose 文件来构建我的图像

version: "3"
services:
  frontend:
    image: my-image
    build:
      context: .
      args:
        - REACT_APP_PARAM=BuildParam
    environment:
      - REACT_APP_PARAM=${REACT_APP_PARAM}
    ports:
      - "80"
      - "443"

在开发环境中部署和运行我的图像时，我使用这个 dockercompose 文件

version: "3"

services:
  frontend:
    image: my-image
    restart: always
    environment:
      - REACT_APP_PARAM=DevelopmentParam
    ports:
      - "80"
      - "443"

当我调试我的应用程序时，REACT_APP_PARAM 的值仍然是 BuildParam

但是我用命令 docker exec my-image env 列出了我的容器环境变量，REACT_APP_PARAM 的值是 DevelopmentParam。

有什么想法可以解决这个问题，或者最好的存档方法是什么？

谢谢

【问题讨论】：

标签： node.js reactjs docker docker-compose environment-variables

【解决方案1】：

经过多次搜索，我发现构建中嵌入了环境变量。

React 官方文档：

环境变量在构建时嵌入。自从 Create React App 生成一个静态 HTML/CSS/JS 包，它不能可能在运行时读取它们。要在运行时阅读它们，您需要将 HTML 加载到服务器上的内存中并替换占位符运行时，如此处所述。或者，您可以在随时更改服务器。

https://create-react-app.dev/docs/adding-custom-environment-variables/

我不喜欢为每个环境构建不同图像的想法。

【讨论】：