icon
15장 : 배포

Vercel 배포 과정

Next.js 애플리케이션을 개발했다면 이제 세상에 공개할 차례입니다. 배포(Deployment) 는 개발된 애플리케이션을 사용자들이 접근할 수 있는 서버에 올려 서비스하는 과정을 의미합니다. Next.js 개발 팀이 직접 운영하는 Vercel은 Next.js 애플리케이션 배포에 가장 최적화된 플랫폼으로, 빠르고 간편하며 강력한 기능을 제공합니다.

이 절에서는 Vercel이 Next.js 배포에 이상적인 이유, GitHub 연동을 통한 자동 배포 설정 방법, 환경 변수 관리, 그리고 배포 후 모니터링 및 성능 최적화에 대해 상세히 알아보겠습니다.

왜 Next.js 배포에 Vercel이 최적인가요?

Vercel은 Next.js 개발사에서 만들었기 때문에, Next.js의 모든 최신 기능과 최적화가 배포 과정에 완벽하게 통합되어 있습니다. 이는 다른 호스팅 플랫폼에서는 경험하기 어려운 다음과 같은 독점적인 이점을 제공합니다.

  • 제로 구성(Zero-Configuration) 배포: 대부분의 Next.js 프로젝트는 별도의 복잡한 설정 없이 Vercel에 바로 배포될 수 있습니다. Vercel이 프로젝트를 자동으로 감지하고 필요한 빌드 및 배포 단계를 처리합니다.
  • 빌드 시간 최적화: Next.js의 이미지 최적화, 폰트 최적화, SWC 컴파일러 등 다양한 성능 최적화 기능이 Vercel의 빌드 시스템과 긴밀하게 연동되어 빠르게 빌드하고 최적화된 결과물을 제공합니다.
  • 글로벌 CDN (Content Delivery Network): Vercel은 전 세계에 분산된 엣지 네트워크를 통해 콘텐츠를 캐싱하고 사용자에게 가장 가까운 서버에서 제공하여, 어떤 위치에서든 빠른 응답 속도를 보장합니다.
  • 서버리스 함수 (Serverless Functions): Next.js의 API 라우트나 서버 컴포넌트, 서버 액션 등은 Vercel에서 자동으로 서버리스 함수(AWS Lambda 기반)로 배포됩니다. 이는 필요한 경우에만 코드가 실행되므로 비용 효율적이며 확장성이 뛰어납니다.
  • 개발자 경험(DX) 최적화: GitHub/GitLab/Bitbucket 연동을 통한 자동 배포, 즉석 프리뷰(Instant Previews), 환경 변수 관리 UI 등 개발 생산성을 높이는 다양한 도구와 워크플로우를 제공합니다.
  • 자동 스케일링: 트래픽 증가에 따라 자동으로 서버 리소스를 확장하여 안정적인 서비스를 유지합니다.

Vercel 배포 과정

Next.js 프로젝트를 Vercel에 배포하는 과정은 매우 간단합니다. 크게 Git 리포지토리 연동과 환경 변수 설정 두 단계로 나눌 수 있습니다.

Vercel 회원가입 및 프로젝트 임포트

  1. Vercel 계정 생성/로그인: vercel.com에 접속하여 GitHub, GitLab, Bitbucket 계정을 통해 회원가입하거나 로그인합니다. Git 계정으로 로그인하는 것이 가장 편리하며, 이후 자동 배포 설정에 유리합니다.

  2. 새 프로젝트 추가: 로그인 후 대시보드에서 "Add New..." 버튼 또는 "Import Git Repository" 버튼을 클릭합니다.

  3. Git 리포지토리 선택: Vercel이 연동된 Git 호스팅 서비스(GitHub, GitLab, Bitbucket)에서 배포할 Next.js 프로젝트의 리포지토리를 선택합니다. 만약 리포지토리가 보이지 않는다면, Vercel 앱이 해당 리포지토리에 접근 권한이 있는지 확인해야 합니다.

  4. 프로젝트 설정 확인: Vercel은 선택한 리포지토리를 분석하여 자동으로 Next.js 프로젝트임을 인식하고 기본 설정을 제안합니다.

    • Root Directory: Next.js 프로젝트가 리포지토리의 루트에 있는지, 아니면 서브디렉토리에 있는지 확인하고 올바르게 지정합니다 (모노레포의 경우 특히 중요).
    • Framework Preset: Next.js로 자동 설정됩니다.
    • Build Command: next build (기본값)
    • Output Directory: .next (기본값)
    • Install Command: yarn install 또는 npm install (기본값)

    대부분의 Next.js 프로젝트는 이 기본 설정으로 충분합니다. 특별한 빌드 스크립트나 출력 경로를 사용하지 않는 한 변경할 필요가 없습니다.

  5. 배포 시작: 모든 설정이 올바른지 확인한 후 "Deploy" 버튼을 클릭합니다. Vercel은 Git 리포지토리에서 코드를 클론하고, 빌드하고, 배포합니다. 이 과정은 몇 분 정도 소요될 수 있습니다.

  6. 배포 완료: 배포가 성공적으로 완료되면, 고유한 Vercel 도메인([your-project-name]-[random-string].vercel.app)으로 애플리케이션에 접근할 수 있습니다. Vercel 대시보드에서 배포 상태, 빌드 로그, 함수 로그 등을 확인할 수 있습니다.

Git 연동을 통한 자동 배포되지

