Docker容器内React Web应用端口映射后无法访问问题求助

问题描述 #

我用React构建的Web应用部署在Docker容器内，容器内部应用运行正常，但将容器端口与本地端口绑定后，无法通过localhost访问该应用；直接在本地运行该应用则一切正常。

相关信息 #

Dockerfile #

容器日志 #

构建及运行命令 #

docker build -t my-react-app .
docker run --name test -p 80:5173 my-react-app

问题原因 #

从容器日志可以看到，React开发服务器默认绑定的是127.0.0.1:5173，也就是只监听容器内部的回环地址。Docker端口映射是将主机端口转发到容器的网卡地址，但应用仅监听容器自身的localhost，导致主机的请求无法传递到应用。

解决方案 #

修改配置让React开发服务器监听0.0.0.0，这样就能接收来自容器外部的请求，以下三种方法任选其一：

方法1：修改package.json启动脚本 #

在项目的package.json中，更新dev脚本：

"scripts": {
  "dev": "vite --host 0.0.0.0"
}

如果使用Create React App，改为：

"scripts": {
  "start": "react-scripts start --host 0.0.0.0"
}

方法2：修改Dockerfile的CMD命令 #

在Dockerfile中直接添加启动参数：

CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]

方法3：运行容器时传递环境变量 #

部分构建工具（如Vite）支持通过环境变量指定监听地址，运行容器时传入：

docker run --name test -p 80:5173 -e VITE_HOST=0.0.0.0 my-react-app

修改完成后重新构建镜像并运行容器，即可通过localhost正常访问应用。

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