Next.js 프로젝트 Vercel 배포하기

Vercel이란?

Vercel은 Next.js를 만든 회사에서 제공하는 호스팅 플랫폼입니다. Next.js 프로젝트를 가장 쉽고 효율적으로 배포할 수 있는 방법을 제공합니다.

배포 과정

1. GitHub 저장소 준비

먼저 프로젝트를 GitHub 저장소에 푸시해야 합니다:

# Git 초기화
git init

# 파일 추가
git add .

# 커밋
git commit -m "Initial commit"

# GitHub 저장소에 푸시
git remote add origin https://github.com/username/repository.git
git branch -M main
git push -u origin main

2. Vercel 계정 생성

1. Vercel 웹사이트 방문
2. "Sign Up" 클릭
3. GitHub 계정으로 로그인 (권장)

3. 프로젝트 import

1. Vercel 대시보드에서 "New Project" 클릭
2. "Import Git Repository" 섹션에서 GitHub 저장소 선택
3. 필요한 경우 "Configure Project" 설정
   • Environment Variables 설정
   • Build and Output Settings 확인
4. "Deploy" 클릭

4. 배포 확인

• 배포가 완료되면 자동으로 생성된 URL로 접속 가능
• 기본 도메인 형식: project-name.vercel.app

자동 배포 설정

Vercel은 GitHub 저장소와 연동되어 다음과 같은 기능을 제공합니다:

• main/master 브랜치에 push할 때마다 자동 배포
• Pull Request마다 프리뷰 배포 생성
• 브랜치별 개별 배포 환경

커스텀 도메인 설정

1. Vercel 프로젝트 설정의 "Domains" 섹션 이동

2. "Add Domain" 클릭

3. 원하는 도메인 입력

4. DNS 설정 안내에 따라 도메인 제공업체에서 설정 변경

   # A 레코드 설정
   A Record: @ -> 76.76.21.21
   
   # CNAME 설정
   CNAME Record: www -> cname.vercel-dns.com
   

환경 변수 설정

1. 프로젝트 설정의 "Environment Variables" 섹션 이동
2. 필요한 환경 변수 추가
3. 환경별(Production/Preview/Development) 설정 가능

배포 모니터링

Vercel 대시보드에서 다음 정보들을 확인할 수 있습니다:

• 배포 상태와 히스토리
• 성능 분석
• 에러 로그
• 접속 통계

유용한 팁

1. 빌드 캐시: Vercel은 자동으로 빌드 캐시를 관리합니다.

2. 배포 롤백:

   • 문제가 있는 경우 이전 버전으로 즉시 롤백 가능
   • 대시보드의 "Deployments" 탭에서 관리

3. 팀 협업:

   • 팀원 초대 및 권한 관리 가능
   • 무료 플랜에서도 기본적인 협업 기능 제공

마무리

Vercel을 사용하면 Next.js 프로젝트를 쉽고 빠르게 배포할 수 있습니다. GitHub와의 긴밀한 연동, 자동화된 배포 프로세스, 그리고 직관적인 대시보드는 개발자의 배포 경험을 크게 향상시켜줍니다.

추가적인 설정이나 고급 기능은 Vercel 공식 문서를 참고하시기 바랍니다.