React在Docker Compose生产环境无法读取环境变量，本地运行正常

核心问题1：docker-compose.yml配置存在多处错误 #

你的docker-compose.yml有三个关键问题：

• 容器名称格式非法：container_name里包含冒号（stolovaya51-react-production:0.0.1），Docker容器名称不允许使用这类特殊字符，会导致配置失效或容器启动失败。
• 构建参数赋值无效：build.args里写的REACT_APP_BACKEND_URL=REACT_APP_BACKEND_URL是把变量名本身作为值传入，等于没传实际的后端地址，必须替换为真实的URL（比如REACT_APP_BACKEND_URL=https://your-api-domain.com）。
• 错误使用build字段：你已经将构建好的镜像推送到Docker Hub，但远程服务器的docker-compose仍用build字段，这会触发远程重新构建镜像，而非拉取你已推送的成品镜像。若要使用已推送的镜像，需改用image:字段指定镜像地址。

核心问题2：对React环境变量注入时机的误解 #

React的REACT_APP_*前缀环境变量是在构建阶段（npm run build）静态注入到打包产物中的，容器运行时再传递环境变量无法修改已固化的打包内容。这意味着：

• 镜像一旦构建完成并推送至Docker Hub，产物里的环境变量值就固定了，远程运行容器时无法再修改。
• 必须在构建镜像时正确传入REACT_APP_BACKEND_URL参数，才能让变量值被注入到最终产物中。

修正后的配置示例 #

1. 保持原Dockerfile逻辑（以生产环境为例）

你的Dockerfile本身逻辑无问题，继续使用即可：

FROM node:alpine3.17 as build
LABEL type="production"
WORKDIR /react-app
COPY package.json ./
COPY package-lock.json ./
RUN npm install
COPY . ./

ARG REACT_APP_BACKEND_URL
ENV REACT_APP_BACKEND_URL=$REACT_APP_BACKEND_URL
RUN npm run build

# production environment
FROM nginx:stable-alpine
COPY --from=build /react-app/build /usr/share/nginx/html
EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

2. 本地构建镜像并推送至Docker Hub

本地构建时必须显式传入ARG参数，确保变量值被注入：

docker build --build-arg REACT_APP_BACKEND_URL=https://your-real-backend-url.com -t your-dockerhub-username/stolovaya51-react-production:0.0.1 .

完成后推送镜像：

docker push your-dockerhub-username/stolovaya51-react-production:0.0.1

3. 远程服务器的docker-compose.yml（拉取成品镜像）

去掉build字段，改用image指定已推送的镜像，同时修正容器名称：

version: '3'
services:
  stolovaya51-react-static-server:
    container_name: stolovaya51-react-production
    image: your-dockerhub-username/stolovaya51-react-production:0.0.1
    ports:
      - "80:80"

额外验证建议 #

• 本地构建镜像后，先启动容器测试：

  docker run -p 80:80 your-dockerhub-username/stolovaya51-react-production:0.0.1
  

  打开浏览器，通过开发者工具检查静态文件中的环境变量是否正确注入。
• 如果需要在运行时动态修改后端地址，不能依赖React构建时的环境变量，可改用Nginx配置注入变量、前端通过接口获取配置，或挂载配置文件到容器让前端读取等方案。

内容的提问来源于stack exchange，提问作者Yuri