Skip to main content

设置

EXPERIMENTAL

Cloud Run 处于 Alpha 阶段，这意味着 API 可能会在任何版本中更改，文档尚未完成。请查看 变更日志 以了解最新的重大更改。

1. 安装 @remotion/cloudrun​

npm i --save-exact @remotion/cloudrun@4.0.206
npm i --save-exact @remotion/cloudrun@4.0.206
This assumes you are currently using v4.0.206 of Remotion.
Also update remotion and all `@remotion/*` packages to the same version.
Remove all ^ character in front of the version numbers of it as it can lead to a version conflict.

2. 创建 GCP 项目​

转到 Google Cloud 控制台中的 管理资源 屏幕。

  • 在页面顶部的选择组织下拉列表中，选择要创建项目的组织资源。如果您是免费试用用户，请跳过此步骤，因为此列表不会显示。
  • 单击“创建项目”。
  • 在出现的“新项目”窗口中，输入项目名称并根据需要选择结算账户。项目名称只能包含字母、数字、单引号、连字符、空格或感叹号，并且必须介于 4 到 30 个字符之间。
  • 在“位置”框中输入父组织或文件夹资源。该资源将是新项目的分层父级。如果“无组织”是一个选项，您可以选择它将新项目创建为其自己资源层次结构的顶级。
  • 输入新项目详细信息后，单击“创建”。

3. 在 GCP 项目中启用计费​

为了启用 Cloud Run API，必须在此项目中启用计费。转到 Google Cloud 控制台中的 计费 屏幕。按照屏幕上的提示创建结算账户，然后将新项目链接到此结算账户。

4. 在 GCP 中设置权限 / API / 服务账户​

info

Google Cloud Shell 是用于管理托管在 GCP 上的资源和应用程序的基于浏览器的命令行界面（CLI）。它提供一个带有预安装命令行工具和实用程序（包括 Google Cloud SDK 和 Terraform）的虚拟机。通过此 Shell，您可以直接在浏览器中访问您的项目、资源和服务。以下步骤将引入一个脚本，以在您的项目中启用必要的 API、资源和权限。

  1. 转到仪表板，确保在顶部下拉菜单中选择了您的新项目。然后，在屏幕右上角，单击激活 Cloud Shell 图标

  2. 在 Cloud Shell 中，输入以下命令并按照提示操作。

    bash
    curl -L https://github.com/remotion-dev/remotion/raw/main/packages/cloudrun/src/gcpInstaller/gcpInstaller.tar | tar -x -C . && node install.mjs
    bash
    curl -L https://github.com/remotion-dev/remotion/raw/main/packages/cloudrun/src/gcpInstaller/gcpInstaller.tar | tar -x -C . && node install.mjs
  • 选择
    1
     来为 Remotion Cloud Run 设置此项目，或者再次运行设置以进行更新。
  • 选择
    2
     来生成新的 .env 文件，或管理已创建的密钥，以及按照这些步骤进行操作。

  1. 在提示应用计划时，输入 yes。在提示生成 .env 文件时，输入 yes。

  2. 运行以下命令查看环境变量。将它们复制到本地的 .env 文件中（如果不存在，则创建）：

    bash
    cat .env
    bash
    cat .env

  3. 从虚拟机中删除 .env 文件：

    bash
    rm .env
    bash
    rm .env

5. 可选：验证权限设置​

从您的代码库中运行以下命令，验证权限是否在 GCP 中正确设置。只要您的 GCP 项目与匹配的 Remotion 版本一起设置，这个步骤应该通过。

npx remotion cloudrun permissions
npx remotion cloudrun permissions

对于以下步骤，您可以在 CLI 上执行它们，也可以使用 Node.JS APIs 进行编程执行。

6. 部署服务​

通过执行以下命令部署一个可以将视频渲染到您的 GCP 项目中的服务：

bash
npx remotion cloudrun services deploy
bash
npx remotion cloudrun services deploy

您可以使用 deployService() 部署一个可以将视频渲染到您的 GCP 项目中的服务。

ts
const deployResult = await deployService({
  projectID: "my-remotion-project",
  region: "us-east1",
});
ts
const deployResult = await deployService({
  projectID: "my-remotion-project",
  region: "us-east1",
});

