12e - 成本与生产部署

┌─────────────────────────────────────────────────────────┐
│                    总成本 = A + B + C + D                │
│                                                         │
│  A. Remotion 许可证费用（框架本身）                       │
│  B. 云渲染计算费用（AWS Lambda / EC2 / 本地）            │
│  C. AI 模型调用费用（代码生成 + 素材生成）               │
│  D. 存储与分发费用（S3 + CDN + 带宽）                    │
└─────────────────────────────────────────────────────────┘

# 在 Remotion 项目中安装 Lambda 包
npm install @remotion/lambda
 
# 安装 AWS CLI（如未安装）
# macOS
brew install awscli
# 或使用官方安装器
curl "https://awscli.amazonaws.com/AWSCLIV2.pkg" -o "AWSCLIV2.pkg"
sudo installer -pkg AWSCLIV2.pkg -target /

# 配置 AWS 访问密钥
aws configure
# AWS Access Key ID: [你的 Access Key]
# AWS Secret Access Key: [你的 Secret Key]
# Default region name: us-east-1
# Default output format: json

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": [
        "lambda:InvokeFunction",
        "lambda:CreateFunction",
        "lambda:DeleteFunction",
        "lambda:GetFunction",
        "lambda:ListFunctions"
      ],
      "Resource": "arn:aws:lambda:*:*:function:remotion-render-*"
    },
    {
      "Effect": "Allow",
      "Action": [
        "s3:CreateBucket",
        "s3:PutObject",
        "s3:GetObject",
        "s3:DeleteObject",
        "s3:ListBucket"
      ],
      "Resource": [
        "arn:aws:s3:::remotionlambda-*",
        "arn:aws:s3:::remotionlambda-*/*"
      ]
    },
    {
      "Effect": "Allow",
      "Action": [
        "iam:PassRole"
      ],
      "Resource": "arn:aws:iam::*:role/remotion-lambda-role"
    },
    {
      "Effect": "Allow",
      "Action": [
        "logs:CreateLogGroup",
        "logs:PutLogEvents"
      ],
      "Resource": "arn:aws:logs:*:*:*"
    }
  ]
}

# 部署 Remotion Lambda 函数
npx remotion lambda functions deploy
 
# 部署 Remotion 项目到 S3（作为渲染源）
npx remotion lambda sites create src/index.ts --site-name=my-video-site
 
# 验证部署
npx remotion lambda functions ls
npx remotion lambda sites ls

# 通过 CLI 触发渲染
npx remotion lambda render \
  --function-name=remotion-render-2024-mem2048mb-disk10240mb-240sec \
  --serve-url=https://remotionlambda-xxxxx.s3.us-east-1.amazonaws.com/sites/my-video-site/index.html \
  my-composition \
  out/video.mp4

import { renderMediaOnLambda } from "@remotion/lambda/client";
 
const result = await renderMediaOnLambda({
  region: "us-east-1",
  functionName: "remotion-render-2024-mem2048mb-disk10240mb-240sec",
  serveUrl: "https://remotionlambda-xxxxx.s3.us-east-1.amazonaws.com/sites/my-video-site/index.html",
  composition: "MyComposition",
  codec: "h264",
  inputProps: {
    title: "动态标题",
    data: [10, 20, 30, 40],
  },
});
 
console.log("渲染完成:", result.outputUrl);

帮我配置 Remotion Lambda 渲染环境，要求：

1. AWS 区域：[us-east-1 / ap-northeast-1 / 其他]
2. Lambda 内存：[2048MB / 4096MB / 自定义]
3. 磁盘大小：[10GB 默认 / 自定义]
4. 并发策略：[默认自动 / 自定义 framesPerLambda]
5. 用途：[个人项目 / 团队项目 / SaaS 平台]

请生成：
- 完整的 IAM 策略 JSON
- Lambda 部署脚本
- 渲染触发代码（TypeScript）
- 成本估算

