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 배포가 생깁니다.

그대로 붙여넣기

이 저장소와 연결된 Vercel 배포 설정을 확인해 주세요. Production Branch, 최근 Preview 주소와 최근 Production 주소를 표로 정리하고 아직 재배포하지 마세요.

대괄호 안은 실제 값으로 바꿔서 붙여넣습니다.

내 상황에 맞춰

제 웹 프로젝트 [저장소 주소]를 Vercel에 연결하려고 합니다. 배포 전에 공개하면 안 되는 파일과 Root Directory를 확인하고, 제가 대시보드에서 눌러야 할 순서를 적어 주세요.

한 단계 더

최근 Vercel Preview 배포와 Production 배포의 커밋이 같은지 확인하고, 다르면 어떤 변경이 아직 main에 들어가지 않았는지 알려 주세요.

Preview 주소를 새 브라우저 창에서 열고 바꾼 문구가 보이는지 확인한 뒤 Production 주소와 나란히 기록합니다.

Preview가 열렸다는 이유로 main에 바로 합치지 않습니다. 실제 화면과 브라우저 오류를 확인한 변경만 합칩니다. Vercel Hobby는 개인·비상업 프로젝트 조건이 있으므로 사업용 사이트는 현재 요금 조건을 확인합니다.

왜 이렇게 작동하나요

GitHub은 웹페이지를 만드는 코드를 보관하고, Vercel은 그 코드를 방문자가 열 수 있는 화면으로 배포합니다.

Vercel은 GitHub 브랜치의 커밋을 읽어 배포합니다. 작업 브랜치와 main이 다른 커밋을 가리키면 Preview와 Production 화면도 달라집니다.