同一局域网下无法访问Docker部署的React前端问题排查

安全阿岳

2026-8-24

问题排查建议

以下是你可能遗漏的几个关键点：

检查Docker端口映射配置
确保docker-compose.yml中React服务的端口映射绑定到宿主机的0.0.0.0，而非仅127.0.0.1。正确的映射格式应为：
```
ports:
  - "0.0.0.0:3000:3000"
```
若仅写3000:3000，部分Docker环境默认可能仍绑定到127.0.0.1，导致局域网设备无法访问容器内服务。
验证React项目的homepage配置
查看React项目package.json中的homepage字段：如果该字段设为http://localhost:3000或相对路径错误，会导致JS、CSS等静态资源加载失败，仅显示React默认图标。建议将其设为相对路径：
```
"homepage": "."
```
或直接移除该字段，让create-react-app自动适配路径。
确保容器内正确传递环境变量
尽管修改了package.json的start脚本，但Docker容器内可能未正确读取HOST=0.0.0.0环境变量。可在docker-compose.yml的React服务中显式添加：
```
environment:
  - HOST=0.0.0.0
  - PORT=3000
```
同时检查Dockerfile中的启动命令，确保执行修改后的start脚本，例如：
```
CMD ["npm", "start"]
```
检查静态资源的网络请求状态
在访问的Windows设备上，打开浏览器开发者工具的Network标签，刷新页面后查看JS、CSS等静态资源的请求状态。若出现404错误，说明资源路径配置存在问题，需调整homepage或路由设置。
验证容器内服务的监听地址
进入React容器内部，执行命令查看服务监听地址：
```
docker exec -it <react-container-name> netstat -tulpn | grep 3000
```
确认输出结果显示0.0.0.0:3000，而非127.0.0.1:3000。若为后者，说明服务未监听所有网卡，局域网设备无法连接。