┌──────────────────────────────────────────────────────────┐
│                    渲染流程                               │
│                                                          │
│  1. 主 Lambda 接收渲染请求                                │
│  2. 将视频帧分成 N 个 chunk                               │
│  3. 并行启动 N 个 Lambda 函数，每个渲染一个 chunk          │
│  4. 各 chunk 渲染完成后上传到 S3                          │
│  5. 主 Lambda 下载所有 chunk 并拼接为最终视频              │
│  6. 最终视频上传到 S3                                     │
│                                                          │
│  ┌─────┐  ┌─────┐  ┌─────┐  ┌─────┐  ┌─────┐           │
│  │ λ-1 │  │ λ-2 │  │ λ-3 │  │ ... │  │ λ-N │  并行渲染  │
│  │帧1-20│  │帧21-40│ │帧41-60│ │     │  │帧X-Y│           │
│  └──┬──┘  └──┬──┘  └──┬──┘  └──┬──┘  └──┬──┘           │
│     │        │        │        │        │               │
│     └────────┴────────┴────┬───┴────────┘               │
│                            │                             │
│                     ┌──────▼──────┐                      │
│                     │  拼接 + 上传  │                     │
│                     └─────────────┘                      │
└──────────────────────────────────────────────────────────┘

并发数 = Math.ceil(总帧数 / framesPerLambda)

// Remotion 内部的默认 framesPerLambda 计算
const bestFramesPerLambdaParam = (frameCount: number) => {
  // 0-10 分钟（30fps），并发从 75 线性插值到 150
  const concurrency = interpolate(
    frameCount, [0, 18000], [75, 150],
    { extrapolateRight: 'clamp' }
  );
  const framesPerLambda = Math.max(frameCount / concurrency, 20);
  const lambdasNeeded = Math.ceil(frameCount / framesPerLambda);
  return Math.ceil(frameCount / lambdasNeeded);
};

// 场景：渲染 900 帧（30秒 @ 30fps）的视频
 
// 方案 A：追求速度（高并发）
await renderMediaOnLambda({
  // ...其他配置
  framesPerLambda: 5,    // 180 个 Lambda 并行
  memorySize: 4096,       // 高内存 = 高 CPU
  // 预期：~8-12 秒完成，成本 ~$0.05
});
 
// 方案 B：平衡方案（默认）
await renderMediaOnLambda({
  // ...其他配置
  // framesPerLambda: null（使用默认）
  // 预期：~15-20 秒完成，成本 ~$0.02
});
 
// 方案 C：追求低成本
await renderMediaOnLambda({
  // ...其他配置
  framesPerLambda: 100,  // 9 个 Lambda 并行
  memorySize: 2048,       // 默认内存
  // 预期：~30-45 秒完成，成本 ~$0.01
});

帮我优化 Remotion Lambda 渲染性能，当前情况：

1. 视频参数：[分辨率] x [帧率]，时长 [X] 秒
2. 视频复杂度：[简单文字动画 / 含图片素材 / 含视频素材 / 复杂 SVG 动画]
3. 优化目标：[最快速度 / 最低成本 / 平衡]
4. 当前渲染时间：[X 秒]
5. 当前成本：[$X/次]

请给出：
- framesPerLambda 和 memorySize 的推荐值
- 预期渲染时间和成本
- 其他优化建议（audioCodec、speculateFunctionName 等）

# .github/workflows/deploy-remotion.yml
name: Deploy Remotion Lambda
 
on:
  push:
    branches: [main]
    paths:
      - 'src/remotion/**'
      - 'remotion.config.ts'
 
env:
  AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
  AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
  AWS_DEFAULT_REGION: us-east-1
 
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
 
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'
 
      - run: npm ci
 
      # 部署 Lambda 函数（如有更新）
      - name: Deploy Lambda Function
        run: npx remotion lambda functions deploy
 
      # 部署站点到 S3
      - name: Deploy Site
        run: |
          npx remotion lambda sites create \
            src/index.ts \
            --site-name=production-video-site
 
      # 可选：触发测试渲染验证部署
      - name: Smoke Test Render
        run: |
          npx remotion lambda render \
            --function-name=$(npx remotion lambda functions ls -q) \
            TestComposition \
            --out=test-output.mp4

