Learn

Vercel 이해하기

Vercel

Vercel이 무엇인지, 무엇이 아닌지, 그리고 deploy-on-push 모델.

Vercel은 프런트엔드 및 서버리스 프로젝트를 위해 설계된 배포 플랫폼이에요. 해결하는 문제는 간단해요. 내 컴퓨터에 있는 코드를 서버를 직접 건드리지 않고도 전 세계에서 접근 가능한 사이트로 만드는 거예요. 이 레슨에서는 첫 번째 프로젝트를 배포하기 전에 필요한 개념적 기초를 다뤄요.

Vercel이 무엇인지 (그리고 무엇이 아닌지)

Vercel은 웹 애플리케이션 전문 배포 및 호스팅 플랫폼이에요. Git 레포를 연결하면 Vercel이 나머지를 처리해요. 프로젝트 빌드, 배포, 전 세계 배포까지요.

Vercel이 아닌 것:

  • VPS(가상 사설 서버)가 아니에요. 운영 체제나 백그라운드 서비스를 관리할 필요가 없어요.
  • AWS, GCP, Azure 같은 범용 클라우드가 아니에요. Vercel은 네이티브 관리형 데이터베이스, 가상 머신, 오브젝트 스토리지를 제공하지 않아요.
  • 단순한 정적 호스팅이 아니에요. Vercel은 함수를 통해 서버 사이드 코드도 실행해요.

실제로 Vercel은 대부분의 현대적인 프런트엔드 프로젝트에서 "서버 + Docker + nginx + CI/CD 파이프라인" 조합을 대체해요.

deploy-on-push 모델

Vercel의 핵심 작동 방식은 간단한 규칙 하나에 기반해요. Git push가 발생할 때마다 자동으로 배포가 시작돼요.

구체적으로 어떻게 진행되는지 살펴볼게요.

  1. GitHub, GitLab, Bitbucket 레포를 Vercel 프로젝트에 연결해요.
  2. 커밋이나 풀 리퀘스트가 발생할 때마다 Vercel이 Build를 시작해요. 프레임워크를 감지하고, 의존성을 설치하고, 컴파일해요.
  3. 그 결과물이 Deployment예요. 자동으로 생성된 고유 URL로 접근 가능한 변경 불가능한 사이트 버전이에요.
  4. push가 메인 브랜치(보통 main)를 대상으로 하면 해당 배포가 Production이 되어 도메인에서 서비스돼요.
  5. 다른 브랜치나 풀 리퀘스트라면 Preview 배포가 돼요. 머지하기 전에 테스트하기에 완벽한 격리된 URL이에요.

각 배포는 독립적으로 보존돼요. 대시보드에서 몇 초 만에 이전 버전으로 돌아갈 수 있어요.

플랫폼의 핵심 구성 요소

Vercel은 함께 작동하는 여러 구성 요소로 이루어져 있어요.

  • Builds: 컴파일 단계예요. Vercel이 프레임워크를 자동으로 감지하고 대부분의 경우 수동 설정 없이 프로젝트를 빌드하는 방법을 알아요.
  • Preview Deployments: 각 브랜치나 풀 리퀘스트가 자체 미리보기 URL을 갖게 되어, 프로덕션에 올리기 전에 팀이 확인할 수 있어요.
  • Edge Network / CDN: 배포된 후 사이트는 전 세계 서버 네트워크에 배포돼요. 방문자는 지리적으로 가장 가까운 서버에서 파일을 받아요.
  • Serverless Functions: 영구적인 서버를 관리하지 않고도 온디맨드로 실행되는 백엔드 코드(API 라우트, 서버 로직)예요. 아무도 호출하지 않으면 중단되고, 몇 밀리초 만에 재시작해요.
  • Edge Functions: Serverless Functions와 유사하지만 Edge 네트워크에서 사용자와 가장 가까운 곳에서 실행되어 콜드 스타트 시간이 더 짧아요. 리디렉션, 지역화, 가벼운 개인화에 이상적이에요.

실제로 무엇이 달라지나요

Vercel(또는 유사한 플랫폼) 이전에는 프런트엔드 프로젝트를 배포하려면 서버 설정, 리버스 프록시(nginx 또는 Apache) 설치, CI/CD 파이프라인 작성, SSL 인증서 관리, 그리고 이 모든 것의 지속적인 유지보수가 필요했어요.

Vercel을 사용하면:

  • SSL 인증서가 자동으로 적용되고 별도 개입 없이 갱신돼요.
  • CI/CD 파이프라인이 내장되어 있어요(push만 하면 돼요).
  • 확장성은 플랫폼이 관리해요. 사이트에 갑자기 10,000명의 방문자가 오더라도 특별히 할 일이 없어요.
  • 롤백이 즉각적이에요. 클릭 한 번으로 이전 배포를 프로덕션으로 복구할 수 있어요.

다음 레슨에서는 첫 번째 Git 프로젝트를 연결하고 첫 번째 배포를 시작하는 방법을 단계별로 안내해 드릴게요.

출처

관련

참고 · gitGit이 뭔가요
참고 · fullstackDNS, hébergement, déploiement

다음 단계를 열려면 단계를 체크하세요

코스로 돌아가기