通过docker-compose部署的React应用无法访问报ERR_EMPTY_RESPONSE错误

1. React服务端口不匹配 #

• create-react-app默认启动的开发服务器监听端口为3000，你虽然在Dockerfile中声明了EXPOSE 8083，但如果没有修改启动配置指定端口，容器内实际没有服务监听8083端口，端口映射完全无效，访问时自然返回空响应。
• 修复方案：要么修改React项目package.json中的start脚本指定端口，比如调整为PORT=8083 HOST=0.0.0.0 react-scripts start（Windows环境可安装cross-env做跨平台兼容）；要么将Dockerfile的EXPOSE声明、docker-compose的端口映射都改为对应3000的配置，例如ports: - 3000:3000。

2. 工作目录与挂载路径冲突 #

• 你的React Dockerfile指定工作目录为/usr/src/app，所有代码都复制到该路径下，但docker-compose的frontend服务又把宿主机当前目录挂载到了容器内的/app路径，还额外挂载了匿名卷到/app/node_modules，会直接覆盖容器内已复制好的代码，导致npm start执行时找不到启动文件。
• 修复方案：如果不需要开发热重载，直接删掉frontend服务下的全部volumes配置即可；如果需要热重载，要将挂载路径和Dockerfile的工作目录统一，修改为：

volumes:
  - 'C:\einkauf\einkauf:/usr/src/app'
  - '/usr/src/app/node_modules'

3. 开发服务器监听地址问题 #

• 旧版本的create-react-app开发服务器默认只监听容器内的127.0.0.1，宿主机无法访问，在启动命令中指定HOST=0.0.0.0即可解决。

4. 前后端通信补充说明 #

• 你配置了自定义网络bens_network，React前端调用后端接口时，不要使用localhost:8080，要使用后端服务的容器名作为请求地址，也就是http://spring-boot:8080作为接口baseURL，才能通过Docker内部网络正常通信。

内容的提问来源于stack exchange，提问作者Captai-N