Docker容器中React应用ESLint权限拒绝错误求助

问题背景 #

想在本地不安装任何依赖的情况下搭建React应用，用了Dockerfile和docker-compose.yml配置，但执行docker-compose up时触发ESLint权限拒绝错误，编译直接失败。

配置文件 #

Dockerfile #

FROM node:18.12

# 创建应用目录
WORKDIR /app

# 安装依赖
COPY package.json package-lock.json ./
RUN npm install

# 复制源码
COPY . .

EXPOSE 3000
CMD ["sudo", "npm", "start"]

docker-compose.yml #

version: '3'

services:
  ui:
    build: ./ui
    container_name: UI
    ports:
      - "3000:3000"
    volumes:
      - "./ui:/app"
      - "/app/node_modules"

错误信息 #

UI  | Failed to compile.
UI  | 
UI  | [eslint] EACCES: permission denied, open '/app/node_modules/.cache/.eslintcache'
UI  | ERROR in [eslint] EACCES: permission denied, open '/app/node_modules/.cache/.eslintcache'
UI  | 
UI  | webpack compiled with 1 error

WSL2文件结构与权限 #

drwxr-xr-x 5 blank blank   4096 Jan  6 18:40 .
drwxr-xr-x 5 blank blank   4096 Jan  6 18:54 ..
-rw-r--r-- 1 blank blank    310 Jan  6 18:38 .gitignore
-rw-r--r-- 1 blank blank    209 Jan  6 18:55 Dockerfile
-rw-r--r-- 1 blank blank   3359 Jan  6 18:38 README.md
drwxr-xr-x 2 root  root    4096 Jan  6 18:40 node_modules
-rw-r--r-- 1 blank blank 665979 Jan  6 18:38 package-lock.json
-rw-r--r-- 1 blank blank    827 Jan  6 18:38 package.json
drwxr-xr-x 2 blank blank   4096 Jan  6 18:38 public
drwxr-xr-x 2 blank blank   4096 Jan  6 18:38 src

解决方案 #

问题根源 #

1. WSL2里的node_modules目录属于root用户，容器内运行npm的进程没有写入权限
2. Dockerfile里用sudo启动npm完全没必要，容器内默认没配置sudo，且用root运行应用存在安全风险

修复步骤 #

1. 调整WSL2本地node_modules权限
   在WSL2终端执行命令，把目录所有者改成当前用户：

   sudo chown -R blank:blank node_modules
   

2. 修改Dockerfile，用非root用户运行
   官方Node镜像自带node用户，直接用它运行应用，修改后的Dockerfile：

   FROM node:18.12
   
   WORKDIR /app
   
   COPY package.json package-lock.json ./
   RUN npm install
   
   COPY . .
   
   # 确保node用户拥有应用目录权限
   RUN chown -R node:node /app
   
   # 指定运行用户
   USER node
   
   EXPOSE 3000
   CMD ["npm", "start"]
   

3. 重新构建启动容器
   执行命令：

   docker-compose down && docker-compose build && docker-compose up
   

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