1GitHub에 코드 올리기
배포할 코드가 GitHub 저장소에 있어야 합니다.
터미널
# 저장소 초기화 (처음인 경우)
git init
# 파일 추가
git add .
# 커밋
git commit -m "Initial commit"
# GitHub 저장소 연결 (처음인 경우)
git remote add origin https://github.com/username/my-project.git
# 푸시
git push -u origin main정보
GitHub 저장소가 없다면 github.com/new에서 생성하세요.
2Vercel 설정
- Vercel 가입 (무료, GitHub 계정으로 로그인 추천)
- 대시보드에서 Add New... → Project 클릭
- Import Git Repository에서 저장소 선택
- 프레임워크가 자동 감지됩니다
빌드 설정 (프레임워크별)
React + Vite
- Framework Preset:
Vite - Build Command:
npm run build - Output Directory:
dist
Next.js
- Framework Preset:
Next.js(자동 감지) - Build Command:
npm run build - Output Directory:
.next(자동)
Vue + Vite
- Framework Preset:
Vite - Build Command:
npm run build - Output Directory:
dist
3환경 변수 설정 (필요시)
API URL 등 환경별로 다른 값은 환경 변수로 설정합니다.
- 프로젝트 → Settings
- Environment Variables 탭
- 변수 추가 (예:
VITE_API_URL) - Production / Preview / Development 환경 선택 가능
Environment Variables
# 예시 환경 변수
VITE_API_URL=https://api.myapp.com
NEXT_PUBLIC_API_URL=https://api.myapp.com정보
Vite는 VITE_, Next.js는 NEXT_PUBLIC_ 접두사가 필요합니다.
자세한 내용은 환경 변수 에러 해결을 참고하세요.
4커스텀 도메인 연결 (선택)
기본으로 프로젝트명.vercel.app 도메인이 제공됩니다.
나만의 도메인을 사용하려면 추가 설정이 필요합니다.
- 프로젝트 → Settings → Domains
- 도메인 입력 (예:
myapp.com) - DNS 설정 안내에 따라 A 또는 CNAME 레코드 추가
- SSL 인증서 자동 발급
꿀팁
Vercel에서 도메인을 직접 구매하면 DNS 설정이 자동으로 됩니다. 외부 도메인 사용 시 Nameservers를 Vercel로 변경하면 편리합니다.
Vercel vs Cloudflare Pages
| 항목 | Vercel | Cloudflare Pages |
|---|---|---|
| 무료 대역폭 | 100GB/월 | 무제한 |
| 빌드 시간 | 6,000분/월 | 500회/월 |
| Edge Functions | 제한적 (무료) | Workers 무료 |
| Next.js 지원 | 최적화 (공식) | 가능 (어댑터 필요) |
| Preview Deployments | PR마다 자동 | PR마다 자동 |
| 추천 대상 | Next.js, 풀스택 | 정적 사이트, SPA |
어떤 걸 선택해야 할까요?
- Next.js 사용 → Vercel 추천 (최적화)
- Vite + React/Vue SPA → 둘 다 OK (Cloudflare 무제한 대역폭 장점)
- Edge Workers 활용 → Cloudflare 추천
배포 완료 체크리스트
0/5 완료배포 완료!
축하합니다!
이제 코드를 GitHub에 푸시할 때마다 자동으로 배포됩니다.
프로젝트명.vercel.app에서 확인하세요.