본문 바로가기
C.W.K.
Stream
Lesson 01 of 08 · published

Vercel에 Next.js 배포하기

~18 min · Vercel, git push, preview

Level 0호기심
0 XP0/68 lessons0/11 achievements
0/120 XP to next level120 XP to go0% complete

Git 흐름이 곧 배포 흐름이 돼

저장소를 Vercel에 연결하면 main push는 production 배포를, PR과 다른 브랜치 push는 고유한 preview 주소를 만들 수 있어. Next.js와 같은 팀이 플랫폼을 운영하므로 프레임워크의 캐시와 이미지, 함수 기본값이 바로 맞물려.

설정 없이 시작하는 운영 기능

  • 자동 빌드와 빌드 캐시
  • 브랜치·PR별 preview 배포
  • Edge 실행 지원
  • Edge 이미지 최적화
  • 전 세계 캐시에 분산되는 ISR
  • 선택해서 켤 수 있는 Web Analytics와 Speed Insights

환경별 설정을 분리해

환경 변수는 dashboard나 CLI에서 production, preview, development 범위로 나눌 수 있어. preview가 staging DB와 sandbox API를 쓰게 만들면 검증이 production 데이터를 건드리지 않아.

push 성공과 서비스 성공은 달라

Git 전송이 끝나도 빌드가 실패하거나 잘못된 환경 변수가 들어갈 수 있어. 배포가 READY가 된 뒤 실제 preview나 production URL에서 핵심 경로와 로그를 확인해야 배포가 끝난 거야.

preview에는 production과 분리된 DB·외부 서비스·분석 키를 연결하고, migration과 seed가 어떤 순서로 적용되는지 정해. 배포마다 commit SHA, 빌드 상태, health URL을 기록한 뒤 핵심 로그인·읽기·변경 흐름을 실제 preview에서 시험해. production 승격 뒤에도 같은 marker가 보이는지 확인해.

자동 배포가 release 판단까지 자동으로 해 주지는 않아. 빌드가 READY여도 잘못된 데이터나 권한 설정으로 기능이 깨질 수 있고, 롤백해도 DB 변경은 돌아가지 않을 수 있어. 코드 배포와 데이터 migration, 기능 노출을 각각 되돌릴 경로로 설계해.

브랜치 preview에서 production과 다른 DB 값을 읽고, 의도적 build 실패·runtime 오류·환경 누락을 각각 만들어 배포 상태와 로그를 확인해. READY가 된 commit SHA를 페이지 marker와 대조하고 production 승격 뒤 핵심 KO·EN 경로가 200인지 실제 URL에서 검사해. 운영 alias가 가리키는 배포의 commit SHA를 확인하고 이전 배포로 되돌리는 절차도 실행해. 되돌릴 수 없는 migration이 있으면 코드 rollback만으로 복구되지 않아.

Code

두 가지 배포 방법·bash
# 방법 1 — CLI
npm i -g vercel
cd my-app
vercel             # 대화형 조직·프로젝트 연결
vercel --prod      # 운영 환경으로 승격

# 방법 2 — Git 연동
# vercel.com에서 저장소 연결 → main에 push하면 운영 배포
환경별 환경 변수·bash
vercel env add DATABASE_URL production
vercel env add NEXT_PUBLIC_API_URL preview development

# 미리보기 URL은 staging DB를 사용하고 운영 환경은 실제 DB를 사용해.

External links

Exercise

저장소를 Vercel에 연결해 preview를 만들고 production과 다른 환경 변수를 설정해. 변경 marker와 핵심 경로가 실제 URL에서 보이는지 확인해.

Progress

Progress is local-only — sign in to sync across devices.
이 페이지에서 버그를 발견하셨거나 피드백이 있으세요?문제 신고

댓글 0

🔔 답글 알림 (로그인 필요)
로그인댓글을 남기려면 로그인해 주세요.

아직 댓글이 없어요. 첫 댓글을 남겨보세요.