문서

200여개 서비스 모노레포의 파이프라인 최적화

정석호 토스 · 토스 기술 블로그

AI 핵심 요약

200여 개 서비스를 관리하는 모노레포에서 빌드와 checkout, SSR 배포가 병목이 되자 토스 프론트엔드 챕터는 파이프라인과 배포 이미지를 최적화했습니다. CircleCI Dynamic Configuration으로 서비스·환경별 빌드를 독립된 러너에서 병렬 실행해, 예시에서 30분 걸리던 작업을 6분으로 줄였습니다. 매일 저장소를 미리 복제한 Docker 베이스 이미지를 사용해 checkout 시간을 36분에서 22초로 단축하고, Yarn PnP API로 런타임에 필요한 파일만 담은 SSR 번들을 만들었습니다. 그 결과 SSR 이미지는 4GB에서 약 200MB로 줄었으며, 모노레포 최적화에서는 병렬화뿐 아니라 컴퓨팅 자원 분리와 필요한 콘텐츠만 배포하는 설계가 중요하다는 점을 보여줍니다.

병렬 작업 수만 늘리기보다 각 빌드를 독립된 컴퓨팅 환경에서 실행하고, 러너 수를 비용에 맞춰 제한하세요.
CircleCI Dynamic Configuration으로 변경된 서비스별 파이프라인을 동적으로 구성할 수 있습니다.
Docker 이미지에 저장소와 필요한 커밋 이력을 미리 담아두면 CI에서 전체 checkout을 반복하는 시간을 줄일 수 있습니다.
Yarn PnP 환경에서는 PnP API로 SSR 런타임 파일과 의존성만 묶어 standalone 번들을 만들 수 있습니다.

소개

토스 프론트엔드 챕터에서는 하나의 모노레포에서 200여개가 넘는 서비스를 관리하고 있어요. 이렇게 커진 모노레포에서도 git push 부터 배포까지 5분을 유지할 수 있는 비결을 소개합니다!

비슷한 학습 자료

컨퍼런스 SLASH

토스ㅣSLASH 21 - 프론트엔드 웹 서비스에서 우아하게 비동기 처리하기

컨퍼런스 SLASH

API를 호출하거나 네이티브 앱과 통신할 때 프론트엔드 웹 서비스에서는 반드시 비동기 작업이 일어나게 됩니다. 일상처럼 다루고 있지만 정작 UI에서 다루기 힘든 비동기 프로그래밍. React Suspense를 이용하여 우아하게 처리하는 이론과 실전 적용법을 공유합니다. 박서진 / 토스 Frontend Developer 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-21 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im #토스 #개발자컨퍼런스 #SLASH

프론트엔드 로드맵 2개에 담김