Skip to main content

使用 Serverless Framework 与 Remotion Lambda

本指南将向您展示如何使用 Serverless Framework (serverless.com) 与 Remotion。

为了补充本指南,已创建了两个项目。remotion-app 包含一个 Remotion 组合和用于部署和删除 AWS 中 Remotion Lambda 基础设施的实用脚本。

serverless-app 包含一个部署两个 Lambda 函数的 Serverless 项目。当调用 render_handler 函数时,将调用部署的 Remotion Lambda 函数来渲染视频。progress_handler 函数跟踪渲染的进度。

这两个函数都配置为通过 API Gateway 调用,并由 Cognito 保护。API Gateway 和 Cognito 的设置会在执行 serverless deploy 时由 Serverless 部署脚本自动创建。 这假设您具有使用 Serverless Framework 的知识,并了解 serverless.yml 的语法。

remotion-app

这包含了将 remotion Lambda 部署到您的 AWS 帐户的设置和安装说明。此部署旨在在您的本地计算机上执行。

先决条件

  • 确保您的本地 AWS 配置文件能够部署到 AWS,或按照此 指南 为您的本地计算机设置用户。

设置

1. 克隆或下载项目

项目可以在remotion-serverless 项目找到。

bash
git clone https://github.com/alexfernandez803/remotion-serverless
bash
git clone https://github.com/alexfernandez803/remotion-serverless

2. 进入 remotion-serverless 并转到 remotion-app 目录

bash
cd remotion-serverless && cd remotion-app
bash
cd remotion-serverless && cd remotion-app

3. 安装依赖项

bash
npm i
bash
npm i
bash
pnpm i
bash
pnpm i
bash
yarn
bash
yarn

4. 配置凭据

需要在目录中添加一个 .env 文件来配置项目将用于部署的 AWS 凭据。

.env
bash
AWS_KEY_1=
AWS_SECRET_1=
.env
bash
AWS_KEY_1=
AWS_SECRET_1=

如果您希望进行负载均衡,可以使用多个帐户。

.env
bash
AWS_KEY_1=
AWS_SECRET_1=
AWS_KEY_2=
AWS_SECRET_2=
.env
bash
AWS_KEY_1=
AWS_SECRET_1=
AWS_KEY_2=
AWS_SECRET_2=

AWS_KEY_*AWS_SECRET_* 代表允许部署 Remotion Lambda 函数的 AWS 帐户凭据。

5. 部署 Lambda 函数

项目在 package.json 中配置了部署脚本。

package.json
json
{
// ...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"deploy-fn": "ts-node src/infra/deploy-lambda-fn.ts",
"delete-fn": "ts-node src/infra/delete-lambda-fn.ts",
"render-fn": "ts-node src/infra/local-render-fn.ts"
}
}
package.json
json
{
// ...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"deploy-fn": "ts-node src/infra/deploy-lambda-fn.ts",
"delete-fn": "ts-node src/infra/delete-lambda-fn.ts",
"render-fn": "ts-node src/infra/local-render-fn.ts"
}
}
bash
npm run deploy-fn
bash
npm run deploy-fn
bash
pnpm run deploy-fn
bash
pnpm run deploy-fn
bash
yarn deploy-fn
bash
yarn deploy-fn

这将执行部署函数,将 Remotion Lambda 部署到您的 AWS 帐户。

Found 1 accounts. Deploying...
Ensured function="remotion-render-3-3-78-mem2048mb-disk2048mb-240sec" to region="ap-southeast-2" in account 1
entryPoint /xxxx/code/remotion-serverless/remotion-app/src/index.tsx
Deployed site to region="ap-southeast-2" in account 1 with bucket="remotionlambda-apsoutheast2-xxxxx" under serveUrl="https://remotionlambda-apsoutheast2-xxxxx.s3.ap-southeast-2.amazonaws.com/sites/remotion-render-app-3.3.78/index.html"
Found 1 accounts. Deploying...
Ensured function="remotion-render-3-3-78-mem2048mb-disk2048mb-240sec" to region="ap-southeast-2" in account 1
entryPoint /xxxx/code/remotion-serverless/remotion-app/src/index.tsx
Deployed site to region="ap-southeast-2" in account 1 with bucket="remotionlambda-apsoutheast2-xxxxx" under serveUrl="https://remotionlambda-apsoutheast2-xxxxx.s3.ap-southeast-2.amazonaws.com/sites/remotion-render-app-3.3.78/index.html"

