Vercel로 React / Next.js 프로젝트 빠르게 배포하기

웹 서비스를 만들 때 가장 귀찮은 단계가 바로 '배포' 단계입니다.
예전에는 서버 세팅, 도메인 연결, SSL 인증서 발급 등 복잡한 작업이 필요했지만,
Vercel 같은 서비스 덕분에 요즘은 GitHub 연동만 하면 자동으로 배포가 가능합니다.

---

Vercel이란?

Vercel은 프론트엔드 프레임워크(React, Next.js, Vue, Svelte 등)를
초간단하게 배포할 수 있게 도와주는 플랫폼입니다.

• GitHub / GitLab / Bitbucket 연동 가능
• Push 시마다 자동 빌드 & 배포
• 글로벌 CDN을 통한 빠른 속도
• 커스텀 도메인 연결 가능
• 서버리스 함수 (Serverless Functions) 지원

Next.js 개발팀이 만든 서비스라 Next.js 프로젝트에 특히 최적화되어 있지만,
React / Vite 기반 프로젝트도 문제없이 사용할 수 있습니다.

---

배포 준비

1.사전 준비

• GitHub 저장소에 프로젝트 업로드
• Vercel 계정 가입 (무료 플랜 가능)

2.빌드 스크립트 확인

프로젝트의 package.json에 빌드 명령어가 제대로 들어가 있는지 확인합니다:

"scripts": {
  "build": "vite build",
  "dev": "vite",
  "preview": "vite preview"
}

만약 React 프로젝트라면:

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build"
}

---

Vercel로 배포하기

1. 프로젝트 Import

• Vercel 접속 → Add New Project 클릭
• GitHub 연동 → 원하는 프로젝트 선택

2. 빌드 & 배포 설정

• 빌드 명령어, 출력 디렉토리 확인

  • React: npm run build, output: build
  • Vite: npm run build, output: dist

3. 배포 완료

• 자동 빌드가 끝나면 URL이 생성됩니다

  • 예시: https://your-project-name.vercel.app

4. 커스텀 도메인 연결 (선택)

• Settings → Domains 메뉴에서 커스텀 도메인 연결 가능

---

장점과 단점

😊장점

• 무료 플랜으로도 충분
• 배포 자동화 (GitHub push → 자동 배포)
• 빠른 글로벌 CDN 제공
• 쉬운 커스텀 도메인 연결
• 환경 변수 설정 지원

😟단점

• 서버리스에 익숙하지 않으면 제한을 느낄 수 있음
• 빌드/배포 시간 제한 존재 (무료 플랜 기준)

---

마무리

Vercel은 프론트엔드 개발자가 배포에 시간을 쓰지 않고,
빠르게 서비스 공개할 수 있게 도와주는 최고의 서비스 중 하나입니다.

특히:

• React / Next.js / Vite 프로젝트에 강력 추천
• GitHub Actions나 별도 CI 설정이 귀찮다면 강추

---

참고

• Vercel 공식 사이트