Docker部署React+Spring微服务：localhost无响应问题求助

场景1：使用Node镜像运行React前端（ERR_EMPTY_RESPONSE） #

核心问题是容器内部端口与映射端口不匹配：你的Dockerfile声明EXPOSE 80，但npm start默认启动React开发服务器在3000端口，外部映射的3000:80自然无法获取响应。同时生产环境不推荐用开发服务器，建议改用静态文件服务工具。

修改React的Dockerfile：

FROM node:16-alpine  
WORKDIR /app  
COPY package*.json ./  
RUN npm install  
COPY . .  
RUN npm run build  
# 安装轻量静态文件服务工具
RUN npm install -g serve
EXPOSE 3000
# 运行build后的静态文件，指定端口为3000
CMD ["serve", "-s", "build", "-l", "3000"]

同步修改docker-compose的前端端口映射，保持内外一致：

frontend:  
  image: frontend-service  
  ports:  
    - "3000:3000"

场景2：使用Nginx镜像运行React前端（无法加载项目index.html） #

问题在于未将React编译后的静态文件复制到Nginx的默认静态目录，导致Nginx只能加载自带的默认页面。

修改前端的Dockerfile（采用分阶段构建，减少镜像体积）：

# 第一阶段：编译React项目
FROM node:16-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# 第二阶段：用Nginx部署静态文件
FROM nginx:alpine  
# 复制编译好的静态文件到Nginx目录
COPY --from=builder /app/build /usr/share/nginx/html
# 复制自定义Nginx配置
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

同时补充Nginx配置的必要基础项，避免静态文件解析异常：

http {
  include       /etc/nginx/mime.types;
  default_type  application/octet-stream;

  server {  
    listen 80;
    location / {
      root /usr/share/nginx/html;
      index index.html;
      try_files $uri /index.html;
    }  
    location /spring-demo1/ {
      proxy_pass http://spring-demo1:8081/;
      # 添加代理头，避免后端服务识别请求异常
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
    }   
    location /spring-demo2/ {
      proxy_pass http://spring-demo2:8080/;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
    }
  }
}

额外注意事项 #

• Docker Compose中服务名称（spring-demo1、spring-demo2）需与Nginx配置里的proxy_pass地址完全一致，Docker内部DNS会自动解析这些服务名。
• 建议在docker-compose中直接指定前端构建上下文，无需手动提前构建镜像：

  frontend:
    build: ./front-end  # 指向前端项目目录
    ports:
      - "3000:80"
  

• 确认React项目中API请求路径与Nginx反向代理路径匹配（比如请求/spring-demo1/api/users，而非直接请求localhost:8081）。

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