③ Netlify & Cloudflare Pages — 정적 사이트의 두 강자

언제 Vercel이 아닌 걸 써야 하나

• Next.js 특유 기능(ISR·Server Actions)이 없는 정적/SPA 사이트 — 오버킬
• 트래픽 예측이 큼 — Cloudflare 대역폭 무료 티어가 여유
• 폼·리다이렉트·A/B 같은 사이트 기능이 많이 필요 — Netlify가 기본 제공
• 엣지 컴퓨팅(Workers)을 활용하고 싶다 — Cloudflare

1. Netlify — 배포 절차

1. netlify.com → GitHub 로그인
2. Add new site → Import from Git
3. 레포 선택 → Build command / Publish directory 확인 (대부분 자동 감지)
4. Deploy site

환경변수: Site → Site configuration → Environment variables.

커스텀 도메인: Site → Domain management → Add domain. 표시된 A 또는 CNAME 레코드를 DNS에 추가.

Netlify의 강점 기능 3가지

(1) Forms — 일반 HTML <form>에 netlify 속성만 붙이면 제출값이 대시보드에 쌓입니다.

<form name="contact" method="POST" netlify>
  <input name="email" />
  <textarea name="message"></textarea>
  <button>Send</button>
</form>

(2) Redirects — public/_redirects 파일로 선언적 리다이렉트.

/old-blog/*   /blog/:splat   301
/api/*        https://api.example.com/:splat  200

(3) Edge Functions — netlify/edge-functions/ 에 TS 파일 두면 글로벌 엣지 실행.

2. Cloudflare Pages — 배포 절차

1. pages.cloudflare.com → Cloudflare 계정 로그인
2. Create a project → Connect to Git
3. 레포 선택 → 프레임워크 프리셋 자동 감지
4. Save and Deploy

환경변수: Project → Settings → Environment variables.

커스텀 도메인: Project → Custom domains → Set up a custom domain. 도메인이 이미 Cloudflare DNS면 거의 1클릭.

Cloudflare Pages의 강점

• 대역폭·요청 수 무료 티어가 업계 최대급 — 트래픽 뛰어도 안전
• Workers 연동 — 복잡한 엣지 로직을 서버 없이
• D1(서버리스 SQLite)·KV·R2(오브젝트 스토리지) 같은 Cloudflare 생태계와 붙임

단점: Next.js의 최신 기능 일부(예: Server Actions·Image Optimization)는 제약이 있거나 어댑터 필요. 순수 SPA / Astro / Hugo / SvelteKit 정적 빌드엔 최고.

3. 선택 플로차트

Next.js의 서버기능을 풀로 쓴다?
  └ 예 → Vercel
  └ 아니오 →
      Forms / 리다이렉트 룰이 중요?
        └ 예 → Netlify
        └ 아니오 → Cloudflare Pages (대역폭·무료 여유)

4. 공통: 빌드 실패 디버깅

• 로컬에서 동일 커맨드 재현: npm ci && npm run build
• Node 버전 고정 (.nvmrc 또는 package.json#engines)
• 환경변수 누락 체크 — 플랫폼 대시보드에 있는지
• 캐시가 꼬였다 싶으면: Netlify Clear cache and deploy, Cloudflare Retry deployment

5. 정적 사이트 성능 기본 규칙

• 이미지 WebP/AVIF + loading="lazy"
• 사용하지 않는 JS 번들 삭제 — 번들 분석으로 확인
• 폰트는 display=swap
• HTTPS는 기본 활성 — 세 플랫폼 모두 자동 발급

마지막 편: 환경변수와 시크릿 관리 — 키를 절대 털리지 않는 습관들.