返回的对象包含一个名为 name 的字段，您需要用它来进行渲染。

服务包含必要的二进制文件和 JavaScript 代码，可以接收一个serve URL，并从中进行渲染。服务与 Remotion 版本绑定，如果您升级 Remotion，您需要部署一个新服务。服务不包括您的 Remotion 代码，它将在下一步中部署。

将打印一个Cloud Run URL，提供访问已部署服务和执行渲染的唯一端点。或者，您可以使用也会打印的Service Name来访问已部署服务并执行渲染。

7. 部署站点​

运行以下命令将您的 Remotion 项目部署到 Cloud Storage 存储桶。将项目的入口点作为最后一个参数传递。

bash
npx remotion cloudrun sites create src/index.ts --site-name=my-video
bash
npx remotion cloudrun sites create src/index.ts --site-name=my-video

将打印一个serveUrl，指向已部署项目。

在将来更新 Remotion 视频时，重新部署您的站点。传递相同的--site-name以覆盖先前的部署。如果不传递--site-name，则每次部署都会生成一个唯一的 URL。

首先，您需要在您首选的区域创建一个 Cloud Storage 存储桶。如果已经存在一个，则将使用该存储桶：

ts
import path from "path";
import { deploySite, getOrCreateBucket } from "@remotion/cloudrun";
 
const { bucketName } = await getOrCreateBucket({
  region: "us-east1",
});
ts
import path from "path";
import { deploySite, getOrCreateBucket } from "@remotion/cloudrun";
 
const { bucketName } = await getOrCreateBucket({
  region: "us-east1",
});

接下来，将您的 Remotion 项目上传到 Cloud Storage 存储桶。指定您的 Remotion 项目的入口点，这是调用registerRoot()的文件。

ts
const { serveUrl } = await deploySite({
  bucketName,
  entryPoint: path.resolve(process.cwd(), "src/index.ts"),
  siteName: "my-video",
});
ts
const { serveUrl } = await deploySite({
  bucketName,
  entryPoint: path.resolve(process.cwd(), "src/index.ts"),
  siteName: "my-video",
});

在将来更新 Remotion 视频时，重新部署您的站点。传递相同的siteName以覆盖先前的部署。如果不传递siteName，则每次部署都会生成一个唯一的 URL。

8. 渲染视频或静态图​

  • <serve-url | site-name> 在第 7 步中返回的 serve URL，用于站点部署。如果使用来自 Cloud 存储桶的 serve URL，则可以传递 site-name。

  • <composition-id> 传递您想要渲染的合成物的 ID。

  • <cloud-run-url> 在第 6 步中返回的 Cloud Run URL，用于服务部署。

bash
npx remotion cloudrun render <serve-url | site-name> <composition-id> --cloud-run-url=<cloud-run-url>
bash
npx remotion cloudrun render <serve-url | site-name> <composition-id> --cloud-run-url=<cloud-run-url>
  • <service-name> 在第 6 步中返回的服务名称。
  • <region> 服务所在的区域，在第 6 步中返回。仅在使用服务名称时才需要。
bash
npx remotion cloudrun render <serve-url | site-name> <composition-id> --service-name=<service-name> --region=<region>
bash
npx remotion cloudrun render <serve-url | site-name> <composition-id> --service-name=<service-name> --region=<region>

直到视频渲染完成，进度将被打印出来。恭喜！您已经使用 Remotion Cloudrun 渲染了您的第一个视频 🚀

  • <serve-url | site-name> 在第 7 步中返回的 serve URL，用于站点部署。如果使用来自 Cloud 存储桶的 serve URL，则可以传递 site-name。

  • <still-id> 传递您想要渲染的静态图的 ID。

  • <cloud-run-url> 在第6步骤中返回了 Cloud Run URL。

bash
npx remotion cloudrun still <serve-url | site-name> <still-id> --cloud-run-url=<cloud-run-url>
bash
npx remotion cloudrun still <serve-url | site-name> <still-id> --cloud-run-url=<cloud-run-url>
  • <service-name> 在第6步骤中返回了服务名称。
  • <region> 服务所在的区域，在第6步骤中返回。仅在使用服务名称时需要。
