React UI容器连接同Docker网络内WebSocket服务失败求助

核心原因 #

浏览器运行的前端代码不在Docker网络范围内，无法解析Docker服务名rabbit-receiver。容器内可以正常连接是因为Docker DNS服务在容器网络中提供了服务名解析，但浏览器的DNS查询依赖宿主机/本地网络，无法识别该服务名。

解决方案 #

方案1：本地开发场景 - 直接使用宿主机IP+端口 #

修改React代码中的WebSocket连接地址为宿主机IP和映射的端口：

// 本地开发可直接用localhost，部署时替换为实际宿主机IP
const ws = new WebSocket("ws://localhost:5050");

rabbit-receiver的Docker Compose已将5050端口映射到宿主机，浏览器可通过宿主机IP访问该端口。

方案2：多环境场景 - 通过环境变量配置地址 #

1. 在React项目中添加环境配置文件，区分开发/生产环境：

# .env.development
REACT_APP_WS_URL=ws://localhost:5050

# .env.production
REACT_APP_WS_URL=ws://<你的服务器公网/内网IP>:5050

2. 修改代码读取环境变量：

const ws = new WebSocket(process.env.REACT_APP_WS_URL);

方案3：生产环境推荐 - 反向代理统一域名 #

使用Nginx等反向代理工具，将前端域名下的指定路径代理到rabbit-receiver服务：

1. 配置Nginx规则：

server {
    listen 80;
    server_name your-domain.com;

    # 代理前端静态资源
    location / {
        proxy_pass http://hardware-reservation-ui:3000;
    }

    # WebSocket代理配置
    location /ws {
        proxy_pass http://rabbit-receiver:5050;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

2. 修改React代码中的连接地址为同域名路径：

// 自动适配当前域名和协议（http对应ws，https对应wss）
const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
const ws = new WebSocket(`${wsProtocol}//${window.location.host}/ws`);

该方式可避免跨域问题，同时无需将服务端口直接暴露到公网。

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