[마이크로프론트엔드] Micro Application Integration

마이크로 애플리케이션의 통합 방식

1. 빌드 타임 통합 방식

2. 런 타임 통합 방식

3. 서버 사이드 통합 방식

빌드 타임 통합

• 각 마이크로 앱을 npm 모듈로 만들어서 컨테이너 앱에서 install하여 사용하는 방식

• 빌드 타임에 최종적으로 조합이 되어야 하므로 기능은 독립적으로 개발할 수 있으나 배포를 분리할 수 없다.

• 제품의 각 서비스의 변경이 발생하면 모든 APP을 다시 컴파일하고 릴리즈해야함

• 마이크로 앱을 패키지로 배포하고 컨테이너 APP에서 해당 패키지를 모두 library dependency로 포함시키는 방식

런 타임 통합

1. iframe을 통한 통합 (구 네이버)

   1. 표준 html 명세에 있는 iframe 태그를 통한 통합

   2. 가장 전통적이며 널리 알려진 방식

   3. 특정 외부 URL로 배포해놓은 UI의 일부를 HTML 째로 기존 앱에 넣어 쉽게 통합이 가능하다.

   4. Iframe injection과 같은 보안, 안정성 이슈가 있다.

   5. Iframe에 통합된 앱과 외부 사이에 통신 인터페이스를 구현해야 한다.(window.postMessage(), EventListener와 같은 Web API)

   6. 애플리케이션 간의 통신에 제약이 있고, 프레임마다 히스토리 객체가 따로 생성되어 깔끔하게 하나처럼 띄우기가 어렵다.

2. 웹 컴포넌트를 통한 통합

   1. 비교적 최신 web 스펙이자 iframe처럼 보안 문제가 없다.

   2. 웹 컴포넌트를 개발하는 방식은 Vue나 React와 같은 라이브러리의 컴포넌트를 개발하는 방식과는 달라서 개발 방식이나 관리 방식은 조금 다를 수 있다.

   3. 마이크로 앱을 하나의 custom element로 만들어 컨테이너 앱에서 런타임 환경에 주입한다.

   4. 마이크로 앱을 인젝션할 때, object 형식의 데이터를 넘겨야 하는 경우 string 형식으로만 데이터를 전달해야하는 제약 사항이 있다

      1. HTML의 형태로 들어가기 때문에 속성값을 통해서만 데이터를 공유받는다

3. 런 타임 번들 통합

   1. 앱의 최상단에서 분리된 번들을 다운로드 -> 번들은 사전에 규정한 초기화 메시지를 통해 각 번들의 상태를 등록 -> 최상단에 라우터를 만들어 라우트에 따라 각 번들을 동적으로 렌더링

   2. 배포 단위별 공유되는 자원들에 대한 관리는 앱 안에서 자연스럽게 가능

   3. Webpack 5의 module federation 기능

      1. 서드 파티가 아닌 웹팩의 내장 기능이라는 장점

      2. 단순한 웹팩 설정만으로도 번들 통합이 가능

      3. 런타임에 통합된 각 애플리케이션들이 서로 코드를 공유

서버 사이드 통합

• 각 앱에 맞는 HTML를 서빙하는 서버를 뒤에 두고(특정 페이지 단위의 앱을 가지고 있는 nuxtjs 앱 서버를 배포해놓고 - 서버 사이드 렌더링), CloudFront 같은 인프라 단에서 특정 앱에 해당하는 basePath로 요청이 들어왔을 때 해당 앱이 응답하는 HTML과 JS를 보내주어 그리는 방식

• nginx 웹서버를 통해서 페이지를 url에 매칭하여 html을 서버로 전송한 후 조합해서 화면에 뿌려주는 방법도 있다

• 클라이언트 렌더링은 클라이언트 단에서 html과 js를 만들기 때문에 seo가 안되고 페이지 이동 시 로딩이 걸리게 된다.

• 각 애플리케이션을 완전하게 분리하여 개발하고 배포할 수 있다.

• 단점 : 앱 단위 이상으로 배포를 쪼개는 것이기 때문에, 앞서 말한 대로 UI 컴포넌트 단위로는 쪼갤 수 없음