부트캠프가 끝나도 끝난 기분이 아니다. 아직 못한 배포가 있기 때문에..
운영 체제: 예 Ubuntu
노드 버전(node -v): v 17.7.1
클라이언트 자동 배포 파이프라인 연결시 배포 부분에서 빌드 에러가 계속 떴다. 메모리 문제인것같아서
[email protected] build: cross-env NODE_OPTIONS=--max-old-space-size=8000 react-scripts build로 메모리도 올려줬지만 빌드가 성공할때도 있고 실패할때도 있었다. (실패가 9, 성공 1..)
검색을 해보니 --max-old-space-size=8000을 해주는것은 임시 방편이라고해서.. 일단 용량은 올려줬는데도 배포 성공률이 복불복이다.
이 문제가 memory leak의 문제라고 하던데 해결법을 찾지 못했다.
동기의 도움을 받아 블로그: 메모리 부족으로 인한 CRA build fail 해결하기을 참고하여 오류 해결을 진행하였다. 총 3단계로 진행되는데 1. GENERATE_SOURCEMAP=false 2.code splitting 3.analyze 후 너무 큰 용량이면서 대체가능한 dependency 제거 이다.
1번 시도 후 빌드 => 실패
1, 2번 시도 후 빌드 => 성공
혹시 몰라 두 번이나 시도했는데 두번 다 성공했다. 드디어 다 됐구나!! 싶었던 찰나에.. 또 한번 빌드를 시도해봤더니 빌드 실패가 떳다,, 이게 무슨일이람..
다시 로그를 보니..
폰트어썸..? 블로그에서도 이모지가 많은 용량을 차지한다던데.. 우리 팀도 폰트어썸 모듈때문일까? 하고 anaylze모듈을 다운받아 어떤것들이 용량을 차지하는지 살펴보았다.
역시나 이모티콘이 꽤 차지했다. 그래서 FontAwsome -> react-icons모듈로 변경했더니..
용량이 확 줄었고 빌드 성공!
그치만 불안해서.. 아주 약-간만 내용을 바꿔주고(영향 없을 정도만) 다시 빌드를 했더니.. 역시나 실패했다. 이 정도면 개발자들이 왜 샤머니즘에 빠졌는지 알 정도..? 무엇이 문제일까 하고.. gif 파일 용량을 보니 다 MB였다. 폰트어썸 용량을 줄이겠다고 생각한 내 자신이 우스워졌다. 왜냐면 제일 큰 gif가 25MB였으니까. 아무튼 다시 총 4개의 MB파일들을 다 고쳐줬다. 혹시-나 해서 아무런 이유없이 그냥 파일 하나만 먼저 지워주고 빌드를 했는데 성공을했다! 와.. 결국 gif문제였구나! 라는 해답을 찾았고 모든 Gif 파일을 줄여줬다. 근데 MB를 KB로 바꾸자니 화질이 너무 떨어져서 모든 용량을 딱 반씩만 다운그레이드 해줬는데 빌드 실패.. 이해가 가지 않았다. 방금 전만해도 분명 5MB짜리 gif하나 지워준건데 빌드 성공했었잖아ㅜㅜ 용량으로 따지면 지금이 훨씬 작다고ㅜㅜ 에휴.. 차라리 gif를 다 지워주자 하고 다 지웠더니 배포 성공! 그럼 gif를 사진으로 대체해볼까..? 그것밖에 방법이 없는것같네.. 하고 다 jpg로 바꿔줬다. 3개는 50-100KB 정도로 설정해줬고 하나는 200KB정도로 설정했다.. 이젠 진짜 되어야해ㅜ 했는데 실패... 이쯤되면 용량 문제가 맞아? 싶다가도 한번 더 숨고르기를 하고 200KB 용량을 100KB 정도로 줄여줘서 다시한번 빌드 시도.. 성공!
후기... 성공해도 이게 성공일까? 하는 생각이 들었다. 내일 또 안되는거 아니야? 하는 생각이든다.