🚀 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 토큰을 이용한 다계정 배포로 자연스럽게 확장해 보시는 것을 추천합니다.
댓글 0개
댓글을 작성하려면 로그인이 필요합니다.