// deploy.ts — 生产部署脚本
import {
  deployFunction,
  deploySite,
  getFunctions,
  getSites,
} from "@remotion/lambda";
 
async function deploy() {
  // 1. 部署新版本 Lambda 函数
  const { functionName } = await deployFunction({
    region: "us-east-1",
    timeoutInMilliseconds: 240000,
    memorySizeInMb: 2048,
    diskSizeInMb: 10240,
  });
  console.log(`✅ Lambda 函数已部署: ${functionName}`);
 
  // 2. 部署新版本站点
  const { serveUrl } = await deploySite({
    region: "us-east-1",
    entryPoint: "src/index.ts",
    siteName: `production-${Date.now()}`,
  });
  console.log(`✅ 站点已部署: ${serveUrl}`);
 
  // 3. 清理旧版本（保留最近 2 个版本用于回滚）
  const functions = await getFunctions({ region: "us-east-1" });
  const sites = await getSites({ region: "us-east-1" });
 
  // 按创建时间排序，删除旧版本
  if (functions.length > 2) {
    console.log(`🧹 清理 ${functions.length - 2} 个旧 Lambda 函数...`);
    // 实际清理逻辑...
  }
 
  return { functionName, serveUrl };
}
 
deploy().catch(console.error);

// api/render.ts — Next.js / Express API 路由示例
import { renderMediaOnLambda, getRenderProgress } from "@remotion/lambda/client";
 
// POST /api/render — 触发渲染
export async function startRender(req: Request) {
  const { compositionId, inputProps } = await req.json();
 
  const render = await renderMediaOnLambda({
    region: "us-east-1",
    functionName: process.env.REMOTION_FUNCTION_NAME!,
    serveUrl: process.env.REMOTION_SERVE_URL!,
    composition: compositionId,
    codec: "h264",
    inputProps,
    // 性能优化
    framesPerLambda: null, // 使用默认自动策略
    privacy: "public",     // 渲染结果公开可访问
  });
 
  return Response.json({
    renderId: render.renderId,
    bucketName: render.bucketName,
  });
}
 
// GET /api/render/progress — 查询渲染进度
export async function getProgress(req: Request) {
  const url = new URL(req.url);
  const renderId = url.searchParams.get("renderId")!;
  const bucketName = url.searchParams.get("bucketName")!;
 
  const progress = await getRenderProgress({
    region: "us-east-1",
    functionName: process.env.REMOTION_FUNCTION_NAME!,
    renderId,
    bucketName,
  });
 
  return Response.json({
    done: progress.done,
    overallProgress: progress.overallProgress,
    outputUrl: progress.outputFile,
    costs: progress.costs,
    errors: progress.errors,
  });
}

// 渲染完成后，视频已在 S3 中
// 配置 CloudFront 分发
 
// 1. 创建 CloudFront Distribution（通过 AWS CDK）
import * as cdk from "aws-cdk-lib";
import * as cloudfront from "aws-cdk-lib/aws-cloudfront";
import * as origins from "aws-cdk-lib/aws-cloudfront-origins";
import * as s3 from "aws-cdk-lib/aws-s3";
 
const videoBucket = s3.Bucket.fromBucketName(
  this, "VideoBucket", "remotionlambda-us-east-1-xxxxx"
);
 
const distribution = new cloudfront.Distribution(this, "VideoDistribution", {
  defaultBehavior: {
    origin: new origins.S3Origin(videoBucket),
    viewerProtocolPolicy: cloudfront.ViewerProtocolPolicy.REDIRECT_TO_HTTPS,
    cachePolicy: cloudfront.CachePolicy.CACHING_OPTIMIZED,
  },
  // 视频文件缓存 30 天
  additionalBehaviors: {
    "renders/*": {
      origin: new origins.S3Origin(videoBucket),
      cachePolicy: new cloudfront.CachePolicy(this, "VideoCachePolicy", {
        defaultTtl: cdk.Duration.days(30),
        maxTtl: cdk.Duration.days(365),
      }),
    },
  },
});

