① 배포 전체 지도 — 어디에 올려야 할까
Vercel / Netlify / Cloudflare Pages / 자가 서버. 정적 사이트·Next.js·앱 유형별로 고르는 기준.
"배포"가 뭔지부터
코드가 내 컴퓨터에서만 돌면 아무도 못 봅니다. 배포(deploy) = 인터넷 주소를 가진 서버에 내 코드를 올려 누구나 접속할 수 있게 만드는 일.
1. 프로젝트 유형별 추천
| 프로젝트 | 추천 플랫폼 | 왜 | |---|---|---| | 정적 사이트(HTML/CSS/JS, Jekyll, Hugo, Astro) | Cloudflare Pages, Netlify, Vercel | 무료 티어 넉넉, 배포 2분 | | Next.js / React / Vue / Nuxt | Vercel (Next.js 제작사) | Next.js 최적화 최강 | | 백엔드 API (Node / Python) | Railway, Render, Fly.io, AWS | 항상 켜져 있는 서버 필요 | | 데이터베이스 포함 | Supabase(Postgres), PlanetScale, Neon | 서버리스 DB | | 사내 도구 / 빠른 MVP | Vercel or Netlify + Supabase | 풀스택 조합 |
2. 3대 정적 호스팅 비교 — 개인/소규모 관점
가격·쿼터는 바뀝니다. 공식 페이지 재확인 필수: vercel.com/pricing, netlify.com/pricing, pages.cloudflare.com.
Vercel
- Next.js 1등 — App Router, ISR, Edge, Server Components 전부 매끄럽게
- GitHub 연결 → push하면 자동 배포
- Hobby 플랜 무료, 상업적 사용엔 Pro 필요
- 서버리스 함수 실행 시간 한도가 있으니 장시간 작업은 별도 백엔드로
Netlify
- 정적 사이트 + 서버리스 함수 전통 강자
- 폼 처리, 리디렉션 룰, split 테스트가 내장
- 커뮤니티 문서 풍부
Cloudflare Pages
- 대역폭·빌드 무료 티어가 가장 관대
- Workers(엣지 함수)와 연계 강력
- Next.js 지원은 가능하지만 일부 기능 제약 — 단순 SPA / Astro / Hugo 엔 최고
3. 도메인 연결 흐름 (공통)
- 도메인 구입 (Namecheap / Cloudflare Registrar / 가비아 등)
- 플랫폼 대시보드 → Custom domain → 도메인 입력
- 안내받은 DNS 레코드(보통
A또는CNAME)를 도메인 레지스트라에 추가 - 몇 분~수 시간 내 반영, HTTPS(SSL) 자동 발급
4. "환경변수(secrets)"가 뭐냐
API 키, DB 비밀번호 같은 건 절대 코드에 안 적고 플랫폼에 따로 넣습니다.
- Vercel: Project Settings → Environment Variables
- Netlify: Site settings → Environment variables
- Cloudflare Pages: Settings → Environment variables
코드에서는 process.env.MY_KEY 로 읽습니다.
5. 흔한 첫 실수 5가지
- 빌드 로그 안 읽음 — 에러는 거의 항상 빌드 로그 맨 위에 있음
- 환경변수 세팅 빠뜨림 — 로컬에선 됐는데 배포는 500 에러
- 상업 사이트를 무료 Hobby에 올림 — ToS 위반, 계정 정지 위험
- DNS 변경 후 바로 안 되면 바로 수정 — 전파 기다리는 중일 수 있음
- 배포 후 테스트 안 함 — 최소 홈/주요 3페이지는 실 기기로 확인
다음 편: Vercel 실전 — Next.js 사이트를 배포하고 도메인 붙이기까지 10분.