React基础应用Docker部署后无法通过localhost:5173访问

AI 小北

2026-7-13

问题描述

尝试使用Docker运行React基础应用，在Docker外运行时localhost:5173可正常访问，但Docker运行后无法通过浏览器访问该端口。

执行的命令：

docker build -t app .
docker run -d -p 5173:5173 app

Dockerfile内容：

WORKDIR  /frontend

COPY package*.json ./

RUN npm install -g npm@latest

RUN npm install

COPY . .

EXPOSE 5173

CMD ["npm", "run", "dev"]

已尝试用容器IP替代localhost访问，无效。

Docker日志信息：

> frontend@0.0.0 dev
2023-08-11 11:54:45 > vite
2023-08-11 11:54:45 

2023-08-11 11:54:47 
2023-08-11 11:54:47   VITE v4.4.9  ready in 1375 ms
2023-08-11 11:54:47 
2023-08-11 11:54:47   ➜  Local:   http://localhost:5173/
2023-08-11 11:54:47   ➜  Network: use --host to expose

端口映射情况：5173/tcp 0.0.0.0:5173

解决方案

问题核心是Vite开发服务器默认仅绑定容器内部的localhost，这个地址无法被宿主机访问，日志里也明确提示了需要使用--host参数暴露到网络。可以通过以下两种方式解决：

方式一：修改Dockerfile的启动命令
在CMD中添加-- --host参数，让Vite监听容器的所有网络接口：
```
WORKDIR  /frontend

COPY package*.json ./

RUN npm install -g npm@latest

RUN npm install

COPY . .

EXPOSE 5173

CMD ["npm", "run", "dev", "--", "--host"]
```
修改后重新构建镜像并运行。
方式二：修改项目的package.json脚本
打开项目根目录的package.json，将dev脚本修改为：
```
"scripts": {
  "dev": "vite --host"
}
```
保存后重新执行docker build -t app .和docker run -d -p 5173:5173 app。