https://www.randpy.tokyo/entry/remotion-7-github

GitHub ActionsとRemotionで自動動画生成

📚 Remotion シリーズ全8回の記事一覧

第1回: 全体像をまとめる
Composition / AbsoluteFill / Sequence で動画の骨組みを作る
第2回: Hooks を理解する
useCurrentFrame / useVideoConfig でフレーム番号と設定を取得する
第3回: アニメーションを作る
interpolate / spring でフレーム番号を CSS の値に変換する
第4回: 素材を使う
画像・動画・音楽素材を組み込む
第5回: テロップを入れる
テキストオーバーレイの作り方
第6回: シーンを構成する
Series / TransitionSeries でシーン切り替えとトランジション
▶ 第7回: GitHub Actions で自動レンダリング（この記事）
CI/CD で動画レンダリングを自動化する
第8回: 応用テクニック（準備中）
GIF・静止画書き出し / FFmpeg カスタマイズ / Lambda / 3D

はじめに

前回までで、Remotion で動画を「作る」技術は一通り揃いました。

Composition / AbsoluteFill / Sequence で動画の骨組みを作る（第1回）
useCurrentFrame / useVideoConfig でフレーム番号と設定を取得する（第2回）
interpolate / spring でフレーム番号を CSS の値に変換する（第3回）
画像・動画・音楽素材を使う方法（第4回）
テロップ（テキストオーバーレイ）の作り方（第5回）
<Series> と <TransitionSeries> でシーンを構成する（第6回）

本記事では 完成した動画を書き出す 方法をまとめます。

具体的には、Remotion のレンダリングコマンドと、それを GitHub Actions で自動化 する方法を扱います。

ローカルでのレンダリング

基本のコマンド

Remotion で動画を mp4 に書き出すには npx remotion render を使います。

npx remotion render HelloWorld out/video.mp4

HelloWorld は <Composition> の id です。これを実行すると、内部で Chromium を起動してフレームを1枚ずつレンダリングし、FFmpeg で mp4 に結合してくれます。

150フレームの動画なら、150枚のスクリーンショットを順番に撮るイメージなので、PC のスペックによっては数分かかります。

よく使うオプション

# 画質を調整（CRF が小さいほど高画質、デフォルトは 18）
npx remotion render HelloWorld out/video.mp4 --crf=10

# GIF として書き出し
npx remotion render HelloWorld out/animation.gif --codec=gif

# 特定フレームを PNG で保存（サムネイル用途に便利）
npx remotion still HelloWorld out/thumbnail.png --frame=50

短い動画ならこれで十分ですが、フレーム数が増えるとレンダリングに数分〜数十分かかり、その間 PC が占有されます。重い処理をリモートに預けて、手元のマシンを空けておきたい場合に便利なのが GitHub Actions との連携です。

GitHub Actions とは

GitHub Actions は、GitHub リポジトリに対するイベント（push, pull request など）をトリガーにして、あらかじめ定義した処理を自動実行する仕組みです。

ポイントは .github/workflows/ ディレクトリに YAML ファイルを置いて push するだけで動くということです。GitHub 側で特別な設定画面を操作する必要はありません。GitHub がこのディレクトリを自動で検知してくれます。

GitHub Actions で Remotion の動画を自動レンダリングする

ワークフローファイルの作成

.github/workflows/render.yml を作成します。以下は、render コマンドを実行して HelloWorld動画を生成するだけのジョブ設定です。

name: Render Video

on:
  push:
    branches: [main]

jobs:
  render:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "20"

      - name: Install dependencies
        run: npm ci

      - name: Render video
        run: npx remotion render HelloWorld out/video.mp4

      - name: Upload video
        uses: actions/upload-artifact@v4
        with:
          name: rendered-video
          path: out/video.mp4

YAML の読み方

上から順番に見ていきます。

on: — トリガーの定義です。

on:
  push:
    branches: [main]

「main ブランチに push されたら起動」という意味です。他にも pull_request や schedule（cron）など、さまざまなトリガーを指定できます。

jobs: — 実行するジョブの定義です。

jobs:
  render:
    runs-on: ubuntu-latest

runs-on は処理を実行する仮想マシンのイメージを指定します。GitHub が用意してくれるマシンなので、自分でサーバーを準備する必要はありません。

イメージ	OS
`ubuntu-latest`	Ubuntu（Linux）。最も一般的で、無料枠の消費も少ない
`macos-latest`	macOS。iOS ビルドなど macOS が必要な場合に使う
`windows-latest`	Windows。.NET や Windows 固有のビルドに使う

Remotion は Chromium + FFmpeg で動くので ubuntu-latest で問題ありません。

steps: — ジョブの中で実行するステップです。上から順番に実行されます。各ステップは run か uses のどちらかを指定します。

`run` — シェルコマンドを実行

- name: Install dependencies
  run: npm ci

ターミナルで打つコマンドをそのまま書きます。name はログに表示されるラベルで、省略可能ですが書いておくと実行結果が読みやすくなります。

`uses` — 公開されたアクションを使う

- uses: actions/checkout@v4

他の人が作った再利用可能な処理（アクション）を呼び出します。@v4 はバージョン指定です。actions/checkout は GitHub 公式のアクションで、リポジトリのコードを仮想マシンにクローンしてくれます。

