Cloudflare CDN 설정 가이드 — 웹사이트 속도 3배 올리기

Cloudflare란

전 세계 320개+ PoP(접속 지점)를 통해 정적 콘텐츠를 사용자 근처에서 서빙하는 CDN + 보안 플랫폼입니다.

• 무료 플랜도 CDN, DDoS 보호, SSL 제공
• DNS를 Cloudflare로 이전하면 즉시 활성화

도메인 연결

1. dash.cloudflare.com 접속 → Add Site
2. 도메인 입력 → Free 플랜 선택
3. 기존 DNS 레코드 자동 임포트 확인
4. 도메인 레지스트라에서 네임서버를 Cloudflare로 변경
5. 활성화까지 최대 24시간 (보통 5분 이내)

필수 설정

SSL/TLS

SSL/TLS → Overview → Full (strict)

• Flexible: 원본 서버와 HTTP (비권장)
• Full: 원본 서버와 HTTPS (자체 서명 인증서 허용)
• Full (strict): 원본 서버와 HTTPS (유효한 인증서 필요) ← 권장

HTTPS 리디렉션

SSL/TLS → Edge Certificates
→ Always Use HTTPS: ON
→ Automatic HTTPS Rewrites: ON
→ HTTP Strict Transport Security (HSTS): Enable (max-age=31536000)

캐시 설정

캐시 규칙 (Cache Rules)

정적 자산 장기 캐시:

If: URI Path matches regex \.(js|css|woff2?|png|jpg|webp|svg|ico)$
Then:
  Cache Status: Cache Everything
  Edge Cache TTL: 1 month
  Browser Cache TTL: 1 day

HTML은 짧게 캐시:

If: URI Path matches regex \.html$  OR  Content-Type contains text/html
Then:
  Cache Status: Cache Everything
  Edge Cache TTL: 1 hour
  Browser Cache TTL: Respect Origin

API는 캐시 안 함:

If: URI Path starts with /api/
Then:
  Cache Status: Bypass

캐시 퍼지

# Cloudflare API로 캐시 퍼지 (배포 시)
curl -X POST "https://api.cloudflare.com/client/v4/zones/{ZONE_ID}/purge_cache" \
  -H "Authorization: Bearer {API_TOKEN}" \
  -H "Content-Type: application/json" \
  --data '{"purge_everything": true}'

GitHub Actions 배포 후 자동 퍼지:

- name: Purge Cloudflare cache
  run: |
    curl -X POST \
      "https://api.cloudflare.com/client/v4/zones/${{ secrets.CF_ZONE_ID }}/purge_cache" \
      -H "Authorization: Bearer ${{ secrets.CF_API_TOKEN }}" \
      -H "Content-Type: application/json" \
      --data '{"purge_everything":true}'

성능 최적화 설정

Speed 탭 설정

Speed → Optimization
→ Auto Minify: JavaScript ✓, CSS ✓, HTML ✓
→ Brotli: ON
→ Early Hints: ON
→ HTTP/3 (QUIC): ON

Image 최적화 (Pro 플랜 이상)

Speed → Optimization → Image Resizing: ON

무료 플랜에서는 Cloudflare Workers로 이미지 최적화 가능:

// workers/image-resize.js
export default {
  async fetch(request) {
    const url = new URL(request.url);
    const imageURL = url.searchParams.get("url");
    const width = url.searchParams.get("w") || "800";
    
    return fetch(imageURL, {
      cf: {
        image: {
          width: parseInt(width),
          format: "webp",
          quality: 85,
        }
      }
    });
  }
}

보안 설정

WAF (Web Application Firewall)

Security → WAF
→ Managed Rules: Cloudflare Managed Ruleset ON
→ OWASP Core Ruleset ON

Rate Limiting

Security → WAF → Rate limiting rules
→ IF: URI Path contains /api/login
   AND: Requests > 10 per 1 minute (same IP)
→ THEN: Block for 1 hour

Bot Fight Mode

Security → Bots → Bot Fight Mode: ON

Cloudflare Pages 배포 (정적 사이트)

# Wrangler CLI로 배포
wrangler pages deploy dist/ --project-name=my-site

# 환경별 배포
wrangler pages deploy dist/ \
  --project-name=my-site \
  --branch=main  # Production

성능 측정

설정 전후 비교:

# WebPageTest, GTmetrix, PageSpeed Insights로 측정
# 주요 지표:
# - TTFB (Time to First Byte): 200ms 이하 목표
# - LCP (Largest Contentful Paint): 2.5초 이하
# - Cache Hit Rate: 80% 이상

Cloudflare Analytics에서 Cache Hit Rate 확인:

Analytics → Performance → Cache Hit Rate

80% 이상이면 CDN 설정이 잘 된 것입니다.