6. (Optional) 如果不需要,删除 lambda 函数。

bash
npm run delete-fn
bash
npm run delete-fn
bash
pnpm run delete-fn
bash
pnpm run delete-fn
bash
yarn delete-fn
bash
yarn delete-fn

这将执行 delete function,从您的 AWS 账户中删除 Remotion Lambda 函数。

serverless-app

这包含了设置和安装 Lambda 服务 render_handlerprogress_handler 到您的 AWS 账户的说明。本指南旨在在您的本地计算机上执行。

上下文

此应用程序是通过 serverless examples repo 中的一个应用示例创建的,并使用以下命令引导了应用程序。

serverless
bash
serverless --template-url=https://github.com/serverless/examples/tree/v3/aws-node-http-api-typescript
serverless
bash
serverless --template-url=https://github.com/serverless/examples/tree/v3/aws-node-http-api-typescript

创建 serverless 应用程序后,通过终端导航到应用程序目录,使用以下命令将其更新到最新版本。

bash
npm update
bash
npm update

先决条件

  • 在您的本地计算机上配置 AWS 部署配置文件,要配置 AWS 部署配置文件,请按照 serverless 网站 提供的指南操作。
  • 要安装 Serverless,请按照此 指南 操作。
  • 注册一个 serverless 账户,这将为您提供一个仪表板,具有功能如函数 lambda 调用。
  • 在您的 serverless 账户上创建一个 组织,以关联您的 lambda 应用程序。
  • 创建一个名为 remotion-executionrole-policy 的 AWS 策略,该策略是从此 指南 创建的。

设置

1. 克隆或下载项目

项目位于 remotion-serverless project
如果在上一步中未完成,请使用以下命令克隆项目:

bash
git clone https://github.com/alexfernandez803/remotion-serverless
bash
git clone https://github.com/alexfernandez803/remotion-serverless

2. 进入 remotion-serverless 并转到 serverless-app 目录

bash
cd remotion-serverless && cd serverless-app
bash
cd remotion-serverless && cd serverless-app

3. 安装依赖项

bash
npm i
bash
npm i
bash
pnpm i
bash
pnpm i
bash
yarn
bash
yarn

4. 配置 serverless 执行角色

每个函数都分配了一个名为 remotionLambdaServerlessRole 的角色,因为这两个函数对 Remotion Lambda 具有相同的访问模式。

步骤

  • 转到 AWS 账户 IAM 角色部分
  • 点击 "创建角色"。
  • 在 "用例" 下,选择 "Lambda"。点击下一步。
  • 在 "权限策略" 下,过滤 remotion-executionrole-policy 并选中复选框以分配此策略。如果尚未创建此 policy,请按照此 指南 设置。
  • 此外,在 "权限策略" 中清除过滤器,然后再次过滤 AWSLambdaBasicExecutionRole。选中复选框,然后点击下一步。
  • 在最后一步中,将角色命名为 remotionLambdaServerlessRole。您可以将其他字段保留为默认值。
  • 点击 "创建角色" 以确认。

这些步骤创建了一个名为 remotionLambdaServerlessRole 的角色,具有来自 remotion-executionrole-policyAWSLambdaBasicExecutionRole 的权限,允许 lambda 函数创建 Cloudwatch 日志。该角色由 serverless.yml 文件中的两个函数引用,这使得这两个 Lambda 函数能够渲染视频并检查渲染进度。

5. 登录到 serverless

serverless-app 目录,执行 serverless 命令。

bash
serverless login
bash
serverless login

按照提示,选择 Serverless Framework Dashboard,这将使您登录到 serverless 网站,以便您的应用程序可以拥有仪表板。

6. 初始化 serverless 项目

serverless-app 目录,执行 serverless 命令。

bash
serverless
bash
serverless

