NEXT.JS와 CDN, 그리고 도커 이미지 경량화

Context

Next.js를 AWS ECS/EKS 같은 자체 관리형 인프라에서 직접 운영할 때, NEXT.js 서버가 SSR 렌더링뿐 아니라 정적 파일(JS, CSS) 제공과 이미지 최적화를 모두 담당하면서 서버 리소스 낭비와 배포 이미지 크기 증가 문제가 발생했다.

Technical Solution

• Next.js assetPrefix 옵션으로 CDN 연동: next.config.js에 CloudFront URL을 설정하고 .next/static 폴더를 _next/static 경로로 S3에 업로드하여 정적 파일 제공을 CDN으로 분리
• NEXT.js 서버 역할 재정의: CDN 연동 후 SSR 렌더링과 이미지 최적화만 담당하도록 정적 파일 제공 책임 제거
• Next.js output: standalone 옵션 적용: 빌드 후 .next/standalone 폴더만 사용하여 필요 최소한의 런타임 파일로 컨테이너 이미지 생성
• Dockerfile 최적화: public 폴더, .next/standalone, 환경 변수 파일만 포함하여 node:18.17.0-alpine3.18 기반 이미지 생성
• 정적 파일 CDN 제공: HTTP/2, HTTP/3 등 최신 프로토콜과 gzip, brotli 압축을 CDN에서 처리하여 NEXT.js 서버 컴퓨팅 부하 감소

Impact

• 도커 이미지 크기: 180MB → 70MB (61% 감소)
• 배포 속도 개선: 이미지 다운로드 시간 단축으로 docker pull 성능 향상
• NEXT.js 서버 CPU 부하 감소: 정적 파일 압축 및 제공 책임 제거

Key Takeaway

Next.js 같은 풀스택 프레임워크를 자체 인프라에서 운영할 때, assetPrefix + CDN 연동으로 정적 자산 배포를 분리하고 output: standalone으로 도커 이미지를 경량화하면 서버 리소스 효율성과 배포 속도를 동시에 확보할 수 있다.