Angular 17 SSR部署Azure Node.js 18失败求助：构建超时被取消

问题回顾 #

将 Angular 17 SSR（开启预渲染）应用通过 GitHub Actions 部署至 Azure Node.js 18 Web App 时，构建耗时长达5小时最终超时，报错 Error: The operation was canceled。相关配置包括：

• 构建配置："prerender": true, "aot": true
• 动态路由已标记 data: { prerender: false}
• 依赖包含 Angular 17 全家桶、stackedit-js、ngx-markdown 等库

排查与解决方案 #

1. 限制预渲染路由范围 #

默认情况下，Angular 的预渲染工具会自动爬取所有可访问的路由，即使部分路由标记了 prerender: false，仍可能存在额外的路由扫描开销。建议在 angular.json 中显式指定需要预渲染的静态路由，避免无意义的路由遍历：

"projects": {
  "your-project-name": {
    "architect": {
      "prerender": {
        "options": {
          "routes": [
            "/",
            "/home",
            "/about" // 仅列出需要预渲染的静态路由
          ],
          "browserTarget": "your-project-name:build:production",
          "serverTarget": "your-project-name:server:production"
        }
      }
    }
  }
}

2. 检查 Resolver 执行逻辑 #

虽然动态路由标记了 prerender: false，但路由的 SingleArticleResolver 仍可能在构建阶段被意外触发（例如依赖注入初始化、路由预解析逻辑）。如果 Resolver 包含外部 API 请求或耗时操作，会直接拖慢构建：

• 在 Resolver 中添加环境判断，跳过预渲染阶段的外部请求：

import { isPlatformServer } from '@angular/common';
import { Inject, PLATFORM_ID } from '@angular/core';

export class SingleArticleResolver implements Resolve<Article> {
  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

  resolve(route: ActivatedRouteSnapshot): Observable<Article> {
    // 仅在非预渲染/服务器端环境执行真实请求
    if (!isPlatformServer(this.platformId)) {
      return this.yourApiService.getArticle(route.paramMap.get('id'));
    }
    // 预渲染阶段返回 mock 数据
    return of(mockArticleData);
  }
}

• 检查 Resolver 中是否存在无限循环、同步阻塞等逻辑，这类问题会直接导致构建卡住。

3. 优化构建资源与超时设置 #

• GitHub Actions 端：延长 Job 超时时间，并使用性能更强的 Runner：

jobs:
  build-deploy:
    runs-on: ubuntu-latest
    timeout-minutes: 120 # 调整为合适的超时时间（最大支持720分钟）
    steps:
      # 你的构建部署步骤

• Azure Web App 端：若使用 Azure 自带构建（而非 GitHub Actions 构建后部署），升级 Web App 的 SKU 至 B1 及以上，提升 CPU/内存资源，避免资源不足导致构建缓慢。

4. 精简依赖与构建优化 #

• 排查冗余依赖：stackedit-js 这类体积较大的库，若并非核心功能，可考虑替换为轻量替代方案（如简化的 Markdown 编辑器），或通过动态导入减少初始构建负载。
• 确保构建配置开启全量优化：

"build": {
  "configurations": {
    "production": {
      "optimization": true,
      "buildOptimizer": true,
      "sourceMap": false,
      "namedChunks": false,
      "vendorChunk": false
    }
  }
}

• 添加 --no-progress 参数减少构建日志输出，小幅提升构建速度：

ng build --configuration production --no-progress

5. 定位耗时环节 #

通过 GitHub Actions 构建日志，定位耗时最长的阶段（如依赖安装、预渲染路由处理、代码编译）：

• 若依赖安装耗时久，可启用 npm ci 替代 npm install，并配置缓存依赖：

steps:
  - uses: actions/cache@v3
    with:
      path: ~/.npm
      key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
      restore-keys: |
        ${{ runner.os }}-node-
  - run: npm ci

• 若预渲染阶段卡住，检查是否有未标记 prerender: false 的动态路由，或路由中存在循环引用。

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