Skip to main content
공개 노트

Cloudflare Pages 정리

Views 499약 5분생성형 AI 활용
Summary

Cloudflare Pages

개요

Cloudflare Pages는 프론트엔드 웹사이트를 빠르게 빌드하고 배포하기 위한 JAMstack 기반 플랫폼이다. GitHub 또는 GitLab 저장소와 연결해두면, 개발자가 코드를 push할 때마다 자동으로 빌드와 배포가 진행된다.1

핵심은 "프론트엔드 배포 운영을 최대한 단순하게 만드는 것"이다. 별도의 서버 관리나 복잡한 배포 파이프라인을 직접 구성하지 않아도, 정적 사이트나 프론트엔드 애플리케이션을 Cloudflare의 edge 네트워크 위에 올릴 수 있다.

주요 기능

Cloudflare Pages는 Git 저장소와 연결되는 방식으로 동작한다. GitHub 또는 GitLab 프로젝트를 선택하고, npm run build 같은 빌드 명령어와 결과물이 생성되는 출력 디렉터리를 지정하면 된다. 이후에는 코드 변경 사항을 push할 때마다 자동으로 빌드와 배포가 실행된다.1

배포 과정에서는 로그를 확인할 수 있어 빌드 실패 원인을 추적하기 쉽다. React, Vue, Gatsby, Hugo 같은 주요 프레임워크에 대한 가이드도 제공하므로, 자주 쓰는 프론트엔드 스택을 Pages에 맞게 설정하기 수월하다.

협업 기능도 중요한 장점이다. 커밋마다 프리뷰 링크가 자동으로 만들어지기 때문에, 실제 운영 배포 전에 변경 내용을 디자이너, 개발자, 콘텐츠 작성자 등이 함께 확인할 수 있다. 필요하면 Cloudflare Access와 연결해 프리뷰 페이지 접근을 제한할 수도 있다.1

또한 privacy-first 방식의 무료 웹 애널리틱스를 제공하며, Cloudflare Workers와 연동해 정적 사이트에 동적인 기능을 추가할 수 있다. 단순한 정적 호스팅을 넘어, 필요에 따라 서버리스 기능까지 확장할 수 있는 구조다.

장점

Cloudflare Pages의 가장 큰 장점은 배포 부담을 줄여준다는 점이다. 빌드 시스템, 환경 설정, 배포 운영에 들이는 시간을 줄이고, 개발자는 실제 제품 개발에 더 집중할 수 있다.

협업 측면에서도 유용하다. 커밋이나 PR 단위로 프리뷰 링크가 만들어지면, 배포 전 리뷰 과정이 훨씬 빨라진다. "로컬에서만 보이는 화면"을 설명하는 대신, 팀원에게 링크 하나를 공유해 바로 확인하게 할 수 있기 때문이다.

성능 면에서는 Cloudflare의 edge 네트워크를 활용한다. 사용자와 가까운 위치에서 콘텐츠를 제공할 수 있어 전 세계 사용자를 대상으로 하는 사이트에 적합하다. 대규모 트래픽 처리에도 유리하며, SSL이 기본 제공되어 인증서 설정 부담도 적다.1

또한 HTTP/3, QUIC, 이미지 압축 같은 최신 웹 표준과 성능 최적화 기능을 활용할 수 있다. 특히 마케팅 페이지나 제품 소개 사이트처럼 빠른 로딩 속도가 중요한 웹사이트에 잘 맞는다.

사용 사례

Cloudflare Pages는 정적 웹사이트 배포에 적합하다. 블로그, 문서 사이트, 랜딩 페이지, 마케팅 사이트, 제품 소개 페이지처럼 정적 리소스를 빠르게 제공해야 하는 경우에 잘 어울린다.

프론트엔드 팀의 공동 개발 환경으로도 좋다. 커밋마다 생성되는 프리뷰 링크를 활용하면 변경 사항을 빠르게 공유하고 피드백을 받을 수 있다. 디자이너는 화면을 보고 시각적 피드백을 줄 수 있고, 콘텐츠 담당자는 문구나 구성 요소를 실제 페이지 형태로 검토할 수 있다.

트래픽이 갑자기 늘어날 가능성이 있는 사이트에도 적합하다. Cloudflare의 인프라를 기반으로 동작하기 때문에, 이벤트 페이지나 캠페인 페이지처럼 특정 시점에 방문자가 몰리는 경우에도 활용도가 높다.

정적 사이트만으로 부족한 경우에는 Cloudflare Workers와 함께 사용할 수 있다. 예를 들어 간단한 API 처리, 사용자 요청에 따른 동적 응답, 인증 흐름 같은 기능을 붙여 더 유연한 웹사이트를 만들 수 있다.

