Docker容器间WebSocket连接问题：如何用容器名/自动获取IP？

问题1：能否使用容器名构建WebSocket URL？ #

不能直接在浏览器端使用容器名（backend）作为WebSocket地址。原因是：前端代码在用户浏览器中运行，而非Docker容器内部，浏览器会使用宿主机的DNS解析域名，无法识别Docker内部网络的容器别名（backend是Docker Compose创建的内部网络域名，仅在容器间通信有效）。

可行替代方案：

• 直接使用宿主机地址：
  开发环境下，用宿主机的localhost或IP加上映射的端口8000，示例：

  const socket = new WebSocket('wss://localhost:8000/ws/lobby/');
  

  生产环境替换为部署服务器的域名或公网IP即可。

• 配置前端代理转发：
  借助前端构建工具（如Vite、Create React App）的代理功能，将WebSocket请求转发到后端容器。以Vite为例，在vite.config.js中添加：

  export default defineConfig({
    server: {
      proxy: {
        '/ws': {
          target: 'ws://backend:8000', // 此处可直接用容器名，因为代理运行在前端容器内
          ws: true,
          changeOrigin: true
        }
      }
    }
  });
  

  此时前端代码只需连接前端服务地址：

  const socket = new WebSocket('wss://localhost:5173/ws/lobby/');
  

  代理会自动将请求转发到后端容器的WebSocket服务。

问题2：能否在Docker Compose启动时自动获取Django容器IP并更新URL？ #

可以实现，但仅推荐用于开发环境，生产环境更建议使用域名或代理方案。以下是两种实现方式：

方式1：构建时注入环境变量

在docker-compose.yml的chess-frontend服务中添加环境变量，直接指定WebSocket地址：

chess-frontend:
  container_name: frontend
  restart: always
  build:
    context: ./chess-front
    target: development
  ports:
    - "5173:5173"
  volumes:
    - ./chess-front:/usr/src/app
  environment:
    - VITE_WS_URL=ws://localhost:8000/ws/lobby/ # 开发环境用localhost，生产环境替换为域名

然后在React代码中读取该环境变量：

const socket = new WebSocket(import.meta.env.VITE_WS_URL);

（注：Vite要求环境变量以VITE_开头，Create React App则用REACT_APP_前缀）

方式2：启动脚本动态替换IP

编写启动脚本，在前端容器启动时自动获取后端容器IP并替换代码中的占位符：

1. 在前端项目根目录创建start-dev.sh脚本：

   #!/bin/bash
   # 获取后端容器的IP地址
   BACKEND_IP=$(getent hosts backend | awk '{print $1}')
   # 替换代码中的占位符（假设代码中用REPLACE_WITH_BACKEND_IP作为占位）
   sed -i "s/REPLACE_WITH_BACKEND_IP/$BACKEND_IP/g" /usr/src/app/src/home.jsx
   # 启动前端服务
   npm run dev
   

2. 修改前端Dockerfile，将脚本设置为启动命令：

   # ... 其他构建步骤
   COPY start-dev.sh /usr/src/app/
   RUN chmod +x /usr/src/app/start-dev.sh
   CMD ["/usr/src/app/start-dev.sh"]
   

3. 前端代码中使用占位符：

   const socket = new WebSocket('wss://REPLACE_WITH_BACKEND_IP:8000/ws/lobby/');
   

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