피드로 돌아가기
Dev.toFrontend
원문 읽기
Astro 6와 Cloudflare Workers 기반 $0 비용의 11개국어 글로벌 사이트 구축
I built a 11-language B2B site on Astro 6 + Cloudflare Workers — here's what surprised me
AI 요약
Context
다국어 지원과 동적 OG 이미지 생성이 필요한 B2B 사이트 설계 단계에서 Node.js와 Edge Runtime 간의 환경 불일치로 인한 배포 오류 가능성 식별. 기존의 CMS나 DB 도입 시 발생하는 인프라 비용 및 관리 복잡도를 제거해야 하는 제약 조건 존재.
Technical Solution
- Astro 6의 workerd 통합 개발 환경 채택을 통한 로컬-운영 환경의 Runtime Parity 확보 및 배포 시 런타임 버그 제거
- Content Layer API와 Zod 스키마를 활용하여 250여 개의 MDX 파일을 단일 컬렉션으로 관리하는 정적 다국어 콘텐츠 구조 설계
- satori와 resvg-wasm을 조합하여 Edge에서 직접 PNG를 렌더링하는 Dynamic OG Image 파이프라인 구축
- 2.4MB의 대용량 WASM 바이너리를 번들링하지 않고 Public Asset으로 분리 후 런타임에 fetch하는 방식으로 Worker 스크립트 크기 제한 해결
- Pagefind를 통한 Build-time Full-text Search Indexing으로 백엔드 서버 없는 검색 기능 구현
- Zod 검증, Cloudflare Turnstile, Honeypot 필드를 결합한 3단계 스팸 방지 로직 및 Serverless Email 전송 구조 설계
실천 포인트
- Edge Runtime 배포 시 Node.js 전용 API(fs, process.env) 사용 여부 전수 조사 - 대용량 WASM 바이너리 사용 시 번들링 대신 Static Asset fetch 방식 검토 - 다국어 콘텐츠 관리 시 DB 대신 파일 기반의 Content Layer와 타입 검증 도구(Zod) 조합 고려 - Edge Function 내 폰트 렌더링 필요 시 CDN 캐싱을 통한 모듈 스코프 최적화 적용