bash
npx remotion cloudrun still <serve-url | site-name> <still-id> --service-name=<service-name> --region=<region>
bash
npx remotion cloudrun still <serve-url | site-name> <still-id> --service-name=<service-name> --region=<region>

恭喜！您已经使用 Remotion Cloudrun 渲染了第一个静态图 🚀

您已经在之前的步骤中获得了服务名称。但由于您只需要部署一次服务，因此在渲染视频之前以编程方式检索已部署服务的名称是有用的，以防您的 Node.JS 程序重新启动。我们可以使用 compatibleOnly 标志调用 getServices() 来仅获取具有匹配版本的服务。

ts
import { getServices, renderMediaOnCloudrun } from "@remotion/cloudrun/client";
 
const services = await getServices({
  region: "us-east1",
  compatibleOnly: true,
});
 
const serviceName = services[0].serviceName;
ts
import { getServices, renderMediaOnCloudrun } from "@remotion/cloudrun/client";
 
const services = await getServices({
  region: "us-east1",
  compatibleOnly: true,
});
 
const serviceName = services[0].serviceName;

现在我们可以使用 renderMediaOnCloudrun() 函数触发视频的渲染。

ts
const result = await renderMediaOnCloudrun({
  serviceName,
  region: "us-east1",
  serveUrl: url,
  composition: "HelloWorld",
  inputProps: {},
  codec: "h264",
  updateRenderProgress,
});
 
if (result.type === "success") {
  console.log(result.bucketName);
  console.log(result.renderId);
}
ts
const result = await renderMediaOnCloudrun({
  serviceName,
  region: "us-east1",
  serveUrl: url,
  composition: "HelloWorld",
  inputProps: {},
  codec: "h264",
  updateRenderProgress,
});
 
if (result.type === "success") {
  console.log(result.bucketName);
  console.log(result.renderId);
}
note

从 @remotion/cloudrun/client 导入，以避免导入整个渲染器，因为它无法捆绑。

渲染现在将运行，过一段时间后视频将在您的云存储桶中可用。您可以通过将函数传递给 updateRenderProgress 属性来跟踪渲染进度，以接收进度值。

恭喜！查看您的云存储桶 - 您刚刚使用 Remotion Cloud Run 渲染了第一个视频 🚀 您已经从之前的步骤中获得了服务名称。但由于您只需要部署一次服务，因此在渲染视频之前以编程方式检索已部署服务的名称是有用的，以防您的 Node.JS 程序重新启动。我们可以使用 compatibleOnly 标志调用 getServices() 来仅获取具有匹配版本的服务。

ts
import { getServices, renderStillOnCloudrun } from "@remotion/cloudrun";
 
const services = await getServices({
  region: "us-east1",
  compatibleOnly: true,
});
 
const serviceName = services[0].serviceName;
ts
import { getServices, renderStillOnCloudrun } from "@remotion/cloudrun";
 
const services = await getServices({
  region: "us-east1",
  compatibleOnly: true,
});
 
const serviceName = services[0].serviceName;

现在，我们可以使用 renderStillOnCloudrun() 函数触发静态图像的渲染。

ts
const result = await renderStillOnCloudrun({
  serviceName,
  region: "us-east1",
  serveUrl: url,
  composition: "HelloWorld",
  inputProps: {},
  imageFormat: "jpeg",
});
 
if (result.type === "success") {
  console.log(result.bucketName);
  console.log(result.renderId);
}
ts
const result = await renderStillOnCloudrun({
  serviceName,
  region: "us-east1",
  serveUrl: url,
  composition: "HelloWorld",
  inputProps: {},
  imageFormat: "jpeg",
});
 
if (result.type === "success") {
  console.log(result.bucketName);
  console.log(result.renderId);
}
note

从 @remotion/cloudrun/client 导入，以避免导入整个渲染器，因为它无法捆绑。

渲染现在将运行，过一段时间后，图像将在您的云存储桶中可用。

恭喜！检查您的云存储桶 - 您刚刚使用 Remotion Cloud Run 渲染了第一个静态图像 🚀

下一步​