Vercel과 Supabase로 0원 풀스택 웹사이트 무료 배포 및 서버 구축 방법

개인 프로젝트나 인디 앱을 개발할 때 고정 서버 비용 없이 서비스를 운용하는 가장 효율적인 아키텍처는 Vercel과 Supabase의 조합입니다. 프론트엔드 자동 배포 플랫폼인 Vercel과 데이터베이스·인증·스토리지를 통합 제공하는 Supabase의 무료 티어 기능을 활용하여 비용 0원으로 풀스택 웹 애플리케이션을 구축하는 절차를 정리합니다.

 

1. Vercel 기반 프론트엔드 무료 배포 및 커스텀 도메인 연결

Vercel은 Next.js, React, Vue, Svelte 등 현대적인 웹 프레임워크 호스팅을 위한 최적의 글로벌 Edge 네트워크를 무료(Hobby Plan)로 제공합니다.

 

배포 절차

1. GitHub 저장소 푸시: 제작한 웹 프로젝트 소스코드를 GitHub 개인 저장소(Public 또는 Private)에 업로드합니다.
2. Vercel 프로젝트 임포트: Vercel 공식 누리집에 로그인 후 'Add New Project'를 선택하고 해당 GitHub 저장소를 연결합니다.
3. 빌드 설정 및 배포: Framework Preset(Next.js, Vite 등)이 자동으로 감지되며, 'Deploy' 버튼을 클릭하면 약 1분 이내에 글로벌 CDN 기반 배포가 완료됩니다.
4. 도메인 연결: 기본 제공되는 .vercel.app 서브도메인 외에 개인 보유 도메인이 있을 경우 Project Settings > Domains 메뉴에서 DNS 레코드 설정으로 SSL(HTTPS) 인증서가 포함된 커스텀 도메인을 무료 연결할 수 있습니다.

 

2. Supabase 기반 무료 PostgreSQL DB 및 백엔드 구축

Supabase는 Firebase의 오픈소스 대안으로, 개발자에게 정식 PostgreSQL 기반의 관계형 데이터베이스 및 REST/GraphQL API를 기본 제공합니다.

 

무료 티어 핵심 사양 비교

구분	Vercel (Hobby Plan)	Supabase (Free Tier)
핵심 역할	프론트엔드 호스팅 및 서버리스 API	PostgreSQL DB, Auth, Storage, Realtime
무료 제공 한도	대역폭 100GB/월, 무제한 서버리스 함수	DB 용량 500MB, 월간 활성 사용자(MAU) 50,000명
보안 서비스	자동 SSL(HTTPS) 발급, DDoS 방어	RLS(Row Level Security) 행 단위 데이터 보안

 

DB 및 인증(Auth) 설정 단계

1. 프로젝트 생성: Supabase 누리집 접속 후 무료 프로젝트를 생성하고 DB 비밀번호를 지정합니다.
2. 테이블 설계 (Table Editor): 웹 기반 GUI를 이용해 데이터베이스 테이블을 작성하고 column 및 데이터 타입을 설정합니다.
3. 소셜 로그인(Auth) 설정: Authentication > Providers 메뉴에서 Google, GitHub 등 소셜 로그인 OAuth API 키를 등록하여 즉시 회원가입 및 로그인 기능을 활성화합니다.
4. 스토리지(Storage) 버킷 생성: 이미지 및 파일 업로드가 필요한 경우 Storage 메뉴에서 Public/Private 버킷을 생성하여 파일 서버로 활용합니다.

 

3. Vercel과 Supabase 연동 및 보안 수칙

두 서비스를 안전하게 연동하려면 API 접속 정보 및 보안 인증 키를 환경변수(Environment Variables)로 관리해야 합니다.

 

필수 연동 환경변수 설정

프론트엔드 프로젝트 루트 디렉터리의 .env.local 파일 및 Vercel 프로젝트 환경변수 설정창에 Supabase API 접속 정보를 등록합니다.

• NEXT_PUBLIC_SUPABASE_URL: Supabase 프로젝트 고유 URL (https://xyz.supabase.co)
• NEXT_PUBLIC_SUPABASE_ANON_KEY: 클라이언트 공개용 익명 API 키

 

보안 및 서버 운용 시 주의사항

• Service Role Key 노출 금지: 모든 보안 정책을 우회하는 service_role 키는 절대로 클라이언트 코드나 GitHub 저장소에 포함되어서는 안 되며, 오직 서버리스 함수(API Route) 내부에서만 사용해야 합니다.
• RLS(Row Level Security) 필수 설정: Supabase 테이블 작성 시 반드시 RLS를 활성화하고, 인증된 사용자만 본인의 데이터를 읽고 쓸 수 있도록 SQL Policy 규칙을 지정해야 합니다.
• DB 비활성화(Pause) 유의점: Supabase 무료 티어 프로젝트는 7일간 서비스 요청이 전혀 없을 경우 데이터베이스가 일시 정지(Pause)될 수 있으므로 대시보드를 통해 주기적인 접속 상태를 점검합니다.

 

요약

Vercel의 자동 CI/CD 프론트엔드 호스팅과 Supabase의 무료 PostgreSQL/Auth 백엔드를 연동하면 초기 고정 비용 0원으로 상용급 반응형 웹 애플리케이션을 완성할 수 있습니다.