Skip to main content

웹 애플리케이션 배포를 위한 Vercel 사용하기

· 12 min read
방민주
방민주
데이터플랫폼연구센터 연구원
vercel

웹 애플리케이션 배포를 위해서는 서버, 도메인, SSL 설정, CI/CD 구성, 캐시 최적화 등 많은 작업이 필요합니다.

Vercel은 이런 과정을 자동화하여, 개발자가 코드 작성에 집중하여 쉽고 빠르게 배포할 수 있도록 도와줍니다. Vercel은 Next.js를 만든 회사에서 운영하는 클라우드 플랫폼으로 React 및 Next.js 기반 웹 애플리케이션을 가장 효율적으로 배포할 수 있도록 설계되어있습니다.

2. Vercel의 주요 기능

2-1. 정적 및 동적 사이트 배포​

  • Vercel은 Gatsby, Next.js, SvelteKit와 같은 웹 프레임워크로 개발한 정적 웹페이지를 쉽게 호스팅 할 수 있습니다.

    예를 들어 블로그나 랜딩 페이지처럼 내용이 거의 변하지 않는 사이트는 정정 사이트로, 로그인, 게시판, API 호출이 필요한 서비스는 동적 사이트로 운영 할 수 있습니다. Vercel은 두 타입 사이트를 하나의 플랫폼에서 모두 처리할 수 있습니다.

  • Vercel의 큰 강점은 동적 사이트 또한 무중단 배포가 가능합니다.

    무중단 배포란 서비스의 중단 없이 새 버전을 배포하는 것으로, 사용자가 서비스를 이용하는 동안에도 업데이트가 가능합니다.

    vercel

2-2. 자동 CI/CD 파이프라인​

  • GitHub, GitLab, Bitbucker 등의 Git 리포지토리에 연동하여 배포 파이프라인이 자동화되어 코드 변경 시 마다 새로운 빌드와 배포가 가능합니다.

    vercel

    Vercel은 Zero-Config 배포로 별도의 설정 파일이나 빌드 스크립트 작성 없이, 시스템이 소스 코드를 분석하여 필요한 빌드 및 최적화를 수행합니다. 따라서, 개발자의 수동 개입 없이 일관된 배포가 가능합니다. 이를 통해 배포 실수, 환경 차이로 인한 오류를 크게 줄일 수 있습니다.

  • 브랜치 기반 배포를 지원하기 때문에 지정된 프로덕션 브랜치에 merge 되면 자동으로 프로덕션 사이트에 적용되고, 기타 브랜치에 merge할 경우 프리뷰 배포를 생성합니다.

  • Vercel은 roll-back 기능도 제공하여 장애 발생시 이전 버전으로 재적용할 수 있습니다.

2-3. Edge Functions​

  • Edge Functions은 사용자와 가장 가까운 위치에서 코드가 실행할 수 있게 만드는 서버측 TypeScript 함수입니다.

    일반적인 Serverless 함수가 AWS 리전 등 중앙에서 실행되는 반면, Edge Function은 전 세계에 분포된 Vercel 엣지 네트워크 상에서 배포할 수 있어 지연 시간을 줄이고 성능을 향상 시킬 수 있습니다.

  • 로그인 토큰 검증, 국가/지역별 페이지 분기, 간단한 API응답 같은 작업에 사용한다.

Serverless?

개발자 또는 운영자가 직접 서버를 관리하지 않아도 되는 경우를 의미한다.

2-4. 이미지 최적화(Image Optimization)​

  • Vercel은 이미지 최적화 기능을 플랫폼에 내장하여 제공하고 있습니다.

    <img> 태그 대신 <Image> 컴포넌트를 사용하면 별도의 설정 없이 자동으로 이미지 최적화 할 수 있습니다. 이미지는 요청에 맞게 리사이징/압축되며, CDN 엣지에 캐시되어 이후 요청 시 빠르게 제공됩니다.

2-5. 프리뷰 배포(Preview Deployments)​

  • Git 브랜치나 Pull request에 대해서 자동으로 프리뷰용 배포 URL이 생성되며 반영된 웹사이트를 누구나 접속할 수 있습니다. 해당 기능은 프로덕션 환경과 동일한 조건에서 테스트를 진행할 수 있어 로컬에서 작업시 발생하는 문제를 조기에 발견할 수 있습니다.
  • Vercel은 로컬, 프리뷰, 프로덕션 세 가지 환경을 지원합니다.
    이를 통해 개발 단계에서 사용하던 백엔드 API 엔드포인트와 프로덕션에서 엔드포인트를 분리할 수 있습니다.
  • 디자이너, 기획자, QA 담당자에게 URL만 전달하면 즉시 결과물을 확인시킬 수 있어 협업 효율이 크게 향상됩니다.

3. 웹 호스팅/배포 유사 서비스

3-1. Netlify​

vercel

