Nginx反向代理Docker站点遇502错误及静态资源访问问题求助

一、先解决502 Bad Gateway错误 #

出现502的核心原因是Nginx容器无法连通后端Apache容器，当前配置用宿主机IP10.0.2.15访问后端，在Docker环境下存在网络隔离问题。最优解决方式是利用Docker自定义网络实现容器间安全通信：

1. 创建自定义Docker网络

docker network create web-network

2. 重启所有容器并加入该网络（示例命令）

• 后端Apache容器（假设容器名分别为app1、app2）：

docker run -d --name app1 --network web-network 你的apache镜像名
docker run -d --name app2 --network web-network 你的apache镜像名

注：无需将后端容器端口映射到宿主机（60000/60002），容器间直接用Apache默认内部端口80通信即可，减少端口暴露风险。

• Nginx代理容器：

docker run -d --name nginx-proxy --network web-network -p 10.0.2.15:61001:80 你的nginx镜像名

二、适配React带路由应用的Nginx优化配置 #

针对带前端路由的React单页应用，需处理路由刷新404问题，同时确保静态资源路径正确。修改后的default.conf如下：

server {
    listen 80;
    server_name 10.0.2.15;

    # 处理app1的React应用路由
    location /app1/ {
        # 用容器名访问后端，Docker自定义网络会自动解析域名
        proxy_pass http://app1/;
        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;

        # 拦截后端404，重写到React入口文件，解决前端路由刷新空白问题
        proxy_intercept_errors on;
        error_page 404 =200 /app1/index.html;
    }

    # 单独代理app1静态资源，添加缓存优化性能
    location /app1/static/ {
        proxy_pass http://app1/static/;
        proxy_cache_valid 200 1d; # 静态资源缓存1天
    }

    # app2配置逻辑与app1一致
    location /app2/ {
        proxy_pass http://app2/;
        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;

        proxy_intercept_errors on;
        error_page 404 =200 /app2/index.html;
    }

    location /app2/static/ {
        proxy_pass http://app2/static/;
        proxy_cache_valid 200 1d;
    }
}

三、额外优化建议 #

• 静态资源直连：如果React构建后的静态资源体积较大，可直接将静态文件目录挂载到Nginx容器，跳过Apache代理，进一步提升访问速度。
• 容器编排简化：用Docker Compose统一管理容器，避免手动执行命令，示例docker-compose.yml：

version: '3.8'
services:
  app1:
    image: 你的apache镜像名
    networks:
      - web-network
  app2:
    image: 你的apache镜像名
    networks:
      - web-network
  nginx-proxy:
    image: 你的nginx镜像名
    ports:
      - "10.0.2.15:61001:80"
    volumes:
      - ./default.conf:/etc/nginx/conf.d/default.conf
      # 可选：挂载React静态资源目录到Nginx
      # - ./app1-static:/usr/share/nginx/html/app1/static
    networks:
      - web-network
networks:
  web-network:
    driver: bridge

• 健康检查：给每个容器添加健康检查规则，确保Nginx只转发请求到健康的后端实例。

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