Skip to main content

Using the Serverless Framework with Remotion Lambda

import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem';

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​

<Tabs defaultValue="npm" values={[ { label: 'npm', value: 'npm', }, { label: 'yarn', value: 'yarn', }, { label: 'pnpm', value: '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.

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

You can use multiple accounts if you would like to do load-balancing.

.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=

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.json
json
{
  // ...
  "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.json
json
{
  // ...
  "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"
  }
}

<Tabs defaultValue="npm" values={[ { label: 'npm', value: 'npm', }, { label: 'yarn', value: 'yarn', }, { label: 'pnpm', value: '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 logs
bash
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"
deployment logs
bash
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) Delete the lambda function if not needed.​

<Tabs defaultValue="npm" values={[ { label: 'npm', value: 'npm', }, { label: 'yarn', value: 'yarn', }, { label: 'pnpm', value: '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.

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

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​

<Tabs defaultValue="npm" values={[ { label: 'npm', value: 'npm', }, { label: 'yarn', value: 'yarn', }, { label: 'pnpm', value: '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. This policy 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.

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)

Select 'n' for the answer of the prompt.

7. Deploy the serverless project​

From the serverless-app directory.

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)

The serverless application is configured to be associated in changeme organization dashboard from 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. 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 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"
}

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​

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"
}

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​