Ch 01. Vercel로 원클릭 배포

Next.js를 만든 회사가 Vercel입니다. 그래서 Vercel에 배포하는 것은 마치 집에서 쉬는 것처럼 자연스럽습니다. 별도의 서버 설정, Nginx 구성, SSL 인증서 발급 같은 것이 없습니다. 코드를 push하면 배포가 됩니다.

Vercel 가입 및 GitHub 연동

1. vercel.com에 접속해 GitHub 계정으로 가입합니다.
2. 가입 후 GitHub 연동 화면이 나타납니다. Install Vercel 버튼을 눌러 GitHub App을 설치합니다.
3. 모든 저장소 또는 특정 저장소에만 접근 권한을 부여합니다.

프로젝트 Import

대시보드에서 Add New → Project를 클릭합니다. 연동된 GitHub 저장소 목록이 나타납니다. 배포할 저장소 옆의 Import 버튼을 클릭합니다.

다음 화면에서 몇 가지를 설정합니다.

• Framework Preset: Next.js가 자동으로 감지됩니다.
• Root Directory: 저장소 루트에 package.json이 있으면 그대로 둡니다.
• Environment Variables: .env.local의 내용을 여기서 입력합니다. DATABASE_URL, AUTH_SECRET 등 민감한 값들입니다.

Deploy 버튼을 누르면 배포가 시작됩니다. 빌드 로그가 실시간으로 보입니다. 1~2분 후 배포가 완료되고 *.vercel.app 형식의 URL이 생성됩니다.

자동 배포 — main 브랜치 push

이제 코드를 바꿀 때마다 수동으로 배포할 필요가 없습니다.

git add .git commit -m "새 기능 추가"git push origin main# → Vercel이 자동으로 빌드하고 배포합니다```text`main` 브랜치에 push되는 순간 Vercel이 감지하고 빌드를 시작합니다. 수 분 내에 변경사항이 반영됩니다.### 프리뷰 배포 — PR마다 테스트 URL이 기능이 특히 편리합니다. `main`이 아닌 브랜치에서 Pull Request를 열면, Vercel이 그 PR을 위한 별도의 배포 환경을 자동으로 만들어줍니다.```textPR 번호 #42 → https://my-blog-git-feature-auth-username.vercel.app

PR마다 독립된 URL이 생기므로, 코드 리뷰할 때 실제로 동작하는 화면을 바로 확인할 수 있습니다. PR이 닫히면 프리뷰 배포도 자동으로 삭제됩니다.

커스텀 도메인 연결

기본으로 제공되는 *.vercel.app 도메인 대신 직접 구매한 도메인을 연결할 수 있습니다.

1. Vercel 프로젝트 → Settings → Domains로 이동합니다.
2. Add Domain에 도메인을 입력합니다. 예: myblog.com
3. Vercel이 DNS 설정 방법을 안내합니다. 도메인 구매처(가비아, Cloudflare 등)에서 A 레코드 또는 CNAME을 설정합니다.
4. SSL 인증서는 Vercel이 자동으로 발급합니다.

Vercel 무료 플랜 한계

무료 플랜(Hobby)으로도 대부분의 개인 프로젝트는 충분합니다. 다만 제약이 있습니다.

개인 포트폴리오나 소규모 블로그라면 Hobby 플랜으로 충분합니다. 팀 프로젝트이거나 상업적으로 사용한다면 Pro 플랜($20/월)이 필요합니다.

PostgreSQL 데이터베이스가 필요하다면, Vercel Postgres(유료) 또는 외부 서비스(Neon, Supabase 등)를 연결합니다.

다음 챕터에서는 환경 변수를 안전하게 관리하는 방법을 살펴봅니다.