Skip to main content

将 Remotion Studio 部署为静态站点

从 v4.0.97 版本开始可用

您可以将 Remotion Studio 部署为静态站点,例如到 Vercel 或 Netlify。
虽然“渲染”按钮将被禁用,但它可以作为服务 URL用于传递给渲染 API。
确保您至少使用 v4.0.97 版本才能使用此功能 - 使用 npx remotion upgrade 进行升级。

将 Remotion Studio 导出为静态站点

要将 Remotion Studio 导出为静态站点,请运行 remotion bundle 命令:

bash
npx remotion bundle
bash
npx remotion bundle

输出将位于 build 文件夹中。
我们建议将 build 添加到您的 .gitignore 文件中。当您运行命令时,它将提供选项为您执行此操作。

部署到 Vercel

要部署到 Vercel,请将您的存储库连接到 Vercel。

在“构建和输出”设置中,启用“覆盖”并设置以下内容:

  • 构建命令bunx remotion bundle
  • 输出目录build
  • 安装命令保持默认

Alt text

note

使用 bunx 作为脚本运行器比使用 npx 稍快。

部署到 Netlify

将您的存储库连接到 Netlify。

  • 基本目录保持默认
  • 构建命令npx remotion bundle
  • 发布目录build
  • 函数目录保持默认

部署到 GitHub Pages

在您的存储库中创建以下文件:

.github/workflows/deploy-studio.yml
yaml
name: Deploy Remotion studio
on:
workflow_dispatch:
push:
branches:
- "main"
permissions:
contents: write
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
run: npx remotion bundle --public-path="./"
- name: Deploy Studio
uses: JamesIves/github-pages-deploy-action@v4
with:
folder: build
.github/workflows/deploy-studio.yml
yaml
name: Deploy Remotion studio
on:
workflow_dispatch:
push:
branches:
- "main"
permissions:
contents: write
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
run: npx remotion bundle --public-path="./"
- name: Deploy Studio
uses: JamesIves/github-pages-deploy-action@v4
with:
folder: build

上述代码将将打包的 Remotion Studio 部署到一个名为 gh-pages 的分支。

note

npx remotion bundle 的 --public-path 标志仅在 remotion 版本 4.0.127 及以上可用。

转到您存储库的设置页面 (github.com/[username]/[repo]/settings/pages)

在分支部分,选择 gh-pages 分支并保存。

从 URL 渲染

部署的 URL 是一个 Serve URL,也可用于渲染视频:

最简示例:

bash
npx remotion render https://remotion-helloworld.vercel.app
bash
npx remotion render https://remotion-helloworld.vercel.app

指定 "HelloWorld" composition IDinput props

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