Ch.21 배포 — Vercel로 세상에 공개하기
CI/CD와 프리뷰 배포
git push 한 번이면 자동 배포?
코드를 수정하고 push할 때마다 수동으로 빌드하고 서버에 올리는 건 실수도 많고 시간도 낭비입니다.
push만 하면 알아서 테스트하고 배포하는 방법은?
CI/CD — 코드 변경을 감지해 자동으로 빌드·테스트·배포하는 파이프라인입니다.
핵심 내용
코드를 push하면 자동으로 빌드·테스트·배포됩니다
git push: 코드 변경을 GitHub에 올림
빌드: Vercel이 자동으로 npm run build 실행
테스트: 린트, 타입 체크 등 자동 검증
배포: 성공 시 자동으로 프로덕션 반영
Vercel은 CI/CD가 기본 내장 별도 설정 없이 GitHub에 push만 하면 자동 빌드 & 배포됩니다. Jenkins나 GitHub Actions 설정이 필요 없습니다.
PR을 만들면 전용 URL이 자동 생성됩니다
브랜치 생성: git checkout -b feature/login
PR 생성: GitHub에서 Pull Request 만들기
프리뷰 URL: feature-login-abc123.vercel.app 자동 생성
확인 & 머지: 프리뷰에서 확인 후 main에 머지 → 프로덕션 배포
# 프리뷰 배포 워크플로
# 1. 새 브랜치에서 작업
git checkout -b feature/dark-mode
# ... 코드 수정 ...
git add .
git commit -m "add dark mode toggle"
git push origin feature/dark-mode
# 2. GitHub에서 PR 생성
# → Vercel이 자동으로 프리뷰 배포
# → PR에 프리뷰 URL 댓글 자동 추가
# 3. 팀원/본인이 프리뷰 URL에서 확인
# 4. 문제 없으면 Merge → 프로덕션 자동 배포바이브 코더 팁 프리뷰 배포 URL을 친구에게 보내면 머지 전에 피드백을 받을 수 있습니다. 1인 개발이라도 프리뷰로 모바일 테스트하세요.
배포가 실패하면? 빌드 로그를 확인하세요
# 배포 전 로컬에서 빌드 테스트
# Vercel과 동일한 환경에서 확인
npm run build
# 타입 에러만 확인
npx tsc --noEmit
# 빌드 성공하면 배포도 성공합니다배포 후 문제 발견 시, 롤백은 Vercel 대시보드에서 이전 배포를 클릭하고 'Redeploy' 버튼을 누르면 즉시 이전 버전으로 복원됩니다.
Vercel에서 CI/CD를 사용하려면 GitHub Actions를 별도로 설정해야 한다
프리뷰 배포는 언제 생성되나요?
배포 실패 시 가장 먼저 확인해야 하는 것은?
핵심 용어
CI (Continuous Integration)
코드 push → 자동 빌드 & 테스트. 에러를 빠르게 발견
CD (Continuous Deployment)
테스트 통과 → 자동 배포. 수동 작업 제로
빌드 로그 확인
Vercel 대시보드 → Deployments → 실패한 배포 클릭
흔한 원인 1
TypeScript 타입 에러 — 로컬에서 npx tsc --noEmit으로 사전 점검
흔한 원인 2
환경변수 누락 — 로컬 .env.local에만 있고 Vercel에 미설정
흔한 원인 3
의존성 문제 — package.json에 없는 패키지 import
정리 노트
CI/CD & 프리뷰 배포 핵심 정리
CI/CD 개념
- CI (지속 통합)
- 코드 변경 시 자동으로 빌드 & 테스트 실행
- CD (지속 배포)
- 테스트 통과 후 자동으로 프로덕션에 배포
- 프리뷰 배포
- PR을 올리면 Vercel이 임시 URL로 미리 배포해서 확인 가능
빌드 에러 대처
- 빌드 로그
- 에러 발생 시 Vercel 대시보드에서 빌드 로그 확인이 최우선
- 흔한 원인
- 타입 에러, 환경변수 누락, 의존성 미설치
PR 기반 프리뷰 배포를 활용하면 팀원이 코드 리뷰 전에 결과를 확인할 수 있습니다.
시각 자료
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 레슨 시작