将 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
- 安装命令:保持默认
使用 bunx 作为脚本运行器比使用 npx
稍快。
部署到 Netlify
将您的存储库连接到 Netlify。
- 基本目录:保持默认
- 构建命令:
npx remotion bundle
- 发布目录:
build
- 函数目录:保持默认
部署到 GitHub Pages
.github/workflows/deploy-studio.ymlyaml
name: Deploy Remotion studioon:workflow_dispatch:push:branches:- "main"permissions:contents: writejobs:render:name: Render videoruns-on: ubuntu-lateststeps:- name: Checkoutuses: actions/checkout@main- name: install packagesrun: npm i- name: Bundle Studiorun: npx remotion bundle --public-path="./"- name: Deploy Studiouses: JamesIves/github-pages-deploy-action@v4with:folder: build
.github/workflows/deploy-studio.ymlyaml
name: Deploy Remotion studioon:workflow_dispatch:push:branches:- "main"permissions:contents: writejobs:render:name: Render videoruns-on: ubuntu-lateststeps:- name: Checkoutuses: actions/checkout@main- name: install packagesrun: npm i- name: Bundle Studiorun: npx remotion bundle --public-path="./"- name: Deploy Studiouses: JamesIves/github-pages-deploy-action@v4with:folder: build
上述代码将将打包的 Remotion Studio 部署到一个名为 gh-pages
的分支。
npx remotion bundle
的 --public-path 标志仅在 remotion 版本 4.0.127
及以上可用。
gh-pages
分支并保存。
从 URL 渲染
部署的 URL 是一个 Serve URL,也可用于渲染视频:
- CLI
- Node.js/Bun
- Lambda
- Cloud Run
最简示例:
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"}'
render.mjstsx
constinputProps = {titleText : "Hello World",};constserveUrl = "https://remotion-helloworld.vercel.app";constcomposition = awaitselectComposition ({serveUrl ,id : "HelloWorld",inputProps ,});awaitrenderMedia ({composition ,serveUrl ,codec : "h264",inputProps ,});
render.mjstsx
constinputProps = {titleText : "Hello World",};constserveUrl = "https://remotion-helloworld.vercel.app";constcomposition = awaitselectComposition ({serveUrl ,id : "HelloWorld",inputProps ,});awaitrenderMedia ({composition ,serveUrl ,codec : "h264",inputProps ,});
参考 renderMedia()
查看所有可用选项。
CLIbash
npx remotion lambda render https://remotion-helloworld.vercel.app HelloWorld --props '{"titleText":"Hello World"}'
CLIbash
npx remotion lambda render https://remotion-helloworld.vercel.app HelloWorld --props '{"titleText":"Hello World"}'
Node.js/Buntsx
import {renderMediaOnLambda } from "@remotion/lambda/client";const {bucketName ,renderId } = awaitrenderMediaOnLambda ({region : "us-east-1",functionName : "remotion-render-bds9aab",composition : "HelloWorld",serveUrl : "https://remotion-helloworld.vercel.app",codec : "h264",inputProps : {titleText : "Hello World",},});
Node.js/Buntsx
import {renderMediaOnLambda } from "@remotion/lambda/client";const {bucketName ,renderId } = awaitrenderMediaOnLambda ({region : "us-east-1",functionName : "remotion-render-bds9aab",composition : "HelloWorld",serveUrl : "https://remotion-helloworld.vercel.app",codec : "h264",inputProps : {titleText : "Hello World",},});
首先需要完成 Remotion Lambda 设置。
CLIbash
npx remotion cloudrun render https://remotion-helloworld.vercel.app HelloWorld --props '{"titleText":"Hello World"}'
CLIbash
npx remotion cloudrun render https://remotion-helloworld.vercel.app HelloWorld --props '{"titleText":"Hello World"}'
Node.js/Buntsx
import {renderMediaOnCloudrun } from "@remotion/cloudrun/client";constresult = awaitrenderMediaOnCloudrun ({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 );}
Node.js/Buntsx
import {renderMediaOnCloudrun } from "@remotion/cloudrun/client";constresult = awaitrenderMediaOnCloudrun ({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 设置。