将 Remotion Studio 部署为静态网站

从 v4.0.97 起可用

🌐 available from v4.0.97

你可以将 Remotion Studio 部署为静态站点，例如部署到 Vercel 或 Netlify。
服务器端渲染将不可用，但如果你启用客户端渲染，你可以直接在浏览器中渲染视频。
部署后的 URL 也可以用作服务 URL，传递给渲染 API。
确保你的版本至少为 v4.0.97 才能使用此功能——使用 npx remotion upgrade 进行升级。

🌐 You can deploy the Remotion Studio as a static site, for example to Vercel or Netlify.
Server-side rendering will not be available, but if you enable client-side rendering, you can render videos directly in the browser.
The deployed URL may also be used as a Serve URL to pass to rendering APIs.
Make sure you are on at least v4.0.97 to use this feature - use npx remotion upgrade to upgrade.

将 Remotion Studio 导出为静态网站

🌐 Export the Remotion Studio as a static site

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

🌐 To export the Remotion Studio as a static site, run the remotion bundle command:

npx remotion bundle

输出将位于 build 文件夹中。 我们建议将 build 添加到你的 .gitignore 文件中。当你运行该命令时，它会提示你是否执行此操作。

🌐 The output will be in the build folder.
We recommend to add build to your .gitignore file. The command will offer to do it for you when you run it.

部署到 Vercel

🌐 Deploy to Vercel

要部署到 Vercel，请将你的代码仓库连接到 Vercel。

🌐 To deploy to Vercel, connect your repository to Vercel.

在“构建与输出”设置中，启用“覆盖”并设置以下内容：

🌐 In the "Build and Output" settings, enable "OVERRIDE" and set the following:

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

note

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

部署到 Netlify

🌐 Deploy to Netlify

将你的仓库连接到 Netlify。

🌐 Connect your repository to Netlify.

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

部署到 GitHub Pages

🌐 Deploy to GitHub Pages

1

在你的仓库中创建以下文件：

.github/workflows/deploy-studio.yml
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。

🌐 The above code will deploy the bundled Remotion Studio to a branch gh-pages.

note

npx remotion bundle 的 --public-path 标志仅从 remotion 版本 4.0.127 开始可用

3

转到你的仓库设置 (github.com/[username]/[repo]/settings/pages)

4

在分支部分，选择gh-pages分支，然后点击保存。

从 URL 渲染

🌐 Rendering from a URL

已部署的 URL 是一个 Serve URL 也可以用来渲染视频：

🌐 The deployed URL is a Serve URL can also be used to render a video:

CLI

最小示例：

🌐 Minimal example:

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

指定 "HelloWorld" 组合 ID 和 输入属性：

🌐 Specify "HelloWorld" composition ID and input props:

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

Node.js/Bun

render.mjs
const inputProps = {
  titleText: 'Hello World',
};

const serveUrl = 'https://remotion-helloworld.vercel.app';

const composition = await selectComposition({
  serveUrl,
  id: 'HelloWorld',
  inputProps,
});

await renderMedia({
  composition,
  serveUrl,
  codec: 'h264',
  inputProps,
});

参考 renderMedia() 查看所有可用选项。

🌐 Refer to renderMedia() to see all available options.

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',
  },
});

你需要先完成 Remotion Lambda 设置。

🌐 You need to complete the Remotion Lambda Setup first.

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);
}

你需要先完成 Remotion Cloud Run 设置。

🌐 You need to complete the Remotion Cloud Run Setup first.