유튜브블로그Top 10
내 프로필

데브허브 안내
소개업데이트 소식

데브허브 커뮤니티

[FE] 리액트 - 50강: Vercel을 활용한 React + Supabase 프로젝트 배포 실습

구디사는 개발자 9Diin

2025. 10. 11.

0

#devops
#backend
  • 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 배포 도메인을 추가합니다 (이때는 슬래시 없이). 🌐

Recommanded Videos