Vercel Cloudflare 마이그레이션 + admin dashboard + AI 뉴스 자동화

Source: Dev.to

Vercel → Cloudflare 마이그레이션

Vercel의 cron은 Pro 플랜이 필요합니다. 하루에 두 번 AI 뉴스를 생성해야 했지만 무료 티어에서는 cron을 사용할 수 없었으므로 사이트를 Cloudflare Pages로 옮기고 cron 작업을 GitHub Actions로 분리했습니다.

마이그레이션 체크리스트

• astro.config.mjs에서 어댑터를 @astrojs/cloudflare로 변경
• wrangler.toml 추가
• Cloudflare 대시보드에 환경 변수를 등록
• 프리뷰 빌드 비활성화 (메인 브랜치만 배포)
• 세 개의 GitHub Actions cron 작업 설정

# .github/workflows/cron-ai-news.yml
on:
  schedule:
    - cron: '0 0,12 * * *'  # UTC 0,12 = KST 9 AM, 9 PM

Cloudflare Pages는 빠른 빌드와 관대한 무료 티어를 제공하지만, Node.js 내장 모듈(node: 등)에 의존하는 SDK는 작동하지 않습니다.

AI 뉴스 자동 생성

하루에 두 번(KST 9 AM, 9 PM) AI 뉴스를 자동으로 생성합니다.

소스 수집

AI 관련 뉴스를 위해 다섯 가지 소스를 크롤링합니다:

• Google Custom Search – “AI” 키워드 검색
• Hacker News – /topstories API
• Reddit – /r/artificial, /r/MachineLearning의 핫 포스트
• X (Twitter) – AI 트렌딩 토픽
• GitHub Trending – 오늘의 트렌딩 레포지토리

Claude를 이용한 포스트 생성

수집된 뉴스는 Claude Haiku에 전달되어 주제별로 개별 심층 포스트를 생성합니다. 초기 워크플로우는 모델(Claude, GPT, Gemini)별로 포스트를 묶었지만, 이후 주제 기반 개별 포스트로 전환했습니다.

모델을 Sonnet 4에서 Haiku 4.5로 변경했으며, 하루에 20개 이상의 포스트를 생성하면서 비용 문제가 제기되었지만 품질 차이는 미미했습니다.

관리자 대시보드

사이트 운영을 한눈에 모니터링할 수 있는 /admin 페이지를 구축했습니다.

탭

• Overview: 방문자 히트맵, 통계 카드, 프로젝트별 빌드 로그, 최고 참여 콘텐츠
• Quick Actions: AI 뉴스 생성, 사이트 재빌드, Dev.to 동기화
• Content: 타입 필터가 가능한 전체 콘텐츠 리스트
• Comments: 삭제 기능이 포함된 댓글 관리

방문자 히트맵

Upstash Redis에서 최근 90일 데이터를 가져와 표시하는 GitHub‑contributions‑style 캘린더 히트맵입니다. 월 라벨, 일 라벨, 호버 툴팁을 포함합니다.

Dev.to 교차 포스팅

GitHub Actions 워크플로우가 새로운 콘텐츠를 자동으로 Dev.to에 게시합니다.

작동 방식

1. src/content/ 하위 디렉터리의 변경 감지.
2. 기존 기사들을 조회하기 위해 Dev.to API 호출(중복 제거는 canonical_url 기준).
3. POST /api/articles를 통해 새로운 포스트만 게시.
4. devto-migration 태그가 붙은 포스트는 제외(Dev.to에서 유래).
5. 3초 간격으로 레이트 리밋을 관리.

주의사항: Cloudflare Workers에서 SDK 사용

@anthropic-ai/sdk를 Cloudflare Workers에 import하면 node:events 모듈 오류가 발생합니다. Workers는 V8 isolate에서 실행되며 Node.js가 아니기 때문입니다.

해결책: SDK 대신 fetch를 직접 사용합니다.

요약

• Cloudflare Pages + GitHub Actions cron을 사용하면 Vercel Pro 플랜 없이도 스케줄링이 가능합니다.
• AI 뉴스 자동화: 5‑소스 크롤링 → Claude Haiku 포스트 생성 → 하루 두 번 게시.
• 관리자 대시보드: SSR API + 클라이언트‑사이드 렌더링으로 빠르게 구축.
• Cloudflare Workers에서는 SDK 대신 fetch 사용; Node.js 의존성이 있는 라이브러리는 작동하지 않습니다.

📌 원본은 Jidong Lab에서 처음 공개되었습니다.

더 많은 AI 뉴스와 개발 로그 → jidonglab.com