런타임 MFA 스캐폴딩을 시작하며
개인 사이트를 핑계 삼아 런타임 마이크로프론트엔드를 직접 구성해봤다.
왜 런타임 통합인가
빌드 타임 통합(모노레포에서 그냥 import)은 이미 익숙하다. 그래서 다음 세 가지를 목표로 삼아 Vite + Module Federation 셸과 리모트를 구성했다.
- 셸(호스트)이 배포된 리모트의
remoteEntry.js를 브라우저에서 로드한다 react/react-dom을 singleton으로 공유한다- 리모트를 독립적으로 빌드하고 배포할 수 있다
구성했던 것
| 앱 | 역할 | 경로 |
|---|---|---|
| shell | MF 호스트 | / |
| retrospect | MF 리모트 | /remotes/retrospect/ |
| resume | 독립 Astro 사이트 | /resume/ |
실제로 동작했고, 네트워크 탭에서 셸이 런타임에 remoteEntry.js를
가져오는 것도 관찰했다. 이 코드는 mfa-runtime 브랜치에 남겨 두었다.
배운 것
동작하는 걸 만들고 나서야 보이는 게 있었다. 이 사이트는 단일 저장소에서 전체를 원자적으로 배포한다. 그래서 런타임 통합에 드는 비용(MF 런타임, shared 버전 계약, publicPath 규약)은 전부 내면서도, 정작 이득인 독립 배포는 회수할 수 없다.
결국 구조를 바꿨다. 그 과정은 다음 글에 적었다.