Remotion服务端渲染教程：Node.js自动化生成视频获取与部署全指南

代码简单说

发布于 2026-06-16 16:04:03

640

Remotion服务端渲染教程：Node.js自动化生成视频获取与部署全指南

【ima知识库】remotion开发助手

作为一名整天和数据打交道的程序员，我最近接到一个特别头疼的需求：要把动态生成的业务报表直接转成短视频发给客户。手动录屏肯定不现实，调研了一圈，发现 Remotion 这个神仙工具简直是开发者的福音！它能让我们像写 React 组件一样写视频。

很多哥们问我：这玩意儿只能在本地预览吗？能不能跑在服务器上实现自动化生产？经过几天的摸索，我成功把 Remotion服务端本地会员版 部署到了生产环境。今天就把这份 Remotion下载、安装与服务端使用教程 毫无保留地分享给大家。

直接上干货，Remotion 服务端核心依赖包获取地址： npm install @remotion/renderer @remotion/lambda （官方开源库，建议配合 Node.js 18+ 环境使用）

1. 为什么选择在服务端运行 Remotion？

常规的视频剪辑软件（如 PR、AE）很难和后端数据联动。而 Remotion 在服务端运行有三大核心优势：

自动化流水线：只要接口数据一变，服务器自动合成新视频。
高性能渲染：利用服务器的多核 CPU 或云端分布式计算（如 AWS Lambda），渲染速度比本地快得多。
低门槛接入：前端写组件，后端调 API，全程不需要人工干预。

2. 工具介绍

Remotion 是一个基于 React 的视频编程框架。它的服务端版本主要依赖 @remotion/renderer。它不是简单的录屏，而是通过浏览器内核（Puppeteer）逐帧渲染 Canvas 或 DOM 元素，最后编码成 MP4 或 WebM 格式。

3. 获取方式

Remotion 是完全透明的开发工具，你可以直接通过 npm 或 yarn 在你的 Node.js 项目中引入。它是模块化设计的，如果你只需要服务端功能，安装对应的渲染器包即可，不需要把整个开发环境都搬上去。

4. 详细安装与服务端使用教程

第一步：环境准备

确保你的服务器已经安装了 Node.js (推荐 v18 以上) 和 FFmpeg（这是视频合成的核心，必须安装）。

第二步：引入核心依赖

在你的后端项目中运行：

npm install @remotion/renderer puppeteer

第三步：编写服务端渲染脚本

创建一个 render.mjs 文件，这是最基础的 Node.js API 调用方式：

import { bundle } from "@remotion/bundler";
import { renderMedia, selectComposition } from "@remotion/renderer";
import path from "path";

const start = async () => {
  // 1. 将 React 项目打包成 Web 包
  const bundleLocation = await bundle(path.resolve("./src/index.ts"));

  // 2. 选择你要渲染的组件（Composition）
  const composition = await selectComposition({
    bundleLocation,
    id: "MyVideo", // 对应你项目里的 ID
    inputProps: { text: "这是动态生成的内容" }, // 传入动态数据
  });

  // 3. 执行渲染
  await renderMedia({
    composition,
    bundleLocation,
    outputLocation: "out/video.mp4",
    codec: "h264",
  });

  console.log("视频渲染成功！");
};

start();

第四步：进阶部署（可选）

如果你追求极致的速度，可以使用官方提供的 AWS Lambda 方案。它会把视频拆成几百份，分发给几百个云函数同时渲染，原本要跑 10 分钟的视频，1 分钟就能出片。

5. 使用效果

部署完成后，我通过简单的 REST API 就能触发渲染。

输入：一段 JSON 数据。
过程：服务器后台静默运行 Puppeteer，消耗约 2GB 内存。
输出：30 秒内得到一个高画质的 1080P MP4 视频。

6. 常见问题与踩坑（避坑指南）

内存溢出：在小型 VPS 上运行 renderMedia 非常吃内存，建议至少准备 4G 内存，或者限制并发数。
字体缺失：很多哥们发现渲染出来的视频中文全是方块，那是服务器没装中文字体！记得执行 apt-get install fonts-noto-cjk。
边缘计算限制：注意！Remotion 无法在 Vercel Edge Functions 或 Cloudflare Workers 上运行，因为这些环境不支持运行浏览器内核。请老老实实选 VPS 或 Docker。