Vercel로 배포하기

Lesson 8

Vercel은 GitHub 저장소를 연결하면 자동으로 배포해주는 서비스입니다. 코드를 git push할 때마다 자동으로 새 버전이 배포됩니다. 무료로 사용할 수 있습니다.

배포 순서 (4단계)

Step 1 — GitHub에 코드 올리기

git add .
git commit -m "feat: initial Vite project"
git push

Step 2 — Vercel 가입

vercel.com → Sign Up → Continue with GitHub 클릭

Step 3 — 프로젝트 연결

  1. Vercel 대시보드 → Add New Project
  2. GitHub 저장소 선택 → Import
  3. Build Command: npm run build (자동 감지)
  4. Output Directory: dist (자동 감지)
  5. Deploy 클릭

Step 4 — 배포 확인

https://my-portfolio-abc123.vercel.app 같은 URL이 자동 생성됩니다.

이후 git push하면 자동으로 재배포됩니다.

이후 관리

# 새 기능 추가 후 배포하는 전체 흐름
git add .
git commit -m "feat: hero section 추가"
git push
# → Vercel이 자동 감지 → 보통 1분 내 배포 완료

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

Vercel 대시보드 → 프로젝트 → Settings → Domains → 도메인 입력

환경 변수 설정

API 키 같은 민감한 정보는 코드에 직접 넣지 마세요:

Vercel 대시보드 → Settings → Environment Variables → 키/값 입력

코드에서는 import.meta.env.VITE_API_KEY 로 접근합니다.

데모에서 확인하기

데모에서 GitHub → Vercel 연결 흐름을 단계별로 체크하면서 확인하세요.