Docker 部署 - RemotionLab

為什麼用 Docker？

在伺服器上渲染 Remotion 影片時，Docker 提供：

一致的渲染環境
簡化 Chromium 依賴安裝
容易部署到雲端服務

Dockerfile

FROM node:20-bookworm
 
# 安裝 Chromium 依賴
RUN apt-get update && apt-get install -y \
  libnss3 \
  libdbus-1-3 \
  libatk1.0-0 \
  libgbm-dev \
  libasound2 \
  libxrandr2 \
  libxkbcommon-dev \
  libxfixes3 \
  libxcomposite1 \
  libxdamage1 \
  libatk-bridge2.0-0 \
  libcups2 \
  libpango-1.0-0 \
  libcairo2 \
  && rm -rf /var/lib/apt/lists/*
 
WORKDIR /app
 
COPY package*.json ./
RUN npm install
 
COPY . .
 
# 渲染影片
CMD ["npx", "remotion", "render", "MyComp", "out/video.mp4"]

安裝 Chrome Headless Shell

Remotion 需要 Chromium 來渲染。在 Docker 中最可靠的方式是用 @remotion/install-headless-chrome：

npm install @remotion/install-headless-chrome

在 Dockerfile 中加入安裝步驟：

RUN npx remotion-install-headless-chrome

記憶體考量

渲染影片需要大量記憶體。建議：

最少 2GB RAM
複雜影片可能需要 4GB+
用 --concurrency=1 降低並行數以減少記憶體使用

npx remotion render MyComp out/video.mp4 --concurrency=1

搭配 API 伺服器

import express from "express";
import { bundle } from "@remotion/bundler";
import { renderMedia, selectComposition } from "@remotion/renderer";
 
const app = express();
app.use(express.json());
 
let bundled: string;
 
// 啟動時打包一次
bundle({ entryPoint: "./src/index.ts" }).then((b) => {
  bundled = b;
  console.log("打包完成");
});
 
app.post("/render", async (req, res) => {
  const { props } = req.body;
 
  const composition = await selectComposition({
    serveUrl: bundled,
    id: "MyVideo",
    inputProps: props,
  });
 
  const outputPath = `out/${Date.now()}.mp4`;
 
  await renderMedia({
    composition,
    serveUrl: bundled,
    codec: "h264",
    outputLocation: outputPath,
    inputProps: props,
  });
 
  res.json({ path: outputPath });
});
 
app.listen(3000);

小結

用 Docker 確保渲染環境一致
安裝 Chromium 依賴是關鍵步驟
注意記憶體配置（最少 2GB）
啟動時打包一次，之後重複使用 bundle