Vercel과 Git 리포지토리를 연동하면 지속적 배포(Continuous Deployment) 가 자동으로 설정됩니다. 이는 다음과 같은 이점을 제공합니다.

  • 새로운 커밋 푸시 시 자동 배포: main (또는 설정된 프로덕션 브랜치)에 새로운 코드가 푸시될 때마다 Vercel은 자동으로 새로운 빌드를 시작하고 업데이트된 애플리케이션을 배포합니다.
  • PR(Pull Request) 생성 시 미리보기(Preview) 배포: 개발 브랜치에서 PR을 생성하면 Vercel은 해당 PR에 대한 미리보기 환경을 자동으로 배포합니다. 이 미리보기 URL을 통해 변경 사항이 프로덕션에 병합되기 전에 팀원들이 실제 환경에서 테스트하고 검토할 수 있습니다. 이는 개발 및 코드 리뷰 워크플로우를 크게 개선합니다.
  • 롤백(Rollback): 문제가 있는 배포가 발견되면, Vercel 대시보드에서 이전 배포 버전으로 쉽게 롤백할 수 있습니다.

환경 변수 관리

애플리케이션은 종종 API 키, 데이터베이스 연결 문자열 등 민감한 정보나 환경에 따라 달라지는 값을 사용합니다. 이러한 값은 코드에 직접 포함하지 않고 환경 변수(Environment Variables) 로 관리해야 합니다. Vercel은 환경 변수 관리를 위한 편리한 인터페이스를 제공합니다.

Vercel 대시보드에서 환경 변수 설정

  1. Vercel 대시보드에서 해당 프로젝트를 선택합니다.
  2. "Settings" 탭으로 이동합니다.
  3. 좌측 메뉴에서 "Environment Variables" 를 클릭합니다.
  4. "Add New" 버튼을 클릭하여 새로운 환경 변수를 추가합니다.
    • Name: 환경 변수의 이름 (예: DATABASE_URL, NEXT_PUBLIC_API_KEY)
    • Value: 환경 변수의 값
    • Environments: 이 환경 변수가 적용될 환경을 선택합니다.
      • Development: 로컬 개발 환경 (next dev 시 .env.local에 정의)
      • Preview: PR 미리보기 배포 환경
      • Production: 실제 운영 환경 (main 브랜치 배포)

Next.js에서 환경 변수 사용

Next.js에서는 환경 변수를 다음과 같이 사용합니다.

  • 서버 사이드 환경 변수 (Server-side Only): .env 파일에 정의하거나 Vercel 대시보드에서 설정합니다. 이 변수들은 클라이언트 번들에 포함되지 않으므로, 민감한 정보를 안전하게 보호할 수 있습니다. 
    // 서버 컴포넌트, API 라우트 등 서버 환경에서만 접근 가능
const dbUrl = process.env.DATABASE_URL;
  • 클라이언트 사이드 환경 변수 (Publicly Exposed): NEXT_PUBLIC_ 접두사를 붙여 .env 파일에 정의하거나 Vercel 대시보드에서 설정합니다. 이 변수들은 빌드 시 클라이언트 번들에 포함되므로, API 키 등 노출되어도 괜찮은 정보에만 사용해야 합니다. 
    // 클라이언트 컴포넌트에서도 접근 가능
const apiKey = process.env.NEXT_PUBLIC_API_KEY;

로컬 개발 환경 (.env.local): 로컬 개발 시에는 프로젝트 루트에 .env.local 파일을 생성하여 환경 변수를 정의합니다. 이 파일은 Git에 커밋하지 않도록 .gitignore에 추가해야 합니다.

# .env.local 예시
DATABASE_URL=mongodb://localhost:27017/my-app-dev
NEXT_PUBLIC_API_KEY=your_dev_public_api_key

Vercel 대시보드에 설정된 환경 변수는 로컬 .env.local 파일보다 우선순위가 높습니다 (Production, Preview 환경에서).

배포 후 관리 및 최적화

Vercel은 배포 후에도 애플리케이션을 효율적으로 관리하고 성능을 최적화할 수 있는 다양한 도구를 제공합니다.

  • 도메인 설정: Vercel 대시보드에서 쉽게 커스텀 도메인(예: yourdomain.com)을 연결할 수 있습니다. Vercel은 SSL 인증서 발급 및 갱신을 자동으로 처리합니다.
  • Analytics (분석): Vercel Analytics를 통해 방문자 수, 페이지 뷰, Core Web Vitals (LCP, FID, CLS) 등 웹사이트 성능 지표를 모니터링할 수 있습니다.
  • 로그 (Logs): 서버리스 함수와 빌드 과정에서 발생하는 로그를 실시간으로 확인하여 문제를 진단할 수 있습니다.
  • 함수 캐싱 (Function Caching): 서버리스 함수에 캐싱 전략을 적용하여 응답 시간을 단축하고 비용을 절감할 수 있습니다.
  • 엣지 캐싱 (Edge Caching): Cache-Control 헤더를 사용하여 Vercel의 CDN에서 정적 자산과 서버 응답을 캐싱하여 성능을 향상시킵니다.
  • A/B 테스팅 (A/B Testing): Vercel Edge Functions와 Rewrite 기능을 활용하여 다양한 버전의 UI를 사용자 그룹에 따라 제공하고 성능을 비교하는 A/B 테스팅을 구현할 수 있습니다.

Vercel은 Next.js 애플리케이션을 배포하고 운영하는 데 있어 개발자의 생산성과 서비스의 안정성을 극대화하는 강력한 플랫폼입니다. Next.js 프로젝트의 배포는 Vercel과 함께라면 몇 번의 클릭만으로 가능하며, 이후의 관리 또한 매우 효율적입니다.

컴포넌트 테스트

Previous Page

환경 변수 설정

Next Page