Docker化React-Node应用容器间通信失败排查求助

核心问题根源 #

你踩了一个Docker前端部署的常见坑：React代码是在用户浏览器里执行的，不是在React容器内部运行。backend是Docker Compose创建的内部服务名，只有Docker网络里的容器能识别这个域名，但浏览器属于宿主机的网络环境，根本不知道backend是什么，自然会报ERR_NAME_NOT_RESOLVED。

用localhost:3001能工作，是因为你把Node后端的端口映射到了宿主机，浏览器通过宿主机的localhost访问到后端，流量路径是：浏览器→宿主机→Node容器。

架构合理性与容器直接通信的适用场景 #

容器之间直接通信完全可行，但仅限Docker内部网络的服务之间（比如另一个后端微服务调用Node后端）。前端代码运行在浏览器，不属于Docker网络，所以没法直接用Docker服务名访问后端。

你当前的localhost方式在开发阶段凑合用，但生产环境不推荐——依赖宿主机端口映射，流量绕路，而且部署灵活性差。

解决方案（按生产/开发场景区分） #

1. 生产环境：用Nginx反向代理（推荐） #

在React容器里部署Nginx，把前端的API请求转发到Node后端，实现容器间直接通信，不需要经过宿主机。

步骤：

• 编写Nginx配置文件（nginx.conf）：

  server {
    listen 80;
    root /usr/share/nginx/html;
    index index.html;
  
    # 把/api开头的请求转发到Docker内部的backend服务
    location /api/ {
      proxy_pass http://backend:3001/api/;
    }
  
    # 处理React单页应用的路由刷新问题
    location / {
      try_files $uri $uri/ /index.html;
    }
  }
  

• 修改React的环境变量：把REACT_APP_API_URL设为相对路径/api，前端请求会自动发给当前域名的/api路径，由Nginx转发到后端。
• 修改React的Dockerfile，用Nginx作为运行镜像：

  # 构建阶段：打包React代码
  FROM node:18-alpine as builder
  WORKDIR /app
  COPY package*.json ./
  RUN npm install
  COPY . .
  # 用相对路径设置API地址
  REACT_APP_API_URL=/api npm run build
  
  # 运行阶段：用Nginx托管静态文件+反向代理
  FROM nginx:alpine
  COPY --from=builder /app/build /usr/share/nginx/html
  COPY nginx.conf /etc/nginx/conf.d/default.conf
  EXPOSE 80
  

• Docker Compose中，frontend和backend服务默认在同一个网络，Nginx可以直接解析backend服务名，请求直接从frontend容器到backend容器，不经过宿主机。

2. 开发环境：用React开发服务器代理 #

如果是用create-react-app开发，直接在package.json里加proxy字段：

"proxy": "http://backend:3001"

此时REACT_APP_API_URL设为/api，React开发服务器会自动把前端的API请求代理到Docker内部的backend:3001，开发时不需要额外配置Nginx。

3. 临时方案：用宿主机IP（不推荐生产） #

开发时可以把REACT_APP_API_URL设为宿主机的实际IP（比如http://192.168.1.100:3001/api），浏览器能直接访问到宿主机映射的后端端口，但生产环境别用——换机器就得改IP，扩展性极差。

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