Docker Compose构建React应用容器内可访问但主机无法访问

• 确认端口映射配置
  检查Docker Compose的ports字段是否正确完成主机与容器的端口映射，示例配置：

  services:
    react-app:
      ports:
        - "8080:8080"  # 格式为主机端口:容器端口，确保端口对应正确
  

  若主机8080端口被占用，可更换主机端口，比如8081:8080，之后主机访问localhost:8081即可。

• 锁定Webpack Dev Server的监听配置
  确保package.json的dev命令明确指定监听0.0.0.0，示例：

  "scripts": {
    "dev": "webpack-dev-server --host 0.0.0.0 --port 8080"
  }
  

  也可在webpack配置文件中直接设置：

  module.exports = {
    devServer: {
      host: '0.0.0.0',
      port: 8080,
      allowedHosts: 'all'  // 旧版本Webpack可使用disableHostCheck: true替代
    }
  }
  

• 检查MacOS防火墙状态
  打开「系统设置」-「网络」-「防火墙」，确认Docker应用被允许接收传入连接；或临时关闭防火墙，测试是否能正常访问服务。

• 验证容器端口监听状态
  用以下命令确认容器内服务确实在监听8080端口：

  docker exec <容器ID或名称> lsof -i :8080
  

  也可通过Docker inspect命令查看端口绑定信息：

  docker inspect <容器ID或名称> | grep "8080"
  

• 排查Docker Desktop网络配置
  打开Docker Desktop偏好设置，进入「Resources」-「Network」，确认未修改默认网络配置，比如是否启用了VPN或代理导致端口转发受阻，可尝试关闭相关服务后重新测试。

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