Cloudflare Pages 완벽 가이드 | 무료 배포·Edge 렌더링·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란?
2. GitHub 연동 배포
3. Wrangler CLI 배포
4. 환경 변수와 시크릿
5. 커스텀 도메인 설정
6. Functions (Edge 서버 로직)
7. 빌드 최적화
8. Vercel·Netlify 비교
9. 정리

---

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. 기본 설정

1. Cloudflare 대시보드 → Pages → Create a project

2. Connect to Git → GitHub 계정 연동

3. 저장소 선택 → 브랜치(main 또는 production)

4. 빌드 설정:

   • Framework preset: Astro, Next.js, React 등 자동 감지
   • Build command: npm run build
   • Build output directory: dist (Astro), out (Next.js), .next (Next.js SSR)

5. 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. 배포

# 로컬에서 빌드
npm run build

# dist 폴더를 Cloudflare Pages에 업로드
wrangler pages deploy dist --project-name=my-project

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

3-4. GitHub Actions에서 Wrangler 사용

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):

// 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

1. 도메인 입력 (예: blog.example.com)

2. DNS 레코드 추가:

   • CNAME: blog → <project>.pages.dev
   • 또는 A/AAAA: Cloudflare가 제공하는 IP

3. 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. 기본 구조

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

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

// 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. 동적 라우트

// 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:

// 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

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

---

7. 빌드 최적화

7-1. GitHub Actions 빌드 캐시

- 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. 빌드 시간 단축

병렬 처리:

// 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분+

해결:

1. OG 이미지 캐시: 변경된 글만 재생성
2. 정적 페이지 우선: output: 'static' 또는 hybrid
3. 병렬 렌더링: Astro 4.0+ 자동 병렬화

// 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. 프로젝트 구조

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

9-2. GitHub Actions 워크플로

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: Validate frontmatter
        run: npm run validate
      
      - 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-blog --commit-message="Deploy from GitHub Actions"

9-3. 조회수 API (Functions)

// functions/api/views.js
export async function onRequest(context) {
  const { request, env } = context;
  const url = new URL(request.url);
  const slug = url.searchParams.get('slug');
  
  if (!slug) {
    return new Response('Missing slug', { status: 400 });
  }
  
  // D1 (Cloudflare SQLite)
  const db = env.DB;
  
  if (request.method === 'POST') {
    // 조회수 증가
    await db.prepare('INSERT INTO views (slug, count) VALUES (?, 1) ON CONFLICT(slug) DO UPDATE SET count = count + 1')
      .bind(slug)
      .run();
  }
  
  // 조회수 조회
  const result = await db.prepare('SELECT count FROM views WHERE slug = ?')
    .bind(slug)
    .first();
  
  return new Response(
    JSON.stringify({ slug, views: result?.count || 0 }),
    { headers: { 'Content-Type': 'application/json' } }
  );
}

D1 바인딩 (wrangler.toml):

name = "my-blog"
pages_build_output_dir = "dist"

[[d1_databases]]
binding = "DB"
database_name = "my-blog-db"
database_id = "abc123..."

---

10. 고급 팁

10-1. 리다이렉트

_redirects 파일 (빌드 출력 폴더에 포함):

/old-url  /new-url  301
/blog/*   /posts/:splat  302

또는 _headers:

/*
  X-Frame-Options: DENY
  X-Content-Type-Options: nosniff

10-2. 프리뷰 브랜치 제한

# .github/workflows/deploy-cloudflare.yml
on:
  push:
    branches: [main]
  # PR 프리뷰는 Cloudflare 자동 배포에 맡기기

10-3. 빌드 실패 알림

- name: Notify on failure
  if: failure()
  run: |
    curl -X POST ${{ secrets.SLACK_WEBHOOK }} \
      -H 'Content-Type: application/json' \
      -d '{"text":"Cloudflare Pages 배포 실패!"}'

10-4. 롤백

대시보드:

• Deployments → 이전 배포 선택 → Rollback to this deployment

CLI:

wrangler pages deployment list --project-name=my-blog
wrangler pages deployment rollback <deployment-id>

---

11. 정리

핵심 요약

Cloudflare Pages 장점:

• 무료 대역폭 무제한
• 300+ 도시 글로벌 CDN
• Workers·D1·R2 통합
• SSR/Edge Functions 지원

배포 방법:

1. GitHub 연동: 가장 쉬움, 자동 프리뷰
2. Wrangler CLI: 빌드 제어, 횟수 절약

추천 구성:

• 로컬/CI: GitHub Actions에서 빌드 + Wrangler 업로드
• 프리뷰: Cloudflare 자동 배포
• 환경 변수: 대시보드에서 Production/Preview 분리
• 모니터링: Cloudflare Analytics + Sentry

체크리스트

배포 전:

• 빌드 명령어 확인 (npm run build)
• 출력 디렉터리 확인 (dist, out, .next)
• 환경 변수 설정 (API 키, DB URL)
• .gitignore에 .env, .dev.vars 추가

배포 후:

• 커스텀 도메인 DNS 전파 확인 (최대 24시간)
• SSL 인증서 발급 확인
• Functions 동작 테스트
• 404 페이지 확인

다음 단계

Cloudflare Pages와 함께 쓰면 좋은 글:

• Astro + Cloudflare Pages 스택 분석 — Vercel·Netlify·WordPress와 비교
• Astro로 기술 블로그 만들기
• Node.js 배포 가이드 (PM2, Docker, AWS)
• Node.js + GitHub Actions CI/CD
• 기술 블로그 방문자 늘리기 — 배포 후 검색 유입 구조 잡기

참고 자료:

• Cloudflare Pages 공식 문서
• Wrangler CLI 문서
• Cloudflare Workers 문서