Vercel과 많은 공통점을 가진 플랫폼으로 Git 연동 자동 배포, Serverless Function, Edge Function, 브랜치별 프리뷰 배포 기능을 가지고 있습니다. 기본적으로 Jamstack 기능을 제공하며, 프론트엔드 개발자에게 초점을 맞추고 있습니다.

Jamstack 이란?
JavaScript, API, Markup 의 약자로 빠르고 안전하며 확장 가능한 웹사이트 구축을 위한 아키텍처 패턴입니다.
  • Vercel은 React/Next.js 애플리케이션에 최적화되어 있어, 빌드 시 성능 최적화를 자동으로 적용하여 글로벌 Edge 네트워크로 배포 가능합니다.
  • Netlify는 Jamstack 올인원 플랫폼으로 정적 사이트 배포, 사용자 인증, 서버리스 함수, 플러그인 생태계 등 폭넓은 부가 기능을 제공합니다.
  • Netify는 광범위한 무료 플랜을 제공하는 반면 Vercel은 한 계정당 200개 프로젝트, 팀멤버 1인 제한이 있습니다.(Netlify 500개 사이트 호스팅 가능, 무제한 팀멤버)

3-2. AWS Amplify​

vercel

아마존 웹 서비스가 2018년에 출시한 풀스택 프론트엔드 플랫폼으로, AWS의 인프라와 서비스를 프론트엔드 개발자가 쉽게 활용할 수 있습니다.

AWS에서 개발한 플랫폼인 만큼, AWS의 다른 서비스들과 쉽게 연동할 수 있어 Database, Cognito 인증, S3 스토리지, AL/ML서비스까지 앱에 연동할 수 있습니다. 하지만, Amplify는 복잡한 설정과 AWS 지식을 요구하기 때문에 AWS를 잘 모르는 개발자에게는 부담이 될 수 있습니다.

3-3. cloudflare page​

vercel

CloudFlare에서 2020년에 출시한 정적 사이트 호스팅 및 Functions 서비스입니다.

CloudFlare는 세계 최대 CDN 네트워크 중 하나로, Cloudflare page는 압도적인 글로벌 분산 인프라와 비용 효율성을 제공합니다. Cloudflare page는 프리요금제에도 무제한 대역폭을 제공하고 있어, 웹 트래픽이 급증하더라고 추가 비용 없이 서비스를 지속할 수 있습니다.

3-4. Vercel / Netlify / Amplify / Cloudflare page 특징 및 비교​

구분VercelNetlifyCloudflare Pages
핵심 포지션프론트엔드 전용 고성능 배포 플랫폼Jamstack 올인원 배포 플랫폼CDN 기반 초고속 정적 사이트 플랫폼
최적화 대상Next.js / React 중심프레임워크 전반 범용정적 사이트 중심
정적 사이트(SSG)지원지원최강점
SSR 지원매우 강력 (Next.js 네이티브)가능하나 설정 필요제한적
Edge 실행Edge Functions 제공Edge Functions 제공Workers 기반 Edge Functions
서버리스Serverless Functions 제공Functions 제공Workers로 대체
성능 지향동적·정적 모두 고성능정적 위주 안정적정적 성능 최상
CI/CDGit 연동 자동화, 프리뷰 최강Git 연동 자동화, 안정적Git 연동 자동화, 단순
프리뷰 배포매우 강력 (코멘트 포함)기본 제공기본 제공
부가 기능배포·성능 집중, 외부 서비스 연동Form, Auth, Add-ons 등 풍부보안·CDN·대역폭 강점
무료 정책비교적 제한적가장 관대대역폭 무제한
적합한 경우Next.js 기반 서비스, 제품형 웹앱정적 사이트 + 기능 빠른 구축대규모 트래픽 정적 사이트
  • Vercel: Next.js에 최적화된 프론트엔드 배포 플랫폼
  • Netlify: 다양한 부가기능을 제공하는 Jamstack 올인원 플랫폼
  • Cloudflare Pages: 대역폭 무제한 CDN 기반 정적 호스팅

4. Vercel을 활용한 웹페이지 배포하기

4-1. Vercel Platform을 활용한 Domain 생성 및 배포​

  1. Vercel 접속 및 Log In

    vercel

  2. 프로젝트 생성

    vercel vercel

    1. GitHub 계정 선택

    2. 배포할 Repository 선택

      배포할 repository가 없는 경우, Permission 변경

    3. 원하는 repository Import

  3. 배포

    vercel

  4. 접속

    vercel

4-2. CLI를 활용한 Domain 생성 및 배포​

  1. Installing Vercel CLI

    # pnpm 설치
    npm install -g pnpm 

    # pnpm 환경변수 설정
    pnpm setup

    # vercel 설치 
    pnpm i -g vercel
    vercel

  2. Update Vercel CLI

    # update vercel CLI
    pnpm i -g vercel@latest

    # 버전 확인
    vercel --version

  3. Deploying from source

    # Deploys the current Vercel project, when run from the Vercel Project root.

    vercel

    vercel vercel vercel

  4. 접속

    생성된 도메인 주소: https://argon-dashboard-react-omega.vercel.app/

    vercel