remotion lambda aws クラウドレンダリング チュートリアル

Remotion Lambda でクラウドレンダリング — 導入から運用まで

Read in English →

Remotion Lambda でクラウドレンダリング — 導入から運用まで

Remotionでローカルレンダリングをしているうちはよいのですが、「顧客ごとにパーソナライズされた動画を100本生成したい」「APIリクエストを受け取るたびに動画を自動生成したい」となった瞬間、ローカルマシンはすぐに限界を迎えます。

Remotion Lambdaは、その問題を解消するための公式クラウドレンダリングソリューションです。AWS Lambda上でフレームを並列処理し、使った分だけ支払うサーバーレスアーキテクチャで、ローカルより何倍もの速度でレンダリングできます。

本記事では、パッケージのインストールからAWS IAMの設定、デプロイ、レンダリングAPIの呼び出し、コスト管理まで、実際の手順に沿って説明します。

ローカルレンダリング vs Lambda — どちらを選ぶか

まず両者の違いを整理します。

ローカルレンダリングは、フレームをCPUで1枚ずつ順番に処理します。30fpsの60秒動画であれば1,800フレームを直列処理するため、高性能なマシンでも数分かかります。単発の確認用なら問題ありませんが、自動化パイプラインには向きません。

Remotion Lambdaは、動画を複数のチャンクに分割して並列処理します。50〜100個のLambda関数が同時に動けば、5分かかっていたレンダリングが30秒以内に完了することもあります。

比較項目ローカルLambda
60秒動画のレンダリング時間3〜7分20〜60秒
コスト電気代のみ1レンダリングあたり $0.001〜$0.05（目安）
並列処理不可数百の同時実行が可能
スケーラビリティ手動自動
初期セットアップ不要約30分

大量生成・自動化・オンデマンド生成が必要な場合はLambda一択です。

前提条件

作業を始める前に以下を用意してください。

  • ローカルで動作中のRemotionプロジェクト（なければ npx create-video@latest で作成）
  • Node.js 18以降
  • AWS アカウント（請求設定済み）
  • AWS CLI のインストールと aws configure による認証設定
  • IAMの基本知識（ユーザー・ロール・ポリシーの概念）

ステップ1 — @remotion/lambda をインストールする

既存のRemotionプロジェクトにLambdaパッケージを追加します。バージョンはコアの remotion パッケージと完全に一致させる必要があります。

npm install @remotion/lambda

インストール後、package.json で remotion と @remotion/lambda のバージョンが同一であることを確認してください。バージョン不一致はデプロイ失敗の最も多い原因です。

ステップ2 — AWS IAMを設定する

Remotion LambdaにはIAMエンティティが2つ必要です。ローカルマシン・CIパイプラインからAWSを操作するユーザーと、Lambda関数がS3にアクセスしたり子Lambdaを起動したりするためのロールです。

ユーザーポリシーの作成

npx remotion lambda policies user

このコマンドが出力するJSONをコピーします。AWSコンソールで IAM → ポリシー → ポリシーの作成 を開き、JSONタブに貼り付けてポリシーを保存します。そのポリシーをローカルで使用しているIAMユーザーにアタッチしてください。

Lambda実行ロールの作成

npx remotion lambda policies role

出力されたJSONを使って、AWSコンソールで IAM → ロール → ロールの作成 からロールを作成します。信頼エンティティには Lambda を選択し、新しいポリシーを作成してJSONを貼り付けます。このとき、ポリシー名は必ず以下の名前にしてください。

remotion-lambda-policy

この名前はRemotionのCLIがデプロイ時に参照するため、正確に一致させる必要があります。

AWSリージョンの設定

Remotion Lambdaのリソース（関数・S3バケット・レンダリングジョブ）はすべて同一リージョンに置く必要があります。

export AWS_DEFAULT_REGION=us-east-1

Remotionが対応しているリージョンには us-east-1、eu-west-1、ap-northeast-1 などがあります。デフォルトは us-east-1 です。レンダリングリクエストの発生源に近いリージョンを選ぶとレイテンシとコストを抑えられます。

ステップ3 — Lambda関数をデプロイする

Lambda関数はレンダリングワーカーです。フレームのチャンクを受け取り、ヘッドレスChromiumでレンダリングして結果をS3にアップロードします。

CLIでデプロイする

npx remotion lambda functions deploy

このコマンドがAWSアカウントにLambda関数を作成します。デフォルト設定はメモリ2048MB・タイムアウト120秒です。関数名（例: remotion-render-3-3-xx-mem2048mb-disk2048mb-120sec）が表示されるので控えておいてください。

Node.js APIでデプロイする

CIパイプラインやデプロイスクリプトに組み込む場合は deployFunction() を使います。

import { deployFunction } from "@remotion/lambda";

