Windows 10下Docker端口发布失败求助：React(Vite)容器无法访问

我正在学习Docker，遇到容器端口映射至主机后无法访问的问题。我通过docker build -t react-app .命令为基于Vite的React测试应用构建镜像，Dockerfile内容如下：

FROM node:16.17.0-alpine3.16
RUN addgroup app && adduser -S -G app app
USER app
WORKDIR /app
COPY package*.json  .
RUN npm ci
COPY . .
EXPOSE 5173
CMD ["npm", "run", "dev"]

随后执行docker run -d --name my-app -p 3000:5173 react-app命令创建容器。Vite默认端口为5173，但尝试访问主机的localhost:3000、容器IP（通过docker exec my-app ifconfig获取）以及C:\Windows\System32\drivers\etc\hosts文件中的IP均无法成功访问服务。附docker logs输出截图，恳请协助解决该问题。

问题排查与解决步骤 #

1. 修改Vite监听地址 #

Vite默认仅绑定localhost，容器内的服务无法被外部访问。需要调整Vite配置，让服务监听所有网卡：

• 在项目根目录创建或编辑vite.config.js，添加server.host配置：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    host: '0.0.0.0'
  }
})

2. 验证容器服务状态 #

• 执行docker logs my-app查看日志，确认服务启动后输出包含Network: http://0.0.0.0:5173/，这表示服务已对外监听
• 如果日志显示依赖安装失败，可检查package.json是否完整，或尝试在容器内手动执行npm install排查

3. 重新构建并运行容器 #

修改配置后，重新构建镜像：

docker build -t react-app .

删除旧容器并重新运行：

docker rm -f my-app
docker run -d --name my-app -p 3000:5173 react-app

4. 检查主机防火墙 #

Windows系统下，确保防火墙允许3000端口的入站连接。可临时关闭防火墙测试，若能访问，再添加对应端口的允许规则。

5. 确认端口映射 #

执行docker ps查看容器信息，确认端口映射行显示0.0.0.0:3000->5173/tcp或:::3000->5173/tcp，说明映射已生效。

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