Docker+Nginx部署双React应用遇111连接拒绝/502错误排查

先明确核心问题：Docker容器里的localhost指的是容器自身，不是Mac宿主机，所以一开始用localhost:3001会出现连接拒绝；换成容器名后静态资源404，是因为管理后台的资源路径默认按根路径生成，通过/admin访问时，资源请求会带上/admin前缀，后台找不到对应文件。

第一步：统一Docker网络，解决容器连通问题 #

先创建一个自定义Docker网络，确保所有容器能通过名称互相访问：

docker network create app-network

启动每个容器时都加入这个网络，示例命令：

docker run --name frontend --network app-network -p 3000:3000 你的前端镜像
docker run --name frontend_admin --network app-network -p 3001:3001 你的管理后台镜像
docker run --name backend --network app-network -p 5055:5055 你的后端镜像
docker run --name nginx --network app-network -p 80:80 你的Nginx镜像

第二步：修改Nginx配置，解决静态资源404 #

提供两种可选方案，按需选择：

方案一：Nginx重写路径（无需修改前端代码） #

修改Nginx的站点配置文件（比如/etc/nginx/conf.d/default.conf）：

upstream frontend {
    server frontend:3000; # 同一网络下直接用容器名做DNS解析
}

upstream frontend_admin {
    server frontend_admin:3001;
}

upstream backend {
    server backend:5055;
}

server {
    listen 80;
    server_name localhost;

    # 主站点转发规则
    location / {
        proxy_pass http://frontend;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    # 管理后台转发核心配置
    location /admin {
        # 去掉请求路径中的/admin前缀，转发给管理后台的根路径
        rewrite ^/admin(.*)$ $1 break;
        proxy_pass http://frontend_admin;
        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-Prefix /admin;
    }

    # 后端API转发（假设API路径为/api，可根据实际调整）
    location /api {
        proxy_pass http://backend;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

方案二：修改前端base路径（简化Nginx配置） #

如果可以调整管理后台代码，直接将其资源路径的base前缀设为/admin：

• React：构建时添加环境变量PUBLIC_URL=/admin，或在package.json中配置"homepage": "/admin"
• Vue：在vue.config.js中设置publicPath: '/admin'
• 其他框架参考对应文档设置baseURL

这种情况下，Nginx的/admin配置可简化为：

location /admin {
    proxy_pass http://frontend_admin/admin; # 末尾需添加/admin，与前端配置匹配
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

第三步：验证配置 #

修改Nginx配置后重启容器：

docker restart nginx

访问http://localhost/admin检查页面及静态资源加载情况，同时查看Nginx日志确认无报错。

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