如何解决Docker运行React项目访问localhost:3000出现ERR_EMPTY_RESPONSE错误

存在的问题点 #

• 端口映射配置错误
  你执行的docker run -p 3000 myapp命令仅指定了容器侧端口，Docker会随机分配宿主机端口映射到容器3000端口，直接访问宿主机3000端口无法匹配到对应服务。正确的端口映射格式为-p 宿主机端口:容器端口。
• React开发服务器监听地址绑定错误
  create-react-app默认的开发服务器仅监听容器内部的127.0.0.1地址，该地址无法从容器外部访问，需要修改启动参数绑定0.0.0.0地址才能允许外部请求访问。

修复步骤 #

1. 修改Dockerfile的CMD指令，添加监听地址参数：

# 替换原有CMD行即可
CMD ["npm", "start", "--", "--host", "0.0.0.0"]

也可以直接修改项目package.json的scripts配置，将start命令改为"start": "react-scripts start --host 0.0.0.0"，二者效果一致。
2. 重新构建镜像：

docker build . -t myapp

3. 执行正确的启动命令，完成端口绑定：

docker run -p 3000:3000 myapp

4. 等待服务编译启动完成后，再次访问http://localhost:3000 即可正常打开页面。

补充建议：如果是生产环境部署，推荐使用多阶段构建将React项目打包为静态资源后用Nginx托管，相比启动开发服务器性能更高、稳定性更好。

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