// 渲染完成后，将视频从 S3 复制到 R2
import { S3Client, CopyObjectCommand } from "@aws-sdk/client-s3";
 
const r2Client = new S3Client({
  region: "auto",
  endpoint: `https://${process.env.CF_ACCOUNT_ID}.r2.cloudflarestorage.com`,
  credentials: {
    accessKeyId: process.env.R2_ACCESS_KEY!,
    secretAccessKey: process.env.R2_SECRET_KEY!,
  },
});
 
// 上传到 R2
async function copyToR2(s3Url: string, videoKey: string) {
  const response = await fetch(s3Url);
  const buffer = await response.arrayBuffer();
 
  await r2Client.send(new PutObjectCommand({
    Bucket: "video-output",
    Key: videoKey,
    Body: Buffer.from(buffer),
    ContentType: "video/mp4",
  }));
 
  // 通过 Cloudflare CDN 访问
  return `https://videos.yourdomain.com/${videoKey}`;
}

// monitoring.ts — 渲染监控
import { getRenderProgress } from "@remotion/lambda/client";
 
interface RenderMetrics {
  renderId: string;
  duration: number;
  cost: number;
  success: boolean;
  errors: string[];
}
 
// 渲染完成后记录指标
async function trackRender(renderId: string, bucketName: string): Promise<RenderMetrics> {
  const progress = await getRenderProgress({
    region: "us-east-1",
    functionName: process.env.REMOTION_FUNCTION_NAME!,
    renderId,
    bucketName,
  });
 
  const metrics: RenderMetrics = {
    renderId,
    duration: progress.timeToFinish ?? 0,
    cost: progress.costs?.estimatedCost ?? 0,
    success: progress.done && !progress.fatalErrorEncountered,
    errors: progress.errors?.map(e => e.message) ?? [],
  };
 
  // 发送到监控系统（Datadog / CloudWatch / 自建）
  console.log("[Render Metrics]", JSON.stringify(metrics));
 
  // 失败告警
  if (!metrics.success) {
    await sendAlert({
      channel: "#video-alerts",
      message: `❌ 渲染失败: ${renderId}\n错误: ${metrics.errors.join(", ")}`,
    });
  }
 
  // 成本异常告警（单次渲染超过 $0.50）
  if (metrics.cost > 0.50) {
    await sendAlert({
      channel: "#cost-alerts",
      message: `⚠️ 高成本渲染: ${renderId}\n费用: $${metrics.cost.toFixed(3)}`,
    });
  }
 
  return metrics;
}

┌─────────────────────────────────────────────────────────────┐
│                     生产架构                                 │
│                                                             │
│  用户请求                                                    │
│    │                                                        │
│    ▼                                                        │
│  ┌──────────┐    ┌──────────────┐    ┌─────────────────┐    │
│  │ Next.js  │───▶│ 渲染队列     │───▶│ Remotion Lambda │    │
│  │ 前端+API │    │ (SQS/Redis)  │    │ 分布式渲染      │    │
│  └──────────┘    └──────────────┘    └────────┬────────┘    │
│                                               │             │
│                                               ▼             │
│  ┌──────────┐    ┌──────────────┐    ┌─────────────────┐    │
│  │ 用户下载  │◀───│ CloudFront   │◀───│ S3 存储         │    │
│  │ / 嵌入   │    │ CDN 分发     │    │ 渲染输出        │    │
│  └──────────┘    └──────────────┘    └─────────────────┘    │
│                                                             │
│  ┌──────────────────────────────────────────────────────┐   │
│  │ 监控层：CloudWatch + 成本追踪 + 失败告警              │   │
│  └──────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────┘