Next.js 교재 · 20편 · 배포

Vercel 배포 — GitHub 연동·도메인

로컬에서 만든 사이트를 5분 안에 전 세계 CDN 으로.

로컬에서 잘 도는 사이트가 production 으로 가는 길은 옛날엔 가시밭이었다 — AWS EC2, Nginx 설정, SSL 인증서, CI/CD 파이프라인… 작은 사이드 프로젝트도 일주일.

Next.js + Vercel 조합은 그 흐름을 깬다. GitHub 푸시 한 번이 전 세계 CDN 배포. 도메인·SSL·환경변수·preview 까지 5분 안에 끝. Next.js 를 만든 회사가 운영하는 호스팅이라 호환성은 거의 완벽.

1. 첫 배포 — 3단계

완전 처음 사용자 기준.

GitHub 에 코드 push — 새 저장소든 기존이든.
vercel.com 회원가입 — GitHub 계정으로 OAuth.
Import Project → 저장소 선택 → Deploy 클릭.

Vercel 이 next.js 프로젝트를 자동 감지, npm run build 실행, 결과를 엣지 CDN 에 배포. 2~3분 뒤 your-app.vercel.app 도메인 발급. 코드 1줄도 안 바꾸고 라이브.

요금 — Hobby 플랜(무료) 한도 — 100GB 대역폭/월, 빌드 시간 6000분/월, 동시 빌드 1개. 개인 프로젝트엔 충분. 회사용은 Pro 월 20달러/멤버.

2. 환경변수 — 3가지 환경 분리

Vercel 의 진짜 강점. 같은 변수를 환경별로 다른 값.

환경	언제	예시 DB
Production	main 브랜치 빌드	진짜 DB
Preview	PR·feature 브랜치 빌드	staging DB
Development	`vercel dev` 로컬	로컬 DB

Project · Settings · Environment Variables 에서 키별로 어떤 환경에 적용할지 체크박스. Production 만 진짜 비밀, Preview/Development 는 staging 값. 같은 코드가 환경별로 다르게 동작.

3. 도메인 — 무료 SSL 자동

본인 도메인 연결도 5분.

Project · Settings · Domains 에서 example.com 추가.
Vercel 이 알려주는 DNS 설정 — A 레코드 또는 CNAME — 도메인 등록 업체(가비아·후이즈 등) 에서 수정.
5~30분 뒤 자동 연결 + Let's Encrypt SSL 자동 발급.

SSL 인증서 수동 발급·갱신 같은 옛 작업이 사라졌다. 도메인 추가만 하면 https:// 가 자동.

4. Preview 배포 — PR 마다 다른 URL

가장 사랑받는 기능. PR 만들면 자동으로 그 PR 만의 URL이 생긴다.

$ git checkout -b feat/new-pricing
$ # 코드 변경
$ git push -u origin feat/new-pricing
$ gh pr create

# Vercel 이 자동으로 빌드, PR 코멘트에:
# https://my-app-git-feat-new-pricing-team.vercel.app

디자이너·PM·리뷰어가 그 URL 로 직접 확인. 머지 전에 모든 사람이 같은 화면 봄. 코드 리뷰가 화면 리뷰로 확장. 옛 시절 "로컬에서 실행해서 캡쳐 부탁" 의 정확한 끝.

Preview 의 함정 — Preview 배포도 인터넷에 노출되어 검색엔진이 색인할 수 있다. 비공개 작업 중인 페이지는 x-robots-tag: noindex 헤더 설정 또는 Vercel Pro 의 Password Protection.

5. 롤백·재배포·모니터링

기능	위치	용도
Rollback	Deployments · 옛 배포 ··· · Promote to Production	사고 발생 시 옛 버전으로 즉시 복귀
Redeploy	Deployments · 옛 배포 ··· · Redeploy	코드는 같고 환경변수만 바뀌었을 때
Logs	Project · Logs	서버 콘솔·에러 실시간
Analytics	Project · Analytics	방문자·LCP·CLS 측정 (Pro)

롤백이 특히 중요 — 사고 났을 때 30초 안에 옛 버전으로 돌아가는 게 표준. Git revert + 재배포보다 빠름. 이 자체로 운영 사고 발생률을 크게 떨군다.

대안 호스팅 — Cloudflare Pages·Netlify·AWS Amplify·Railway·자체 Docker 도 가능. Cloudflare 는 무료 한도가 더 크고 Edge 강함, Netlify 는 정적 사이트에 강함. Vercel 은 Next.js 최적화·DX 가 최강 — Next 가 Vercel 제품이라 그렇다.

요약 — 20편 좌표

여기까지 정리. 3단계로 첫 배포 — GitHub push → vercel.com 가입 → Import. 환경변수는 Production·Preview·Development 3 환경 분리. 도메인 추가 + 무료 SSL 자동. PR 마다 자동 Preview URL → 리뷰어 모두가 같은 화면. 롤백 30초가 운영의 결정적 안전망. 다음 편에서 Analytics·SEO — 검색 노출·방문자 추적.

다음 편 예고 — Analytics와 SEO

Vercel Analytics·sitemap·robots·Search Console. 21편.