GitHub에서 첫 배포
데이터를 연결하기 전에 GitHub의 코드가 Vercel 주소까지 도착하는지 확인합니다.
학습 카드 1장
이 단원의 학습 카드
모든 학습 카드 내용을 아래에서 차례로 볼 수 있습니다.
GitHub 코드를 Vercel 주소로 보내기 GitHub 코드가 Vercel에 전달된 결과를 Preview 주소에서 확인하고 Production 주소와 구분할 수 있습니다
Vercel Git 연결은 GitHub 저장소의 브랜치와 커밋을 배포로 바꿉니다. 배포는 코드를 브라우저가 읽을 파일로 조립해 인터넷 주소에 올리는 일입니다. 작업 브랜치를 푸시하면 Preview 주소가 생기고, Production Branch로 정한 main에 합치면 Production 주소가 갱신됩니다.
환경 변수가 없는 첫 배포에서는 예제 앱의 “Supabase 연결 전” 안내를 확인합니다. 이 화면은 GitHub에서 Vercel까지 코드가 전달됐다는 뜻이며, 다음 카드에서 데이터 표를 연결합니다.
-
예제 앱을 GitHub의 새 비공개 저장소에 올립니다. `.env.local`이 커밋 목록에 없다는 것을 먼저 확인합니다.
이 예제 앱을 GitHub 비공개 저장소에 올리기 전에 커밋할 파일을 확인해 주세요. `.env.local`, API 키, 토큰과 비밀번호가 있으면 값을 보여 주지 말고 멈춰 주세요. 안전하면 첫 커밋과 푸시까지 진행해 주세요.
확인비밀값 검사가 먼저 끝나고 예제 코드만 GitHub에 올라갑니다.
-
Vercel에서 Add New Project를 열고 방금 만든 GitHub 저장소를 가져옵니다. 예제 폴더만 있는 저장소가 아니라면 Root Directory를 예제 앱 경로로 지정합니다.
Vercel Git 연결 공식 안내확인Vercel 프로젝트 설정에 선택한 GitHub 저장소와 Root Directory가 보입니다.
-
환경 변수를 넣지 않은 채 처음 배포합니다.
확인배포 주소에 ‘Supabase 연결 전’ 안내가 보입니다.
-
작업 브랜치를 하나 만들고 문구 한 줄을 바꿔 푸시한 뒤 Preview 주소를 기록합니다.
홈 화면의 설명 문구 한 줄만 고칠 작업 브랜치를 만들고 변경해 주세요. diff를 보여 준 뒤 커밋하고 푸시하되 main에는 아직 합치지 마세요.
확인새 브랜치가 GitHub에 올라가고 Vercel에 별도 Preview 배포가 생깁니다.
Preview 주소를 새 브라우저 창에서 열고 바꾼 문구가 보이는지 확인한 뒤 Production 주소와 나란히 기록합니다.
작업 브랜치의 Preview 화면과 main의 Production 화면을 각각 열어 변경된 문구의 차이를 확인하면 완료입니다.
Preview가 열렸다는 이유로 main에 바로 합치지 않습니다. 실제 화면과 브라우저 오류를 확인한 변경만 합칩니다. Vercel Hobby는 개인·비상업 프로젝트 조건이 있으므로 사업용 사이트는 현재 요금 조건을 확인합니다.
용어 풀이
전체 용어집 →- Preview
- 작업 브랜치를 main에 합치기 전에 확인하는 Vercel의 임시 배포입니다.
- Production
- 방문자에게 공개할 기본 브랜치의 배포입니다.
- 배포
- 조립된 파일을 인터넷에 올려 주소로 열리게 하는 단계입니다.
2026-08-19 기준 · 출처 · Vercel — Git, Vercel — GitHub, Vercel — Hobby plan