NEXT.JS 성능 부스팅: CDN 연동 & 도커 이미지 경량화!
by DD
1년 전
조회수 0
NEXT.JS 기반 웹 페이지에서 CDN을 활용하여 정적 파일 로딩 속도를 개선함
assetPrefix 설정을 통해 CDN 연동, SSR과 정적 파일 제공 분리
도커 이미지 경량화를 통해 배포 속도 2배 향상 및 이미지 용량 60% 감소
CDN 연동: assetPrefix 설정 심층 분석
assetPrefix 설정을 통해 NEXT.JS 정적 자원을 CDN으로 분리하여 로딩 속도를 개선한다. 구체적으로, `next.config.js`에서 CDN URL을 지정하고, 빌드 후 생성된 static 폴더를 S3와 같은 CDN Origin에 업로드한다. 따라서, SSR과 정적 자원 제공을 분리하여 서버 부하를 줄인다.
도커 이미지 경량화: output: standalone 옵션
output: standalone 옵션을 사용하여 NEXT.JS 도커 이미지 크기를 줄인다. 구체적으로, 빌드 시 standalone 폴더를 생성하고, 이 폴더와 필요한 파일만 포함하여 이미지를 구성한다. 반면, 기존 방식은 불필요한 파일들을 포함하여 이미지 크기가 컸다. 결과적으로, 이미지 다운로드 시간 단축 및 배포 속도 향상을 달성한다.
배포 자동화: CI/CD 파이프라인 구축
CDN 연동 및 이미지 경량화는 배포 파이프라인 구축의 핵심 요소이다. CI/CD를 통해 코드 변경 시 자동 빌드 및 배포를 수행한다. 따라서, 도커 이미지를 빠르게 배포하고, CDN 캐싱을 통해 사용자에게 최신 버전을 제공한다. 결과적으로, 배포 시간 단축과 서비스 안정성 확보가 가능하다.
