將 Remotion Studio 部署為靜態網站

此功能自 v4.0.97 起可用。請執行 npx remotion upgrade 升級至最新版本。

您可以將 Remotion Studio 匯出為靜態網站，部署到 Vercel、Netlify 或 GitHub Pages 等平台。

雖然靜態部署無法使用伺服器端渲染，但若您啟用了客戶端渲染，使用者可以直接在瀏覽器中渲染影片。此外，部署後的 URL 也可作為 Serve URL 傳入各種渲染 API。

匯出靜態網站

執行以下指令將 Remotion Studio 打包為靜態檔案：

npx remotion bundle

輸出結果會放在 build 資料夾。建議將 build 加入 .gitignore，執行指令時也會詢問是否自動加入。

部署至 Vercel

將您的 Repository 連接到 Vercel
在「Build and Output」設定中，啟用「OVERRIDE」並填入以下設定：

設定項目	值
Build Command	`bunx remotion bundle`
Output Directory	`build`
Installation Command	保持預設

使用 bunx 作為腳本執行器比 npx 稍快。

部署至 Netlify

將 Repository 連接到 Netlify
填入以下設定：

設定項目	值
Base directory	保持預設
Build command	`npx remotion bundle`
Publish directory	`build`
Functions directory	保持預設

部署至 GitHub Pages

步驟一：建立 GitHub Actions 工作流程檔案

在 Repository 中建立以下檔案：

# .github/workflows/deploy-studio.yml
name: Deploy Remotion studio
 
on:
  workflow_dispatch:  # 允許手動觸發
  push:
    branches:
      - 'main'        # 每次推送到 main 分支時自動部署
 
permissions:
  contents: write   # 需要寫入權限以推送 gh-pages 分支
 
jobs:
  render:
    name: Render video
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@main
 
      - name: install packages
        run: npm i
 
      - name: Bundle Studio
        # --public-path="./" 確保靜態資源路徑在子目錄下也能正確運作
        # 此 flag 自 remotion v4.0.127 起可用
        run: npx remotion bundle --public-path="./"
 
      - name: Deploy Studio
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          folder: build  # 部署 build 資料夾的內容

工作流程執行後，打包好的 Studio 會被推送到 gh-pages 分支。

--public-path flag 自 remotion v4.0.127 起可用。

步驟二：啟用 GitHub Pages

前往 Repository 的設定頁面：https://github.com/[username]/[repo]/settings/pages
在「Branch」區段，選擇 gh-pages 分支
點擊「Save」

透過部署 URL 渲染影片

部署完成後，該 URL 即為 Serve URL，可用於觸發各種渲染方式。

若您在唯讀模式開啟已部署的 Studio，可以打開渲染視窗並點擊「Copy command」來取得目前設定的 CLI 指令。

CLI 渲染

# 最簡單的用法
npx remotion render https://remotion-helloworld.vercel.app
 
# 指定 Composition ID 與 Input Props
npx remotion render https://remotion-helloworld.vercel.app HelloWorld \
  --props '{"titleText":"Hello World"}'

Node.js / Bun 渲染

// render.mjs
import { selectComposition, renderMedia } from '@remotion/renderer';
 
const inputProps = {
  titleText: 'Hello World',
};
 
const serveUrl = 'https://remotion-helloworld.vercel.app';
 
// 選擇要渲染的 Composition
const composition = await selectComposition({
  serveUrl,
  id: 'HelloWorld',
  inputProps,
});
 
// 開始渲染
await renderMedia({
  composition,
  serveUrl,
  codec: 'h264',
  inputProps,
  outputLocation: 'out/video.mp4',
});

詳細選項請參閱 renderMedia() 文件。

Lambda 渲染

# CLI
npx remotion lambda render \
  https://remotion-helloworld.vercel.app \
  HelloWorld \
  --props '{"titleText":"Hello World"}'

// Node.js / Bun
import { renderMediaOnLambda } from '@remotion/lambda/client';
 
const { bucketName, renderId } = await renderMediaOnLambda({
  region: 'us-east-1',
  functionName: 'remotion-render-bds9aab',
  composition: 'HelloWorld',
  serveUrl: 'https://remotion-helloworld.vercel.app',
  codec: 'h264',
  inputProps: {
    titleText: 'Hello World',
  },
});

使用 Lambda 渲染前，需先完成 Remotion Lambda 設定。

Cloud Run 渲染

# CLI
npx remotion cloudrun render \
  https://remotion-helloworld.vercel.app \
  HelloWorld \
  --props '{"titleText":"Hello World"}'

// Node.js / Bun
import { renderMediaOnCloudrun } from '@remotion/cloudrun/client';
 
const result = await renderMediaOnCloudrun({
  region: 'us-east1',
  serviceName: 'remotion-render-bds9aab',
  composition: 'HelloWorld',
  serveUrl: 'https://remotion-helloworld.vercel.app',
  codec: 'h264',
  inputProps: {
    titleText: 'Hello World!',
  },
});
 
if (result.type === 'success') {
  console.log(result.bucketName);
  console.log(result.renderId);
}

使用 Cloud Run 渲染前，需先完成 Remotion Cloud Run 設定。

常見問題

Q：靜態部署和伺服器部署的差異是什麼？

靜態部署只包含前端資源（HTML、JS、CSS），不包含任何後端渲染功能。若需要伺服器端渲染，您需要在自己的伺服器上執行 Remotion 的渲染 API，而非使用靜態部署。

Q：部署後可以透過 URL 渲染影片嗎？

是的，只要部署正確，該 URL 就是一個有效的 Serve URL，可以傳入 renderMedia()、Lambda 渲染等 API 使用。

Q：GitHub Pages 部署後資源路徑不正確怎麼辦？

確認您在打包時加入了 --public-path="./" flag，此 flag 自 v4.0.127 起可用，可確保在 GitHub Pages 子目錄下資源路徑能正確解析。

Q：如何升級 Remotion 版本？

npx remotion upgrade