한 달에 42시간 절약한 개선 건 (React 빌드 속도 개선 feat.Tekton)

 
새해 들어 회사에서 한 해 목표를 정하다가

Devops 엔지니어의 역할에 대해서 재고하게 되었다. 
 
타 사는 어떻게 하고 있을까 찾아보다가
토스의 박서진 개발자분이 빌드 속도를 올리는 것이
사내 개발 효율 증진에 큰 도움이 된다는게 인상깊었다.

출처: https://www.youtube.com/watch?v=2IE68SDTYvI&t=315s    
 
내 장점은 추진력이니! 
바로 사내에서 가장 많이 쓰고 오래걸리는 빌드를 찾아보다
React를 쓰는 UI 쪽 빌드 양이 상당한데,
빌드시간이 9~10분대인걸 보고 빠르게 개선해드리자는 다짐을 하게되었다!
 

결론부터 말하면 

next 의 빌드 캐시를 이용해 
9분 -> 5분대로 줄이는 데 성공하였다.
 
위 토스에서 본 방식도 써보려했으나, yarn classic(1.x) 에서 yarn berry (2.x 이상 (현재 4.6.0 이 최신))로 업그레이드하는 과정은 
변경해야할 패키지 의존 관계가 생각보다 너무 복잡했다..

끝없는 Module not found..
 
혼자 해보려다 업무단에 많은 모듈 변경사항이 영향도가 없는지 확신이 안섰다.  
업무단 책임분과 의논끝에 yarn berry 사용은 장기 과제로 두고 찬찬히 업데이트 하기로했다..
건드려야하는 소스의 영향도도 커서 단계적으로 테스트 할게 많았다. 
(node_modules 안쓰고 pnp방식으로 바꿔도 docker build 시 속도개선이 가능함을 찾았기 때문에 변경할 가치가 있다.)
 
지금 당장 적용해볼 수있고 영향도 적은 건 없을까 하고
유심히 로그를 보는데, 
yarn build 의 로그 중 No build cache found 라는 로그를 보게된다.
 
build cache 를 적용해보려다 
개인적으로 애먹은 부분이 Tekton 은 캐싱가이드가 없었던 점이다. 
타 CI툴은 next build 시 캐싱 가이드가 있다. 
https://nextjs.org/docs/pages/building-your-application/deploying/ci-build-caching 

Deploying: Continuous Integration (CI) Build Caching | Next.js

하지만, 회사에선 Tekton 을 쓰고있었고, tekton 은 마이너한 CI 툴에 속하기때문인지 가이드가 없었다. 
그래도 머리 굴린 끝에 캐싱은 기존에 썼던 파일이 있으면 캐싱이 작동한다는걸 확인했고, (로컬에서는 캐싱이 됐기때문)  
Tekton을 사용한 build만 캐싱 동작이 안되는 이유를 찾아나섰다. 
 
범인은 빌드 CI 툴 Tekton의 gitclone yaml 에 있었다.
react 프로젝트는 git clone -> yarn install -> yarn build 순으로 진행이 된다. 
yarn 빌드(next 빌드)를 하고나서 빌드 산출이 남아야되는데, 
git clone의 초기 설정값은 이전 작업물 (빌드했던 산출물 포함)을 전부 삭제 하고 git clone 하고 있었다.
(매번 clean build 하는것과 다름이 없었다..)

 
그래서 삭제 대상에 이전 빌드 산출물은 제외해서 남기고, 빌드를 돌려봤다.

결과는 성공! 
yarn build 시간이  5분 xx초  -> 1분 xx 초 대로 확연히 줄었다. 
바로 업무단에 공유 하고, 적용해도 괜찮은 프로파일(dev,stg)까지는 바로 적용했다. 
 

후기 

적용후 .. 한달 뒤 부장님께 보고차 얼마나 시간이 절약됐나 
살펴보았다. 
 
무려, 
빌드속도 개선 덕분에
1/8~2/5 한달 간  "42시간 10분" 절약되었다. 

 
개발자 1명 정도의 업무시간(40시간)치를 아껴준셈이다.
추후 급한 프로젝트가 끝나면, 빌드 속도 개선 거리를 찾아나서야겠다.