这将设置您的项目以进行部署。

serverless
bash
serverless
Running "serverless" from node_modules
Your service is configured with Serverless Dashboard and is ready to be deployed.
? Do you want to deploy now? (Y/n)
serverless
bash
serverless
Running "serverless" from node_modules
Your service is configured with Serverless Dashboard and is ready to be deployed.
? Do you want to deploy now? (Y/n)

选择 'n' 作为提示的答案。

7. 部署 serverless 项目

serverless-app 目录。

serverless deploy
bash
serverless deploy
serverless deploy
bash
serverless deploy
deploy response
bash
serverless deploy
Running "serverless" from node_modules
Deploying api-render-video to stage dev (ap-southeast-2)
Compiling with Typescript...
Using local tsconfig.json - tsconfig.json
Typescript compiled.
✔ Service deployed to stack api-render-video-dev (101s)
dashboard: https://app.serverless.com/changeme/apps/aws-remotion-serverless/api-render-video/dev/ap-southeast-2
endpoints:
POST - https://XXXXX.execute-api.ap-southeast-2.amazonaws.com/dev/render
GET - https://XXXXX.execute-api.ap-southeast-2.amazonaws.com/dev/render/{renderId}
functions:
render: api-render-video-dev-render (44 MB)
render_progress: api-render-video-dev-render_progress (44 MB)
deploy response
bash
serverless deploy
Running "serverless" from node_modules
Deploying api-render-video to stage dev (ap-southeast-2)
Compiling with Typescript...
Using local tsconfig.json - tsconfig.json
Typescript compiled.
✔ Service deployed to stack api-render-video-dev (101s)
dashboard: https://app.serverless.com/changeme/apps/aws-remotion-serverless/api-render-video/dev/ap-southeast-2
endpoints:
POST - https://XXXXX.execute-api.ap-southeast-2.amazonaws.com/dev/render
GET - https://XXXXX.execute-api.ap-southeast-2.amazonaws.com/dev/render/{renderId}
functions:
render: api-render-video-dev-render (44 MB)
render_progress: api-render-video-dev-render_progress (44 MB)

serverless 应用程序配置为关联到 changeme 组织仪表板中的 serverless dashboard

serverless.yml
bash
org: changeme
app: aws-remotion-serverless
service: api-render-video
....
serverless.yml
bash
org: changeme
app: aws-remotion-serverless
service: api-render-video
....

8. 如果不再需要,从您的 AWS 账户中删除 serverless 项目

serverless-app 目录。

bash
serverless remove
bash
serverless remove

与 API 交互

API 需要授权令牌才能与其交互。要获取令牌,请首先转到 serverless 仪表板,检索输出,如 UserPoolRegionUserPoolIdUserPoolClientId,用于与 Cognito 进行身份验证。如果您没有前端应用程序,可以通过按照此 指南 手动为 API 创建用户和身份验证令牌。



从指南中,YOUR_USER_POOL_CLIENT_IDUserpoolClientIdYOUR_USER_POOL_IDUserPoolId,应该按照步骤进行操作,直到检索到 IdToken

基本 API URL 是 https://25w651t09g.execute-api.ap-southeast-2.amazonaws.com/dev/render,来自仪表板输出 APIGatewayUrl

1. 渲染视频

render video
bash
curl --location --request POST 'https://xxxxxxxx.execute-api.ap-southeast-2.amazonaws.com/dev/render' \
--header 'Authorization: Bearer eyJraWQiOiJMVVVVZGtIQ1JXWEEyWEEXXXXXXXXXjMKR1t5S-oA'
render video
bash
curl --location --request POST 'https://xxxxxxxx.execute-api.ap-southeast-2.amazonaws.com/dev/render' \
--header 'Authorization: Bearer eyJraWQiOiJMVVVVZGtIQ1JXWEEyWEEXXXXXXXXXjMKR1t5S-oA'
response
bash
{
"message": "Video sent for rendering.",
"renderId": "i9xnfrgXXXX",
"bucketName": "remotionlambda-apsoutheast2-xxxxxxxx"
}
response
bash
{
"message": "Video sent for rendering.",
"renderId": "i9xnfrgXXXX",
"bucketName": "remotionlambda-apsoutheast2-xxxxxxxx"
}

