Azure Static Web Apps部署无API React应用的构建配置排查

部署失败是三个典型配置问题导致的，和Azure Static Web Apps（SWA）的构建逻辑、Create React App（CRA）的默认CI行为直接相关：

• 构建路径配置错误：从提供的目录结构判断，如果React源码、package.json等核心文件存放在仓库的react-app子目录下，当前app_location: "/"的配置会让Oryx构建引擎在仓库根目录寻找项目文件，构建上下文完全错误；如果react-app仅为项目名称、核心文件直接存放在仓库根，路径配置无问题，核心报错来自下一个原因。
• CRA默认CI规则拦截：SWA的Oryx构建引擎默认注入CI=true环境变量，CRA在该环境下会将所有ESLint警告判定为致命错误，直接终止react-scripts build流程返回状态码1，这就是日志中ELIFECYCLE报错的核心诱因，和npm本身无关。
• Node版本不兼容：Oryx默认拉取的Node.js版本如果和本地开发使用的大版本不一致，也会触发依赖安装、构建阶段的未知异常。

按顺序操作即可完成部署：

1. 修正工作流路径配置 #

打开仓库下.github/workflows/目录中由SWA自动生成的工作流yml文件，定位到Azure/static-web-apps-deploy步骤的位置配置段：

• 如果React项目（存放package.json的目录）在仓库的react-app子文件夹，修改配置为：

app_location: "react-app"
api_location: ""
output_location: "build"

• 如果项目文件直接存放在仓库根目录，保持app_location: "/"即可，无需修改路径。

2. 固定Node.js版本避免兼容问题 #

在项目package.json的同级目录下，新建.nvmrc文件，写入本地开发使用的Node.js大版本号，比如本地用Node 16就写：

16

Oryx会自动识别该文件，拉取对应版本的Node.js完成构建，消除版本差异导致的异常。

3. 关闭CRA的CI强制校验拦截 #

在package.json同级目录下新建.env文件，写入两行配置，关闭CI环境下ESLint警告阻断构建的默认逻辑：

CI=false
DISABLE_ESLINT_PLUGIN=true

说明：该配置仅用于快速打通部署流程，后续建议本地修复所有ESLint警告后移除该配置，避免线上代码存在隐患。

4. 触发重新部署 #

将上述所有修改提交推送到GitHub对应分支，SWA会自动触发新的构建部署流程，此时构建日志中可以看到react-scripts build正常执行，完成后即可通过SWA分配的默认域名访问应用。

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