vercel로 배포 후 이미지가 안뜨는 오류
진행중인 프로젝트를 배포 후 생성된 url로 접속했을 때 랜덤하게 이미지가 불러와지지 않는 상황이 발생했다.
로컬에서는 아무 문제가 없기에 배포 후 문제인걸 알게되었고 배포된 url에서 network창을 켜보니 저렇게 402 payment Required 오류가 발생.
구글링 해보니 payment오류의 경우 말 그대로 결재가 필요하다는 이야기였고 왜 결재가 필요한지를 찾아보기 시작함.
문제는 Next.js와 vercel에 있었다.
우리는 Next.js를 사용해서 프로젝트를 진행중이었는데 Next.js의 경우 이미지를 사용할때 Next.js에서 제공하는 Image 컴포넌트를 사용하길 권장한다.
그렇기에 평소처럼 모두가 Image 컴포넌트를 사용중이었고 이미지를 많이 불러와야 하는 상황이었다.
Image 컴포넌트의 경우 vercel에서 자동으로 최적화를 해주는데 무료버전에서는 최적화를 해주는 횟수에 제한이 있었던 것이다. 1달에 1000건인걸로 알고있다.(아닐수도 있음.)
우리는 이 1000건을 초과 한 상태였고 그래서 이미지가 보이지 않았던 것..!
해결방법
이 경우 해결방법은 3가지 정도가 있다.
1. vercel을 유료로 사용한다.
- 하지만 이 경우 비용이 상당하다고 한다. 아이패드 한대값은 금방 나온다고..
2. 다른 팀원의 계정으로 재배포를 한다.
- 이 경우 당연하게 1000건의 기회가 다시 주어지기 때문에 1000건에 달성하기 전까지 문제없이 이미지를 불러올 수 있게 된다.
3. 타 Image CDN 사이트를 이용한다.
CDN(Content Delivery Network)이란?
: 원본파일의 복사본을 보관하는 곳으로 경유지, 캐시 컨택스트 같은 곳이라고 보면 된다.
예를 들면 넷플릭스의 경우 본사는 미국에 있지만 첫 유저가 어떤 영화를 시청하고자 했을 때, 첫번째는 본사에서 영화정보를 들고와서 한국의 CDN에 저장하고 유저에게 영화를 제공하기 때문에 데이터가 오는데 걸리는 시간과 최적화를 하는데 시간이 조금 걸리지만 두번째 유저가 똑같은 영화를 시청하고자 한다면 저장된 CDN에서 바로 꺼내서 제공할 수 있는 형태인 것이다.
이미지 CDN의 경우
cloudflare 와 cloudinary등이 있다.
각 가격과 요금별로 제공하는 성능은 각각 다르니 사이트에서 직접 확인해보기를 권장한다.