这将启动视频的渲染,并提供带有 renderIdbucketName 的输出。Lambda 函数的代码位于 此处

2. 获取渲染进度

progress
bash
curl --location --request GET 'https://xxxxxxxx.execute-api.ap-southeast-2.amazonaws.com/dev/render/i9xnfrgXXXX?bucketName=remotionlambda-apsoutheast2-xxxxxxxx' \
--header 'Authorization: Bearer eyJraWQiOiJMVVVVZGtIQ1JXWEEXXXXXXXXXXXvaQ'
progress
bash
curl --location --request GET 'https://xxxxxxxx.execute-api.ap-southeast-2.amazonaws.com/dev/render/i9xnfrgXXXX?bucketName=remotionlambda-apsoutheast2-xxxxxxxx' \
--header 'Authorization: Bearer eyJraWQiOiJMVVVVZGtIQ1JXWEEXXXXXXXXXXXvaQ'
response
bash
{
"message": "Render found.",
"renderId": "i9xnfrgXXXX",
"bucketName": "remotionlambda-apsoutheast2-xxxxxxxx",
"finality": {
"type": "success",
"url": "https://s3.ap-southeast-2.amazonaws.com/remotionlambda-apsoutheast2-xxxxxxxx/renders/i9xnfrgXXXX/out.mp4"
},
"mediaUrl": "https://remotionlambda-apsoutheast2-xxxxxxxx.s3.ap-southeast-2.amazonaws.com/renders/i9xnfrgXXXX/out.mp4?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAZ3B4C6O75ZTGPMJ4%2F20230128%2Fap-southeast-2%2Fs3%2Faws4_request&X-Amz-Date=20230128T073123Z&X-Amz-Expires=900&X-Amz-Security-Token=IQXXXXXXXXV%2BWIoTQ5CvZXcljmGUIOkllDRsnmrRGNYvY8IVn8FRQmt%2Bc8%2BJQdiG0ShI0y82jB2s%2BbkaPf%2FJNDrSjO5tBo8%2FXwtaP2z9PewUIND1yMm4TkOUMXXXXXn6j&X-Amz-Signature=0881241614cd6c778b1XXXXXX42941c&X-Amz-SignedHeaders=host&x-id=GetObject"
}
response
bash
{
"message": "Render found.",
"renderId": "i9xnfrgXXXX",
"bucketName": "remotionlambda-apsoutheast2-xxxxxxxx",
"finality": {
"type": "success",
"url": "https://s3.ap-southeast-2.amazonaws.com/remotionlambda-apsoutheast2-xxxxxxxx/renders/i9xnfrgXXXX/out.mp4"
},
"mediaUrl": "https://remotionlambda-apsoutheast2-xxxxxxxx.s3.ap-southeast-2.amazonaws.com/renders/i9xnfrgXXXX/out.mp4?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAZ3B4C6O75ZTGPMJ4%2F20230128%2Fap-southeast-2%2Fs3%2Faws4_request&X-Amz-Date=20230128T073123Z&X-Amz-Expires=900&X-Amz-Security-Token=IQXXXXXXXXV%2BWIoTQ5CvZXcljmGUIOkllDRsnmrRGNYvY8IVn8FRQmt%2Bc8%2BJQdiG0ShI0y82jB2s%2BbkaPf%2FJNDrSjO5tBo8%2FXwtaP2z9PewUIND1yMm4TkOUMXXXXXn6j&X-Amz-Signature=0881241614cd6c778b1XXXXXX42941c&X-Amz-SignedHeaders=host&x-id=GetObject"
}

此 API 将提供渲染的进度详细信息,指示其是 success 还是 failure。如果视频渲染完成,它将提供 mediaUrl,这是一个预签名 URL,可使视频可下载。Lambda 函数的代码位于 此处

Notes

  • Remotion Lambda 的部署配置为仅部署到 ap-southeast-2 区域,以简化项目,您可以在 region.ts 的代码中调整此设置。

参见