Vercel 배포 에러 해결하기 (50mb 제한)

 

사이드 프로젝트로 작업하고 있는 바로방탈출을 vercel로 배포했는데 api에 500 에러가 났다..

 

 

Error : Could not find Chromium (rev. 1108766). This can occur if either

...

 

로그를 보니까 Chromium을 찾지 못했다고 한다

검색해보니 비슷한 문제가 많았다

 

vercel 무료 버전에서는 50MB로 함수 크기가 제한이 되어있다고 한다

그래서 Chromium이 설치가 되지 않아서 500 에러가 나오는 것 같았다

(여기까지는 추측이었다. 정확하게 그 이유라는 에러가 나오지는 않았고

동일한 문제가 생기는 사람들이 그렇다고 말했다)

 

1. puppeteer-core가 puppeteer의 경량버전이라 puppeteer-core로 바꿔서 설치해도 에러가 나고

2. 버전을 10.1.0으로 낮췄더니 타입 오류가 나서 일단 아래처럼 바꾸고 넘어갔다

 

const td = _td as HTMLElement

 

 

여전히 오류가 나길래 봤는데 로컬에서도 난다.

 

 

Error: Could not find expected browser (chrome) locally. Run `npm install` to download the correct Chromium revision (884014).

 

Chromium이 설치가 되어있지 않다고 한다.

아래 링크에서 설명하기로는 puppeteer는 기본으로 Chromium을 다운로드하는데

puppeteer-core는 Chromium 브라우저를 자동으로 다운로드하지 않는다고 한다.

 

https://www.educative.io/answers/puppeteer-vs-puppeteer-core

 

그래서 node node_modules/puppeteer-core/install.js으로 Chromium을 직접 설치해줬다.

 

 

chromium을 설치하니까 로컬에서 실행이 된다! 근데 용량이 113.6Mb라고 나온다

vercel에서 배포하면 사이즈가 50Mb를 넘어버리니까 설치가 안돼서

결국 Chromium을 못찾고 오류가 나는 것 같았다.

puppeteer는 용량이 크니까 chrome-aws-lambda를 따로 설치해서 puppeteer-core와 함께 실행하는 방식으로 변경했다.

chrome-aws-lambda는 용량이 적은 10.1.0 버전을 설치했다

 

 

Warning: Max serverless function size of 50 MB compressed or 250 MB uncompressed reached

 

Error: The Serverless Function "api/resource/[id]" is 54.55mb whitch exceeds the maximum size limit of 50mb.

 

이제 진짜로 용량 제한 에러가 난다! 에러가 나는데 반갑다니..

50mb가 제한인데 54.55mb라고 한다. 조금 아깝다

 

chrome-aws-lambda랑 puppeteer-core를 6.0.0까지도 낮춰봤는데 50 이상이라 나오고..

용량을 줄여보려고 puppeteer를 삭제하니까 아예 실행이 안된다ㅠ

puppeteer를 6.0.0까지 낮춰보려니까 노드버전이 높아서 설치가 안됐다

nvm으로 버전을 낮췄다

 

 

nvm 설치할 때도 오류가 나서 아래 블로그를 참고했다

 

vi ~/.zshrc

export NVM_DIR=~/.nvm
source $(brew --prefix nvm)/nvm.sh

 

https://velog.io/@energyy044/Reactzsh-command-not-found-nvm

 

우여곡절끝에 node 14버전으로 설치했는데 그래도 안됐다.

node 14 버전으로 puppeteer 9 버전까지는 낮춰져서 9로 낮췄다

 

npm WARN deprecated puppeteer@6.0.0: < 19.4.0 is no longer supported

npm ERR! The chromium binary is not available for arm64.

 

 

그러니까 52.59mb... 조금만 더 줄이면 되는데ㅠ

puppeteer-core 버전을 너무 낮추니까 타입이 문제가 생겨서 @types 설치를 했는데 그것도 호환이 안돼서

다시 버전을 높이고..

 

npm WARN ERESOLVE overriding peer dependency

 

찾아보니까 next 13 버전이 12 버전보다 용량이 훨씬 크다고 했다

그래서 next 12버전으로 낮췄다

 

그리고 아래대로 따라햇더니 됐다!!

 

{
  "chrome-aws-lambda": "10.1.0",
  "puppeteer-core": "10.1.0"
}

 

https://gist.github.com/kettanaito/56861aff96e6debc575d522dd03e5725#step-1-install-dependencies

 

흐흐 잘나온다

드디어!!! 기쁘다ㅠ

반갑다 얘들아~

 

 

배포링크로 들어가도 잘 나온다! 🎉🎉

 

https://baro-escape-room.vercel.app/

 

무료 버전이라 그렇고 프로 버전을 사용하면 이런 용량 제한 문제는 발생하지 않는다고 한다

돈을 많이 쓰면 될텐데.. 안타깝군

 

하루종일 고생해서 결국 해결했다!!! 만세!!

 

버전을 내리고 올리는게 의존성때문에 참 쉽지가 않았다

타입도 계속 걸림돌이 되고 배포를 하지 않으면 문제를 바로 알 수 없는 것도 불편했다

문제를 해결은 했지만 결국 최신 버전은 사용할 수 없게 되는 문제점이 있다!

코드의 관계는 복잡하다