Docker容器中ReactJS无法读取环境变量URL致API调用失败求助

1. 环境变量必须在构建阶段注入 #

React应用的环境变量是在npm run build时静态打包进文件的，运行阶段（nginx容器内）设置ENV完全无效。你当前在production阶段定义REACT_APP_DEV_BASE_URL，此时构建已经完成，变量根本没被注入到静态资源里，代码自然读取到undefined。

修改Dockerfile，把环境变量移到builder阶段：

FROM node:16-alpine3.17 AS builder
WORKDIR /app
# 构建阶段注入环境变量
ENV REACT_APP_DEV_BASE_URL http://localhost:7500/api/
COPY package.json package.json
COPY package-lock.json package-lock.json
COPY public/ public
COPY src/ src
RUN npm ci
RUN npm run build

FROM nginx:1.23.4-alpine as production
ENV NODE_ENV production
COPY --from=builder /app/build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
HEALTHCHECK --interval=5s CMD ping -c 1 172.17.0.2

如果需要从外部动态传递变量（比如Docker Compose），可以用构建参数：

• 修改builder阶段添加ARG接收：

FROM node:16-alpine3.17 AS builder
WORKDIR /app
ARG REACT_APP_DEV_BASE_URL
ENV REACT_APP_DEV_BASE_URL=$REACT_APP_DEV_BASE_URL
# 后续构建步骤不变...

• Docker Compose中配置传递：

services:
  frontend:
    build:
      context: .
      args:
        REACT_APP_DEV_BASE_URL: http://localhost:7500/api/
    # 其他容器配置...

2. 容器内访问后端的地址问题 #

如果后端是Docker Compose启动的服务，别用localhost:7500——容器内的localhost指向自身，不是宿主机：

• 后端和前端在同一Compose网络时，直接用后端服务名作为主机，比如后端服务叫backend，地址改为http://backend:7500/api/
• 后端在宿主机（非容器化）：Windows/macOS用host.docker.internal:7500，Linux用宿主机局域网IP，或在Compose里配置extra_hosts映射宿主机IP

3. 验证环境变量是否注入成功 #

可以检查构建后的静态文件，确认变量已被替换：

# 进入builder镜像查看打包后的JS文件
docker run --rm -it <builder镜像ID> cat /app/build/static/js/main*.js | grep REACT_APP_DEV_BASE_URL

如果能看到你的目标URL，说明注入生效。

4. 检查代码中的变量读取 #

确保代码里是通过process.env.REACT_APP_DEV_BASE_URL读取，且变量名严格以REACT_APP_开头（React仅会打包带这个前缀的环境变量），比如：

const apiBase = process.env.REACT_APP_DEV_BASE_URL;
fetch(`${apiBase}auth/login`, { ... })

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