정적 블로그에서 실시간 동적 웹사이트로의 진화

Astro와 Cloudflare Pages로 만든 기본 사이트는 고속의 정적(Static) 블로그입니다. 하지만 댓글, 방명록, 조회수 카운터, 회원가입/로그인처럼 사용자와 주고받는 동적 기능이 필요해지면 DB(데이터베이스) 연동이 필수적입니다.

이번 가이드에서는 서버 비용 0원을 유지하면서 Astro 사이트에 DB를 연결하고 풀스택 동적 웹사이트로 확장하는 방법을 정리합니다.

💡 서버비 0원 DB 솔루션 2가지 비교

비교 항목	Cloudflare D1 (⭐ 추천)	Supabase (PostgreSQL)
특징	Cloudflare 원native 서버리스 SQL	PostgreSQL 기반 오픈소스 BaaS
무료 혜택	하루 500만 회 읽기 / 10만 회 쓰기 무료	500MB DB 저장 공간 무료
주요 기능	댓글, 조회수, 게시판, 방명록	회원가입/로그인(OAuth), 스토리지
연동 난이도	매우 쉬움 (클릭 1번으로 바인딩)	쉬움 (SDK 패키지 설치)

🛠️ DB 기반 동적 웹사이트 구축 4단계

1단계: Astro를 SSR(Server-Side Rendering) 모드로 전환

정적 사이트에서 실시간 서버 API를 처리할 수 있도록 Cloudflare 어댑터를 추가합니다.

npx astro add cloudflare

설치가 완료되면 astro.config.mjs 파일에 output: 'server' 옵션이 자동 적용됩니다.

2단계: Cloudflare D1 데이터베이스 생성

Cloudflare 대시보드로 들어가 D1 데이터베이스를 생성합니다.

Cloudflare 대시보드 $\rightarrow$ Storage & Databases $\rightarrow$ D1 선택
Create Database 클릭 후 이름 입력 (예: my-blog-db)
내 Pages 프로젝트 설정에서 D1 데이터베이스를 바인딩(Binding) 연결합니다.

3단계: 테이블 생성 SQL 실행

댓글이나 방명록을 저장할 테이블을 만듭니다.

CREATE TABLE comments (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  author TEXT NOT NULL,
  content TEXT NOT NULL,
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

4단계: 실시간 API 엔드포인트 및 UI 연결

src/pages/api/comments.ts 파일에 데이터를 저장하고 읽어오는 API 서버 코드를 작성합니다:

// 댓글 목록 조회 API
export async function GET({ locals }) {
  const { DB } = locals.runtime.env;
  const { results } = await DB.prepare("SELECT * FROM comments ORDER BY created_at DESC").all();
  
  return new Response(JSON.stringify(results), {
    headers: { "Content-Type": "application/json" }
  });
}

// 댓글 작성 API
export async function POST({ request, locals }) {
  const { DB } = locals.runtime.env;
  const data = await request.json();
  
  await DB.prepare("INSERT INTO comments (author, content) VALUES (?, ?)")
          .bind(data.author, data.content)
          .run();
          
  return new Response(JSON.stringify({ success: true }));
}

🚀 결론

Astro에 Cloudflare D1이나 Supabase를 연결하면 무료로 강력한 풀스택 웹 애플리케이션을 구축할 수 있습니다.

단순 포트폴리오/블로그를 넘어 커뮤니티, 방명록, 서비스 웹앱으로 언제든 무한히 확장해 보세요!

Astro + Cloudflare에 DB(데이터베이스) 연동하여 동적 웹사이트 구축하기