🚀 Cloudflare Pages로 웹사이트를 배포하는 2가지 방법과 기본 원리

웹사이트나 블로그를 직접 만들고 나면 '이걸 어떻게 인터넷에 올려서 남들이 접속할 수 있게 만들까?'를 고민하게 됩니다.

예전에는 매달 비용을 내고 리눅스 가상 서버(VPS)를 빌려 웹서버(Nginx)를 설치하고 보안 인증서(SSL)를 설정해야 했지만, 요즘은 **Cloudflare Pages(CFP)**를 이용하면 복잡한 서버 관리 없이 무료로 아주 빠르게 사이트를 배포할 수 있습니다.

이 글에서는 Cloudflare Pages가 무엇인지, 내 컴퓨터에서 사이트를 배포할 때 사용하는 **2가지 방법(브라우저 로그인 방식 vs API 토큰 방식)**은 어떤 차이가 있는지, 그리고 글과 사진을 저장하는 D1 데이터베이스와 KV 저장소의 기본 원리를 알기 쉽게 정리해 보았습니다.

📂 1. Cloudflare Pages(CFP)란 무엇일까요?

쉽게 말해 **"내가 만든 웹사이트 파일들을 전 세계 수백 개 도시에 있는 Cloudflare 컴퓨터에 올려두고, 방문자에게 가장 가까운 곳에서 초고속으로 보여주는 호스팅 서비스"**입니다.

HTML, CSS, 이미지 같은 정적 파일은 물론이고, SvelteKit이나 Next.js처럼 화면을 서버에서 실시간으로 그려주는(SSR) 최신 웹사이트도 척척 동작하게 해줍니다.

왜 가상 서버(VPS) 대신 Cloudflare Pages를 쓸까요?

서버 관리를 전혀 안 해도 됩니다: 해킹 방지용 리눅스 보안 패치를 하거나 웹서버가 죽었는지 감시할 필요가 없습니다. Cloudflare가 24시간 알아서 안전하게 관리해 줍니다.
로딩 속도가 정말 빠릅니다: 한국 사용자는 한국에 있는 Cloudflare 센터에서, 미국 사용자는 미국에 있는 센터에서 페이지를 즉시 보내주기 때문에 사이트가 쾌속으로 열립니다.
비용이 거의 들지 않습니다: 개인 블로그나 일반적인 포트폴리오 사이트 수준의 방문자 트래픽은 무료 요금제(Free Tier) 범위 안에서 넉넉하게 운영할 수 있습니다.

🔑 2. 컴퓨터에서 Cloudflare로 사이트를 배포하는 2가지 방법

SvelteKit 애플리케이션을 빌드(npm run build)하면 @sveltejs/adapter-cloudflare에 의해 .svelte-kit/cloudflare 디렉토리에 정적 파일과 서버 실행용 _worker.js가 생성됩니다.

이 결과물을 Cloudflare Pages에 배포하는 실제 명령어는 npx wrangler pages deploy .svelte-kit/cloudflare 이며, 이때 계정을 인증하는 방식에 크게 2가지가 있습니다.

[방법 1] 대화형 브라우저 로그인 배포 흐름 (Wrangler 기본 방식)

프로젝트를 처음 만들고 배포할 때 가장 직관적인 방식입니다. 터미널 명령을 치면 브라우저 창이 열리며 로그인 권한을 승인받습니다.

# SvelteKit 빌드 후 Pages 배포 (대화형 브라우저 로그인)
npm run build
npx wrangler pages deploy .svelte-kit/cloudflare --project-name=my-blog-web --branch=production

어떻게 동작하나요?: 터미널에서 명령어를 치면 내 컴퓨터의 웹 브라우저가 자동으로 열리며 Cloudflare 로그인 화면이 뜹니다. 화면에서 [Allow(승인)] 버튼만 꾹 눌러주면 내 컴퓨터에 로그인 세션이 저장되면서 사이트 배포가 진행됩니다.
장점: 토큰을 따로 생성할 필요 없이 마우스 클릭 몇 번이면 끝나기 때문에, 계정 1개로 개인 블로그를 처음 시작할 때 가장 쉽고 직관적입니다.
아쉬운 점:
- Cloudflare 계정이 여러 개여서 번갈아 가며 배포해야 한다면 매번 브라우저 로그아웃과 로그인을 반복해야 합니다.
- 브라우저 창을 띄울 수 없는 원격 서버나 GitHub Actions 같은 자동화(CI/CD) 환경에서는 쓸 수 없습니다.

[방법 2] API 토큰 환경변수 기반 비대화형 자동 배포 (CI/CD 및 다계정 표준)

다계정 운영이나 배포를 무인 자동화할 때 사용하는 표준적인 방식입니다. 미리 발급받은 API 토큰을 환경변수로 넘겨주어 브라우저 팝업 없이 올립니다.

