[SaaS] Micro Frontends를 위해 Module Federation 적용하기

힐링페이퍼가 Module Federation을 도입해 모놀리식 프론트엔드를 도메인별 마이크로 프론트엔드로 분리하고 개별 배포 가능하게 구성

길범준2023년 8월 10일12분intermediate

AI 요약

Context

병원용 SaaS 제품(KOS)이 예약, 시술 관리, 수납, 환자 관리, 고객 관리, 데이터 분석 등 수많은 도메인을 포함하면서 고객사별 기능 파편화 요구(특정 기능 미포함, 버전 차별화 등)와 전체 시스템 복잡성 증가로 인한 의도치 않은 부작용 발생 위험 및 느린 빌드 시간 문제에 직면했다.

Technical Solution

마이크로 프론트엔드 아키텍처 도입: 거대한 모놀리스를 도메인별로 분리하여 각 팀이 독립적으로 개발 및 배포 가능하게 구성
자바스크립트 런타임 통합 기법 선택: 빌드 타임과 달리 런타임에 동적으로 애플리케이션을 로드하여 각 애플리케이션 개별 배포 지원
Module Federation(Webpack ModuleFederationPlugin) 적용: 원격 모듈을 remoteEntry.js를 통해 Host 애플리케이션이 런타임에 로드하도록 설정 (예: reservation@http://localhost:3001/remoteEntry.js)
expose-typed CLI 도구 개발: 원격 모듈을 내보내는 쪽에서 Promise 코드를 중앙 집중식으로 관리하여 중복 작성 제거
client-template 저장소 구성: 모든 신규 마이크로 프론트엔드 프로젝트가 Webpack 설정, CI/CD 설정, 환경 설정을 자동으로 받을 수 있도록 템플릿화

Key Takeaway

도메인 복잡도가 높은 거대 프론트엔드 프로젝트에서는 Module Federation을 통한 마이크로 프론트엔드 아키텍처가 각 도메인의 독립적 개발·배포와 고객별 기능 조립을 동시에 달성할 수 있다. 다만 런타임 통합의 특성상 중복 번들 로드와 동적 로드 실패 처리, 빌드 타임 타입 검사 한계를 함께 고려해야 한다.

실천 포인트

의료, 금융 같은 도메인이 많은 B2B SaaS를 개발할 때 Module Federation 기반 마이크로 프론트엔드를 도입하면, 도메인별 팀이 독립적으로 배포하면서도 고객사 요구에 맞춰 특정 기능을 제외하거나 버전을 선택해 최종 제품을 조립할 수 있다. 이를 위해서는 expose-typed CLI 같은 중앙 집중식 모듈 정의 도구와 client-template 같은 설정 템플릿을 함께 구축하면 신규 마이크로 프론트엔드 생성 시 설정 반복을 제거할 수 있다.

태그

#Webpack #Module Federation #SaaS Architecture #Micro Frontends

원문 읽기