Using the Serverless Framework with Remotion Lambda
This guide will show you how to use Remotion with Serverless Framework (serverless.com).
To supplement this guide, two projects have been created. The remotion-app contains a Remotion composition and utility scripts for deploying and deleting Remotion Lambda infrastructure in AWS.
The serverless-app contains a Serverless project that deploys two Lambda functions. The render_handler function, when invoked, will call the deployed Remotion Lambda function to render a video. The progress_handler function tracks the progress of the render.
Both functions are configured to be invoked through API Gateway and are secured by Cognito. The API Gateway and Cognito setup is automatically created by the Serverless deployment script upon execution of serverless deploy
.
This assumes that you have knowledge in using Serverless Framework and understand the syntax of serverless.yml.
remotion-app
This contains instructions for setting up and installing the remotion
Lambda to your AWS account. This deployment is designed to be executed on your local machine.
Prequisites
- Make sure that your local AWS profile is able to deploy to AWS, or follow this guide to set up a user for your local machine.
Setup
1. Clone or download the project
The project can be found at remotion-serverless project
.
bash
git clone https://github.com/alexfernandez803/remotion-serverless
bash
git clone https://github.com/alexfernandez803/remotion-serverless
2. Go to remotion-serverless
and traverse to the remotion-app
directory
bash
cd remotion-serverless && cd remotion-app
bash
cd remotion-serverless && cd remotion-app
3. Install dependencies
- npm
- yarn
- pnpm
bash
npm i
bash
npm i
bash
pnpm i
bash
pnpm i
bash
yarn
bash
yarn
4. Configure credentials
An .env
file needs to be added to the directory to configure the AWS credentials that the project will use for deployment.
.envbash
AWS_KEY_1=AWS_SECRET_1=
.envbash
AWS_KEY_1=AWS_SECRET_1=
You can use multiple accounts if you would like to do load-balancing.
.envbash
AWS_KEY_1=AWS_SECRET_1=AWS_KEY_2=AWS_SECRET_2=
.envbash
AWS_KEY_1=AWS_SECRET_1=AWS_KEY_2=AWS_SECRET_2=
The AWS_KEY_*
and AWS_SECRET_*
represent the AWS account credentials that are allowed to deploy the Remotion Lambda function.
5. Deploy the Lambda function
The project has the deployment script configured in package.json.
package.jsonjson
{// ..."scripts": {"test": "echo \"Error: no test specified\" && exit 1","deploy-fn": "ts-nodwe 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.jsonjson
{// ..."scripts": {"test": "echo \"Error: no test specified\" && exit 1","deploy-fn": "ts-nodwe 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"}}
- npm
- yarn
- pnpm
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
This will execute the deploy function that will deploy the Remotion Lambda to your AWS account.
deployment logsbash
Found 1 accounts. Deploying...Ensured function="remotion-render-3-3-78-mem2048mb-disk2048mb-240sec" to region="ap-southeast-2" in account 1entryPoint /xxxx/code/remotion-serverless/remotion-app/src/index.tsxDeployed 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"
deployment logsbash
Found 1 accounts. Deploying...Ensured function="remotion-render-3-3-78-mem2048mb-disk2048mb-240sec" to region="ap-southeast-2" in account 1entryPoint /xxxx/code/remotion-serverless/remotion-app/src/index.tsxDeployed 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) Delete the lambda function if not needed.
- npm
- yarn
- pnpm
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
This will execute the delete function which removes the Remotion Lambda function from your AWS account.
serverless-app
This contains instructions for setting up and installing Lambda services render_handler and progress_handler to your AWS account. This guide is designed to be executed on your local machine.
Context
This application has been created by an application example from serverless examples repo and bootstrapped the application using this command.
serverlessbash
serverless --template-url=https://github.com/serverless/examples/tree/v3/aws-node-http-api-typescript
serverlessbash
serverless --template-url=https://github.com/serverless/examples/tree/v3/aws-node-http-api-typescript
After creating the serverless
application, update it to the latest version by navigating to the application directory using the terminal.
bash
npm update
bash
npm update
Prerequisites
- AWS deployment profile on your local machine, to configure an AWS deployment profile on your local machine, follow the guide provided by the serverless website.
- To install Serverless, follow this guide.
- Register for an serverless account, this give you a dashboard that has features such as function lambda invocations.
- Create an organization on your serverless account to associate your
lambda
applications. - A AWS policy created named
remotion-executionrole-policy
which is created from this guide.
Setup
1. Clone or download the project
The project can be found at remotion-serverless project
.
If not done in the previous step, clone the project using:
bash
git clone https://github.com/alexfernandez803/remotion-serverless
bash
git clone https://github.com/alexfernandez803/remotion-serverless
2. Go to remotion-serverless
and traverse to serverless-app
directory
bash
cd remotion-serverless && cd serverless-app
bash
cd remotion-serverless && cd serverless-app
3. Install dependencies
- npm
- yarn
- pnpm
bash
npm i
bash
npm i
bash
pnpm i
bash
pnpm i
bash
yarn
bash
yarn
4. Configure the serverless execution role
Each of the function is assigned with a role named remotionLambdaServerlessRole
as both function has the same access patterns to the Remotion Lambda.
Steps
- Go to AWS account IAM Roles section
- Click "Create role".
- Under "Use cases", select "Lambda". Click next.
- Under "Permissions policies", filter for
remotion-executionrole-policy
and click the checkbox to assign this policy. Thispolicy
should have been created, if not, follow this guide in setting this up. - Additionally, still in "Permission policies" clear the filter and filter again for
AWSLambdaBasicExecutionRole
. Click the checkbox and click next. - In the final step, name the role
remotionLambdaServerlessRole
exactly. You can leave the other fields as is. - Click "Create role" to confirm.
This steps creates a role named remotionLambdaServerlessRole
with permissions from remotion-executionrole-policy
and AWSLambdaBasicExecutionRole
which allows the lambda function to create Cloudwatch logs. The role is referenced by the two functions in the serverless.yml file, which enables the two Lambda functions to render video and check the progress of the render.
5. Login into serverless
From the serverless-app
directory, execute the serverless
command.
bash
serverless login
bash
serverless login
Follow the prompt, select Serverless Framework Dashboard
, this will log you into the serverless website so that your application can have a dashboard.
6. Initialize the serverless project
From the serverless-app
directory, execute the serverless
command.
bash
serverless
bash
serverless
This will setup your project for deployment.
serverlessbash
serverlessRunning "serverless" from node_modulesYour service is configured with Serverless Dashboard and is ready to be deployed.? Do you want to deploy now? (Y/n)
serverlessbash
serverlessRunning "serverless" from node_modulesYour service is configured with Serverless Dashboard and is ready to be deployed.? Do you want to deploy now? (Y/n)
Select 'n' for the answer of the prompt.
7. Deploy the serverless project
From the serverless-app
directory.
serverless deploybash
serverless deploy
serverless deploybash
serverless deploy
deploy responsebash
serverless deployRunning "serverless" from node_modulesDeploying api-render-video to stage dev (ap-southeast-2)Compiling with Typescript...Using local tsconfig.json - tsconfig.jsonTypescript 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-2endpoints:POST - https://XXXXX.execute-api.ap-southeast-2.amazonaws.com/dev/renderGET - 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 responsebash
serverless deployRunning "serverless" from node_modulesDeploying api-render-video to stage dev (ap-southeast-2)Compiling with Typescript...Using local tsconfig.json - tsconfig.jsonTypescript 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-2endpoints:POST - https://XXXXX.execute-api.ap-southeast-2.amazonaws.com/dev/renderGET - 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)
The serverless application is configured to be associated in changeme
organization dashboard from serverless dashboard.
serverless.ymlbash
org: changemeapp: aws-remotion-serverlessservice: api-render-video....
serverless.ymlbash
org: changemeapp: aws-remotion-serverlessservice: api-render-video....
8. Remove the serverless project from your AWS account, if not needed anymore
From the serverless-app
directory.
bash
serverless remove
bash
serverless remove
Interacting with the API
The API requires an authorization token to interact with it. To obtain the token, first go to the serverless dashboard to retrieve outputs such as UserPoolRegion
, UserPoolId
, and UserPoolClientId
, which are used to authenticate with Cognito. If you do not have a frontend application, you can create a user and an authentication token manually for the API by following this guide.
From the guide, YOUR_USER_POOL_CLIENT_ID
is UserpoolClientId
and YOUR_USER_POOL_ID
is the UserPoolId
, the steps should be followed up to retrieving the IdToken
.
The base API URL is https://25w651t09g.execute-api.ap-southeast-2.amazonaws.com/dev/render
from the dashboard output APIGatewayUrl
.
1. Render a video
render videobash
curl --location --request POST 'https://xxxxxxxx.execute-api.ap-southeast-2.amazonaws.com/dev/render' \--header 'Authorization: Bearer eyJraWQiOiJMVVVVZGtIQ1JXWEEyWEEXXXXXXXXXjMKR1t5S-oA'
render videobash
curl --location --request POST 'https://xxxxxxxx.execute-api.ap-southeast-2.amazonaws.com/dev/render' \--header 'Authorization: Bearer eyJraWQiOiJMVVVVZGtIQ1JXWEEyWEEXXXXXXXXXjMKR1t5S-oA'
responsebash
{"message": "Video sent for rendering.","renderId": "i9xnfrgXXXX","bucketName": "remotionlambda-apsoutheast2-xxxxxxxx"}
responsebash
{"message": "Video sent for rendering.","renderId": "i9xnfrgXXXX","bucketName": "remotionlambda-apsoutheast2-xxxxxxxx"}
This will initiate the render of the video and provide output with the renderId
and bucketName
. The code for the Lambda function is located here.
2. Get the progress of the render
progressbash
curl --location --request GET 'https://xxxxxxxx.execute-api.ap-southeast-2.amazonaws.com/dev/render/i9xnfrgXXXX?bucketName=remotionlambda-apsoutheast2-xxxxxxxx' \--header 'Authorization: Bearer eyJraWQiOiJMVVVVZGtIQ1JXWEEXXXXXXXXXXXvaQ'
progressbash
curl --location --request GET 'https://xxxxxxxx.execute-api.ap-southeast-2.amazonaws.com/dev/render/i9xnfrgXXXX?bucketName=remotionlambda-apsoutheast2-xxxxxxxx' \--header 'Authorization: Bearer eyJraWQiOiJMVVVVZGtIQ1JXWEEXXXXXXXXXXXvaQ'
responsebash
{"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"}
responsebash
{"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"}
This API will provide the progress details of the render, indicating whether it is a success
or failure
. If the video render is completed, it will provide the mediaUrl
, which is a pre-signed URL that makes the video downloadable. The code for the Lambda function is located here.
Notes
- The deployment of Remotion Lambda is configured to be deployed only to
ap-southeast-2
region to simplify the project, adjust this in the code at region.ts.
See also
- Using Lambda without IAM user
- Using Lambda with SQS
- Permissions
- Serverless Framework
- Some codes are borrowed from github-unwrapped-2021