const { functionName } = await deployFunction({
  region: "us-east-1",
  timeoutInSeconds: 120,
  memorySizeInMb: 2048,
  createCloudWatchLogGroup: true,
});

console.log("デプロイ完了:", functionName);

タイムアウトは900秒未満に設定する必要があります。Remotionチームの推奨は120秒以下です。レンダリングに時間がかかる場合はタイムアウトを延ばすのではなく、並列数（コンカレンシー）を増やすほうが効率的です。

ステップ4 — Remotionサイトをデプロイする

Lambda関数がReactコンポーネントをロードできるように、プロジェクトをバンドルしてS3にアップロードします。これを行うのが deploySite() です。

CLIでデプロイする

npx remotion lambda sites create src/index.ts --site-name=my-video

プロジェクトがバンドルされ、設定済みリージョンにS3バケットが作成（または既存バケットが再利用）されてアップロードされます。コマンドの最後に表示される サーブURL は、以降のすべてのレンダリング呼び出しに必要なので保存しておいてください。

Node.js APIでデプロイする

import { deploySite, getOrCreateBucket } from "@remotion/lambda";

const { bucketName } = await getOrCreateBucket({ region: "us-east-1" });

const { serveUrl } = await deploySite({
  bucketName,
  entryPoint: "./src/index.ts",
  region: "us-east-1",
  siteName: "my-video",
});

console.log("サーブURL:", serveUrl);

サイトの再デプロイはコンポジションの内容が変わったときだけ必要です。Lambda関数とサイトは独立しているため、どちらか一方だけ更新できます。

ステップ5 — renderMediaOnLambda でレンダリングを起動する

これがメインのAPI呼び出しです。renderMediaOnLambda() は分散レンダリングを開始し、進捗確認に使う renderId を返します。

import { renderMediaOnLambda } from "@remotion/lambda";

const { renderId, bucketName } = await renderMediaOnLambda({
  region: "us-east-1",
  functionName: "remotion-render-3-3-xx-mem2048mb-disk2048mb-120sec",
  serveUrl: "https://remotionlambda-xxxx.s3.us-east-1.amazonaws.com/sites/my-video/index.html",
  compositionId: "MyComposition",
  inputProps: {
    title: "2026年Q2 売上レポート",
    highlightColor: "#3b82f6",
  },
  codec: "h264",
  imageFormat: "jpeg",
  maxRetries: 1,
  privacy: "public",
  outName: "output.mp4",
});

console.log("レンダリング開始 ID:", renderId);

主要パラメータの解説:

  • compositionId — <Composition id="MyComposition" ...> で指定したIDと一致させる
  • inputProps — コンポジション側では getInputProps() で受け取れる。顧客名・チャートデータ・商品IDなど動的データを渡せる
  • codec — 汎用性重視なら "h264"、高圧縮なら "h265"、Webループ用には "gif" も選択可能
  • privacy — "public" にすると出力ファイルをS3から直接URLでアクセスできる
  • imageFormat — "jpeg" を選ぶとフレームキャプチャが高速になりコスト削減につながる

ステップ6 — 進捗確認と出力ファイルの取得

renderMediaOnLambda() はノンブロッキングです。getRenderProgress() でポーリングして状態を確認します。

import { getRenderProgress } from "@remotion/lambda";

const progress = await getRenderProgress({
  renderId,
  bucketName,
  functionName: "remotion-render-3-3-xx-mem2048mb-disk2048mb-120sec",
  region: "us-east-1",
});

if (progress.done) {
  console.log("レンダリング完了:", progress.outputFile);
  console.log("ファイルサイズ:", progress.outputSizeInBytes, "bytes");
} else if (progress.fatalErrorEncountered) {
  console.error("レンダリング失敗:", progress.errors);
} else {
  console.log("進捗:", Math.round(progress.overallProgress * 100), "%");
}

実用的な実装では1秒間隔でポーリングするループを使います。Webhookスタイルが必要な場合は、RemotionのドキュメントにSQS連携ガイドがあります。

progress.done が true になったとき、progress.outputFile にはS3上のURLまたはキーが格納されています。privacy: "public" であれば、そのURLを直接ユーザーに返すか、ダウンロードリダイレクトとして使用できます。

コストの内訳と最適化

Remotion Lambdaのコストは大きく3つに分かれます。

1. Lambdaコンピュート

AWSはGB秒単位で課金します。典型的なレンダリングでは2GBのLambda関数が数秒間動作します。目安として:

  • シンプルな30秒の動画（50並列）: $0.001〜$0.005 程度
  • グラフィックが複雑な3分動画: $0.01〜$0.05 程度

これらは概算値です。Remotionには estimatePrice() というAPIがあり、レンダリング実行前にコストを見積もれます。開発中に予想外の高コストコンポジションを早期発見するのに役立ちます。

