13장: 배포하기
배포란 무엇인가
지금까지 만든 프로젝트는 여러분의 컴퓨터에서만 동작합니다. localhost:3000은 여러분 컴퓨터 안에서만 열리는 주소입니다. 다른 사람에게 링크를 보내도 아무것도 보이지 않습니다.
배포(deploy)란 여러분의 코드를 인터넷 어딘가의 서버에 올려서, 누구나 접속할 수 있는 주소를 만드는 과정입니다. 배포가 끝나면 스마트폰으로도, 다른 나라에서도 접속할 수 있습니다.
Vercel 배포
Next.js 프로젝트를 배포하는 가장 쉬운 방법은 Vercel입니다. GitHub에 코드가 올라가 있으면 몇 분 안에 배포할 수 있습니다.
1단계: https://vercel.com (새 탭에서 열림) 에 접속해서 계정을 만듭니다. "Continue with GitHub"를 클릭하면 GitHub 계정으로 바로 가입할 수 있습니다.
2단계: 로그인 후 "Add New Project"를 클릭합니다.
3단계: GitHub 저장소 목록에서 여러분의 프로젝트를 선택합니다. 7장에서 GitHub에 올린 프로젝트가 보입니다. "Import"를 클릭합니다.
4단계: 환경변수를 등록합니다. 배포 설정 화면에서 "Environment Variables" 섹션을 찾아, .env 파일의 내용을 통째로 복사해서 붙여넣으면 Vercel이 자동으로 파싱해서 등록합니다. 하나씩 추가할 수도 있습니다. 왼쪽에 변수 이름(예: NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY), 오른쪽에 값을 입력하고 "Add"를 클릭합니다.
어떤 환경변수를 등록해야 하는지 모르겠으면 Claude Code에게 물어보세요.
이 프로젝트를 Vercel에 배포하려고 해.
.env 파일에 있는 환경변수 중 Vercel에 등록해야 하는 것들을 목록으로 알려줘.
5단계: 배포 설정 화면에서 리전(Region)을 확인합니다. 기본값이 미국 서버로 되어 있는 경우가 많습니다. Supabase 프로젝트를 Seoul 리전으로 만들었다면, Vercel도 가장 가까운 리전인 icn1 (Seoul, South Korea) 로 맞춰야 빠릅니다. 리전이 어긋나면 데이터베이스 응답 속도가 눈에 띄게 느려집니다.
6단계: "Deploy"를 클릭합니다. 빌드 로그가 흘러가고, 몇 분 후에 https://프로젝트이름.vercel.app 주소가 생깁니다.
빌드 실패 시
배포 로그에서 빨간 에러 메시지를 찾아 복사합니다. Claude Code에게 붙여넣으면 됩니다.
Vercel 배포 중에 이런 에러가 났어.
[에러 메시지 붙여넣기]
어떻게 고쳐야 해?
수정 후 GitHub에 다시 올리면 Vercel이 자동으로 재배포합니다.
배포 후 확인
배포가 완료되면 브라우저에서 주소를 열어 동작을 확인합니다.
개발 환경(localhost:3000)에서는 잘 됐는데 배포 후에 안 되는 경우가 있습니다. 대부분 환경변수가 누락됐거나, Supabase에서 해당 도메인을 허용하지 않아서입니다.
Supabase 도메인 허용 설정
로그인 기능이 배포 후에 동작하지 않는다면 이 설정을 확인하세요.
1단계: Supabase 대시보드 → Authentication → URL Configuration
2단계: "Site URL"에 Vercel 주소 입력 (예: https://myproject.vercel.app)
3단계: "Redirect URLs"에 같은 주소 추가
이 설정을 하지 않으면 로그인 후 리다이렉트가 실패합니다.
이후 코드 수정과 재배포
Vercel의 가장 편리한 점은 GitHub에 push하면 자동으로 재배포된다는 겁니다. Claude Code에게 수정을 요청하고 GitHub에 올리기만 하면, 몇 분 후에 배포 주소에 반영됩니다.
버튼 색상을 파란색으로 바꿔줘.
수정하고 GitHub에 올려줘.
이 작업 흐름이 앞으로 계속 반복됩니다. 수정 → GitHub push → 자동 재배포.
도메인 연결하기
Vercel이 만들어준 xxxx.vercel.app 주소 대신 자기만의 도메인(예: myproject.com)을 쓰고 싶다면 도메인을 구매해서 연결할 수 있습니다.
도메인은 Namecheap, GoDaddy, 가비아 같은 사이트에서 구매합니다. 구매 후 Vercel 대시보드 → 프로젝트 → Settings → Domains에서 도메인을 추가합니다. Vercel이 DNS 설정 방법을 단계별로 안내해 줍니다.
지금 당장 필요한 건 아닙니다. xxxx.vercel.app 주소만으로도 충분히 공유할 수 있습니다.
✏️ 실습: 배포하고 링크 공유하기
1단계: 12장에서 보안 점검과 커밋을 완료했는지 확인합니다.
2단계: Vercel에서 프로젝트를 배포합니다. 위의 1~5단계를 따라하세요.
3단계: 배포가 완료되면 주소를 브라우저에서 열어 확인합니다. 로그인, 데이터 등록, 조회가 모두 잘 되는지 확인합니다.
4단계: Supabase URL Configuration에서 Vercel 주소를 추가합니다.
5단계: 링크를 주변 사람에게 공유해봅니다.
축하합니다. 여러분의 프로젝트가 인터넷에 올라갔습니다.
참고자료