Vercel 마이크로프론트엔드 공개 베타 — JSON 설정으로 앱 분할

Vercel이 마이크로프론트엔드(Microfrontends) 지원을 공개 베타로 출시했다. 큰 앱을 독립적인 단위로 분할해 팀별 병렬 개발, 빌드 시간 단축, 레거시 점진적 마이그레이션을 지원한다.

핵심 포인트@vercel/microfrontends 패키지와 microfrontends.json 파일로 분할 구성한다.

상세 정리

문제: 큰 앱을 여러 팀이 공유하면 배포 병목과 긴 빌드 시간이 발생한다.
설정 1 — 대시보드: Vercel 대시보드 Microfrontends 탭에서 그룹을 생성한다.
설정 2 — 패키지: 각 마이크로프론트엔드 프로젝트에 @vercel/microfrontends를 설치한다.
설정 3 — microfrontends.json: 기본 앱에 JSON 파일을 추가해 단위와 라우팅 경로를 정의한다.
JSON 예시: dashboard(기본), docs(/docs 및 하위 경로), marketing(/marketing)처럼 세 단위를 각 경로에 매핑한다.
빌드 최적화: 변경된 마이크로프론트엔드만 재빌드되어 전체 빌드 시간이 단축된다.
레거시 지원: 모놀리식 앱을 한 번에 분리하지 않고 점진적으로 전환 가능하다.
내비게이션 최적화: 프리페칭·프리렌더링으로 단위 간 페이지 전환이 빠르다.
개발 도구: Vercel Toolbar에서 각 마이크로프론트엔드를 독립적으로 반복·테스트 가능하다.

왜 읽나여러 팀이 하나의 프론트엔드를 공유하면서 배포 병목과 긴 빌드 시간을 겪는 프론트엔드 아키텍트와 팀 리드에게 유용하다.

Vercel Blog 블로그

원문은 여기서 이어서 읽을 수 있어요

읽음 (0)

이 글과 비슷한