Cloudflare Pages로 프론트 빠르게 배포하기 — 개인 홈페이지·블로그·MVP 배포 가이드·Workers 차이·가격·장단점
개인 홈페이지·블로그·스타트업 MVP를 만들 때, 서버를 직접 세팅하면 배포만으로 하루가 갑니다. Cloudflare Pages는 Git에 push하면 전 세계 엣지 네트워크로 프론트를 올려 주는 배포 플랫폼입니다.
대시보드에는 Workers & Pages가 한곳에 모여 있어, 「정적 사이트」와 「서버리스 로직」을 언제 나누고 언제 묶을지 헷갈리기 쉽습니다. 이번 글에서는 Pages로 빠르게 배포하는 방법, Workers와 Pages의 차이, 사용법·가격·장단점을 공식 문서 기준으로 정리합니다.
· Pages — Git·Direct Upload·CLI로 프론트(정적·풀스택)를 글로벌 네트워크에 배포
· Workers — 엣지 서버리스 실행 환경 · API·미들웨어·고급 런타임 기능
· 배포 — GitHub / GitLab 연동 · push → 빌드 → Preview / Production
· 동적 기능 — Pages Functions (과금·한도는 Workers와 동일하게 집계)
· Free(Pages) — 월 500 빌드 · 동시 1개 · 프로젝트 100개 · 정적 자산 전달에 egress 요금 없음(공식 안내)
· Workers Free — 일 100,000 요청 · 호출당 CPU 10 ms · Paid는 월 $5부터
· 공식 문서 — developers.cloudflare.com/pages
Pages 공식 문서 → Cloudflare 대시보드 →
Cloudflare Pages란?
Cloudflare Pages는 웹 프론트·풀스택 앱을 Cloudflare 글로벌 네트워크에 즉시 배포하는 제품입니다. 서버를 임대하거나 Nginx를 직접 맞출 필요 없이, 빌드 결과물(HTML·CSS·JS 등)을 엣지에 올려 방문자에게 가까운 지점에서 응답합니다.
배포 경로는 세 가지입니다. Git 연동(권장), Direct Upload(미리 빌드한 자산 업로드), C3·Wrangler CLI입니다. React · Next.js · Astro · Hugo 등 프레임워크 프리셋이 있어 빌드 명령·출력 폴더를 빠르게 맞출 수 있습니다.
· 개인 홈페이지 · 포트폴리오 · 랜딩
· 정적·SSG 블로그 (Astro · Hugo · Next 정적 export 등)
· 스타트업 MVP의 프론트 화면 (API는 Workers·외부 BaaS와 조합)
Workers & Pages — 차이점
대시보드 메뉴 이름이 Workers & Pages로 합쳐져 있어 한 제품처럼 보이지만, 역할이 다릅니다.
| 구분 | Pages | Workers |
|---|---|---|
| 한 줄 정의 | 사이트·프론트 배포·호스팅에 특화 | 엣지 서버리스 코드 실행 |
| 주 용도 | 정적 사이트 · Git CI/CD · 가벼운 Functions | API · 프록시 · 스케줄 · Queue · Durable Objects 등 |
| 배포 방식 | Git push 자동 빌드 · Direct Upload · CLI | 주로 Wrangler · 대시보드 · CI |
| 동적 로직 | Pages Functions (파일 기반 라우팅) | Worker 스크립트 · 바인딩·트리거 풍부 |
| 과금 | 빌드 횟수·동시성(계정 플랜) · Functions는 Workers로 집계 | 요청 수 · CPU time 중심 (Free / Paid $5) |
| 선택 기준 | 「화면을 빨리 올리고 싶다」 | 「요청마다 로직을 돌리고 싶다」 |
· 순수 정적 (포트폴리오·마케팅 페이지) → Pages
· 프론트 + 가벼운 API (폼 처리·리다이렉트) → Pages + Pages Functions
· 본격 API·크론·큐·상태 유지 → Workers (필요 시 정적 자산도 Worker로 서빙)
· Workers 쪽이 Durable Objects · Workflows · 관측성 등 신규 고급 기능이 먼저 붙는 경우가 많습니다. 장기·복잡한 백엔드는 Workers 문서를 함께 보세요.
사용방법 — Pages로 첫 배포
준비물
- Cloudflare 계정 (dash.cloudflare.com)
- GitHub 또는 GitLab 저장소 (코드 push 완료)
- 로컬에서
npm run build(또는 프레임워크 빌드) 성공 여부 확인
Git 연동 단계
# Astro → 빌드: npm run build 출력: dist
# Vite → 빌드: npm run build 출력: dist
# Next(정적) → 설정에 맞는 output 확인 후 Pages 가이드 참고
# Hugo → 빌드: hugo 출력: public
커스텀 도메인 · 롤백
프로젝트 설정에서 도메인을 연결하면 Cloudflare DNS와 맞춰 HTTPS로 서비스할 수 있습니다. Free 기준 프로젝트당 커스텀 도메인 100개까지입니다. 배포가 잘못되면 대시보드에서 이전 Production으로 Rollback할 수 있습니다.
용도별 활용 — 홈페이지 · 블로그 · MVP
| 유형 | 추천 구성 | 포인트 |
|---|---|---|
| 개인 홈페이지 | HTML/CSS 또는 Vite · Astro → Pages | 정적만이면 Functions 없이 무료 구간 유지 쉬움 |
| 블로그 | Astro · Hugo · MDX → Pages | 글은 Git으로 버전 관리 · Preview로 초안 검수 |
| 스타트업 MVP | 프론트 Pages + API는 Workers 또는 Supabase 등 | 화면 배포와 데이터·인증을 분리하면 속도↑ |
| 랜딩 + 폼 | Pages + Pages Functions 또는 외부 폼 API | Functions 요청 수·CPU 한도 모니터링 |
프론트만 빨리 보여 주고 싶으면 Pages로 올리고, 로그인·DB는 Supabase + 배포 조합처럼 BaaS에 맡기는 패턴이 흔합니다. 「한 플랫폼에 전부」보다 화면(Pages) / 데이터(별도) 분업이 첫 출시에 유리한 경우가 많습니다.
가격 · 한도 비교
요금·한도는 변경될 수 있습니다. 아래는 공식 문서(Pages Limits · Workers Pricing) 기준 요약이며, 배포 전 developers.cloudflare.com에서 최신 수치를 확인하세요.
Pages 빌드·프로젝트 한도
| 항목 | Free | Pro | Business |
|---|---|---|---|
| 동시 빌드 | 1 | 5 | 20 |
| 월 빌드 수 | 500 | 5,000 | 20,000 |
| 빌드 타임아웃 | 20분 (계정 단위 동시 빌드 집계) | ||
| 사이트 파일 수 | 20,000 | 유료 플랜 최대 100,000 (설정 조건 있음) | |
| 단일 파일 크기 | 25 MiB (더 큰 파일은 R2 등 권장) | ||
| Pages 프로젝트 | 계정당 100 (통상 증액 제한적) | ||
Workers · Pages Functions 요금
| 항목 | Workers Free | Workers Paid (Standard) |
|---|---|---|
| 기본 요금 | $0 | 계정 월 $5부터 |
| 요청 | 100,000 / 일 | 월 1,000만 포함 + 초과 백만 건당 $0.30 |
| CPU time | 호출당 10 ms | 월 3,000만 CPU-ms 포함 + 초과 백만 CPU-ms당 $0.02 |
| 데이터 전송(egress) | Workers 요금 문서 기준 추가 과금 없음 | |
| Pages Functions | Workers와 동일하게 요청·CPU 집계 | |
정적 HTML만 서빙하면 Pages Functions를 안 쓰는 한 Workers 요청을 거의 안 씁니다. 폼·SSR·API를 Functions에 넣기 시작하는 순간부터 Free 일 10만·Paid $5를 의식하면 됩니다.
장단점 비교
| 대상 | 장점 | 단점·주의 |
|---|---|---|
| Pages | Git 자동 배포 · Preview · Rollback · 글로벌 CDN · 프레임워크 프리셋 · 정적 위주면 비용 부담 작음 | 월 빌드 한도·동시 1(Free) · Git↔Direct Upload 전환 제약 · 고급 런타임은 Workers 대비 제한적 |
| Workers | 엣지 로직 자유도 · Cron·Queue·Durable Objects 등 · Wrangler로 세밀 제어 · 정적 자산도 서빙 가능 | 사이트 CI/CD는 직접 구성할 수 있음 · Free CPU 10 ms는 무거운 작업에 빠듯 · Paid 최소 $5 |
둘 다 Git push 배포가 핵심입니다. Vercel은 Next.js 생태계·Preview 경험이 강하고, Pages는 Cloudflare DNS·CDN·보안·Workers와 같은 계정에서 묶기 좋습니다. Next 풀스택을 깊게 쓸지, Cloudflare 스택을 쓸지에 따라 고르면 됩니다. Vercel 상세는 422번 글을 참고하세요.
FAQ
Q. Pages만으로 풀스택이 되나요?
가능합니다. Pages Functions로 서버 측 코드를 붙일 수 있고, D1·KV·R2 등과 연동하는 패턴이 문서에 있습니다. 다만 복잡한 API·백그라운드 작업은 Workers로 분리하는 팀이 많습니다.
Q. 무료로 개인 블로그를 운영할 수 있나요?
정적·SSG 블로그는 Free 구간으로 시작하는 경우가 많습니다. 월 빌드 500·프로젝트 100·파일 수·Functions 요청 한도만 지키면 됩니다. 트래픽이 커져도 egress를 Workers 요금표 기준으로 따로 물지 않는 점이 유리합니다.
Q. Workers와 Pages 중 새로 시작할 때 무엇을 고를까요?
화면 중심이면 Pages로 Git 배포부터 하세요. API·엣지 로직 중심이면 Workers부터 설계하세요. 둘 다 대시보드 Workers & Pages에서 만들고, 나중에 조합할 수 있습니다.
Q. Bitbucket도 되나요?
Pages Git 연동 공식 안내는 GitHub · GitLab입니다. 다른 Git은 CI에서 빌드 후 Direct Upload·Wrangler로 올리는 방식을 검토하세요.
Q. 한도와 가격은 어디서 확인하나요?
Pages 한도: developers.cloudflare.com/pages/platform/limits
Workers 요금: developers.cloudflare.com/workers/platform/pricing
개요: developers.cloudflare.com/pages
체크포인트
- 로컬 빌드가 성공한 뒤 Git에 push했는가
- Build command · output directory가 프레임워크와 맞는가
- Production branch와 Preview 브랜치 전략을 정해 두었는가
- Pages Functions를 쓰면 Workers Free 일 10만·CPU 10 ms를 모니터링하는가
- 커스텀 도메인 DNS(CNAME 등)를 Cloudflare에 맞게 연결했는가
- 월 빌드 500(Free)을 넘지 않도록 불필요 자동 배포를 줄였는가
마무리
Cloudflare Pages는 개인 홈페이지·블로그·MVP 프론트를 Git push 한 번으로 글로벌 엣지에 올리는 가장 빠른 길 중 하나입니다. Workers는 같은 네트워크 위에서 요청을 처리하는 서버리스 엔진이고, Pages Functions는 그 과금·한도를 공유합니다.
정적은 Pages, 로직은 Workers — 이 한 줄만 기억해도 선택이 쉬워집니다. 공식 문서에서 한도·요금을 확인한 뒤, 오늘 저장소 하나를 Connect to Git 해 보세요.
Workers로 로직을 돌리세요.
Workers & Pages는 경쟁이 아니라 역할 분담입니다.
#CloudflarePages #CloudflareWorkers #프론트배포 #정적사이트 #MVP #개인홈페이지 #블로그호스팅 #서버리스 #Git배포 #스타트업mvp