Vite创建的React项目Docker部署报错排查与解决请求

核心问题总结 #

你遇到的问题主要来自三个点：

• 容器未做端口映射，宿主机无法访问容器内的Vite服务
• Vite服务默认绑定127.0.0.1，容器内服务无法被外部访问
• 命令行参数传递方式错误，导致npm误解析参数

分步修正方案 #

1. 修正Vite配置文件（vite.config.js） #

确保服务绑定容器内所有网卡，端口配置生效：

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

export default defineConfig({
  plugins: [react()],
  server: {
    host: '0.0.0.0', // 必须绑定0.0.0.0，允许容器外部访问
    port: 1002,
    strictPort: true // 强制使用指定端口，避免端口冲突
  }
})

2. 修正Dockerfile #

添加端口暴露声明，确保镜像构建逻辑正确：

FROM node:22-alpine

WORKDIR /usr/src/app

# 优先复制package文件，利用Docker缓存层优化构建速度
COPY package*.json ./

RUN npm install

# 复制剩余项目文件
COPY . .

# 暴露Vite服务端口（仅声明，实际映射需靠run命令）
EXPOSE 1002

# 启动开发服务
CMD ["npm", "run", "dev"]

3. 正确启动容器（必须做端口映射） #

执行以下命令启动容器，将宿主机的1002端口映射到容器内的1002端口：

# 先重新构建镜像（确保配置修改生效）
docker build -t vite-react-app .

# 启动容器并映射端口
docker run -p 1002:1002 vite-react-app

此时访问localhost:1002即可正常访问Vite开发服务。

之前错误的原因解释 #

1. 修改vite.config.js后端口仍为5173：
   大概率是没有重新构建镜像，Docker会复用之前的缓存层，必须执行docker build重新生成镜像。

2. CMD传参报错ENOENT: no such file or directory：
   使用npm run dev传递参数时，需要用--隔开npm参数和脚本参数，正确写法应为：

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

   不过更推荐在vite.config.js中配置host，避免命令行传参的麻烦。

3. 依赖预打包警告：
   这个是Vite的非致命警告，只要项目根目录存在index.html（Vite默认入口文件），就不影响运行。如果想消除警告，可以在vite.config.js中添加：

   optimizeDeps: {
     include: ['react', 'react-dom'] // 指定需要预打包的核心依赖
   }
   

额外优化：添加.dockerignore文件 #

创建.dockerignore文件，避免复制不必要的文件到镜像中，提升构建速度：

node_modules
.git
.gitignore
dist
.env
.DS_Store

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