[TIL] Vercel로 배포하기 - CI/CD

dev_vming·2026년 1월 9일
Vercel

TIL

목록 보기
7/7

📚 Vercel로 배포하기

📕 Vercel이란?

정의

  • 정적 웹 사이트 및 애플리케이션을 빌드 & 배포하기 위한 클라우드 플랫폼이다.
  • 프론트엔드 & 백엔드 개발자들이 코드를 더 쉽게 배포하고 호스팅할 수 있게 도와준다.
  • GitHub, GitLab, Bitbucket 등과 연동하여 CI/CD를 간편하게 설정할 수 있다.
  • 사용성과 확장성이 좋아 많은 개발자들에게 인기가 있다.
  • Next.js와의 시너지가 극대화되어, 빠르고 효율적인 웹 애플리케이션 개발 및 배포 환경을 구축할 수 있다.

주요 기능

  • 웹 애플리케이션 호스팅: 정적 파일로 구성된 웹 애플리케이션을 배포하고 호스팅한다.
  • 빠른 배포: Git 저장소와 연동하여 변경 사항이 발생하면 자동으로 배포된다.
  • CI/CD 통합: GitHub Actions, GitLab CI 등과 연동하여 지속적 통합 및 배포를 설정할 수 있다.
  • 환경 변수 관리: 환경 변수 설정을 지원하여 애플리케이션의 보안과 환경 설정을 관리한다.
  • 도메인 관리: 사용자의 도메인을 Vercel 플랫폼에 연결할 수 있도록 도와준다.
  • 서버리스 함수: Serverless Functions를 제공하여 손쉽게 백엔드 기능을 구축할 수 있다.
  • 애널리틱스: 애플리케이션 성능 및 사용 통계를 수집하고 모니터링하는 도구를 제공한다.

📗 Vercel로 배포하기

CLI로 배포하기

  • 프로젝트 디렉토리에서 Vercel CLI를 통해 수동으로 배포할 수 있다.
  • vercel 명령어를 실행하면 배포 프로세스가 시작된다.
  • 첫 배포 시 로그인 및 프로젝트 설정을 진행하게 된다.
  • vercel --prod 명령어로 프로덕션 환경에 직접 배포할 수 있다.

GitHub/GitLab 연동 배포 (GitHub Import)

  • GitHub, GitLab과 Vercel을 연동하여 저장소에 변경사항이 푸시될 때마다 자동으로 배포된다.
  • Vercel의 GitHub Import는 CI/CD(Continuous Integration / Continuous Deployment) 프로세스의 일부이다.
  • CI (Continuous Integration)
    • 개발자나 팀이 코드 변경을 일일이 검사하지 않고도 코드의 품질과 안정성을 유지하도록 도와주는 프로세스이다.
    • 코드 변경이 이루어질 때마다 자동으로 테스트, 빌드 및 코드 검사를 수행하고, 오류를 미리 감지한다.
  • CD (Continuous Deployment)
    • CI의 확장으로, 코드 변경이 CI 테스트를 통과하면 자동으로 프로덕션 환경에 배포되도록 하는 프로세스이다.
    • 이를 통해 새로운 기능과 버그 수정 사항이 빠르게 사용자에게 제공된다.

환경 변수 설정

  • Vercel 대시보드나 CLI를 통해 환경 변수를 설정할 수 있다.
  • 프로젝트 설정의 Environment Variables 섹션에서 추가 및 관리가 가능하다.
  • Development, Preview, Production 환경별로 다른 값을 설정할 수 있다.

📘 GitHub Import를 통한 배포 과정

배포 과정

  1. Vercel 계정 생성: Vercel 웹사이트에 접속하여 계정을 생성한다.
  2. 프로젝트 생성: 대시보드에서 'New Project' 또는 'Import Project' 버튼을 클릭한다.
  3. GitHub Import: 'Import Git Repository'를 선택한 후 GitHub 계정으로 로그인한다.
  4. 저장소 선택: 배포하고자 하는 원하는 레포지토리를 선택하여 import한다.
  5. 배포 구성: Vercel은 프로젝트를 자동으로 감지하고 배포 구성을 설정한다(빌드 명령어 및 환경 변수는 추가 설정 가능).
  6. 배포 실행: 프로젝트를 배포하려면 'Deploy' 버튼을 클릭한다.

배포 후 수정 사항

  • 환경 변수 추가: Vercel 대시보드의 프로젝트 설정에서 필요한 환경 변수를 추가한다.
  • 빌드 명령어 수정: Prisma를 사용하는 경우 빌드 명령어를 npx prisma generate && next build로 수정한다.
  • OAuth 리다이렉트 URL 추가: 카카오, 네이버, 구글 디벨로퍼 콘솔에서 배포된 Vercel URL을 Redirect URI로 추가한다.
  • 도메인 설정: 커스텀 도메인을 사용하는 경우 Vercel 프로젝트 설정에서 도메인을 추가하고 DNS 설정을 진행한다.

📙 CI/CD 파이프라인 이해하기

CI/CD의 장점

  • 자동화된 배포: 수동 배포 과정을 제거하여 배포 시간을 단축하고 휴먼 에러를 줄인다.
  • 빠른 피드백: 코드 변경 사항에 대한 즉각적인 피드백을 받을 수 있다.
  • 일관된 배포 프로세스: 모든 배포가 동일한 프로세스를 거쳐 일관성을 유지한다.
  • 품질 향상: 자동화된 테스트를 통해 코드 품질을 지속적으로 검증한다.

Vercel의 배포 흐름

  1. 코드 푸시: 개발자가 GitHub 저장소에 코드를 푸시한다.
  2. 자동 트리거: Vercel이 변경 사항을 감지하고 배포 프로세스를 자동으로 시작한다.
  3. 빌드 과정: 설정된 빌드 명령어가 실행되고 정적 파일이 생성된다.
  4. Preview 배포: 브랜치별로 Preview URL이 생성되어 변경 사항을 미리 확인할 수 있다.
  5. 프로덕션 배포: main/master 브랜치에 머지되면 프로덕션 환경으로 자동 배포된다.

📒 Vercel 활용 팁

Preview Deployment 활용하기

  • Pull Request를 생성하면 자동으로 Preview URL이 생성된다.
  • 팀원들과 변경 사항을 공유하고 리뷰하기에 용이하다.
  • 각 커밋마다 새로운 Preview가 생성되어 변경 이력을 추적할 수 있다.

성능 최적화

  • Vercel은 전 세계 CDN을 통해 콘텐츠를 제공하여 로딩 속도를 최적화한다.
  • 이미지 최적화를 위해 Next.js의 Image 컴포넌트를 활용하면 자동으로 최적화된다.
  • Analytics 기능을 활성화하여 성능 지표를 모니터링할 수 있다.

보안 관리

  • 환경 변수를 통해 API 키와 같은 민감한 정보를 안전하게 관리한다.
  • .env.local 파일은 Git에 커밋하지 않도록 .gitignore에 추가한다.
  • Vercel 대시보드에서만 환경 변수를 관리하여 보안을 강화한다.
profile
dev_vming
밍기적 개발하기🐛
이전 포스트

[TIL] Prisma

0개의 댓글