Skip to content

배포 가이드

Jump to bottom
jj1kim edited this page Jun 6, 2026 · 1 revision

TravelMapper 배포 가이드 (Vercel + Supabase)

이 문서는 TravelMapper를 Vercel과 Supabase 환경에 배포하기 위한 단계별 안내입니다. 배포 전 GitHub 저장소(boostcampwm-snu-2026-1/travelmapper-jj1kim)가 최신 상태인지 확인하시기 바랍니다.

1. Supabase 프로젝트 셋업

  1. supabase.com에 로그인 후 New project를 클릭하여 새 프로젝트를 생성합니다.
    • Region은 Northeast Asia (Seoul)을 권장합니다.
    • Database password는 안전한 곳에 별도로 보관합니다.
  2. 프로젝트가 프로비저닝되면 좌측 메뉴에서 SQL Editor로 이동합니다.
  3. 저장소 루트의 supabase-schema.sql 내용을 그대로 붙여넣고 Run을 클릭합니다.
    • 실행이 완료되면 schedules, schedule_events, wishlist_items 테이블이 생성됩니다.
  4. Project Settings → API 메뉴에서 다음 두 값을 복사해 둡니다.
    • Project URL → NEXT_PUBLIC_SUPABASE_URL
    • anon public 키 → NEXT_PUBLIC_SUPABASE_ANON_KEY
  5. TravelMapper는 자체 회원 인증(Supabase Auth)을 쓰지 않고 스케줄별 이름+비밀번호로 접근을 제어합니다. 따라서 Authentication 메뉴는 건드릴 필요가 없습니다.

2. Google Maps API 키 발급

  1. Google Cloud Console에서 새 프로젝트를 생성합니다.
  2. **결제 계정(Billing)**을 프로젝트에 연결합니다. Maps Platform은 결제 계정이 연결되지 않으면 API가 호출되지 않습니다.
  3. API 및 서비스 → 라이브러리에서 다음 API를 모두 활성화합니다.
    • Places API (New)
    • Maps JavaScript API
    • Directions API
    • Routes API
  4. 사용자 인증 정보 → 사용자 인증 정보 만들기 → API 키로 키를 발급받습니다.
  5. 발급된 키의 애플리케이션 제한사항을 HTTP 리퍼러(웹사이트)로 설정하고 다음 도메인을 추가합니다. 
    http://localhost:3000/*
https://<your-project>.vercel.app/*
https://*.vercel.app/*
  6. API 제한사항에서 위 4개 API만 선택해 권한을 최소화합니다.
  7. 최종 키 값을 NEXT_PUBLIC_GOOGLE_MAPS_API_KEY로 사용합니다.

3. Vercel 배포

  1. vercel.com에 GitHub 계정으로 로그인합니다.

  2. Add New → Project에서 boostcampwm-snu-2026-1/travelmapper-jj1kim 저장소를 Import합니다.

  3. Framework Preset은 Next.js가 자동 선택됩니다. Build Command와 Output Directory는 기본값을 유지합니다.

  4. Environment Variables 섹션에서 다음 네 개 변수를 입력합니다.

    Key Value
    NEXT_PUBLIC_SUPABASE_URL 1단계에서 복사한 Project URL
    NEXT_PUBLIC_SUPABASE_ANON_KEY 1단계에서 복사한 anon key
    NEXT_PUBLIC_GOOGLE_MAPS_API_KEY 2단계에서 발급한 키
    SHARE_LINK_SECRET 임의의 32바이트 이상 랜덤 문자열

    SHARE_LINK_SECRET은 다음 명령으로 생성할 수 있습니다.

    openssl rand -hex 32

  5. Deploy 버튼을 눌러 첫 배포를 진행합니다. 빌드 로그에 오류가 없는지 확인합니다.

  6. 배포가 완료되면 Vercel이 발급한 도메인(<project>.vercel.app)을 2단계의 Google API 키 리퍼러 목록에 추가했는지 다시 확인합니다.

4. 배포 확인

  1. Vercel이 제공한 URL에 접속합니다.
  2. 랜딩 페이지에서 새 스케줄을 생성하고, 다시 로그인 흐름을 확인합니다.
  3. 캘린더에서 여행 날짜를 지정한 뒤 타임라인 화면이 정상적으로 표시되는지 확인합니다.
  4. 위시리스트에서 장소를 추가할 때 Google Places 자동완성이 동작하는지 확인합니다.
  5. Supabase 대시보드의 Table Editor에서 schedules, schedule_events, wishlist_items 테이블에 데이터가 정상 저장되는지 확인합니다.
  6. 공유 링크 생성 기능을 테스트하여 SHARE_LINK_SECRET이 올바르게 적용되었는지 확인합니다.

5. 트러블슈팅

스케줄을 저장해도 데이터가 보이지 않을 때

환경변수가 잘못 적용되어 클라이언트가 SQLite 모드로 동작하고 있을 가능성이 큽니다. Vercel 환경변수에 NEXT_PUBLIC_SUPABASE_URL이 비어 있지 않은지 확인하고, 값에 따옴표나 줄바꿈이 포함되지 않았는지 점검합니다. 그래도 데이터가 없다면 Supabase의 Table Editor에서 테이블이 정상 생성되었는지, RLS 정책이 활성화되어 있지 않은지(supabase-schema.sql은 RLS를 설정하지 않습니다) 확인합니다.

지도에 For development purposes only 워터마크가 표시되거나 검색이 동작하지 않을 때

Google Cloud 프로젝트에 결제 계정이 연결되지 않은 경우입니다. Billing을 활성화한 뒤 5~10분 정도 기다린 후 다시 확인합니다.

브라우저 콘솔에 RefererNotAllowedMapError가 출력될 때

Google API 키의 HTTP 리퍼러 제한에 현재 Vercel 도메인이 포함되지 않은 경우입니다. Preview 배포까지 허용하려면 https://*.vercel.app/* 패턴을 함께 등록합니다.

Vercel 빌드가 Missing environment variable로 실패할 때

환경변수가 Production / Preview / Development 중 일부 환경에만 등록된 경우입니다. 네 개 변수 모두 세 가지 환경에 동일하게 등록한 뒤 Redeploy를 실행합니다.

로컬에서는 SQLite로 동작하지만 배포 환경에서 Supabase로 전환되지 않을 때

NEXT_PUBLIC_SUPABASE_URL이 비어 있으면 자동으로 SQLite 모드로 폴백됩니다. Vercel 환경변수 값에 공백이나 따옴표가 포함되지 않았는지 확인합니다.

Clone this wiki locally