如何在Lambda中预渲染Angular Universal动态路由并存储至S3

实现方案 #

你不需要在Lambda中运行完整的Angular CLI命令ng run my-app:prerender，该命令依赖整个开发环境，体积过大不适合Serverless场景，直接调用Angular Universal底层预渲染API即可实现单路由按需预渲染，步骤如下：

1. 抽离独立预渲染脚本

在你的Angular项目中新增单路由预渲染的Node.js脚本prerender-single.js，核心逻辑示例：

const { render } = require('@angular/ssr');
const fs = require('fs');
const path = require('path');

// 加载你构建好的服务端bundle和浏览器index.html模板
const serverApp = require('./dist/my-app/server/main.server').AppServerModuleNgFactory;
const browserIndexHtml = fs.readFileSync(path.join(__dirname, './dist/my-app/browser/index.html'), 'utf8');

async function prerenderRoute(route) {
  const html = await render({
    document: browserIndexHtml,
    url: route,
    bootstrap: serverApp
  });
  // 生成临时文件存储到Lambda tmp目录
  const outputPath = path.join('/tmp', route.replace(/\//g, '_') + '-index.html');
  fs.writeFileSync(outputPath, html);
  return outputPath;
}

module.exports = prerenderRoute;

2. 打包Lambda部署包

将以下文件打包为Lambda的部署压缩包：

• 上述prerender-single.js脚本
• 你项目构建后生成的dist/my-app/server（服务端bundle）和dist/my-app/browser（静态资源）目录
• 必须的运行时依赖（仅保留@angular/ssr、@angular/common等运行时包，剔除所有开发依赖）
• AWS S3 SDK依赖（用于上传生成的HTML到S3）

3. 编写Lambda入口逻辑

Lambda触发后执行以下逻辑即可：

const AWS = require('aws-sdk');
const s3 = new AWS.S3();
const prerenderRoute = require('./prerender-single');
const fs = require('fs');

exports.handler = async (event) => {
  // 从触发事件中拿到需要预渲染的动态路由，例如新增广告的路由/ads/xxx
  const targetRoute = event.route;
  // 预渲染生成HTML文件
  const htmlFilePath = await prerenderRoute(targetRoute);
  const htmlContent = fs.readFileSync(htmlFilePath, 'utf8');
  
  // 上传到S3对应路径，保持路径和路由一致
  await s3.putObject({
    Bucket: '你的S3存储桶名称',
    Key: `${targetRoute.slice(1)}/index.html`, // 路由/ads/123对应S3路径ads/123/index.html
    Body: htmlContent,
    ContentType: 'text/html',
    CacheControl: 'public, max-age=31536000'
  }).promise();

  // 可选：触发CloudFront对应路径的缓存失效，避免用户访问到旧内容
  return { statusCode: 200, body: '预渲染完成' };
};

注意事项

• 调整Lambda执行超时时间到10-30秒，避免预渲染逻辑执行超时
• 如果你的动态路由需要请求后端接口获取数据，确保Lambda所在VPC可以访问对应的后端服务
• 部署包控制在50MB以内即可满足Lambda的要求，精简依赖后通常远小于该阈值

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