Vite+React+Docker容器运行异常问题求助

问题分析 #

直接在WSL中运行yarn dev正常，但Docker容器中访问根路径返回404，访问index.html出现@vitejs/plugin-react can't detect preamble错误；核心原因包括：文件复制不全导致Vite插件无法注入必要代码、容器内文件权限限制、Vite配置未适配容器环境。

解决方案 #

方案1：修正Dockerfile的文件复制逻辑 #

当前Dockerfile仅复制部分目录，可能遗漏Vite运行所需的隐含文件，改为复制整个项目目录（通过.dockerignore排除冗余文件）：

1. 在项目根目录创建.dockerignore文件：

node_modules
dist
.git
.gitignore

2. 更新Dockerfile：

FROM node:alpine3.15
WORKDIR /app
# 优先复制依赖配置文件，利用Docker缓存优化构建速度
COPY package.json yarn.lock* ./
RUN yarn install --frozen-lockfile
# 复制整个项目目录
COPY . .
CMD ["yarn", "dev"]

方案2：关闭Vite文件系统严格检查 #

容器内的文件路径权限可能触发Vite的严格模式限制，修改vite.config.js关闭该检查：

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

export default defineConfig({
  server: {
    host: '0.0.0.0',
    port: 8080,
    fs: {
      strict: false
    }
  },
  plugins: [react()]
})

方案3：使用非root用户运行容器 #

默认root用户可能导致Vite无法正常写入临时文件，修改Dockerfile创建并切换到非root用户：

FROM node:alpine3.15
WORKDIR /app
# 创建非root用户组和用户
RUN addgroup -S appgroup && adduser -S appuser -G appgroup
# 复制依赖配置并安装
COPY package.json yarn.lock* ./
RUN yarn install --frozen-lockfile
# 复制项目文件
COPY . .
# 修改目录权限
RUN chown -R appuser:appgroup /app
# 切换到非root用户
USER appuser
CMD ["yarn", "dev"]

方案4：明确指定Vite服务器origin #

配置Vite开发服务器的外部访问地址，确保插件注入的代码路径正确：

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

export default defineConfig({
  server: {
    host: '0.0.0.0',
    port: 8080,
    origin: 'http://localhost:8080'
  },
  plugins: [react()]
})

验证步骤 #

1. 重新构建镜像：docker build -t bpm .
2. 启动容器：docker run -it --rm -p 8080:8080 bpm
3. 访问http://localhost:8080，确认页面正常加载且控制台无报错

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