React应用部署到Azure后出现EACCES eslintcache权限错误无法编译求助

问题说明 #

该错误为Azure Linux环境部署React项目的典型权限类问题，发生在构建阶段ESLint写入缓存文件时，当前执行用户没有/home/site/wwwroot/node_modules/.cache/目录的写入权限，错误详情如下：

EACCES: permission denied, open '/home/site/wwwroot/node_modules/.cache/.eslintcache'

可行解决方案 #

方案1：禁用ESLint缓存（最便捷） #

直接修改项目package.json中的构建命令，关闭ESLint缓存生成逻辑，从根源上避免缓存文件写入操作：

{
  "scripts": {
    // 原build命令替换为下方内容
    "build": "DISABLE_ESLINT_PLUGIN=true react-scripts build"
  }
}

如果使用的是vite等非react-scripts脚手架，可在ESLint配置文件中添加cache: false配置关闭缓存

方案2：部署阶段自动配置缓存目录权限 #

如果需要保留ESLint缓存功能，可在依赖安装完成后自动给缓存目录开放写入权限：
在package.json中新增postinstall钩子脚本：

{
  "scripts": {
    "postinstall": "mkdir -p node_modules/.cache && chmod -R 777 node_modules/.cache"
  }
}

方案3：自定义容器部署权限配置 #

如果使用Docker容器部署，可在Dockerfile中提前给运行用户配置目录权限，避免运行时权限不足：

# 提前创建缓存目录并授权
RUN mkdir -p /home/site/wwwroot/node_modules/.cache
RUN chown -R node:node /home/site/wwwroot/node_modules
# 切换为非root用户运行应用
USER node

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