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 ID 和 input 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"}'