Remotion LabRemotion Lab
›Studio›將 Remotion Studio 部署至伺服器

將 Remotion Studio 部署至伺服器

學習如何將 Remotion Studio 部署至雲端 VPS，讓團隊成員可以透過瀏覽器存取渲染 UI。

總覽

自 v4.0.46 起可用。

你可以將 Remotion Studio 部署至雲端長期運行的伺服器，讓團隊成員透過渲染 UI 進行操作。

部署步驟：

  1. 安裝 Node.js 與 Chrome
  2. 在伺服器上執行 npx remotion studio
  3. 確保 3000 連接埠對外開放

以下範例已使用 npx create-video@latest 初始化的 Hello World 模板進行測試。

Docker 容器化

Dockerfile

FROM node:22-bookworm-slim
 
# 安裝 Chrome 相依套件
RUN apt-get update
RUN apt install -y \
  libnss3 \
  libdbus-1-3 \
  libatk1.0-0 \
  libgbm-dev \
  libasound2 \
  libxrandr2 \
  libxkbcommon-dev \
  libxfixes3 \
  libxcomposite1 \
  libxdamage1 \
  libatk-bridge2.0-0 \
  libpango-1.0-0 \
  libcairo2 \
  libcups2
 
# 將專案檔案複製到 Docker 映像中，如有需要請自行調整
COPY package.json package*.json yarn.lock* pnpm-lock.yaml* bun.lockb* bun.lock* tsconfig.json* remotion.config.* ./
COPY src ./src
 
# 如果有 public 資料夾：
COPY public ./public
 
# 安裝套件管理工具與相依套件（Yarn/PNPM 請見下方說明）
RUN npm i
 
# 安裝 Chrome
RUN npx remotion browser ensure
 
CMD ["npx", "remotion", "studio"]

使用不同的套件管理工具

使用 Yarn：

RUN corepack enable
RUN yarn install --frozen-lockfile

使用 PNPM：

RUN corepack enable
RUN pnpm install --frozen-lockfile

使用 Bun：

RUN npm i -g bun
RUN bun install --frozen-lockfile

部署至 Fly.io

準備步驟

首先將上述 Dockerfile 加入專案。

對 Dockerfile 做以下修改（自 v4.0.125 起支援）：

- CMD ["npx", "remotion", "studio"]
+ CMD ["npx", "remotion", "studio", "--ipv4"]

確保你使用的是付費方案（免費方案記憶體不足）。

部署指令

fly launch \
  # 取得 2 個 CPU 核心與 4GB 記憶體
  --vm-size=performance-2x \
  # 停用 2 倍副本
  --ha=false \
  # 使用 Remotion 的連接埠
  --internal-port=3000 \
  # 使用 Docker 而非 Node
  --dockerfile Dockerfile

回答問題

在設定過程中，以下問題回答「No」：

? Would you like to set up a Postgresql database now? No
? Would you like to set up an Upstash Redis database now? No
? Create .dockerignore from 1 .gitignore files? No

詢問是否立即部署時，回答「Yes」：

? Do you want to deploy now? Yes

部署完成後，你會收到 Studio 的存取 URL。

--ipv4 參數說明

Fly.io 的網路環境需要使用 IPv4，加上 --ipv4 參數可確保 Studio 的伺服器監聽正確的網路介面，避免無法連線的問題。

部署至 Render.com

部署步驟

  1. 將上述 Dockerfile 加入專案
  2. 建立新的「Web Service」並連結你的儲存庫
  3. 選擇至少「Standard」方案（需要 2GB 記憶體）
  4. 點擊部署

Render.com 會自動偵測 Dockerfile 並進行建置，無需額外設定。

DigitalOcean App Platform（目前無法使用）

DigitalOcean App Platform 目前無法正常運作，因為其 HTTP Proxy 不支援 Server-Sent Events（SSE），而 Remotion Studio 的即時更新功能依賴 SSE。

替代方案： 使用普通的 DigitalOcean Droplet（虛擬機器）可以正常運作。

使用 DigitalOcean Droplet

在 Droplet 上手動部署：

# 在 Droplet 上安裝 Node.js
curl -fsSL https://deb.nodesource.com/setup_22.x | sudo -E bash -
sudo apt-get install -y nodejs
 
# 安裝 Chrome 相依套件（同 Dockerfile 中的清單）
sudo apt install -y libnss3 libdbus-1-3 libatk1.0-0 libgbm-dev \
  libasound2 libxrandr2 libxkbcommon-dev libxfixes3 libxcomposite1 \
  libxdamage1 libatk-bridge2.0-0 libpango-1.0-0 libcairo2 libcups2
 
# 複製你的專案並安裝相依套件
git clone <your-repo>
cd <your-project>
npm install
npx remotion browser ensure
 
# 在背景執行 Studio（使用 pm2 或 screen）
npm install -g pm2
pm2 start "npx remotion studio" --name remotion-studio
pm2 save
pm2 startup

部署至 Scaleway Serverless Container

部署步驟

  1. 將上述 Dockerfile 加入專案
  2. 建置 Docker 映像並發布至 Docker Registry（例如 Scaleway Docker Registry）
  3. 建立 Serverless Container Namespace 並使用已發布的 Docker 映像

GitHub Actions 自動部署範例

你可以參考部署 Remotion Studio 至 Scaleway Serverless Container 的 GitHub Actions 工作流程範例。

安全性考量

將 Studio 部署至公開伺服器時，請考慮以下安全措施：

基本 HTTP 認證

在 Nginx 或 Apache 前端加入基本認證：

server {
    listen 80;
    server_name your-studio.example.com;
 
    auth_basic "Remotion Studio";
    auth_basic_user_file /etc/nginx/.htpasswd;
 
    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        # 支援 Server-Sent Events
        proxy_set_header X-Accel-Buffering no;
        proxy_buffering off;
    }
}

使用環境變數管理機密資料

# 在伺服器上設定環境變數
export OPENAI_API_KEY="your-key"
export DATABASE_URL="your-connection-string"
 
# 啟動 Studio
npx remotion studio

測試部署專案

Remotion 提供了一個測試專案，可以用來測試 Studio 的部署。

連接埠設定

Remotion Studio 預設使用 3000 連接埠。若需要更改，可以使用 --port 參數：

npx remotion studio --port 8080

監控與維護

使用 PM2 管理程序

# 安裝 PM2
npm install -g pm2
 
# 啟動 Studio
pm2 start "npx remotion studio" --name remotion-studio
 
# 查看狀態
pm2 status
 
# 查看日誌
pm2 logs remotion-studio
 
# 設定開機自動啟動
pm2 startup
pm2 save

健康狀態檢查

Studio 啟動後，可以透過 HTTP 請求確認服務是否正常運作：

curl http://localhost:3000/api/health

參考資料