Direct Upload 및 Webhook 기반의 서버리스 비디오 파이프라인 설계

Build a video upload + HLS playback flow in Next.js 15 (with direct uploads)

Mason K2026년 5월 26일10분intermediate

AI 요약

Context

Next.js 15 Server Actions의 기본 Request Body 제한인 1MB로 인한 대용량 파일 처리의 한계 발생. Route Handler의 제한을 높이더라도 Serverless Function 내에서 대용량 바이트를 유지하며 인코딩을 대기하는 구조적 병목 지점 존재.

Technical Solution

Server-side Broker 구조를 통한 Direct Upload URL 발급으로 서버의 바이트 처리 부담 제거
Browser에서 스토리지 레이어로 데이터를 직접 전송하는 PUT 요청 설계로 Serverless Function의 메모리 및 시간 제약 극복
Webhook 기반의 비동기 상태 업데이트 체계를 구축하여 Asset Ready 시점에 PlaybackId를 DB에 기록하는 Event Driven 방식 채택
XMLHttpRequest 활용을 통한 업로드 진행률(Progress) 실시간 추적으로 사용자 이탈 방지 및 UX 개선
HLS(HTTP Live Streaming) Manifest 기반의 재생 구조를 통해 효율적인 비디오 스트리밍 환경 구현

실천 포인트

1. 대용량 파일 업로드 시 서버를 거치지 않는 Direct Upload URL 브로커링 패턴 검토

2. Serverless 환경의 Request Body 제한 및 실행 시간 초과 가능성 분석

3. 비동기 처리 결과 반영을 위한 Webhook 수신 핸들러 설계

4. 파일 업로드 UX 개선을 위해 Fetch 대신 XMLHttpRequest 또는 전용 SDK의 Progress API 활용

태그

#Direct Upload #HLS #Serverless #Next.js #Webhook

원문 읽기