Vercel 마이크로프론트엔드
대규모 애플리케이션을 독립적으로 배포 가능한 단위로 분할하여 하나의 통합된 앱처럼 렌더링합니다. Vercel은 자체 글로벌 네트워크에서 microfrontends.json을 사용하여 라우팅을 처리합니다.
핵심 개념: 기본 앱(microfrontends.json 소유, 일치하지 않는 요청 처리) · 하위 앱(routing 경로 패턴 보유) · 에셋 접두사(정적 에셋 충돌 방지) · 독립 배포
프레임워크: Next.js(App Router + Pages Router), SvelteKit, React Router, Vite — 모두 @vercel/microfrontends를 통해 지원
CLI (vercel microfrontends / vercel mf):
create-group— 새 그룹 생성; 기본 대화형,--non-interactive옵션으로 완전 비대화형 가능(옵션:--name,--project(반복 가능),--default-app,--default-route,--project-default-route(반복 가능, 형식:<project>=<route>, 비대화형 모드에서 기본이 아닌 각 프로젝트에 필수),--yes(확인 프롬프트 건너뛰기)); 참고:--non-interactive는 프로젝트 추가 시 무료 티어 한도를 초과할 경우 차단됨 — 사용자는 대화형으로 요금 변경을 확인해야 함add-to-group— 현재 프로젝트를 기존 그룹에 추가; 대화형 터미널 필요(옵션:--group,--default-route)remove-from-group— 현재 프로젝트를 그룹에서 제거; 대화형 터미널 필요(옵션:--yes는 프로젝트 링크 프롬프트만 건너뜀)delete-group— 그룹 및 모든 설정을 영구 삭제; 대화형 터미널 필요(옵션:--group으로 그룹 사전 선택)inspect-group— 그룹 메타데이터(프로젝트 이름, 프레임워크, Git 저장소, 루트 디렉터리) 검색; 자동화 설정에 유용(옵션:--group,--format=json,--config-file-name)pull— 로컬 개발을 위해 원격microfrontends.json가져오기(옵션:--dpl)microfrontends proxy— 로컬 개발 프록시 ·microfrontends port— 자동 할당된 포트 출력
상세 정보 찾기
이 스킬은 references/ 디렉토리에 상세 참조 문서를 포함하고 있습니다. 모든 참조 문서를 미리 읽지 마십시오. 대신 사용자가 특정 주제를 물을 때 관련 파일을 검색하거나 grep하십시오.
| 주제 | 참조 파일 |
|---|---|
시작하기, 빠른 시작, 프레임워크 설정, microfrontends.json 스키마, 필드, 명명 규칙, 예제 | references/configuration.md |
| 경로 표현식, 에셋 접두사, 플래그 기반 라우팅, 미들웨어 | references/path-routing.md |
| 로컬 프록시 설정, 폴리레포 구성, Turborepo, 포트, 배포 보호 | references/local-development.md |
그룹 검사(inspect-group), 프로젝트 추가/제거, 폴백 환경, 내비게이션, 관찰 가능성 | references/managing-microfrontends.md |
테스트 유틸리티(validateMiddlewareConfig, validateRouting 등), 디버그 헤더, 일반적인 문제 | references/troubleshooting.md |
| 배포 보호, Vercel 방화벽, 마이크로프론트엔드용 WAF 규칙 | references/security.md |
사용자가 특정 주제에 대해 질문할 때, 모든 참조 문서를 컨텍스트에 로드하지 않고 관련 참조 파일을 grep하거나 검색하여 답변을 찾으십시오.