Docker部署React出现EACCES权限错误无法访问node_modules/.cache目录

问题本质 #

报错是容器内运行Node的进程对/usr/src/app/node_modules/.cache目录无读写权限，你之前注释了Dockerfile内的权限配置，再加上Yarn Workspaces monorepo的依赖挂载特性，共同触发了该问题。

第一步：修改React应用Dockerfile #

解除注释并修正权限配置，调整后的完整Dockerfile如下：

FROM node:14-alpine

# 提前创建工作目录并设置node用户权限
RUN mkdir -p /usr/src/app && chown -R node:node /usr/src/app
WORKDIR /usr/src/app

# 切换到官方镜像内置的非root用户node，避免权限溢出
USER node

COPY package.json .

# 配置npm权限参数
RUN npm config set unsafe-perm true

# 安装依赖，全局依赖指定安装路径避免权限问题
RUN npm install 
RUN npm install cross-env @craco/craco -g --prefix /home/node/.npm-global
# 将全局npm可执行文件路径加入环境变量
ENV PATH=/home/node/.npm-global/bin:$PATH

# 提前创建缓存目录并赋权
RUN mkdir -p /usr/src/app/node_modules/.cache && chown -R node:node /usr/src/app/node_modules/.cache

# 复制代码时指定所有者为node用户
COPY --chown=node:node . .

# 启动应用
CMD ["npm","run","start"]

第二步：修改docker-compose.yml配置 #

调整web服务的运行用户配置，适配monorepo挂载规则：

services:
  web:
    container_name: react_frontend
    build: ./mobile-pwa
    # 明确指定运行用户为node，和Dockerfile配置保持一致
    user: "node"
    volumes:
      - ./mobile-pwa:/usr/src/app
      - /usr/src/app/node_modules
      # Yarn Workspaces场景下新增以下配置（根据你实际monorepo结构调整路径）：
      # 把项目根目录挂载到容器内的monorepo根路径，假设你的monorepo根对应容器内/usr/src目录
      # - ./:/usr/src
      # 匿名挂载根目录的node_modules，避免本地覆盖
      # - /usr/src/node_modules
    ports:
      - 3001:3005
    command: npm run start
    env_file:
      - ./mobile-pwa/.env
    networks:
      - webnet
    depends_on:
      - backend

如果你的本地开发环境是Linux，可将user参数改为user: "${UID}:${GID}"，实现容器用户和本地用户权限映射，完全避免挂载卷的权限冲突

第三步：清理缓存重新构建 #

执行以下命令清除旧的镜像、卷缓存，避免历史配置干扰：

# 停止并删除现有容器
docker-compose down -v
# 重新构建镜像并启动
docker-compose up --build

monorepo场景额外说明 #

Yarn Workspaces默认会把公共依赖提升到项目根目录的node_modules下，所以需要确保容器内可以访问到根目录的依赖，上述第二步中注释的monorepo专属挂载配置需要根据你的实际目录结构启用，避免出现依赖找不到的问题。

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