Cloudflare Pages는 무료인가요?

무료 플랜으로 월 500회 빌드, 무제한 요청, 무제한 대역폭을 제공합니다. 대부분의 개인·중소 프로젝트는 무료로 충분합니다.

Vercel과 어떻게 다른가요?

Cloudflare Pages는 글로벌 CDN이 더 넓고(300+ 도시), 무료 대역폭이 무제한이며, Workers/D1/R2 등 Edge 생태계와 통합이 강합니다. Vercel은 Next.js 최적화와 개발자 경험이 더 매끄럽습니다.

SSR(서버 사이드 렌더링)도 가능한가요?

가능합니다. Astro, Next.js, SvelteKit, Remix 등 주요 프레임워크의 SSR을 Cloudflare Pages Functions(Edge)에서 실행할 수 있습니다.

GitHub Actions로 빌드하면 뭐가 좋나요?

Cloudflare 빌드 횟수(무료 500회)를 아끼고, 빌드 환경(Node 버전, 캐시, 시크릿)을 세밀하게 제어할 수 있습니다. 대량 페이지 사이트에 유리합니다.

[2026] Cloudflare Pages 완벽 가이드 | 무료 배포·Edge 렌더링·Wrangler CLI

2026년 4월 1일 · 24분 읽기 · 수정 2026년 4월 7일 중급 가이드

이 글의 핵심

Cloudflare Pages로 정적 사이트·SSR 앱을 무료로 배포하고, Edge Functions로 서버 로직을 실행하는 방법을 다룹니다. GitHub 연동, Wrangler CLI, 환경 변수, 커스텀 도메인, 빌드 최적화까지 실전 예제로 설명합니다.

들어가며

Cloudflare Pages는 정적 사이트(Static Site)와 서버 사이드 렌더링(SSR) 앱을 글로벌 Edge 네트워크에 배포할 수 있는 플랫폼입니다. Vercel·Netlify와 비슷하지만, 무료 대역폭 무제한, 300개 이상 도시의 CDN, Workers·D1·R2와의 통합이 강점입니다. 이 글에서는 GitHub 저장소 연동, Wrangler CLI 배포, 환경 변수, 커스텀 도메인, Functions(Edge 서버 로직), 빌드 최적화, 그리고 Vercel과의 비교를 실전 예제로 다룹니다. Node.js 앱 배포 전반은 Node.js 배포 가이드 (PM2, Docker, AWS, Nginx)에서, CI/CD 파이프라인은 Node.js + GitHub Actions CI/CD에서 확인할 수 있습니다.

실무에서 마주한 현실

개발을 배울 때는 모든 게 깔끔하고 이론적입니다. 하지만 실무는 다릅니다. 레거시 코드와 씨름하고, 급한 일정에 쫓기고, 예상치 못한 버그와 마주합니다. 이 글에서 다루는 내용도 처음엔 이론으로 배웠지만, 실제 프로젝트에 적용하면서 “아, 이래서 이렇게 설계하는구나” 하고 깨달은 것들입니다. 특히 기억에 남는 건 첫 프로젝트에서 겪은 시행착오입니다. 책에서 배운 대로 했는데 왜 안 되는지 몰라 며칠을 헤맸죠. 결국 선배 개발자의 코드 리뷰를 통해 문제를 발견했고, 그 과정에서 많은 걸 배웠습니다. 이 글에서는 이론뿐 아니라 실전에서 마주칠 수 있는 함정들과 해결 방법을 함께 다루겠습니다.

1. Cloudflare Pages란?

핵심 특징

항목	설명
CDN	전 세계 300+ 도시, Cloudflare 네트워크
무료 플랜	월 500회 빌드, 무제한 요청·대역폭
지원 프레임워크	React, Vue, Astro, Next.js, SvelteKit, Remix 등
SSR/Edge	Cloudflare Workers 기반 Functions
빌드 환경	Node.js, Python, Ruby, Go 등

언제 사용하면 좋은가

정적 사이트: 블로그, 문서, 랜딩 페이지
JAMstack: Astro, Hugo, Jekyll, Eleventy
SSR 앱: Next.js App Router, SvelteKit, Remix
Edge API: Cloudflare Workers + D1(SQLite) + R2(S3 호환) 트래픽이 글로벌하거나, 대역폭 비용이 걱정되거나, Edge에서 서버 로직을 돌리고 싶다면 Cloudflare Pages가 강력한 선택지입니다.

2. GitHub 연동 배포

가장 간단한 방법은 Cloudflare 대시보드에서 GitHub 저장소를 연결하는 것입니다.

2-1. 기본 설정

Cloudflare 대시보드 → Pages → Create a project
Connect to Git → GitHub 계정 연동
저장소 선택 → 브랜치(main 또는 production)
빌드 설정:
- Framework preset: Astro, Next.js, React 등 자동 감지
- Build command: npm run build
- Build output directory: dist (Astro), out (Next.js), .next (Next.js SSR)
Save and Deploy

2-2. 자동 배포