2. S3ストレージとデータ転送

サイトバンドルと出力ファイルはS3に保存されます。ストレージコスト自体は少額ですが、大量の動画ファイルを配信する場合はデータ転送料が積み上がります。規模が大きくなったらS3の前段にCloudFrontを置くことを検討してください。

3. Remotionライセンス

商用利用にはRemotionの企業ライセンスが必要です。チーム人数などの条件を公式サイトで確認し、コストモデルに含めてください。

コスト最適化のポイント

  • メモリを下げる — デフォルトの2048MBは余裕を持った設定。軽めのコンポジションは1024MBで試し、レンダリング時間と比較する
  • JPEGフレームを使う — imageFormat: "jpeg" はPNGより大幅に高速で、Lambda実行時間を削減できる
  • 並列数を上げる — 関数を増やすと壁時計時間が短くなり、アイドル時間も減るためコストは横ばいかむしろ下がることが多い
  • サーブURLをキャッシュする — コンポジションが変わらない限り deploySite() を毎回呼ぶ必要はない

よくある質問（FAQ）

Q: AWSの無料枠でRemotion Lambdaを試せますか？ Lambdaには毎月100万リクエスト・40万GB秒の無料枠があります。小規模な実験であれば無料枠内に収まることが多いです。ただし、コンカレンシー上限を引き上げるには請求設定済みのアカウントが必要です。

Q: デプロイ時にポリシー関連のエラーが出ます。原因は何ですか？ 最も多い原因は、Lambdaの実行ロールに紐づけたポリシーの名前が remotion-lambda-policy と一致していないことです。IAMコンソールでロールとポリシーの名前を再確認してください。

Q: Lambda関数のタイムアウトを延ばしてよいですか？ Lambdaの上限は900秒ですが、Remotionは120秒以下を推奨しています。1つのLambdaが長時間動くより、多数の短時間Lambdaを並列で動かすほうが高速かつ低コストです。レンダリングが遅い場合はタイムアウトではなく並列数を増やしてください。

Q: renderMediaOnLambdaで動的なデータを渡すにはどうしますか？ inputProps パラメータを使います。コンポジション側は remotion の getInputProps() で受け取ります。顧客名・グラフのデータセット・商品SKUなどを渡し、リクエストごとに異なる動画を生成できます。これがデータドリブン動画の基本パターンです。

Q: レンダリング途中でLambdaのチャンクが失敗したらどうなりますか？ maxRetries の設定回数（デフォルトは1）だけ自動リトライします。リトライを使い切るとレンダリングはエラー状態になり、progress.fatalErrorEncountered が true になります。progress.errors にスタックトレースが格納されるので、デバッグに活用してください。

Q: MP4以外の形式でレンダリングできますか？ はい。codec パラメータで "h264"・"h265"・"vp8"・"vp9"・"gif"・"prores" などが選択できます。Webでループ再生するショートクリップには "gif"、放送品質のマスターファイルには "prores" が適しています。

Q: サーブURLを本番環境でどう管理すべきですか？ deploySite() が返すサーブURLを環境変数またはAWS SSM Parameter Storeに保存します。CIパイプラインの deploySite() 実行後に自動で更新するステップを組み込むのが一般的です。コンポジションが変わらない限り再デプロイは不要です。

まとめ

Remotion Lambdaの導入は一度だけの初期作業です。以下の手順を踏めば、30分ほどでクラウドレンダリングAPIが手に入ります。

  1. npm install @remotion/lambda
  2. npx remotion lambda policies user と policies role でIAMを設定
  3. npx remotion lambda functions deploy でLambdaワーカーをデプロイ
  4. npx remotion lambda sites create でコンポジションをS3にアップロード
  5. renderMediaOnLambda() でレンダリングを起動
  6. getRenderProgress() で進捗をポーリングし、完了後にURLを取得

規模が大きくなってきたら、SQSやBullMQなどのキューシステムを組み合わせてリクエストのバーストを制御するとよいでしょう。

RenderCompのテンプレートでさらに高速化

Lambdaのインフラが整っても、コンポジション自体の最適化が不十分だとレンダリング時間とコストに直結します。重いアセット、不必要な再レンダリング、巨大なバンドルはLambdaの実行時間を押し上げます。

RenderComp は、Lambdaレンダリングを前提に最適化されたRemotionテンプレートを1,400本以上提供しています。軽量なバンドル、JPEG対応のフレーム設計、inputProps にそのまま渡せるクリーンなインターフェース。テンプレートから始めることで、インフラもコンポジションも両方最適な状態でスタートできます。

RenderCompのテンプレートを見る →

すぐに使える

1,400以上のRemotionテンプレートを一括入手

買い切り永続ライセンス。TypeScript製。今日から動画制作スピードが変わります。

RenderCompを試す →