remotion 도커 데스크톱 docker-compose 설치방법(with. n8n)

AI 영상(롱폼, 숏폼)을 시작하면서 AI솔루션을 이용하는데 드는 비용이 증가하고 있다💰

보통 API를 사용한 만큼 과금되는 정책을 가지고 있다(일레븐랩스와 같이 구독플랜에서 차감되는 서비스도 있다)

creatomate로 영상자동화의 정점을 찍어야하는데 이건 구독 비용이 부담스럽다..

24시간 가동되는 맥미니를 더욱 혹사시켜보자!
구독 비용은 아깝지만 누지되는 전기세는 아깝지 않다! remotion 도커 설치!

1. 수정 및 추가해야 할 포인트 (체크리스트)

• Docker-in-Docker 권한 (가장 중요 ⭐): n8n 컨테이너 내부에서 외부 도커(remotion 컨테이너)에 명령을 날리려면, n8n이 맥미니의 도커 엔진에 접근할 수 있어야 합니다. n8n 서비스의 volumes에 아래 한 줄을 반드시 추가하세요.

  - /var/run/docker.sock:/var/run/docker.sock
  

• 외부 스토리지가 있다면: 현재 ./remotion_renders처럼 상대 경로를 쓰면 맥미니 내부 SSD를 사용하게 됩니다. 만약 용량이 큰 영상들을 페가수스에 저장하고 싶다면 경로를 /Volumes/PegasusR4/... 형태로 적어주시는 것이 좋습니다.

---

2.  docker-compose.yml

사용하고 있는 맥미니에서 remotion 오류로 한참 씨름했으나 결국 성공!
나같은 경우 n8n, remotion, tunnel(cloudflare) 3개를 한번에 돌리고 있음

version: '3.8'

