버전 관리, 배포 및 오케스트레이션

Module Federation의 가장 큰 가치는 독립 배포입니다. 한 팀이 호스트 팀과 조정하거나 호스트를 다시 배포하지 않고 원격 애플리케이션을 업데이트하고, 테스트하고, 배포할 수 있습니다. 호스트는 다음에 원격 주소에서 remoteEntry.js를 로드할 때 변경 사항을 자동으로 반영합니다.

모든 배포마다 바뀌는 고정 주소에서 remoteEntry.js를 제공하는 대신, 주소에 콘텐츠 해시를 포함하십시오: remoteEntry.[hash].js. 이렇게 하면 각 배포가 변경 불가능해집니다. 이전 주소는 계속 작동하고, 호스트가 새 배포로 업데이트되면 새 해시를 참조합니다. 변경 불가능한 주소를 사용하면 CDN에서 적극적인 캐싱을 적용할 수 있습니다.

호스트는 주소를 통해 원격 애플리케이션을 검색하므로 인프라 수준에서 A/B 테스트를 구현할 수 있습니다. 사용자마다 서로 다른 remoteEntry.js 주소를 제공하여 서로 다른 원격 버전을 가리키게 하는 방식입니다. 이를 통해 애플리케이션 코드에 기능 플래그 로직을 넣지 않고도 마이크로 프런트엔드에 진정한 카나리 배포를 적용할 수 있습니다.

웹팩 구성에 원격 주소를 하드코딩하는 대신, 호스트가 시작할 때 JSON 매니페스트를 가져옵니다: GET /federation-manifest.json returns { buttonApp: 'https://cdn.example.com/button/remoteEntry.abc123.js' }. 호스트가 사용할 버전을 변경하려면 매니페스트만 업데이트하면 되며, 호스트를 다시 빌드할 필요가 없습니다.

원격 배포에서 회귀가 발생하면 즉시 롤백할 수 있습니다. federation-manifest.json을 업데이트하여 이전 remoteEntry.js 주소를 가리키게 하십시오. 그러면 다음 요청 주기부터 호스트가 이전 버전을 즉시 사용하기 시작합니다. 호스트를 다시 빌드하거나 롤백할 필요가 없고, 조정도 필요하지 않습니다.

모듈 페더레이션 2.0(@module-federation/enhanced 패키지)은 여러 가지 중요한 개선 사항을 제공합니다. 원격 매니페스트에서 형식을 자동으로 생성하여 TypeScript 지원을 강화하고, 사용자 지정 로드 로직을 위한 런타임 플러그인 API를 제공하며, 복잡한 버전 협상 상황에 대응하도록 공유 범위 관리를 개선합니다.

vite-plugin-federation 패키지는 Vite 기반 프로젝트에 모듈 페더레이션을 제공하며, Webpack의 ModuleFederationPlugin과 유사한 구성 API를 사용합니다. Vite 원격 모듈과 Webpack 호스트를 모두 지원하고 그 반대 방향도 지원하므로, 팀은 모듈 페더레이션을 포기하지 않고 Vite로 점진적으로 이전할 수 있습니다.

고도로 동적인 아키텍처에서는 원격 URL을 런타임에 완전히 구성할 수 있습니다. 예를 들어 import(remoteRegistry[featureName])과 같이 사용하며, remoteRegistry는 API 호출로 채워집니다. 이를 통해 셸 애플리케이션을 다시 빌드하지 않고도 새 마이크로 프런트엔드를 추가할 수 있는 플러그인과 같은 아키텍처를 구현할 수 있습니다.

셸 애플리케이션의 주된 역할은 조정입니다. 원격 매니페스트를 읽고, Module Federation의 런타임을 초기화하고, 이름이 지정된 경로에 원격 모듈을 등록하며, 현재 URL에 따라 적절한 원격 모듈을 렌더링합니다. 셸은 의도적으로 얇게 유지됩니다. 무엇을 로드할지는 알지만 어떻게 렌더링할지는 알지 못합니다.

원격 모듈 로드에 성능 모니터링을 추가하십시오. 원격 가져오기를 try/catch로 감싸 로드 실패를 우아하게 처리하고(원격 모듈을 사용할 수 없으면 대체 UI를 렌더링), remoteEntry.js와 컴포넌트 청크를 다운로드하는 데 걸리는 시간을 측정하며, 원격 로드 시간이 임계값을 초과하면 경고하십시오(CDN 문제를 나타낼 수 있습니다).

성숙한 모듈 페더레이션 CI/CD 파이프라인은 다음과 같이 진행됩니다. 원격 팀이 커밋 → CI가 원격 모듈을 빌드 → 변경할 수 없는 remoteEntry.[hash].js를 CDN에 업로드 → federation-manifest.json을 업데이트 → 호스트가 다음 사용자 요청에서 새 원격 모듈을 가져옵니다. 각 단계가 자동화되므로 호스트 팀은 원격 배포에 전혀 관여하지 않습니다.

잘못된 모듈 페더레이션 원격 배포를 가장 빠르게 되돌리는 방법은 무엇일까요?

모듈 페더레이션을 사용하면 진정한 독립 배포가 가능합니다. 원격 모듈은 호스트를 다시 빌드하지 않고 배포되며, 호스트는 새 버전을 자동으로 검색합니다. 변경 불가능한 CDN 캐싱을 위해 콘텐츠 해시가 포함된 원격 URL을 사용하고, 유연한 버전 라우팅과 즉각적인 되돌리기를 위해 동적 매니페스트를 사용하십시오. vite-plugin-federation은 이러한 기능을 Vite에 제공하며, 동적 원격 가져오기를 사용하면 플러그인과 같은 아키텍처를 구현할 수 있습니다. 셸은 원격 모듈 로드를 조정하면서 의도적으로 얇은 구조를 유지합니다.