Docker容器中Nginx与React前端连接问题求助

1. 检查React项目的打包配置 #

本地正常运行但Docker中找不到静态资源，大概率是静态资源路径配置错误：

• 若用Vite，打开vite.config.js，确保base设置为根路径：

  export default defineConfig({
    base: '/',
    // 其他配置项
  })
  

• 若用Webpack或CRA自定义配置，确保publicPath设为'/'。
• 执行npm run build后，查看dist（或build）目录下的index.html，确认main.js的引用路径以/开头（比如<script type="module" src="/assets/main.xxxx.js"></script>），相对路径会导致Nginx解析异常。

2. 检查React Dockerfile的文件复制逻辑 #

确保打包产物正确复制到容器内，推荐用多阶段构建（以Vite为例）：

# 构建阶段
FROM node:18-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# 生产阶段
FROM node:18-alpine
WORKDIR /app
COPY --from=builder /app/dist ./dist
# 若用serve托管静态文件，需提前安装：RUN npm install -g serve
CMD ["serve", "-s", "dist", "-l", "3000"]

确认容器暴露端口（如3000）与后续配置一致。

3. 修正Nginx反向代理配置 #

错误配置会导致Nginx在自身容器内查找静态资源，而非转发到React容器，正确的nginx.conf示例：

server {
  listen 80;
  server_name localhost;

  location / {
    # 转发请求到React容器的服务名（对应docker-compose中的服务名）和端口
    proxy_pass http://react-app:3000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;

    # 处理React单页应用的路由刷新问题
    try_files $uri $uri/ /index.html;
  }
}

4. 检查docker-compose的网络与依赖配置 #

确保两个容器在同一网络下，能互相访问：

version: '3.8'
services:
  react-app:
    build: ./react-app
    ports:
      - "3000:3000"
    networks:
      - app-network

  nginx:
    build: ./nginx
    ports:
      - "80:80"
    depends_on:
      - react-app
    networks:
      - app-network

networks:
  app-network:
    driver: bridge

depends_on确保React容器优先启动，networks保证容器间通过服务名互通。

5. 容器内验证与日志排查 #

• 进入React容器，检查打包产物是否完整：

  docker exec -it <react容器ID> ls /app/dist
  

• 查看Nginx错误日志，定位具体404路径：

  docker exec -it <nginx容器ID> cat /var/log/nginx/error.log
  

若日志显示/main.jsx 404，说明Nginx未正确转发请求，需重新检查location /的代理规则。

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