Docker Compose部署双React应用 端口映射仅一个可访问

从docker ps返回结果看，Docker层面的端口映射规则已经正常生效，0.0.0.0:2000已正确指向cc2容器的9000端口，问题基本出在容器内部服务配置或运行状态上，按以下优先级排查：

1. 最高概率：React开发服务默认监听地址限制 #

Create React App、Vite等主流React脚手架启动的开发服务器，默认只会绑定容器内部的127.0.0.1回环地址，不会监听容器虚拟网卡的0.0.0.0地址。Docker的端口转发规则是将宿主机2000端口的流量转发到容器虚拟网卡，服务如果只绑定容器内回环，转发的流量根本无法到达服务进程。
client1能正常访问，通常是client1的启动配置已默认设置监听0.0.0.0，而client2未做该配置。

• 验证方法：执行命令进入cc2容器测试本地访问：

  docker exec -it cc2 curl http://127.0.0.1:9000
  

  如果容器内curl能正常返回页面内容，但宿主机访问http://localhost:2000完全无响应，即可确认是该问题。
• 修复方法：
  • 若使用Create React App（react-scripts）：在client2的启动命令中添加HOST=0.0.0.0参数，比如package.json中启动脚本改为"start": "HOST=0.0.0.0 react-scripts start"，也可直接在docker-compose.yml的client2配置下添加环境变量：

    environment:
      - HOST=0.0.0.0
    

  • 若使用Vite：在启动命令中添加--host 0.0.0.0参数，比如package.json中dev脚本改为"dev": "vite --host 0.0.0.0"，也可在vite.config.js中配置server.host: '0.0.0.0'。

2. 次常见原因：容器内服务未正常启动 #

如果容器内curl 127.0.0.1:9000也无法连通，说明cc2容器内的9000端口没有服务在运行，属于应用启动失败：

• 排查方法：直接查看cc2的运行日志定位报错：

  docker logs cc2
  

  常见启动失败原因包括：
  • 启动命令配置错误，服务实际监听了其他端口
  • 依赖冲突：当前配置把本地代码目录挂载到了/workspace，如果本地node_modules是Windows/Mac平台编译的版本，会覆盖容器内预装的Linux版本依赖，导致启动报错。这种情况可在volumes配置中添加匿名卷规避：

    volumes:
      - './client-2:/workspace'
      - '/workspace/node_modules'
    

  • 应用本身代码报错、缺少必要环境变量导致进程崩溃退出。

3. 低概率原因：宿主机端口冲突 #

正常情况下如果宿主机2000端口被其他进程占用，docker-compose up时会直接抛出端口绑定失败的错误，但如果存在特殊端口转发规则冲突，可在宿主机执行命令确认2000端口的占用进程：

• Mac/Linux系统：

  lsof -i:2000
  

• Windows系统（PowerShell）：

  netstat -ano | findstr :2000
  

  确认占用2000端口的是docker相关进程即可排除该问题。

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