배포 흐름

Cloudflare Pages의 배포 흐름은 단순하다.

먼저 Cloudflare Pages를 GitHub 또는 GitLab 계정과 연결한다. 그다음 배포할 저장소를 선택하고, 프로젝트에 맞는 빌드 명령어와 출력 디렉터리를 설정한다. 예를 들어 프론트엔드 프로젝트라면 npm run build를 실행하고, 빌드 결과물이 담기는 폴더를 지정하는 식이다.

설정이 끝나면 이후부터는 코드를 push하는 것만으로 배포가 진행된다. Cloudflare Pages는 변경 사항을 감지해 자동으로 빌드하고, 성공하면 사이트를 배포한다. 각 커밋마다 프리뷰 링크도 생성되므로 운영 환경에 반영하기 전에 결과물을 검토할 수 있다.1

가격 및 제한

제공된 자료 기준으로, 무료 플랜에서도 무제한 seats, 무제한 sites, 무제한 static requests, 무제한 bandwidth가 언급된다. 협업 인원이나 정적 요청, 대역폭 측면에서 진입 장벽이 낮은 편이다.1

다만 빌드 관련 한도는 존재한다. 무료 플랜 기준으로 5 concurrent builds, 한 번에 1개 build 진행, 월 500 builds가 언급된다. 또한 프로젝트당 100 custom domains까지 사용할 수 있다.1

상위 플랜에서는 20 concurrent builds, 월 5,000 builds, 프로젝트당 250 custom domains가 언급된다. 더 높은 플랜에서는 월 20,000 builds와 프로젝트당 500 custom domains까지 확장되는 것으로 정리된다.1

전체 요금 체계는 제공된 자료만으로는 세부 비교가 충분하지 않다. 따라서 실제 도입 전에는 현재 Cloudflare Pages의 공식 가격표와 제한 조건을 다시 확인하는 것이 좋다.

GitHub Pages와의 비교 참고

추가 참고 자료에서는 Cloudflare Pages와 GitHub Pages 무료 플랜을 비교한다.2 Cloudflare Pages는 무료 플랜에서도 무제한 대역폭을 제공한다는 점이 장점으로 언급된다. 다만 무료 플랜에는 월 500회 빌드 제한이 있어 초기 설정 단계에서 잦은 수정과 재배포가 많다면 유의해야 한다.

커스텀 도메인 연결과 HTTPS 적용이 편리하고, 도메인을 Cloudflare에서 관리 중이면 인증과 DNS 설정 부담이 더 줄어든다. 성능 측면에서는 예시 기준으로 Cloudflare Pages가 GitHub Pages보다 낮은 TTFB와 빠른 로드 시간을 보였다고 정리할 수 있다. 팀 관리 측면에서는 최대 5명까지 팀 무료 계정, 비공개 레포지토리 유지 가능성이 장점으로 언급된다.

항목Cloudflare Pages 내용
무료 대역폭무제한
빌드 제한월 500회
배포 방식GitHub 저장소 연동, build output directory 지정
커스텀 도메인연결이 비교적 편리함
HTTPS복잡한 DNS 설정 없이 자동 적용 가능
성능TTFB와 로딩 속도에서 GitHub Pages보다 빠른 편으로 언급됨
한국 서버 예시TTFB 67ms, 로드 85ms
팀 관리최대 5명 팀 무료 계정
레포지토리 공개 여부비공개 레포지토리 유지 가능

정리하면, 초기에는 GitHub Pages로 잦은 수정과 빌드를 처리하고, 사이트가 안정화된 뒤 Cloudflare Pages로 이전해 무제한 대역폭과 빠른 성능을 활용하는 방식도 선택지로 볼 수 있다.

한 줄 요약

Cloudflare Pages는 Git 기반 자동 배포, 커밋별 프리뷰, Cloudflare edge 성능, Workers 확장을 결합한 프론트엔드 웹사이트 배포 플랫폼이다.

참고

1Build fast sites.In record time.

2개발자를 위한 Cloudflare Pages와 GitHub Pages 무료 플랜 꼼꼼 비교

이 노트는 보도·비평·교육·연구 목적으로 작성되었습니다. 저작권 문의가 있으시면 에서 알려주세요.

틸노트는 사용자가 AI를 활용해 노트를 쉽게 작성하거나 편집할 수 있는 서비스입니다.

AI 스퀘어 단톡방에 함께해요

AI 활용과 틸노트 사용 팁을 나누는 오픈채팅방입니다. 입장 비밀번호는 tilnote입니다.

참여하기