프론트엔드
Next.js 프로젝트의 정적 파일 배포 환경 구성
두줄요약
Next.js 정적 파일을 개발·운영으로 분리하고 CI/CD로 자동 배포하는 구성을 소개했습니다. 변경된 파일만 rsync와 Purge로 처리해 캐시 비용과 운영 부담을 줄였습니다.
문제 상황
- 개발·운영 환경이 동일한 정적 파일 서버를 공유하며 이미지 수정, 리소스 관리, CDN 캐시 무효화가 복잡해진 상태
- 브랜치별 독립 배포가 어려워 개발 중 리소스가 운영에 남고, 불필요한 전체 Purge로 네트워크 비용이 증가하는 문제
해결 방법
- 개발·운영 정적 파일 경로를 분리하고, 환경변수와 CI/CD 치환으로 브랜치별 고유 URL을 자동 설정
- rsync로 변경 파일만 배포하고, Git diff 기반으로 변경된 파일만 추출해 Akamai Purge를 선택적으로 실행
- Next.js custom image loader로
/sri/레거시와/images/신규 경로를 함께 지원