Docker容器内运行的React前端应用无法通过浏览器访问

问题根源很明确：从容器日志里的Network: use --host to expose就能看出，Vite开发服务器默认只监听容器内部的localhost，宿主机的端口映射无法访问这个地址，必须让Vite监听容器的所有网卡（0.0.0.0）。

下面是三种可行的解决方式，选一种即可：

方法1：修改项目package.json #

找到项目根目录package.json里的scripts部分，给dev命令加上--host参数：

"scripts": {
  "dev": "vite --host",
  // 其他脚本保持不变
}

修改后重新构建镜像并运行容器：

docker build -t react-frontend-image .
docker run -it -p 5173:5173 --name react-frontend-container react-frontend-image

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

不用改动项目代码，直接在Dockerfile里给启动命令追加--host参数：

# 替换原有CMD行
CMD ["npm", "run", "dev", "--", "--host"]

之后重新构建镜像并运行容器即可。

方法3：运行容器时直接传递参数 #

如果只是临时测试，不想修改代码或Dockerfile，可在docker run命令里直接指定启动参数：

docker run -it -p 5173:5173 --name react-frontend-container react-frontend-image npm run dev -- --host

生产环境额外建议 #

如果是部署生产环境，不要用Vite开发服务器。正确流程是先构建静态文件，再用Nginx托管：

1. 调整Dockerfile：

# 构建静态文件阶段
FROM node:16.13.1 AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# Nginx托管阶段
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

2. 构建并运行生产镜像：

docker build -t react-frontend-prod .
docker run -p 80:80 --name react-frontend-prod-container react-frontend-prod

此时访问localhost:80就能看到生产环境的应用。

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