Next.js + Supabase Vercel 배포 후 할 일
Next.js app router 기반으로 작업하고 Supabase와 연동하여 팀프로젝트를 진행했다.
Supabase는 auth 를 이용하여 로그인, 회원가입 부분을 구현하였고 마이페이지의 이미지 변경은 Storage에 Bucket에서 폴더를 하나 만들어서 데이터를 관리했다.
작업할 때에는 로컬에서 확인하기 때문에 모든 주소를 http://localhost:3000~~ 으로 설정 후 작업했는데 vercel에 배포하고 나면 이 부분을 배포한 링크로 변경해줘야 오류 없이 이용이 가능하다.
👍 정리하자면 로컬주소로 설정한 부분을 배포링크로 변경해주어야한다!
01. VS Code 내 주소 변경하기 👩🏻💻
우리는 이번 프로젝트에서 로그인 하면 다시 메인으로 넘어가도록 redirect 하는 부분이 있었는데, 이 부분이 로컬 주소로 설정되어 있어서 변경해주어야 했다.
코드에서처럼 redirectTo: “” 부분에 배포링크+auth/callback 으로 수정해주었다.
auth/callback 같은 부분은 프로젝트마다 어떤 Tool을 사용하느냐에 따라 달라질 수 있으니 docs를 꼼꼼히 보고 작업하도록 주의하자!
02. Supabase 주소 변경하기 👩🏻💻
트러블슈팅이기도 했는데 Supabase 설정에서 url 변경을 하지 않아서 로그인을 하면 에러가 나는 현상이 발생했다.
 |  |
|---|
Supabase에 URL Configuration 메뉴를 클릭해서 들어가면
이렇게 Site URL 과 Redirect URLs 가 두개 있다.
- Site URL : localhost 로 되어있던거를 배포 링크로 바꿔주기
- Redirect URLs : localhost 설정했던 계정도 추가해서 넣기
이렇게 하면 로그인을 했을 때 주소가 localhost로 이동해서 런타임 에러가 발생하는 걸 막을 수 있다.
03. Vercel 세팅 수정하기 👩🏻💻
.env key 같은 환경변수는 처음 배포 사이트를 만들때 잘 넣는데 그 이후에도 Supabase 나 세팅하거나 확인해야할 부분이 있다.
🚨 vercel 이미지 에러
Vercel 에서 배포한 사이트의 Usage에 들어가면 아래 사진에서 볼 수 있듯 Image Optimization이라는 메뉴가 있다.
해당 메뉴를 누르면 이렇게 현재 이미지를 몇 개 사용하고 있는지 확인할 수 있다.
Vercel은 1000개까지 무료로 사용할 수 있는데, 1000개가 넘어가면 사진이 엑박이 뜨면서 오류가 나고 경고메일이 온다고 한다…🥲
04. 지역 설정 바꿔주기👩🏻💻
기본 세팅으로 아마 미국이 되어있을텐데 한국으로 설정해주도록 하자!
팀프로젝트를 하면서 배포 후에 에러가 많이 발생한 경우는 처음이어서 너무 정신없고 힘들었다.
대부분 개인계정 + 무료계정으로 사용하다보니 제한사항이 많아서 로컬상에서는 문제 없이 보여져도 배포 후에 문제가 많이 생겼던 것 같다.
이런 경우는 금액권을 설정하거나 당일 내에 요청할 수 있는 횟수 제한이 걸린거라면 이에 대한 타협점을 찾아봐야할 듯 싶다..!
최종팀프로젝트에서도 똑같이 Supabase랑 Vercel를 사용할 것 같은데 한 달 뒤에 배포할 때 이런 설정 변경을 해주지 않아서 에러가 발생하는 경우는 없도록 잘 기억해두자🔥
