MF 이모저모

• 모듈페레이션은 alpollo GraphQL 의 federation 개념을 js에 적용한 것

  • alollo GraphQL의 federation 이란?
  • 여러 GrapqhQL 마이크로서비스의 스키마를 조합하여 하나의 큰 GraphQL 스키마로 만드는 방식

• 모듈 페더레이션은 전방향적 성격을 가진다. Module Federation 전방향 참조(omnidirectional) 가능한 이유

  • 모듈 페더레이션 설정값의 remote와 expose 속성은 배타적이지 않다.
  • 즉, 하나의 마이크로앱은 컨테이너가 될 수 있고, 컨테이너 레퍼런스를 가질 수도 있다.

모듈페더레이션의 공유 의존성(shared dependency)은 뭘까?

용어 정리

• 로컬모듈

  • 단일 웹팩 빌드에 포함되는 모듈. 서로 다른 웹팩 빌드 결과물은 서로 다른 로컬 모듈이다. 로컬 모듈은 단일 빌드 안에서만 로딩 가능

• 원격모듈

  • 다른 웹팩 빌드에서 만든 모듈을 대상으로 런타임에 로딩 할 수 있는 모듈
  • 즉 A빌드와 B빌드의 결과물은 서로 원격 모듈이 될 수 있다.
  • 각 빌드는 개별 서버에 배포될 수 있으며, 런타임에 동적 import 하듯이 원격 모듈을 로딩한다.

• 컨테이너

  • 각각의 빌드를 가리킴. ‘컨테이너’는 결국 다른 모듈에서 로드 가능한 단위 (=원격 모듈이라고도 부를 수 있음)
  • 하나의 빌드가 하나의 웹 어플리케이션.
  • A컨테이너는 B컨테이너의 원격 모듈을 로딩할 수 있고, 역방향 참조, 순환참조도 가능

• 컨테이너 레퍼런스

  • 특정 앱에서 다른 마이크로 앱을 Import할때 만들어지는 참조 관계입니다. A 앱에서 B 앱을 import해서 쓰고 있다면 “A앱은 B앱에 대한 Container Refrences가 존재한다.”고 말할 수 있습니다.
  • • 1개 이상의 Container를 import하고 있는 Module Federation Plugin의 단위입니다.
  • • Remote App을 import한다는 관점에서 Host App이라고 부를 수도 있습니다.

  new ModuleFederationPlugin({
      name: 'microAppA',
      // remotes 설정을 가지고 있다면 conatiner reference를 포함한다.
      remotes: {
         microAppB: 'microAppB@<http://localhost:3002/remoteEntry.js>',
      },
    }),
  

• Module Federation - Share Scope

  • 공유되는 의존성이 유효한 하나의 스코프
  • 마이크로 앱간 의존성 공유를 할 때 공유 의존성에 대한 설정/ 버전을 체크하고 이를 설정한 바에 맞게 각 마이크로 앱에서 로드해서 쓰는 방식을 결정함