Docker运行vite-react加载vite.config.ts失败及权限问题求助

问题重现 #

运行以下Docker命令启动Vite-React项目：

docker run -p 5173:5173 -v "$(pwd):/app" -v /app/node_modules react-docker

抛出权限错误：

> react-docker@0.0.0 dev
> vite --host

failed to load config from /app/vite.config.ts
error when starting dev server:
Error: EACCES: permission denied, open '/app/vite.config.ts.timestamp-1710029032313-304203094a5fc.mjs'

尝试添加--user "$(id -u):$(id -g)"参数后问题仍未解决：

docker run -p 5173:5173 -v "$(pwd):/app" -v /app/node_modules --user "$(id -u):$(id -g)" react-docker

解决方案 #

1. 优化Dockerfile的用户与权限配置 #

这是最彻底的方案，通过Dockerfile创建非root用户并赋予目录权限：

# 基于官方Node镜像构建
FROM node:18-alpine

# 创建非root用户
RUN addgroup -S appgroup && adduser -S appuser -G appgroup

# 设置工作目录并修改权限
WORKDIR /app
RUN chown -R appuser:appgroup /app

# 切换到非root用户
USER appuser

# 复制依赖文件并安装
COPY package*.json ./
RUN npm install

# 复制项目代码
COPY . .

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

重新构建镜像后再启动：

docker build -t react-docker .
docker run -p 5173:5173 -v "$(pwd):/app" -v /app/node_modules react-docker

2. 临时调整容器内目录权限（无需修改Dockerfile） #

如果不想重新构建镜像，可以在启动命令中先修改目录权限再启动服务：

docker run -p 5173:5173 -v "$(pwd):/app" -v /app/node_modules react-docker sh -c "chmod -R 777 /app && vite --host"

3. 修改Vite缓存目录到有权限的路径 #

Vite生成的临时文件默认存在项目根目录，可通过配置将其转移到容器内公共读写目录（如/tmp）：
在vite.config.ts中添加缓存目录配置：

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

export default defineConfig({
  plugins: [react()],
  server: {
    host: true
  },
  // 指定缓存目录到/tmp
  cacheDir: '/tmp/vite-cache'
})

4. 修正node_modules匿名卷的权限 #

匿名卷/app/node_modules默认由root用户拥有，切换非root用户后会导致权限问题。可以在Dockerfile安装依赖后修改其所有者：

WORKDIR /app
COPY package*.json ./
RUN npm install
# 修改node_modules权限给非root用户
RUN chown -R appuser:appgroup /app/node_modules
USER appuser

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