Next.js 정적 파일 배포 체계 구축

Next.js 프로젝트의 정적 파일을 개발과 운영으로 분리해 관리하고, CI/CD로 배포와 Akamai Purge까지 자동화한 구조다.

기존에는 www.saraminimage.co.kr를 개발과 운영이 함께 사용해, 이미지를 다시 올릴 때마다 퍼지가 필요했고 파일명을 바꾸면 기존 리소스가 가비지로 남았다. 브랜치별 독립 관리가 되지 않아 운영 서버에 개발 리소스가 섞이고, 캐시도 전체 단위로 무효화되는 문제가 있었다.

해결 방식은 환경별로 이미지 URL과 배포 경로를 나누는 것이다.

• 로컬 개발: /public/static을 그대로 사용하고 NEXT_PUBLIC_IMAGE_URL=/static으로 설정
• 개발 환경: NEXT_PUBLIC_IMAGE_URL=__IMAGE_URL__를 CI/CD에서 https://dev.saraminimage.com/static/${SERVICE_NAME}/${CI_COMMIT_REF_SLUG}로 치환
• 운영 환경: https://static.saraminimage.co.kr/static/app처럼 고정 경로를 사용
• 레거시 호환: NEXT_PUBLIC_SARAMIN_IMAGE_URL=https://www.saraminimage.co.kr를 유지

Next.js 설정에서는 images.loader를 custom으로 두고, remotePatterns로 허용 도메인을 제한했다. imageSizes: [96], deviceSizes: [1920]을 지정해 이미지 최적화 정책도 함께 정리했다.

커스텀 이미지 로더는 경로 prefix로 서버를 나눈다.

• /sri/는 기존 saraminimage 서버
• /images/는 새로운 static 서버
• width와 quality를 쿼리스트링으로 붙여 리사이징과 품질 제어

컴포넌트에서는 <Image src={/images/${name}}>처럼 사용해 새 정적 파일을 일관된 방식으로 불러온다. 이미지 사용 시에는 width/height를 명시하고 alt를 제공해 Next.js 최적화와 접근성을 지킨다.

배포는 rsync와 SSH 키 설정으로 처리한다.

• find로 정적 파일 권한을 디렉토리 755, 파일 644로 정리
• SSH로 대상 서버 디렉토리를 생성
• rsync -rptgoDv --delete-delay --size-only --stats로 변경분만 동기화
• 배포 후 ls -lR로 결과를 확인

캐시 관리는 전체 Purge 대신 변경된 파일만 대상으로 한다. Git diff로 public/static/ 아래의 수정 파일만 뽑아 rsync_changes.log를 만들고, 그 목록을 기반으로 https://static.saraminimage.co.kr/${IMAGE_PATH}/${file} 형태의 URL 배열을 구성한다. 이후 akamai-edgegrid를 쓰는 purge-cache.js로 운영 캐시를 무효화한다.

결과적으로 브랜치별 독립 개발, 운영 리소스 분리, 변경 파일만 선별 Purge, 그리고 이미지와 CSS 배포의 자동화가 가능해진다.