services:
  n8n:
    image: n8nio/n8n:latest
    container_name: n8n
    restart: always
    user: root
    ports:
      - "5678:5678"
    environment:
      - GENERIC_TIMEZONE=Asia/Seoul
      - TZ=Asia/Seoul
      - WEBHOOK_URL=https://내도메인주소
      - VUE_APP_URL_BASE_API=https://내도메인주소
      - N8N_SECURE_COOKIE=false
      
      # execute node 사용 관련
      - NODES_EXCLUDE=[]
      - N8N_NODES_EXCLUDE=[]
      - N8N_BLOCK_NODES=[]
      - N8N_COMMAND_EXISTS_CHECK_DISABLE=true
    entrypoint: []
    command:
      - sh
      - -c
      - |
        # 1. 최신 도커 바이너리 설치 (v27.4.1, ARM64/M4 Mac용)
        if [ ! -f /usr/bin/docker ] || [ "$(docker version --format '{{.Client.Version}}' 2>/dev/null | cut -d. -f1)" -lt 27 ]; then
          echo "🚀 최신 도커 바이너리(v27.4.1)로 업그레이드 중..."
          # 최신 stable 버전을 가져옵니다.
          (wget -qO- https://download.docker.com/linux/static/stable/aarch64/docker-27.4.1.tgz | tar -xzvf - -C /usr/bin --strip-components=1 docker/docker) || \
          (curl -L https://download.docker.com/linux/static/stable/aarch64/docker-27.4.1.tgz | tar -xzvf - -C /usr/bin --strip-components=1 docker/docker)
        fi

        # 2. 실행 권한 부여 및 확인
        chmod +x /usr/bin/docker
        echo "✅ 도커 클라이언트 준비 완료: $(docker version --format '{{.Client.Version}}')"

        # 3. n8n 실행
        exec /docker-entrypoint.sh
    volumes:
      - ./n8n_data:/root/.n8n
      #- ./n8n_data:/home/node/.n8n
      - ./remotion_renders:/home/node/renders
      - /var/run/docker.sock:/var/run/docker.sock


    remotion:
    image: node:20-bookworm
    container_name: remotion
    restart: always
    volumes:
      - ./remotion_app:/app
      - ./remotion_renders:/app/out
    working_dir: /app
    shm_size: '2gb'
    command: >
      bash -c "
        echo '📦 시스템 환경 최적화 중 (한글/이모지 폰트 포함)...' &&
        apt-get update && apt-get install -y libnss3 libdbus-1-3 libatk1.0-0 libatk-bridge2.0-0 libcups2 libdrm2 libxcomposite1 libxdamage1 libxrandr2 libgbm1 libasound2 libpangocairo-1.0-0 libxshmfence1 libxkbcommon0 ca-certificates fonts-liberation libcurl4 libxfixes3 libx11-xcb1 libxcb-dri3-0 libxcursor1 libxi6 libxtst6 fonts-nanum fonts-noto-color-emoji --no-install-recommends &&
        
        echo '🔍 리모션 프로젝트 점검...' &&
        if [ ! -f 'package.json' ]; then
          echo '⚠️ 새로운 n8n 프로젝트 설계도를 작성합니다...' &&
          echo '{\"name\":\"remotion-factory\",\"version\":\"1.0.0\",\"dependencies\":{\"remotion\":\"latest\",\"@remotion/cli\":\"latest\",\"react\":\"latest\",\"react-dom\":\"latest\",\"@types/react\":\"latest\",\"@types/react-dom\":\"latest\",\"typescript\":\"latest\",\"pretendard\":\"latest\"}}' > package.json &&

          mkdir -p src &&
          # index.tsx 작성
          echo \"import {registerRoot, Composition} from 'remotion'; import {n8nRemotion} from './n8nRemotion'; export const RemotionVideo = () => { return (<Composition id='n8n-video' component={n8nRemotion} durationInFrames={300} fps={30} width={1920} height={1080} />); }; registerRoot(RemotionVideo);\" > src/index.tsx &&

          # n8nRemotion.tsx 작성 (Pretendard + 이모지 통합)
          echo \"import 'pretendard/dist/web/static/pretendard.css'; export const n8nRemotion = () => { return <div style={{flex: 1, backgroundColor: '#FFD700', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', fontSize: 100, fontWeight: 800, fontFamily: 'Pretendard, \"Noto Color Emoji\", -apple-system, sans-serif', letterSpacing: '-0.02em'}}><div>🚀 의욕 충만! 🍻</div><div style={{fontSize: 60, marginTop: 20}}>오늘도 가보자고! 🔥</div></div>; };\" > src/n8nRemotion.tsx &&

          # tsconfig.json 작성
          echo '{\"compilerOptions\":{\"target\":\"ESNext\",\"lib\":[\"dom\",\"dom.iterable\",\"esnext\"],\"allowJs\":true,\"skipLibCheck\":true,\"esModuleInterop\":true,\"allowSyntheticDefaultImports\":true,\"strict\":true,\"forceConsistentCasingInFileNames\":true,\"module\":\"esnext\",\"moduleResolution\":\"node\",\"resolveJsonModule\":true,\"isolatedModules\":true,\"jsx\":\"react-jsx\"},\"include\":[\"src\"]}' > tsconfig.json &&

          echo '✅ n8nRemotion 설계도 작성 완료!'
        fi &&

        echo '⚙️ 라이브러리 및 브라우저 엔진 세팅...' &&
        npm install &&
        npx remotion browser ensure &&

        echo '🚀 모든 준비 완료!' &&
        tail -f /dev/null
      "

  tunnel:
    image: cloudflare/cloudflared:latest
    container_name: cloudflared-tunnel
    restart: always
    command: tunnel run
    environment:
      - TUNNEL_TOKEN=클라우드플레어에서 생성한 터널토큰

---

컨테이너 전체 구동

**주의** docker-compse.yml에 볼륨(volumes)을 상대경로인 ./ 지정했기 때문에 실행하는 위치로 볼륨이 잡히게 된다.
따라서 외부 스토리지(DAS, NAS)에서 운용하는 사람이라면 본인이 관리하는 도커 폴더 밑에 docker-compose.yml 파일을 옮겨놓고 그 경로에서 실행(예. /Volumes/Storage/Data/docker/n8n)

도커컴포즈를 최초 실행하면 remotion 진행에 시간이 어느정도 소요된다.
따라서 remotion log를 보면서 '모든 준비 완료!' 가 뜰 때까지 기다리자 

docker-compose up -d
docker logs -f remotion

---

테스트

모든 컨테이너가 켜졌다면, 터미널에서 아래 명령어로 영상이 생성되는지 테스트 해보자

docker exec remotion npx remotion render src/index.tsx n8n-video out/test_basic.mp4

remotion_renders 폴더에 test_basic.mp4 파일이 정상적으로 생성됐다!

기본으로 만들었던 소스파일 n8nRemotion.tsx 수정해보자

import { staticFile, Video, Audio, Img } from 'remotion';
import 'pretendard/dist/web/static/pretendard.css';

export const n8nRemotion = ({ subtitle, videoFile, audioFile, imgFile }: {
  subtitle: string;
  videoFile: string;
  audioFile: string;
  imgFile: string;
}) => {
  return (
    <div style={{ flex: 1, backgroundColor: 'white', fontFamily: 'Pretendard, "Noto Color Emoji", sans-serif' }}>
      {/* 1. 영상 */}
      <Video src={staticFile(videoFile)} style={{ position: 'absolute', width: '100%', height: '100%', objectFit: 'cover' }} />

      {/* 2. 이미지 */}
      <Img src={staticFile(imgFile)} style={{ position: 'absolute', top: 50, right: 50, width: 200, borderRadius: 20 }} />

      {/* 3. 자막 (밝고 활기찬 톤) */}
      <div style={{
        position: 'absolute', bottom: 150, width: '100%', textAlign: 'center',
        fontSize: 80, fontWeight: 900, color: 'white', textShadow: '0 4px 15px rgba(0,0,0,0.8)',
        letterSpacing: '-0.03em'
      }}>
        {subtitle} 🍻
      </div>

      {/* 4. 배경 음악 또는 음성 */}
      <Audio src={staticFile(audioFile)} />
    </div>
  );
};

remotion_app/public/ 경로에 원본이 되는 파일(영상, 음성, 이미지 등)을 넣어놓고 제작하면 된다

 

n8n에서 자동화 명령어 설정하기

• 노드: Execute Command
• 명령어 (한글 인터페이스의 'Command' 칸에 입력):

docker exec remotion npx remotion render src/index.tsx n8n-video out/{{ $json.output }}.mp4

docker exec remotion npx remotion render src/index.tsx n8n-video out/test_video.mp4 --props='{
  "subtitle": "오늘도 화이팅! 🚀",
  "videoFile": "1_video.mp4",
  "audioFile": "1_audio.mp3",
  "imgFile": "logo.png"
}'

 

찐마지막! 만들어진 영상 n8n에서 바로 보기

영상이 만들어진 후, n8n에서 그 파일을 직접 읽어오고 싶다면 다음 노드를 추가하세요.

'Read Binary File' 노드 추가

• File Path: 절대경로로 "파일명.mp4"을 설정하면 된다