Void를 통한 Angular SPA의 Cloudflare Edge 네트워크 초고속 배포

Context

Angular CLI의 독자적인 Build Pipeline으로 인한 Vite 기반 플랫폼과의 통합 난이도 존재. 기존 Cloudflare 배포 시 계정 생성 및 Wrangler 설정 등 인프라 구성의 복잡도로 인한 배포 병목 발생.

Technical Solution

• Angular CLI Build Output(dist/browser)을 직접 타겟팅하는 void.json 설정 파일 기반의 추상화 계층 도입
• appType: spa 설정을 통한 Non-file Path의 index.html Fallback 처리로 Angular Router 호환성 확보
• Cloudflare Edge Network 상의 Routing Block 정의를 통한 Zero-latency Redirect 및 Custom Header 제어
• GitHub Actions 워크플로우 자동화를 통한 VOID_TOKEN 기반의 Non-interactive CI/CD 파이프라인 구축
• SSR/SSG 제외 및 Static SPA 모드 강제를 통한 빌드 복잡도 제거와 배포 단순화 설계

Key Takeaway

플랫폼 전용 설정 파일(void.json)을 통해 프레임워크의 Build Pipeline을 훼손하지 않고 인프라 설정을 분리하는 추상화 전략의 유효성 확인.