Skip to content

Latest commit

 

History

History
53 lines (34 loc) · 1.66 KB

README.md

File metadata and controls

53 lines (34 loc) · 1.66 KB
Raw

Module Federation을 이용한 MSA

구현 동기

  • 점점 커지는 프로젝트를 나눠서 관리하고 싶은 니즈
  • 하지만 프로젝트를 분리하게 되면 프로젝트 간의 상태를 공유할 수 없음
  • Webpack 5에서 제공하는 Module Federation으로 해결하면 어떨까?

패키지

@module-federation/store

  • recoil을 사용해서 구현
  • 서로 다른 앱들이 동일한 atom을 참조해서 전역상태를 공유할 수 있도록 모듈화시킨 패키지

@module-federation/container

  • 여러 앱들을 하나로 모아서 호출해주는 컨테이너 역할

@module-federation/app1

  • 앱 1

@module-federation/app2

  • 앱 2

구현

  • container의 local state를 app1과 app2이 props로 주입받아서 사용 가능
  • store에서 관리되는 global state를 container, app1, app2가 모두 공유하여 사용 가능
  • CopyWebpackPlugin을 통해 app1과 app2의 빌드 결과물을 container/build에서 관리함으로써 싱글 도메인으로 배포 가능하도록 구현 (app1과 app2를 호스팅하기 위한 각각 별도의 도메인 없어도 됨)
  • 그리고 이 과정에서 topological build를 위해 Turborepo 도입

Getting Started

>>> development mode
terminal0: $ yarn
terminal1: $ yarn workspace @module-federation/container start
terminal2: $ yarn workspace @module-federation/app1 start
terminal3: $ yarn workspace @module-federation/app2 start
open http://localhost:8000

>>> production mode
$ yarn build