`with` — アクションにパラメータを渡す

- uses: actions/setup-node@v4
  with:
    node-version: "20"

with は uses で呼び出したアクションに渡す設定です。ここでは「Node.js 20 をインストールしてほしい」というパラメータを渡しています。run には with は使えません。

まとめると

今回のワークフローでやっていることは以下の通りです。

ステップ	種類	やっていること
`actions/checkout@v4`	`uses`	リポジトリのコードを仮想マシンにクローン
`actions/setup-node@v4`	`uses` + `with`	Node.js 20 をインストール
`npm ci`	`run`	依存パッケージをインストール
`npx remotion render ...`	`run`	ローカルと同じコマンドで動画をレンダリング
`actions/upload-artifact@v4`	`uses` + `with`	生成された mp4 をダウンロード可能にする

ローカルで手動でやっていた作業を、そのまま YAML に書き写しただけです。

動画のダウンロード

レンダリングが完了すると、GitHub の Actions タブからアーティファクト（成果物）としてダウンロードできます。

リポジトリページ → 「Actions」タブ → 該当のワークフロー実行 → 「Artifacts」セクション → rendered-video をクリック

実行結果の確認

push 後に Actions タブを開くと、ワークフローの実行状況がリアルタイムで確認できます。各ステップの横に緑のチェックマークがつけば成功です。赤いバツがついた場合は、そのステップをクリックするとログが見られるので、エラーの原因を確認できます。

料金

無料枠

GitHub Actions はパブリックリポジトリでは無料です。プライベートリポジトリでは、プランごとに月あたりの無料枠があります。

プラン	無料の実行時間（月）	ストレージ
Free	2,000 分	500 MB
Pro	3,000 分	1 GB
Team	3,000 分	2 GB
Enterprise Cloud	50,000 分	50 GB

ストレージはアーティファクト（レンダリングした mp4 など）やキャッシュで消費します。

OS による消費量の違い

無料枠の消費速度は runs-on のイメージによって変わります。

イメージ	1分あたりの消費	超過時の料金
`ubuntu-latest`	1 分	$0.008/分
`windows-latest`	2 分	$0.016/分
`macos-latest`	10 分	$0.08/分

例えば macOS で 10 分実行すると、無料枠を 100 分消費します。Remotion のレンダリングなら ubuntu-latest で十分なので、無料枠を節約できます。

実際どれくらいかかるか

今回の HelloWorld（150フレーム、1920x1080）を Ubuntu で実行した場合、レンダリング自体は数分で終わります。依存インストールなどを含めても 1 回あたり 5〜10 分程度です。Free プランの 2,000 分なら、月に 200 回以上実行できる計算です。

ジョブの実行時間は 1分未満でも1分に切り上げ される点に注意してください。

セキュリティ

シークレットの管理

ワークフローで API キーやパスワードなどの機密情報を使う場合は、GitHub Secrets に保存します。

リポジトリの Settings → Secrets and variables → Actions → 「New repository secret」から登録し、ワークフロー内では ${{ secrets.SECRET_NAME }} で参照します。

- name: Deploy
  env:
    API_KEY: ${{ secrets.MY_API_KEY }}
  run: some-command

Secrets は ログに自動で伏せ字（***）表示 されます。YAML に直接書くとリポジトリを見た全員に公開されるので、必ず Secrets を使ってください。

GITHUB_TOKEN の権限

GitHub Actions は各ワークフロー実行時に GITHUB_TOKEN というトークンを自動で発行します。このトークンでリポジトリの読み書きや PR へのコメントなどができます。

デフォルトでは 読み取り専用 です（2023年2月以降に作成されたリポジトリ）。書き込み権限が必要な場合は、ワークフロー内で必要なスコープだけを明示的に指定します。

permissions:
  contents: read
  pull-requests: write  # PR にコメントする場合のみ

permissions を指定すると、書かなかったスコープは自動で「アクセスなし」になります。必要最小限の権限だけを付与するのが安全です。

サードパーティのアクションに注意

uses で指定するアクションは、他の人が公開した再利用可能な処理です。便利ですが、悪意のあるコードが含まれる可能性もあります。

タグ（@v4）はいつでも書き換えられます。 より安全にするには、コミット SHA でバージョンを固定します。

# タグ指定（便利だが、書き換えのリスクがある）
- uses: actions/checkout@v4

# SHA 指定（安全。コードが変わらないことが保証される）
- uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29  # v4.1.6

今回のワークフローでは actions/checkout, actions/setup-node, actions/upload-artifact の3つを使っていますが、いずれも GitHub 公式のアクション（actions/ 名前空間）なので、信頼性は高いです。

まとめ

やること	方法
ローカルで mp4 に書き出す	`npx remotion render`
push で自動レンダリング	`.github/workflows/render.yml` を作成
成果物のダウンロード	Actions タブ → Artifacts
高速化	Lambda レンダリングと組み合わせる

GitHub Actions の設定は「.github/workflows/ に YAML を置いて push するだけ」です。ローカルで動くコマンドをそのまま YAML に書き写せばいいので、Remotion との相性は良いです。