[FE] 리액트 - 50강: Vercel을 활용한 React + Supabase 프로젝트 배포 실습
- GitHub에 업로드된 React + Supabase 프로젝트 소스를 Vercel에 GitHub 계정으로 로그인하여 배포하는 과정으로 시작합니다. 🚀
- Vercel 대시보드에서 팀을 생성하고 'Add New Project'를 통해 GitHub 레포지토리를 임포트하여 배포를 진행합니다. 🏗️
- 배포 중 에러 발생 시 코드를 수정하고 GitHub에 푸시한 뒤, Vercel에서 'Redeploy' 버튼을 눌러 재배포합니다. 🐛
- Vercel Settings의 Environment Variables 메뉴에서 Supabase 관련 환경 변수(
SUPABASE_URL, SUPABASE_ANON_KEY)와 Vercel 배포 도메인(NEXT_PUBLIC_BASE_URL)을 설정해야 합니다. 🔑
- 환경 변수가 변경되면 반드시 Vercel에서 재배포를 진행해야 변경 사항이 완벽히 적용됩니다. 🔄
- Supabase 프로젝트의 Authentication -> URL Configuration에서 Vercel 배포 도메인을 추가하며, 이때 URL은 반드시 슬래시(
/)로 끝나야 합니다. 🔗
- Google Cloud Console의 OAuth 동의 화면에서 클라이언트의 JavaScript 원본에 Vercel 배포 도메인을 추가합니다 (이때는 슬래시 없이). 🌐