Docker容器化React应用无法访问问题排查求助

我在Docker容器中运行React应用，已构建镜像并启动容器，但无法访问该应用。

环境信息 #

• 操作系统：Ubuntu 22.04.2 LTS
• 防火墙状态（执行sudo ufw status）：

Status: inactive

Dockerfile内容 #

FROM node:16-alpine3.14

WORKDIR /entreprise

COPY . .

RUN npm install

RUN npm run build

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

docker ps 输出 #

CONTAINER ID   IMAGE                 COMMAND                  CREATED         STATUS         PORTS                                       NAMES
3a8edf622b9d   react-entreprise:v1   "docker-entrypoint.s…"   9 seconds ago   Up 7 seconds   0.0.0.0:5173->5173/tcp, :::5173->5173/tcp   entrepriseFN

docker logs 输出 #

> entreprise@0.0.0 dev
> vite


  VITE v4.2.1  ready in 1011 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

已尝试的操作 #

• 重建镜像
• 重新启动容器
• 检查防火墙状态
• 将端口映射到其他端口

问题原因及解决办法 #

从日志能明显看到，Vite开发服务器只绑定了容器内的localhost，导致外部无法访问。需要让Vite监听所有网络接口，有两种修改方式：

1. 修改项目package.json的dev命令
   在项目的package.json中，把dev命令改成：

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

之后重新构建镜像并启动容器即可。

2. 直接修改Dockerfile的启动命令
   在Dockerfile里调整CMD命令，添加--host参数：

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

或者直接用Vite命令启动：

CMD ["vite", "--host"]

重新构建镜像启动容器后，日志会显示类似Network: http://0.0.0.0:5173/的信息，此时外部就能正常访问应用了。

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