Docker Swarm部署React应用时静态文件无法加载问题求助

核心问题分析 #

从现象来看：index.html能正常加载（小文件），但静态JS/CSS文件请求时出现连接重置，且容器日志显示请求已成功返回200，说明请求已到达容器，但数据传输过程中因网络问题中断，大概率是Swarm overlay网络的MTU不匹配导致大文件传输丢包，其次可能是端口映射、Nginx配置或文件权限问题。

分步解决方案 #

1. 调整Ingress网络MTU（优先级最高） #

Swarm的ingress overlay网络默认MTU可能与主机网卡MTU不匹配，当传输大于MTU的数据包时会被截断，导致连接重置（小文件如index.html能正常传输，大文件不行）。

• 查看主机网卡MTU：

  ip link show
  

  找到主网卡（如eth0）的MTU值，通常为1500。

• 查看当前ingress网络MTU：

  docker network inspect ingress | grep MTU
  

  如果该值大于主机MTU，需要调整。

• 重建ingress网络（需中断现有服务）：

  1. 所有节点退出Swarm：

     docker swarm leave --force
     

  2. 重新初始化Swarm管理节点：

     docker swarm init --advertise-addr <管理节点IP>
     

  3. 创建新的ingress网络，MTU设置为主机MTU减50（预留封装开销）：

     docker network create --driver overlay --opt com.docker.network.driver.mtu=1450 ingress
     

  4. 重新部署你的服务。

2. 验证Nginx配置与静态文件权限 #

确保Nginx正确指向静态文件目录，且容器内文件权限正常：

• 检查Nginx配置：
  确保容器内Nginx配置监听正确端口（如8080，对应Swarm服务映射的容器端口），且root路径指向React build产物目录：

  server {
    listen 8080;
    root /usr/share/nginx/html;
    index index.html;
  
    location / {
      try_files $uri $uri/ /index.html; # 兼容React路由
    }
  }
  

• 检查Dockerfile文件复制逻辑：
  确保build产物被正确复制到容器内，且权限设置为Nginx用户可读取：

  FROM nginx:alpine
  # 复制React build产物并设置权限
  COPY --chown=nginx:nginx build/ /usr/share/nginx/html
  COPY nginx.conf /etc/nginx/conf.d/default.conf
  

• 验证容器内文件权限：

  docker exec -it <容器ID> ls -l /usr/share/nginx/html/static/
  

  确保文件所有者为nginx或www-data，且有读取权限。

3. 确认Swarm服务端口映射配置 #

检查服务的端口映射是否正确，避免使用host模式（会绕过ingress网络）：

在docker-compose.yml中，端口映射应配置为：

services:
  web:
    image: your-nginx-react-image
    ports:
      - "80:8080" # 服务暴露80端口，映射到容器内8080端口
    deploy:
      replicas: 1
      # 其他部署配置

默认的ingress模式会自动处理节点间的负载均衡，无需额外配置。

4. 排查节点间网络连通性 #

• 验证管理节点与worker节点的overlay网络连通性：

  # 在管理节点ping worker节点的overlay网络IP
  ping <worker节点overlay IP>
  

• 重启Docker服务，重置iptables规则：

  systemctl restart docker
  

  确保没有残留的iptables规则阻断节点间流量。

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