요약PNG 형식의 퍼블릭 이미지를 WebP 확장자로 변경하여 용량 95% 절감 (평균 2.46MB → 128KB, 총 29.53MB → 1.54MB) 문제 1 : public 이미지의 용량 비대 기존의 public 디렉터리에 있던 이미지들은 모두 PNG 확장자였고 기본적으로 MB 단위라서 불러오는데 체감 시간이 오래 걸렸다. 특히 가장 큰 이미지의 경우 11MB나 됐는데, 504 Gateway Timeout 에러가 발생했다. 이미지 로딩 이 너무 오래 걸려서 타임아웃이 난거다. 물론 Next.js의 Image 컴포넌트가 브라우저 호환여부에 따라 webp로 변환해주기는 하나, 원본의 용량 자체가 커서 다소 불러오는데 시간이 걸렸다. 해결 1 : WebP 변환하여 용량 절감WebP 란?WebP는 구글이 2..
요약 1.99GB였던 Next.js Docker 이미지를 멀티스테이지 빌드와 .dockerignore 도입으로 1.01GB까지 줄여 약 49% 경량화 문제 Next.js로 도커 이미지로 빌드하여 ECR에 푸쉬하여 사용하고 있었다. 하지만 기존에는 도커 이미지가 약 2GB로 크기가 커서, 빌드 시간이 오래 걸리고 ECR 업로드/다운로드 속도도 느렸다. 또 ECR에 저장할 때는 1GB당 월 0.1달러씩 부과하며, 트래픽에도 요금을 받고 있었기 때문에 용량을 더 줄이고자 했다. 해결 1 : 멀티 스테이지 도입 // 기존 DockerfileFROM node:version-alpineENV TZ=Asia/SeoulWORKDIR /appCOPY package.json package-lock.json ./RUN n..
