CI/CD 개선 진행 과정 기록(CircleCI, Yarn Berry)
회사에서 Next.js를 사용하는 프론트엔드 배포 시간 개선 및 CI/CD 비용 감소가 필요하여 진행한 내용을 간단하게 정리했습니다.
- Next.js, ecs, CircleCI 환경에서의 개선 내용입니다.
- 간단한 기록을 목표로 작성되어있기 때문에 개선된 상세 내용은 추후 필요 시 작성 후 공유할 예정입니다.
문제점 및 기존 환경
- 서비스 배포 과정이 너무 오래 걸림, 평균 13분
- CircleCI 비용 증가 - 비용 증가 전 기간의 1년 평균 비용의 최대 5배 까지 증가
- Yarn 1.x 버전 사용
문제 원인
- 비효율적인 기존 CI/CD 과정
- 비효율적인 CircleCI 리소스 클래스 설정
- 잘못된 CircleCI 캐시 설정으로 캐시 스토리지 비용 증가
- 의존성 패키지 설치 과정이 오래 걸림
해결 방법
Yarn Berry 도입
- 의존성 설치 시간 절약
- yarn cache (.yarn/cache) 재사용
Before
After
CircleCI resource class 최적화
- 빌드 과정 중 사용하는 resource 사양을 최적화해서 비용(크레딧 사용) 감소
jobs:
my-job:
docker: # use the Docker executor
- image: cimg/base:2022.09 # specify a Docker image
resource_class: xlarge # specify a resource class
steps:
- run: echo "Hello World"참고
CI/CD 과정 최적화
- 실제 빌드 시 test 과정 생략
- 배포 전 dev, feature 브랜치에서 test CI 진행하기 때문
- yarn cache 재사용
- CircleCI 캐시를 yarn.lock 파일 해시 기반으로 생성되도록 개선(중복 생성 방지)
- .yarn/cache 디렉토리를 CircleCI 캐시로 관리하고 CI 과정과 Docker 이미지 빌드 시 재활용
결과
- 배포 시간 감소: 약 13~14분 -> 8~9분
- CircleCI 캐시 스토리지 절약
- 의존성 설치를 위한 대역폭 절약
남은 과제
Yarn PnP 도입
- Yarn Berry를 도입했지만 기존 Next.js standalone Dockerfile을 그대로 사용하기 위해 node_modules를 여전히 사용
- Yarn PnP 도입 및 Dockerfile 개선
