클라우드플레어 무료 호스팅으로 개인 사이트 운영

클라우드플레어 무료 플랜은 DNS, SSL 인증서, Workers 정적 자산, Access, D1 을 함께 제공합니다. graphite.is 는 이 다섯 가지로 블로그, 문서, 비공개 노트, 방문자 수를 운영합니다.

무료 플랜 한도

서비스	용도	무료 한도
DNS, SSL	도메인 연결, HTTPS 인증서	추가 요금 없음
Workers 정적 자산	HTML, 이미지, 스크립트 응답	요청 수 제한 없음. Worker 버전당 파일 20,000개, 파일당 25MiB
Workers 스크립트	301 이동, API	하루 100,000 요청, 요청당 CPU 10ms
D1	방문자 수 같은 작은 데이터	하루 읽기 500만 행, 쓰기 10만 행, 저장 5GB
Access	일부 경로 로그인	사용자 50명까지

정적 자산 요청은 Workers 스크립트 요청 한도에 들어가지 않습니다. 스크립트를 거치는 요청을 줄이는 설정은 Cloudflare Workers 로 Next.js 정적 배포의 요청 비용 항목에 있습니다.

도메인 연결

사용자 지정 도메인을 쓰려면 도메인을 클라우드플레어의 활성 영역(zone)으로 추가합니다.

클라우드플레어 대시보드에서 도메인을 추가합니다.
도메인을 산 등록 기관에서 네임서버를 클라우드플레어가 안내한 두 개로 바꿉니다.
대시보드에서 도메인이 활성 상태가 되면 wrangler.jsonc 의 routes 에 도메인을 custom_domain 으로 넣고 배포합니다.

배포하면 클라우드플레어가 DNS 레코드와 인증서를 만듭니다. 같은 이름의 CNAME 레코드가 이미 있으면 사용자 지정 도메인을 만들 수 없으므로 먼저 지웁니다.

예제: 도메인 두 개 연결

{
  "routes": [
    { "pattern": "graphite.is", "custom_domain": true },
    { "pattern": "www.graphite.is", "custom_domain": true }
  ]
}

일부 경로만 로그인 걸기

비공개 화면만 막으려면 Zero Trust 의 Access 에서 자체 호스팅 애플리케이션을 만듭니다. 애플리케이션 도메인 뒤에 막을 경로를 붙입니다.

항목	값
애플리케이션 도메인	`graphite.is/private`, `www.graphite.is/private`
정책	허용(Allow), 포함 조건은 본인 이메일 하나
로그인 방법	이메일 일회용 PIN

www 주소도 대상에 넣습니다. 이미지나 PDF 처럼 Worker 를 거치지 않는 파일은 www 주소에서도 바로 응답되기 때문입니다. 같은 이유로 *.workers.dev 주소와 미리보기 주소는 끕니다.

방문자 수 저장

정적 사이트에 방문자 수를 붙이려면 D1 데이터베이스를 만들어 Worker 에 연결합니다.

예제: 데이터베이스와 테이블

npx wrangler d1 create graphite-stats
npx wrangler d1 migrations apply graphite-stats --remote

CREATE TABLE IF NOT EXISTS daily (day TEXT PRIMARY KEY, visitors INTEGER NOT NULL DEFAULT 0);

예제: 하루 합계 올리기

await env.STATS.prepare(
  "INSERT INTO daily (day, visitors) VALUES (?, 1) ON CONFLICT(day) DO UPDATE SET visitors = visitors + 1",
)
  .bind(day)
  .run();

브라우저는 하루에 한 번만 /api/visit 을 보냅니다. 같은 날 다시 열면 조회만 합니다. 방문 한 번에 쓰기는 1행이라 하루 쓰기 한도 10만 행과 거리가 멉니다. 누적 합계는 날짜 행을 모두 읽으므로 1년 뒤에는 한 번에 약 370행을 읽습니다. 이때도 하루 1만 3천 번까지는 읽기 한도 안입니다.

실무 메모

graphite.is 를 운영하면서 정한 내용입니다.

이전 블로그 방문자 수 이어 받기: 티스토리 시절 누적 방문자 23,306명을 meta 테이블에 시작값으로 넣고 합계에 더합니다. 블로그를 옮겨도 바닥글의 누적 숫자가 0부터 시작하지 않습니다.
비공개 화면은 Access 하나로 관리: 방송대 노트와 학습 기록은 각각 경로 단위 Access 애플리케이션 뒤에 있습니다. 사이트 코드에는 로그인 기능이 없습니다.
workers.dev 주소 끄기: Access 대상 주소가 graphite.is 라서 *.workers.dev 주소의 같은 파일은 로그인 없이 열렸습니다. workers_dev 와 preview_urls 를 false 로 두어 해결했습니다.