使用GitHub Actions部署React应用至Azure时长期停滞并报错

AI 小北

2026-6-25

解决GitHub Actions部署React应用超时失败的问题

针对你遇到的GitHub Actions部署React应用超时报错、更换区域仍无法解决的问题，可按以下步骤排查和处理：

优化构建流程，压缩耗时
- 启用依赖缓存：在GitHub Actions工作流中添加缓存node_modules的步骤，避免每次重新下载依赖，大幅缩短安装时间：
```
- name: 缓存npm依赖
  uses: actions/cache@v3
  with:
    path: ~/.npm
    key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
    restore-keys: |
      ${{ runner.os }}-node-
```
- 简化生产构建：如果使用Create React App，在.env.production文件中添加GENERATE_SOURCEMAP=false关闭源码映射生成，减少构建时间；同时清理项目中未使用的依赖和冗余插件。
调整工作流超时配置
- 默认每个Job的超时时间为6小时，若你的构建接近上限，先移除工作流中不必要的步骤（如非必需的测试、代码检查），尝试快速完成部署验证。
- 若确实需要更长时间，可在Job中显式设置超时时间（最大支持720分钟）：
```
jobs:
  deploy:
    timeout-minutes: 120
    # 其他配置...
```
排查网络依赖问题
- 切换npm镜像源：构建时依赖下载缓慢可能导致超时，在工作流中添加镜像源切换命令：
```
- name: 设置npm国内镜像
  run: npm config set registry https://registry.npmmirror.com/
```
- 检查部署目标区域的网络连通性，确认构建过程中访问的CDN或服务在对应区域是否稳定。
定位具体报错环节
- 查看GitHub Actions运行日志的完整输出，找到超时前的最后执行步骤，确认是构建环节卡住还是部署环节出问题。比如部署到GitHub Pages时，需检查actions/deploy-pages的artifact路径配置是否正确。