Docker容器运行Vite项目遇EACCES权限错误求解决方案

容器启动后报错如下：

2024-01-12 12:18:50 
2024-01-12 12:18:50 > dmsosa@0.0.0 dev
2024-01-12 12:18:50 > vite
2024-01-12 12:18:50 
2024-01-12 12:18:52 failed to load config from /usr/src/app/vite.config.ts
2024-01-12 12:18:52 error when starting dev server:
2024-01-12 12:18:52 Error: EACCES: permission denied, open '/usr/src/app/vite.config.ts.timestamp-1705061932318-ddf27d1489a34.mjs'

已尝试修改Dockerfile、更新npm到10.3.0、绑定主机与镜像的package文件，均无效。相关文件如下：

Dockerfile #

ARG NODE_VERSION=20.6.1

FROM node:${NODE_VERSION}-alpine

# Use production node environment by default.
ENV NODE_ENV dev
ENV PORT 5173

WORKDIR /usr/src/app

RUN --mount=type=cache,target=/root/.npm \
    npm install -g npm@10.3.0

COPY package*.json ./

RUN npm i

# Run the application as a non-root user.
USER node

# Copy the rest of the source files into the image.
COPY . .

# Expose the port that the application listens on.
EXPOSE ${PORT}

# Run the application.
CMD cd /usr/src/app && npm run dev

package.json #

{
  "name": "dmsosa",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@popperjs/core": "^2.11.8",
    "axios": "^1.6.2",
    "bootstrap": "^5.3.2",
    "bootstrap-icons": "^1.11.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.12.0",
    "react-router-dom": "^6.20.1"
  },
  "devDependencies": {
    "@types/react": "^18.2.37",
    "@types/react-dom": "^18.2.15",
    "@typescript-eslint/eslint-plugin": "^6.10.0",
    "@typescript-eslint/parser": "^6.10.0",
    "@vitejs/plugin-react": "^4.2.0",
    "eslint": "^8.53.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.4",
    "sass": "^1.69.5",
    "typescript": "^5.2.2",
    "vite": "^5.0.0"
  }
}

vite.config.ts #

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react({
    include: "**/*.tsx",
  })]
})

原因分析 #

• 目录权限不匹配：Dockerfile中先以root用户创建/usr/src/app目录，执行npm i后切换到node用户，此时该目录的所有者仍是root。Vite启动时会编译配置文件并生成临时.mjs文件，node用户没有写入/usr/src/app目录的权限，因此触发EACCES错误。
• 操作顺序错误：复制源码的步骤在切换用户之后，但目录本身的权限并未转移给node用户，导致复制后的文件也无法被node用户修改。

解决方案 #

方案一：调整Dockerfile权限与操作顺序（推荐） #

修改Dockerfile，确保node用户拥有工作目录的完整权限，调整操作顺序如下：

ARG NODE_VERSION=20.6.1

FROM node:${NODE_VERSION}-alpine

ENV NODE_ENV dev
ENV PORT 5173

# 创建工作目录并设置所有者为node用户
WORKDIR /usr/src/app
RUN chown node:node /usr/src/app

# 切换到node用户执行后续操作
USER node

# 安装全局npm，缓存目录改为node用户的家目录
RUN --mount=type=cache,target=/home/node/.npm \
    npm install -g npm@10.3.0

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

# 复制项目源码（此时node用户已有目录权限）
COPY . .

EXPOSE ${PORT}
CMD npm run dev

方案二：指定Vite临时文件目录 #

让Vite将临时编译文件写入node用户有权限的目录（比如/home/node/.vite）：

1. 在Dockerfile中添加目录创建与权限设置：

# 切换到node用户后添加
RUN mkdir -p /home/node/.vite && chown node:node /home/node/.vite
ENV VITE_CONFIG_DIR /home/node/.vite

2. 或者修改package.json的dev脚本：

"scripts": {
  "dev": "vite --config-dir /home/node/.vite"
}

方案三：临时以root用户运行（不推荐生产环境） #

如果只是开发测试，可以去掉Dockerfile中的USER node指令，直接以root用户启动容器。但此方式存在安全风险，生产环境禁止使用。

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