main 브랜치에 푸시하면 자동으로 빌드·배포
PR마다 Preview 배포 생성 (URL: <branch>.<project>.pages.dev)
빌드 로그는 대시보드에서 실시간 확인 장점: 설정이 쉽고, PR 프리뷰가 자동.
단점: Cloudflare 빌드 환경(무료 500회/월)을 소모하고, 빌드 시간·캐시 제어가 제한적.

3. Wrangler CLI 배포

Wrangler는 Cloudflare의 공식 CLI로, 로컬 빌드 → 업로드만 하면 Cloudflare 빌드 횟수를 아낄 수 있습니다.

3-1. Wrangler 설치

npm install -g wrangler
# 또는 프로젝트 로컬
npm install --save-dev wrangler

3-2. 인증

wrangler login

브라우저에서 Cloudflare 계정 인증.

3-3. 배포

아래 코드는 bash를 사용한 구현 예제입니다. 코드를 직접 실행해보면서 동작을 확인해보세요.

# 로컬에서 빌드
npm run build
# dist 폴더를 Cloudflare Pages에 업로드
wrangler pages deploy dist --project-name=my-project

첫 배포 시 프로젝트가 없으면 자동 생성됩니다.

3-4. GitHub Actions에서 Wrangler 사용

다음은 yaml를 활용한 상세한 구현 코드입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

name: Deploy to Cloudflare Pages
on:
  push:
    branches: [main]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      
      - name: Install dependencies
        run: npm ci
      
      - name: Build
        run: npm run build
        env:
          NODE_OPTIONS: '--max-old-space-size=4096'
      
      - name: Deploy to Cloudflare Pages
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          command: pages deploy dist --project-name=my-project

필요한 시크릿:

CLOUDFLARE_API_TOKEN: 대시보드 → API Tokens → Edit Cloudflare Workers 권한
CLOUDFLARE_ACCOUNT_ID: 대시보드 URL에서 확인 (dash.cloudflare.com/<ACCOUNT_ID>/...) 장점: 빌드 환경 완전 제어, 캐시 전략 자유, Cloudflare 빌드 횟수 절약.

4. 환경 변수와 시크릿

4-1. Cloudflare 대시보드에서 설정

Pages 프로젝트 → Settings → Environment variables

Production: main 브랜치 배포 시 사용
Preview: PR·브랜치 배포 시 사용

DATABASE_URL=postgresql://...
API_KEY=abc123

빌드 시(npm run build)와 런타임(Functions) 모두 접근 가능합니다.

4-2. 코드에서 접근

빌드 타임 (Node.js):

// astro.config.mjs, next.config.js 등
const apiKey = process.env.API_KEY;

런타임 (Cloudflare Functions): 아래 코드는 javascript를 사용한 구현 예제입니다. 비동기 처리를 통해 효율적으로 작업을 수행합니다. 코드를 직접 실행해보면서 동작을 확인해보세요.

// functions/api/data.js
export async function onRequest(context) {
  const apiKey = context.env.API_KEY;
  return new Response(JSON.stringify({ key: apiKey }));
}

4-3. 로컬 개발

.dev.vars 파일 (.gitignore에 추가):

DATABASE_URL=postgresql://localhost/dev
API_KEY=dev-key-123

wrangler pages dev dist --local

5. 커스텀 도메인 설정

5-1. 도메인 추가

Pages 프로젝트 → Custom domains → Set up a custom domain

도메인 입력 (예: blog.example.com)
DNS 레코드 추가:
- CNAME: blog → <project>.pages.dev
- 또는 A/AAAA: Cloudflare가 제공하는 IP
SSL 자동 발급 (Let’s Encrypt, 무료)

5-2. Apex 도메인 (example.com)

Cloudflare에서 도메인을 관리 중이라면:

CNAME flattening 자동 적용
example.com → <project>.pages.dev CNAME 추가 다른 DNS 제공자라면 A 레코드로 Cloudflare IP를 추가해야 합니다.

6. Functions (Edge 서버 로직)

Cloudflare Pages Functions는 Cloudflare Workers 기반으로, Edge에서 서버 코드를 실행합니다.

6-1. 기본 구조

아래 코드는 text를 사용한 구현 예제입니다. 코드를 직접 실행해보면서 동작을 확인해보세요.

my-project/
├── functions/
│   ├── api/
│   │   ├── hello.js       # /api/hello
│   │   └── users/[id].js  # /api/users/:id
│   └── _middleware.js     # 모든 요청에 적용
├── public/
└── dist/

6-2. 예제: API 엔드포인트

아래 코드는 javascript를 사용한 구현 예제입니다. 비동기 처리를 통해 효율적으로 작업을 수행합니다. 코드를 직접 실행해보면서 동작을 확인해보세요.

// functions/api/hello.js
export async function onRequest(context) {
  const { request, env, params } = context;
  
  return new Response(
    JSON.stringify({ message: 'Hello from Edge!' }),
    { headers: { 'Content-Type': 'application/json' } }
  );
}

배포 후 https://my-project.pages.dev/api/hello로 접근.

6-3. 동적 라우트

아래 코드는 javascript를 사용한 구현 예제입니다. 비동기 처리를 통해 효율적으로 작업을 수행합니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