# 환경변수로 토큰과 계정 ID를 전달하며 배포 (Windows PowerShell 예시)
$env:CLOUDFLARE_API_TOKEN="발급받은_API_토큰"
$env:CLOUDFLARE_ACCOUNT_ID="32자리_계정_ID"
npx wrangler pages deploy .svelte-kit/cloudflare --project-name=my-blog-web --branch=production

어떻게 동작하나요?: Cloudflare 웹사이트에서 필요한 권한(Pages, D1, KV 등)을 가진 API 토큰을 미리 발급받아 환경변수나 설정 파일에 등록해 둡니다. 배포 명령을 실행할 때 이 토큰이 자동으로 주입되어 브라우저 창을 띄우지 않고 백그라운드에서 즉시 배포를 완료합니다.
장점:
- 인터넷 창이 번쩍거리며 열리지 않고 백그라운드에서 조용하고 빠르게 올라갑니다.
- 계정마다 서로 다른 토큰을 지정해 둘 수 있어서, 여러 블로그나 사이트를 운영할 때 세션 충돌 없이 완벽하게 독립 배포할 수 있습니다.
알아둘 점: 최초 1회 Cloudflare 대시보드에서 API 토큰을 발급받는 과정이 필요합니다.

💾 3. 글과 이미지는 어디에 저장될까요? (D1과 KV의 쉬운 개념)

웹사이트 화면만 있다고 블로그가 돌아가는 것은 아닙니다. 작성한 글과 업로드한 사진을 안전하게 보관할 공간이 필요합니다. Cloudflare는 이를 위해 2가지 편리한 저장 공간을 제공합니다.

Cloudflare D1 (글과 설정이 저장되는 관계형 데이터베이스):
- 엑셀 시트처럼 칸과 줄이 딱딱 맞춰진 표(Table) 형태의 관계형 데이터베이스(SQLite)입니다.
- "글 제목은 무엇인가?", "어느 카테고리에 속하는가?", "언제 작성되었는가?", "사이트 이름은 무엇인가?" 같은 정형화된 정보를 빠르고 안전하게 보관하고 검색합니다.
Workers KV (사진과 이미지를 저장하는 초고속 창고):
- 글에 첨부한 썸네일이나 이미지 파일처럼 용량이 크고 다양한 파일들을 전 세계 Cloudflare 창고에 넣어두고, 방문자가 요청할 때 1초도 안 걸려 즉시 꺼내 보여주는 역할을 합니다.

🧩 4. 스벨트킷 블로그 엔진의 실제 구성 엿보기

스벨트킷 블로그 엔진(SvelteKit Blog Engine)은 위에서 살펴본 Cloudflare의 장점들을 살려 아래와 같이 설계되어 있습니다.

왜 방문자용 블로그와 관리자 페이지를 2개로 따로 쪼갰을까요?

보통은 블로그와 관리자 화면을 하나의 프로그램으로 뭉쳐서 만듭니다. 하지만 스벨트킷 블로그 엔진은 이 둘을 완전히 독립된 2개의 Cloudflare Pages로 분리했습니다:

보안이 훨씬 안전해집니다: 관리자 로그인 창이나 글 작성/삭제 기능이 일반 방문자가 들어오는 블로그 주소에는 아예 들어있지 않습니다. 글을 쓰는 관리자 주소가 물리적으로 완전히 분리되어 있으므로 해킹 시도 자체를 원천 차단하기 좋습니다.
방문자 화면이 엄청 가볍고 빨라집니다: 글을 편집하는 복잡한 에디터 도구들이 방문자 페이지에는 1바이트도 포함되지 않기 때문에, 핸드폰이나 느린 인터넷 환경에서도 블로그 글이 시원시원하게 순식간에 뜹니다.

글을 쓰고 저장하는 과정

내가 관리자 화면에 들어가서 새 글을 쓰고 사진을 올리면, 그 내용은 Cloudflare의 **D1(데이터베이스)**과 **KV(사진 창고)**에 저장됩니다.
일반 독자가 블로그 웹사이트에 접속하면, 방금 저장된 D1과 KV에서 최신 글과 사진을 쏙 뽑아와서 예쁜 화면으로 보여줍니다.

🚀 5. 마치며

Cloudflare Pages는 예전처럼 복잡한 서버 명령어들을 외우거나 비싼 호스팅 비용을 낼 필요 없이, 누구나 가볍고 쾌적한 나만의 웹사이트를 운영할 수 있게 도와주는 훌륭한 기술입니다.

처음에는 **간편 브라우저 로그인(wrangler login)**으로 가볍게 블로그를 띄워보시고, 나중에 사이트 관리에 익숙해지거나 여러 개의 블로그를 운영하게 되면 API 토큰을 이용한 다계정 배포로 자연스럽게 확장해 보시는 것을 추천합니다.

Cloudflare Pages로 웹사이트를 배포하는 2가지 방법과 기본 원리