핵심 요약
올리브영의 프런트엔드팀이 NEXT.JS와 CDN 연동 및 도커 이미지 경량화를 통해 SSR/정적 파일 전달을 최적화하고 배포 속도를 개선했습니다.
구현 방법
- NEXT.JS와 CDN 연동: assetPrefix를 next.config.js에 CDN URL 추가하고 .next/static을 _next/static으로 Origin(S3)에 업로드하며, SSR과 정적 자산 제공 역할을 분리했습니다.
- 도커 이미지 경량화: next.config.js에 output: standalone를 적용해 .next/standalone 폴더만 실행에 사용하도록 구성했고, 컨테이너 이미지에는 public, standalone 및 필요한 환경 변수 파일만 포함했습니다.
- 운영 포인트: CDN 도입으로 엣지에서 정적 파일 제공이 가능해졌고, 정합성 및 배포 속도 관리가 용이해졌습니다.
주요 결과
- 컨테이너 이미지 크기: 약 180MB에서 약 70MB로 약 60% 축소
- CDN 도입으로 엣지 근처 전달 속도 향상 및 HTTP/2/HTTP/3 활용
- SSR 및 이미지 최적화 담당 영역은 서버 부담이 줄고 운영 효율이 향상
