EC2实例部署Docker Compose时React环境变量加载失败求助

问题现象 #

部署EC2实例上的项目时，docker-compose启动出现以下警告：

WARN[0000] The "REACT_APP_API_URL" variable is not set. Defaulting to a blank string. 
WARN[0000] The "REACT_APP_MEDIA_URL" variable is not set. Defaulting to a blank string. 
WARN[0000] The "REACT_APP_URL" variable is not set. Defaulting to a blank string. 
WARN[0000] The "REACT_APP_GOOGLE_MAPS_API_KEY" variable is not set. Defaulting to a blank string. 
WARN[0000] The "REACT_APP_GOOGLE_CLIENT_ID" variable is not set. Defaulting to a blank string.

同时前端容器日志出现路由404错误：

frontend-1  | 2025/03/30 19:15:12 [error] 31#31: *2 open() "/usr/share/nginx/html/events" failed (2: No such file or directory), client: 172.27.0.6, server: localhost, request: "GET /events HTTP/1.1"

核心原因 #

1. React的REACT_APP_*环境变量是构建时注入的，而非运行时。当前配置中变量仅传递到容器运行阶段，未在构建镜像的npm run build步骤中生效。
2. React单页应用路由需要Nginx配置支持，否则刷新或直接访问子路由会返回404。

解决方案 #

1. 修复环境变量构建时注入 #

修改docker-compose.yml的frontend服务配置

将环境变量通过构建参数传递到镜像构建阶段，而非仅在容器运行时设置：

frontend:
  build:
    context: ./frontend
    dockerfile: Dockerfile.prod
    args:
      - REACT_APP_API_URL=${REACT_APP_API_URL}
      - REACT_APP_MEDIA_URL=${REACT_APP_MEDIA_URL}
      - REACT_APP_URL=${REACT_APP_URL}
      - REACT_APP_GOOGLE_MAPS_API_KEY=${REACT_APP_GOOGLE_MAPS_API_KEY}
      - REACT_APP_GOOGLE_CLIENT_ID=${REACT_APP_GOOGLE_CLIENT_ID}
      - NODE_ENV=production
  volumes:
    - /app/node_modules
    - static_volume:/app/static
  ports:
    - "3000:80"
  depends_on:
    - backend
  networks:
    - app_network
  restart: unless-stopped

移除原env_file和environment配置，避免重复定义导致冲突。

修改前端Dockerfile.prod

在构建阶段接收参数并设置为环境变量，确保npm run build时能读取到：

FROM node:23-alpine as build

RUN apk add --no-cache git

# 接收构建参数并转为环境变量
ARG REACT_APP_API_URL
ARG REACT_APP_MEDIA_URL
ARG REACT_APP_URL
ARG REACT_APP_GOOGLE_MAPS_API_KEY
ARG REACT_APP_GOOGLE_CLIENT_ID
ARG NODE_ENV

ENV REACT_APP_API_URL=$REACT_APP_API_URL
ENV REACT_APP_MEDIA_URL=$REACT_APP_MEDIA_URL
ENV REACT_APP_URL=$REACT_APP_URL
ENV REACT_APP_GOOGLE_MAPS_API_KEY=$REACT_APP_GOOGLE_MAPS_API_KEY
ENV REACT_APP_GOOGLE_CLIENT_ID=$REACT_APP_GOOGLE_CLIENT_ID
ENV NODE_ENV=$NODE_ENV

WORKDIR /app

COPY package.json package-lock.json ./

RUN npm ci

COPY . .

RUN npm run build

FROM nginx:alpine

RUN mkdir -p /app/static

COPY --from=build /app/build /usr/share/nginx/html
COPY --from=build /app/build/static /app/static

# 替换为支持React路由的Nginx配置
COPY nginx-react.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

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

2. 配置Nginx支持React路由 #

在frontend目录下创建nginx-react.conf，添加路由重定向规则：

server {
    listen 80;
    server_name localhost;

    root /usr/share/nginx/html;
    index index.html;

    # 静态资源映射
    location /static/ {
        alias /app/static/;
    }

    # 所有非静态资源请求转发到index.html，解决React路由404
    location / {
        try_files $uri $uri/ /index.html;
    }
}

如果已有全局nginx.conf，可将上述规则合并到现有配置中，确保React路由正常工作。

3. 验证配置有效性 #

• 构建镜像后，进入容器检查环境变量：

  docker run --rm $(docker images -q frontend-image) printenv | grep REACT_APP
  

• 检查构建产物中的变量是否注入成功：

  docker exec -it frontend-1 grep REACT_APP_API_URL /usr/share/nginx/html/static/js/*.js
  

4. 部署脚本保持现有逻辑 #

当前部署脚本已通过--env-file ./frontend/.env.prod传递变量，确保.env.prod文件路径正确、变量名大小写完全匹配（如REACT_APP_API_URL不能写成react_app_api_url），且变量值无多余引号。

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