CDN Edge Cache 도입으로 로컬 터널링 로딩 속도 3~8초에서 50ms로 단축

Context

표준 Localhost Tunnel은 모든 요청을 개발자 PC로 포워딩하는 구조로 인해 거주지 업로드 대역폭(20-50 Mbps)에 의한 병목 발생. 특히 4~15MB 규모의 Next.js/React 정적 자산 전송 시 네트워크 물리적 한계로 인한 심각한 레이턴시 유발.

Technical Solution

• CDN Reverse Proxy 구조를 터널 전면에 배치하여 정적 자산을 Edge Node에 캐싱하는 설계 채택
• 정적 자산(JS, CSS, Fonts)과 동적 API/WebSocket 요청을 분리하여 처리하는 하이브리드 라우팅 구현
• Cache-Control: public, max-age=31536000, immutable 헤더 설정을 통해 Edge Cache Hit 비율 극대화
• Cloudflare Tunnel의 post-quantum 암호화 연결을 통한 보안성 확보 및 Inbound 포트 개방 제거
• WebSocket 연결은 캐시를 우회하게 설계하여 Hot Module Reloading(HMR) 기능 유지