Cloudflare, 수직형 마이크로프론트엔드(VMFE) 템플릿 출시!
수직형 마이크로프론트엔드(Vertical Microfrontends)는 단일 도메인(Domain)에 여러 Cloudflare Worker를 매핑하여 팀별 독립적인 개발 및 배포를 지원
CSS View Transitions와 Speculation Rules을 활용하여 여러 Worker 간의 매끄러운 화면 전환 및 성능 향상
Cloudflare Worker Service Binding을 통해 라우터(Router) Worker가 다른 Worker를 호출하여 요청 라우팅(Request Routing) 및 HTML 재작성(HTML Rewriting) 수행
HTMLRewriter를 사용하여 절대 경로(Absolute Path)를 프록시된 경로로 수정하여 자산 로딩(Asset Loading) 문제 해결
Cloudflare Dashboard에서 제공하는 템플릿을 통해 수직형 마이크로프론트엔드(Vertical Microfrontends)를 쉽게 구축 가능
수직형 마이크로프론트엔드(VMFE) 아키텍처의 핵심
수직형 마이크로프론트엔드(VMFE)는 기존의 수평형 마이크로프론트엔드와 달리, 애플리케이션을 서브 경로(Sub-path) 기반으로 분할한다. 각 팀은 특정 경로(/blog, /docs 등)에 대한 전체 스택(Frontend, Backend)을 소유하며, Cloudflare Worker를 사용하여 독립적으로 개발 및 배포할 수 있다.
독립적인 개발 환경: 각 팀은 자신만의 프레임워크(Framework), 라이브러리(Library), CI/CD 파이프라인(CI/CD Pipeline)을 선택
단일 애플리케이션 경험: CSS View Transitions와 Speculation Rules을 활용하여 여러 Worker 간의 매끄러운 화면 전환을 구현
Cloudflare Worker Service Binding: 라우터(Router) Worker가 다른 Worker를 호출하여 요청 라우팅(Request Routing) 및 HTML 재작성(HTML Rewriting) 수행
이러한 아키텍처는 팀 간의 결합도(Coupling)를 줄이고 개발 생산성을 향상시키는 데 기여한다.
CSS View Transitions를 활용한 매끄러운 화면 전환
수직형 마이크로프론트엔드(VMFE)에서 여러 Worker 간의 화면 전환을 자연스럽게 만들기 위해 CSS View Transitions가 사용된다. 이 기술은 페이지 전환 시 DOM 요소(DOM Element)를 유지하고, 변경 사항을 애니메이션(Animation) 처리하여 사용자 경험을 향상시킨다.
::view-transition-old(root) 및 ::view-transition-new(root): 이전 및 다음 페이지의 루트 요소에 애니메이션 적용
view-transition-name: 특정 DOM 요소에 이름을 지정하여 전환 시 유지
애니메이션 효과: ease-in-out과 같은 CSS transition 속성을 사용하여 부드러운 전환 효과 구현
이러한 기술을 통해 여러 Worker에서 제공되는 페이지를 단일 애플리케이션(Single Application)처럼 보이게 만들 수 있다.
Speculation Rules를 통한 성능 최적화
성능 향상을 위해 Speculation Rules API를 활용하여 페이지 전환 속도를 개선한다. 이 API는 브라우저(Browser)에게 특정 규칙(Rule)을 정의하여, 사용자가 다음 페이지로 이동할 가능성이 높을 경우 미리 해당 페이지를 로드(Load)하도록 지시한다.
prefetch: 미리 로드할 URL(URL)을 지정
requires: 익명 클라이언트 IP(Anonymous Client IP)와 같은 사전 요구 사항 설정
referrer_policy: 리퍼러 정책(Referrer Policy) 설정
이러한 기능을 통해 다중 페이지 애플리케이션(Multi-page Application)의 페이지 전환을 SPA(Single-Page Application) 수준으로 빠르게 만들 수 있다.
Cloudflare Worker Service Binding을 이용한 요청 라우팅
Cloudflare Worker Service Binding은 라우터(Router) Worker가 다른 Worker를 호출할 수 있도록 해주는 기능이다. 이를 통해 수직형 마이크로프론트엔드(VMFE)에서 요청 라우팅(Request Routing)을 효율적으로 처리할 수 있다.
라우터(Router) Worker: 모든 요청을 받아 각 요청을 해당 Worker로 전달
Service Binding: 라우터(Router) Worker가 다른 Worker를 호출할 수 있도록 설정
wrangler.toml 설정: 각 Worker에 대한 바인딩(Binding) 정의
이러한 구조를 통해 각 Worker는 독립적으로 배포되고 관리되며, 라우터(Router) Worker는 단일 진입점(Single Entry Point) 역할을 수행한다.
HTMLRewriter를 활용한 자산 로딩 문제 해결
수직형 마이크로프론트엔드(VMFE)에서 HTML 응답(HTML Response) 내의 절대 경로(Absolute Path)로 인해 발생하는 자산 로딩(Asset Loading) 문제를 해결하기 위해 HTMLRewriter가 사용된다. 라우터(Router) Worker는 HTML 응답을 가로채어 절대 경로를 프록시된 경로로 수정한다.
절대 경로 문제: /docs/installation 페이지에서 이미지 로딩 실패
HTMLRewriter: HTML 응답을 파싱(Parsing)하고, 절대 경로를 프록시된 경로로 변경
smoothTransitions 및 preload 설정: 라우터(Router) Worker에서 CSS View Transitions 및 Speculation Rules 자동 적용
이러한 과정을 통해 각 Worker는 독립적으로 자산을 관리하면서도, 최종 사용자에게는 통합된 경험(Unified Experience)을 제공할 수 있다.