// functions/api/users/[id].js
export async function onRequest(context) {
  const userId = context.params.id;
  
  // D1 (Cloudflare SQLite) 예시
  const db = context.env.DB;
  const user = await db.prepare('SELECT * FROM users WHERE id = ?')
    .bind(userId)
    .first();
  
  return new Response(JSON.stringify(user), {
    headers: { 'Content-Type': 'application/json' }
  });
}

6-4. Middleware

// functions/_middleware.js
export async function onRequest(context) {
  const start = Date.now();
  
  // 다음 핸들러 실행
  const response = await context.next();
  
  // 응답 헤더 추가
  response.headers.set('X-Response-Time', `${Date.now() - start}ms`);
  
  return response;
}

6-5. SSR 프레임워크

Astro SSR: 아래 코드는 javascript를 사용한 구현 예제입니다. 필요한 모듈을 import하고. 코드를 직접 실행해보면서 동작을 확인해보세요.

// astro.config.mjs
import { defineConfig } from 'astro/config';
import cloudflare from '@astrojs/cloudflare';
export default defineConfig({
  output: 'server', // 또는 'hybrid'
  adapter: cloudflare()
});

Next.js:

npm install @cloudflare/next-on-pages

아래 코드는 javascript를 사용한 구현 예제입니다. 코드를 직접 실행해보면서 동작을 확인해보세요.

// next.config.js
module.exports = {
  experimental: {
    runtime: 'experimental-edge'
  }
};

7. 빌드 최적화

7-1. GitHub Actions 빌드 캐시

아래 코드는 yaml를 사용한 구현 예제입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

- name: Cache dependencies
  uses: actions/cache@v4
  with:
    path: |
      node_modules
      .astro
      .next/cache
    key: ${{ runner.os }}-build-${{ hashFiles('package-lock.json') }}
    restore-keys: |
      ${{ runner.os }}-build-

7-2. 빌드 시간 단축

병렬 처리: 아래 코드는 javascript를 사용한 구현 예제입니다. 필요한 모듈을 import하고, 비동기 처리를 통해 효율적으로 작업을 수행합니다, 반복문으로 데이터를 처리합니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

// scripts/build.mjs
import { execSync } from 'child_process';
const tasks = [
  'node scripts/generate-og-images.mjs',
  'node scripts/generate-sitemap.mjs',
  'node scripts/generate-rss.mjs'
];
await Promise.all(tasks.map(cmd => 
  execSync(cmd, { stdio: 'inherit' })
));
execSync('astro build', { stdio: 'inherit' });

증분 빌드:

Astro: .astro 폴더 캐시
Next.js: .next/cache 폴더 캐시

7-3. 대량 페이지 최적화

문제: 1,000개 이상 페이지 → 빌드 10분+ 해결:

OG 이미지 캐시: 변경된 글만 재생성
정적 페이지 우선: output: 'static' 또는 hybrid
병렬 렌더링: Astro 4.0+ 자동 병렬화 아래 코드는 javascript를 사용한 구현 예제입니다. 코드를 직접 실행해보면서 동작을 확인해보세요.

// astro.config.mjs
export default defineConfig({
  output: 'static',
  build: {
    concurrency: 8 // 병렬 렌더링
  }
});

8. Vercel·Netlify 비교

8-1. 기능 비교표

항목	Cloudflare Pages	Vercel	Netlify
무료 빌드	500회/월	6,000분/월	300분/월
무료 대역폭	무제한	100GB/월	100GB/월
CDN 위치	300+ 도시	100+ 도시	100+ 도시
Edge 함수	Workers (V8)	Edge Functions (V8)	Edge Functions (Deno)
DB 통합	D1 (SQLite), R2 (S3)	Vercel Postgres, Blob	Netlify Blobs
빌드 시간	중간	빠름 (Next.js 최적화)	중간
DX	보통	매우 좋음	좋음

8-2. 선택 기준

Cloudflare Pages를 선택하면 좋은 경우:

글로벌 트래픽이 많고 대역폭 비용이 걱정될 때
Workers·D1·R2 등 Cloudflare 생태계를 쓸 때
무료 플랜으로 무제한 대역폭이 필요할 때
Astro·Hugo 같은 정적 생성기로 블로그를 만들 때 (Astro 블로그 가이드 참고) Vercel을 선택하면 좋은 경우:
Next.js App Router를 쓰고, 개발자 경험을 최우선할 때
빌드 시간이 중요하고, 프리뷰 배포가 많을 때
Vercel Analytics·Speed Insights를 쓸 때 Netlify를 선택하면 좋은 경우:
Form 처리, Identity(인증), Split Testing이 필요할 때
Deno 기반 Edge Functions를 선호할 때

9. 실전 예제: Astro 블로그 배포

9-1. 프로젝트 구조

아래 코드는 text를 사용한 구현 예제입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

my-blog/
├── src/
│   ├── pages/
│   ├── content/
│   └── components/
├── public/
├── functions/
│   └── api/
│       └── views.js  # 조회수 API
├── astro.config.mjs
├── wrangler.toml
└── package.json

9-2. GitHub Actions 워크플로