Cloudflare Pages에 Astro 블로그 5분 만에 배포하기

왜 Cloudflare Pages인가?

Astro 블로그를 배포할 때 선택지가 많습니다. Vercel, Netlify, GitHub Pages 등이 있지만, 저는 Cloudflare Pages를 선택했습니다.

서비스	무료 빌드	CDN	커스텀 도메인	엣지 기능
Cloudflare Pages	500회/월	전 세계	무료	Workers 연동
Vercel	100GB/월	전 세계	무료	Edge Functions
Netlify	300분/월	전 세계	무료	Edge Functions
GitHub Pages	무제한	제한적	무료	없음

Cloudflare Pages는 특히 한국 사용자에게 빠른 응답 속도를 제공합니다. Cloudflare의 엣지 서버가 한국에도 있기 때문입니다.

1단계: Astro 프로젝트 준비

프로젝트 생성

pnpm create astro@latest my-blog
cd my-blog
pnpm install

Cloudflare Pages 어댑터 설치

정적 사이트라면 어댑터 없이도 배포 가능하지만, SSR이나 API 라우트가 필요하다면 어댑터를 설치합니다.

pnpm add @astrojs/cloudflare

// astro.config.mjs
import { defineConfig } from 'astro/config';
import cloudflare from '@astrojs/cloudflare';

export default defineConfig({
  output: 'static', // 정적 사이트
  // SSR 사용 시: output: 'server', adapter: cloudflare()
});

빌드 테스트

pnpm build
# dist/ 폴더에 빌드 결과물 생성 확인

2단계: GitHub 저장소 생성

git init
git add .
git commit -m "Initial commit: Astro blog"
git branch -M main
git remote add origin https://github.com/username/my-blog.git
git push -u origin main

3단계: Cloudflare Pages 설정

Cloudflare 대시보드 접속

1. dash.cloudflare.com 접속
2. 좌측 메뉴에서 Pages 클릭
3. 프로젝트 만들기 클릭

GitHub 연동

1. Git에 연결 탭 선택
2. GitHub에 연결 클릭
3. 저장소 권한 허용
4. 배포할 저장소 선택

빌드 설정

설정 항목	값
프레임워크 프리셋	Astro
빌드 명령어	pnpm build
빌드 출력 디렉터리	dist
루트 디렉터리	(비워두기)

빌드 명령어: pnpm build
빌드 출력 디렉터리: dist

환경 변수 설정

필요한 경우 환경 변수 탭에서 추가합니다.

NODE_VERSION = 20

4단계: 배포 확인

설정 완료 후 저장 및 배포 클릭하면 자동으로 빌드가 시작됩니다.

빌드 로그를 실시간으로 확인할 수 있으며, 성공하면 *.pages.dev 도메인으로 접근 가능합니다.

5단계: 커스텀 도메인 연결

DNS 설정

Cloudflare에서 도메인을 관리하고 있다면 자동으로 설정됩니다.

1. Pages 프로젝트 → 사용자 지정 도메인 탭
2. 사용자 지정 도메인 설정 클릭
3. 도메인 입력 (예: blog.example.com)
4. 계속 클릭

HTTPS 자동 설정

Cloudflare Pages는 커스텀 도메인에 대해 SSL/TLS 인증서를 자동으로 발급하고 갱신합니다. 별도 설정 불필요!

자동 배포 설정

GitHub에 push할 때마다 자동으로 배포됩니다.

# 새 포스트 작성 후
git add .
git commit -m "Add new blog post"
git push origin main
# → Cloudflare Pages가 자동으로 빌드 & 배포

Preview 배포

PR을 생성하면 자동으로 Preview URL이 생성됩니다.

PR #5 → https://5.my-blog.pages.dev

성능 최적화 팁

캐시 설정

// astro.config.mjs
export default defineConfig({
  build: {
    assets: '_astro', // 정적 에셋 폴더
  },
});

Cloudflare Pages는 _astro/ 폴더의 파일에 자동으로 긴 캐시를 설정합니다.

Web Analytics

Cloudflare Web Analytics를 무료로 사용할 수 있습니다.

<!-- BaseLayout.astro -->
<script defer src='https://static.cloudflareinsights.com/beacon.min.js'
  data-cf-beacon='{"token": "YOUR_TOKEN"}'></script>

마무리

Cloudflare Pages는 설정이 간단하고 성능이 뛰어납니다. 특히 한국 사용자를 대상으로 하는 블로그라면 강력히 추천합니다.

이 블로그(koreastreamer.com)도 Cloudflare Pages로 배포되어 있습니다.

���� ��

• ���� ����Ʈ 1
• ���� ����Ʈ 2