HTTP 범위 요청(Range Requests)을 통한 동영상 제공하기

Node 의 createReadStream 은 start/end 를 양끝 포함(inclusive) 로 해석한다. HTTP Range 헤더와 의미가 정확히 같다.

const range = req.headers.get('Range'); // 'bytes=0-554057'
const [s, e] = range.replace('bytes=', '').split('-');
const start = Number.isNaN(+s) ? 0 : +s;
const end = Number.isNaN(+e) ? stats.size - 1 : +e;

const body = file.createReadStream({ start, end });
return new Response(body, {
  status: 206,
  headers: {
    'Content-Type': 'video/mp4',
    'Content-Length': `${end - start + 1}`,
    'Content-Range': `bytes ${start}-${end}/${stats.size}`,
    'Accept-Ranges': 'bytes',
  },
});

재개 다운로드 시 클라이언트는 If-Range: "<etag>" 또는 마지막 수정 타임스탬프를 함께 보낸다.

이게 없으면 파일이 갱신된 상태에서 이전 바이트 오프셋에 이어붙이는 결과 → 파일 손상.

416 Range Not Satisfiable 은 first-pos >= size 일 때만 내야 한다. end-pos > size 는 '초과 클램핑' 으로 처리해도 정상 범위다.

if (start > stats.size - 1) {
  return new Response(null, {
    status: 416,
    headers: { 'Content-Range': `bytes */${stats.size}` },
  });
}
// end > size - 1 인 경우: end = stats.size - 1 로 클램핑 후 정상 206

[감점 답변] 'Safari 가 원래 까다롭다' 같은 일반론. [좋은 답변] Safari 는 첫 2바이트에 대한 Range 요청을 보내고 206 Partial Content 가 아니면 다음 <source> 로 넘어간다 → 모두 실패하면 렌더링 자체를 포기. 해결: 서버에서 Range 헤더를 파싱하고 createReadStream({ start, end }) 로 부분 스트림을 만들어 206 + Content-Range + Accept-Ranges: bytes 로 응답해야 한다.

[감점 답변] '상태 코드 설명' 만 나열. [좋은 답변] Range 헤더 없음 → 200 + 전체, 단일 범위 정상 → 206 + Content-Range, start 가 파일 크기 이상 → 416 + Content-Range: bytes */{size}. If-Range 불일치로 검증자가 맞지 않을 때도 200 으로 전체를 다시 보낸다.

[감점 답변] Range 만 언급. [좋은 답변] 서버는 평상시 응답에도 Accept-Ranges: bytes, ETag 또는 Last-Modified 를 함께 내려줘야 한다. 클라이언트가 끊긴 시점의 바이트부터 Range: bytes={n}- 로 재요청할 때 If-Range 검증자로 파일이 바뀌지 않았음을 확인해야 파일 손상 없이 이어붙일 수 있다.