Cloudflare Pages로 무료 블로그 배포하기 - 2025년 완벽 가이드
npm run build | out || React | npm run build | build || Vue | npm run build | dist || Gatsby | gatsby build | public || Hugo | hugo | public || Nuxt | npm run generate | dist |---### 🔍 다른 호스팅과의 비교> 2025년 무료 호스팅 서비스 완벽 비교> 월 10만 방문자 기준 실측 데이터| 기능 | Cloudflare Pages | Vercel | Netlify | GitHub Pages ||-----|------------------|--------|---------|--------------|| 가격 | 무료 | 무료 (제한) | 무료 (제한) | 무료 || 대역폭 | ✅ 무제한 | ⚠️ 100GB/월 | ⚠️ 100GB/월 | ⚠️ 제한 || 빌드 시간 | ✅ 무제한 | ⚠️ 100h/월 | ⚠️ 300분/월 | ✅ 무제한 || CDN | ✅ 275+ 로케이션 | ✅ 100+ | ✅ 100+ | ❌ 없음 || 커스텀 도메인 | ✅ 무제한 | ✅ 1개 | ✅ 1개 | ✅ 1개 || DDoS 보호 | ✅ 강력 (700억/일) | ⚠️ 기본 | ⚠️ 기본 | ❌ 없음 || 한국 속도 | ⚡ 50ms | ⚡ 80ms | ⚡ 120ms | ❌ 300ms+ |### 🏆 최종 승자Cloudflare Pages가 압도적 1위- ✅ 무제한 대역폭 (트래픽 걱정 없음)- ✅ 최고 속도 (한국 기준 50ms)- ✅ 최강 보안 (매일 700억 건 공격 차단)---## 📋 배포 과정> 총 소요 시간: 약 10분> 클릭 5번이면 완료### 1️⃣ GitHub 저장소 준비먼저 Next.js 프로젝트를 GitHub에 올립니다:bash# Git 초기화git init# 모든 파일 추가git add .# 첫 커밋git commit -m "Initial commit: Next.js blog setup"# 브랜치 설정git branch -M main# 원격 저장소 연결git remote add origin https://github.com/username/blog.git# GitHub에 푸시git push -u origin main💡 Tip: .gitignore 파일이 제대로 설정되어 있는지 확인하세요. node_modules/, .next/, out/ 등은 제외해야 합니다.### 2단계: Cloudflare Pages 설정1. Cloudflare 대시보드 접속 (https://dash.cloudflare.com)2. Workers & Pages 메뉴 선택3. Create application 클릭4. Pages 탭 선택5. Connect to Git 클릭
main 또는 master보안 팁: 모든 저장소가 아닌 필요한 저장소만 접근 권한을 부여하세요.### 4단계: 빌드 설정Next.js 프로젝트의 경우 다음과 같이 설정합니다:yamlProject name: my-blogProduction branch: mainFramework preset: Next.jsBuild command: npm run buildBuild output directory: outRoot directory: /⚠️ 중요: next.config.js에 다음 설정이 필수입니다:javascript/** @type {import('next').NextConfig} */const nextConfig = { output: 'export', images: { unoptimized: true, }, // Trailing slash 추가 (선택사항) trailingSlash: true,}module.exports = nextConfig설명:- output: 'export': 정적 HTML 파일로 빌드- images.unoptimized: true: Image Optimization API 비활성화- trailingSlash: true: URL에 슬래시 추가 (404 방지)### 5단계: 배포 시작Save and Deploy 버튼을 클릭하면:1. 소스 클론: GitHub에서 코드 다운로드2. 의존성 설치: npm install 실행3. 빌드 실행: npm run build 실행4. 자산 업로드: Cloudflare 네트워크에 배포5. DNS 설정: *.pages.dev 도메인 자동 할당평균 빌드 시간: 2-5분배포 완료 후 https://your-project.pages.dev URL이 생성됩니다!## 환경 변수 설정API 키나 설정값이 필요한 경우:### 설정 방법1. 프로젝트 대시보드에서 Settings 탭으로 이동2. Environment variables 섹션 찾기3. Add variable 클릭4. 변수명과 값 입력5. Production 또는 Preview 환경 선택### 추천 환경 변수env# 사이트 URLNEXT_PUBLIC_SITE_URL=https://yourblog.pages.dev# Google AnalyticsNEXT_PUBLIC_GA_ID=G-XXXXXXXXXX# Google AdSenseNEXT_PUBLIC_ADSENSE_ID=ca-pub-XXXXXXXXXXXXXXXX# API 키 (민감 정보는 NEXT_PUBLIC_ 없이)API_SECRET_KEY=your_secret_key_here보안 주의사항:- NEXT_PUBLIC_ 접두사가 있는 변수는 클라이언트에 노출됩니다- 민감한 정보는 NEXT_PUBLIC_ 없이 설정하고 서버 사이드에서만 사용## 커스텀 도메인 연결자체 도메인을 연결하면 전문성이 높아집니다!### 연결 방법1. Custom domains 탭 선택2. Set up a custom domain 클릭3. 도메인 입력 (예: blog.mydomain.com)4. DNS 레코드 추가:Type: CNAMEName: blogTarget: your-project.pages.devProxy status: Proxied (오렌지 클라우드)### DNS 제공업체별 설정Cloudflare DNS (추천):- 자동으로 설정 완료- 즉시 적용외부 DNS:1. DNS 관리 페이지 접속2. CNAME 레코드 추가3. TTL: 자동 또는 36004. DNS 전파 대기 (최대 24시간)확인 방법:bash# DNS 전파 확인nslookup blog.mydomain.com# SSL 인증서 확인curl -I https://blog.mydomain.com## 자동 배포 워크플로우이제부터는 다음과 같이 간단하게 배포할 수 있습니다:bash# 1. 새 게시글 작성vim posts/2025-01-15-my-new-post.md# 2. 변경사항 확인git status# 3. 스테이징git add posts/2025-01-15-my-new-post.md# 4. 커밋 (의미있는 메시지)git commit -m "Add new post: My New Post"# 5. GitHub에 푸시git push origin main# 6. 자동 배포 시작! ✨# Cloudflare가 자동으로 감지하고 빌드 시작### 배포 알림 설정Webhook을 통해 배포 알림 받기:1. Settings → Webhooks2. Slack, Discord, Email 등 선택3. 배포 시작/완료/실패 시 알림## 배포 히스토리 및 롤백Cloudflare Pages는 모든 배포를 보관합니다:### 배포 히스토리 확인- Deployments 탭에서 모든 배포 목록 확인- 각 배포마다: - 고유 URL 제공 - 커밋 정보 - 빌드 로그 - 배포 시간### 롤백 방법1. Deployments 탭 이동2. 이전 버전 선택3. Rollback to this deployment 클릭4. 즉시 이전 버전으로 복구! (30초 이내)장점: - 문제 발생 시 즉시 이전 버전으로 복구- 다운타임 최소화- Git 히스토리 변경 불필요## 성능 최적화### Cache 설정Cloudflare의 강력한 캐싱 기능 활용:javascript// next.config.jsmodule.exports = { async headers() { return [ { source: '/:all*(svg|jpg|jpeg|png|gif|webp)', headers: [ { key: 'Cache-Control', value: 'public, max-age=31536000, immutable', }, ], }, { source: '/_next/static/:path*', headers: [ { key: 'Cache-Control', value: 'public, max-age=31536000, immutable', }, ], }, ] },}### 이미지 최적화javascript// 이미지 크기 최적화- WebP 형식 사용- 적절한 크기로 리사이징- Lazy loading 적용// 예시<img src="/image.webp" alt="설명" loading="lazy" width="800" height="600"/>### Core Web Vitals 개선Cloudflare Pages로 배포하면:- LCP (Largest Contentful Paint): <2.5초- FID (First Input Delay): <100ms- CLS (Cumulative Layout Shift): <0.1### Analytics 연동Cloudflare Web Analytics를 무료로 사용:1. Analytics 탭 선택2. Web Analytics 활성화3. 제공되는 스크립트 태그를 <head>에 추가:html<script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "your-token"}'></script>제공 지표:- 페이지 뷰- 고유 방문자- 바운스율- 평균 세션 시간- 트래픽 출처## 문제 해결 (Troubleshooting)### 빌드 실패증상: 빌드가 실패하고 배포되지 않음해결 방법:1. 로그 확인: - 배포 페이지에서 View build log 클릭 - 에러 메시지 분석2. 로컬 테스트:bash# 로컬에서 빌드 테스트npm run build# 정적 파일 확인ls -la out/3. 일반적인 원인: - Node.js 버전 불일치 - 환경 변수 누락 - 의존성 설치 실패 - 타입스크립트 오류해결:javascript// package.json에 Node 버전 명시{ "engines": { "node": ">=18.0.0" }}### 404 에러증상: 페이지가 404 Not Found원인:- out 디렉토리가 올바르게 생성되지 않음- 잘못된 빌드 설정해결:javascript// next.config.js 확인module.exports = { output: 'export', // ✅ 필수 trailingSlash: true, // ✅ 추천}### 이미지 로딩 실패증상: 이미지가 표시되지 않음원인: Next.js Image Optimization API 사용해결:javascript// next.config.jsmodule.exports = { images: { unoptimized: true, // ✅ 필수 },}또는 일반 <img> 태그 사용:jsx// ❌ Next.js Image 컴포넌트<Image src="/image.jpg" />// ✅ 일반 img 태그<img src="/image.jpg" alt="설명" />### 환경 변수 인식 안 됨증상: 환경 변수가 undefined해결:1. Cloudflare 대시보드에서 환경 변수 재확인2. 변수명에 NEXT_PUBLIC_ 접두사 확인3. 재배포 필요 (환경 변수 변경 후)bash# 강제 재배포git commit --allow-empty -m "Trigger rebuild"git push## 고급 활용### Preview DeploymentsPull Request마다 자동으로 프리뷰 배포:1. PR 생성 시 자동으로 고유 URL 생성2. 변경사항 미리 확인3. 팀원과 리뷰 공유4. Merge 전 테스트URL 형식: https://{commit-hash}.{project}.pages.dev### Branch Deployments여러 브랜치를 동시에 배포:- main: 프로덕션 (your-project.pages.dev)- dev: 개발 (dev.your-project.pages.dev)- staging: 스테이징 (staging.your-project.pages.dev)### Serverless Functions (Beta)Cloudflare Workers를 활용한 서버리스 함수:javascript// functions/api/hello.jsexport async function onRequest(context) { return new Response('Hello, World!')}접근: https://your-project.pages.dev/api/hello## 비용 및 제한사항### 무료 플랜✅ 포함 사항:- 무제한 대역폭- 무제한 요청- 월 500회 빌드- 동시 1회 빌드- 무제한 사이트- 커스텀 도메인 무제한❌ 제한사항:- 파일 크기: 최대 25MB- 빌드 시간: 최대 20분- 동시 빌드: 1개### 유료 플랜 ($20/월)추가 혜택:- 월 5,000회 빌드- 동시 5회 빌드- 고급 Analytics- 우선 지원대부분의 개인 블로그는 무료 플랜으로 충분합니다!## 자주 묻는 질문 (FAQ)### Q1: Cloudflare Pages는 정말 완전 무료인가요?A: 네, 완전 무료입니다! 숨겨진 비용이나 신용카드 등록도 필요 없습니다. 무제한 대역폭과 월 500회 빌드를 무료로 제공합니다.### Q2: 빌드 시간은 얼마나 걸리나요?A: 일반적으로 2-5분 정도 걸립니다. 프로젝트 크기와 의존성에 따라 달라질 수 있습니다.### Q3: 기존 도메인을 연결할 수 있나요?A: 네, 가능합니다! CNAME 레코드만 추가하면 무료로 커스텀 도메인을 연결할 수 있습니다.### Q4: Vercel이나 Netlify와 비교하면 어떤가요?A: Cloudflare Pages는 무제한 대역폭과 더 많은 무료 빌드 횟수를 제공합니다. 또한 Cloudflare의 강력한 DDoS 보호를 기본으로 제공합니다.### Q5: WordPress 블로그도 배포할 수 있나요?A: WordPress는 동적 CMS라서 직접 배포할 수 없습니다. 하지만 WordPress를 Headless CMS로 사용하고 프론트엔드를 Next.js로 만들면 가능합니다.### Q6: 배포 실패 시 어떻게 하나요?A: 빌드 로그를 확인하고 로컬에서 npm run build를 테스트해보세요. 대부분 설정 오류나 환경 변수 문제입니다.### Q7: 트래픽이 많아지면 비용이 발생하나요?A: 아니요! 무제한 대역폭이므로 트래픽이 아무리 많아도 무료입니다.### Q8: 이전 버전으로 롤백할 수 있나요?A: 네, 클릭 한 번으로 즉시 이전 버전으로 롤백할 수 있습니다.## 🎬 마치며축하합니다! Cloudflare Pages 배포를 완료하셨습니다.이제 여러분의 블로그는 전 세계 어디서나 빠르게 접근할 수 있으며, 무료로 운영할 수 있습니다!💎 핵심 성과:- ✅ 100% 무료: 대역폭・빌드・도메인 모두 무료- ✅ 초고속: 전 세계 275+ CDN, 평균 50ms 응답- ✅ 자동 배포: Git push만으로 30초 내 배포- ✅ 엔터프라이즈 보안: 매일 700억 건 DDoS 차단- ✅ 완벽한 안정성: 롤백 기능으로 안전한 운영🚀 다음 단계:1. 정기 콘텐츠 발행: 주 3-5회 게시글 작성2. SEO 최적화: Google Search Console 등록3. 수익화 준비: AdSense 신청 조건 충족4. 성능 모니터링: Cloudflare Analytics 활용블로그 성공을 위한 여정이 이제 시작되었습니다! 💪---## 📚 다음 읽을 글블로그를 배포했다면 이제 콘텐츠를 채우고 수익화할 차례입니다:### 블로그 개발1️⃣ Next.js 마크다운 블로그 만들기- 완전 무료 블로그 구축- SEO 최적화 완벽 가이드- Cloudflare Pages 배포 최적화- 예상 소요 시간: 2-3시간- 난이도: 중급### 수익화 전략2️⃣ 구글 애드센스 승인받고 수익화하기- 승인율 100% 달성 전략- 필수 페이지 작성 가이드- 월 100만원 수익 로드맵- 예상 소요 시간: 1-2개월- 난이도: 초급~중급### 추가 학습- 커스텀 도메인 연결하기 (준비 중)- Cloudflare Workers 활용하기 (준비 중)- 고급 성능 최적화 (준비 중)---## 💬 여러분의 배포 경험을 공유해주세요Cloudflare Pages 배포 과정에서 겪은 문제나 성공 사례를 댓글로 알려주세요!다른 독자들에게 큰 도움이 됩니다. 🙏---관련 태그: #Cloudflare #배포 #Next.js #무료호스팅 #웹개발 #CDN #자동배포이 글이 도움이 되었다면 좋아요 버튼을 눌러주세요! ❤️
💡 카카오톡으로 공유하려면 URL 복사 버튼을 클릭한 후 카카오톡에 붙여넣기 해주세요.
