Vue3-WebPack5 Module Federation (With Hot Reload)

God Beom·2022년 4월 4일
2

micro-frontend

목록 보기
4/5
post-thumbnail

webpack5 module Federation

2020년 10월에 릴리즈한 webpack5 스펙에 module Federation이 추가 되었다.
해당 기능을 한줄로 요약하면 "프레임워크를 관통하여 webpack으로 번들링된 모든 요소들이 런타임에서 조합될 수 있도록" 하는 기능을 제공한다. 때마침 현재 재직중인 회사에서 5개의 웹 서비스를 하나의 사이트로 통합하고 추후 N개의 서비스가 추가 될 수 있어야 하는 사이트 통합 프로젝트가 있어 module Federation을 제안하고 적용해 보았다.

당시 처해진 상황

  • A,B,C,D,E 웹사이트들를 ALL 이라는 통합 웹사이트로 통합.
  • A,B,C,D,E 프로젝트 운영&구성팀이 서로 다름.
  • Modal, Button 등 Look and feel이 동일함.
  • 각 서비스별 운영&배포 정책에 따라 서로 다른 CI/CD, 배포,정기점검 다 모두 다름.

다이어그램 설명
위 그림이 무엇을 위한 그림이고 각 단계가 무엇인지 탑다운 순서로 하나씩 알아 보자.
목적 : dml(쇼핑몰), dsv(고객센터) 서비스를 실행 하기 위한 과정
설명

  • start : 시작
  • build packages : BuildTime Integration으로 host(dml,dsv)가 빌드 시점에 함께 빌드
  • Run component Servers : webPack번들링 결과 공급자(remote) 실행.
  • comm-search : 통합검색 페이지를(CommPage)Runtime에서 host에게 제공하기 위한 서비스
  • comm-components : 공통 컴포넌트(commGnb, commFooter)를 Runtime에서 제공하는 서버
  • dml : 쇼핑몰 웹사이트
  • dsv : 고객센터 웹사이트

RunTime, BuildTime Integration 이란?
BuildTime : .dist에 포함되어 서버배포 시 같이 빌드되는 패키지 및 코드
RunTime : 웹서비스가 서버에서 실행 되고 있는 시점에 통합 되는 패키지 및 코드

remote + host 구동시연

  • 시연 : remote서버(회원/공통)에서 공유되는 컴포넌트(CommGnb.vue)를 Runtime에 host에서 사용 확인
  • 순서
    1. comm(remote) 서버 실행.
    2. dml(host) 실행.
    3. dml(host)에서 comm에서 제공받은 CommGnb.vue, CommFooter.vue 랜더링 확인

remote 업데이트 후 host반영 확인 시연

  • 시연 : remote서버(회원/공통)의 CommGnb.vue의 Mall버튼을 Shpping Mall로 변경 후 host에서 변경사항 확인
  • 순서
    1. comm(remote) 서버 CommGnb.vue 컴포넌트의 Mall버튼 텍스트를 Shpping Mall로 변경
    2. dml(host) 반영 확인

적용방안 2가지.

TL;DR : 1번 방식(vue-cli-service5.x) 추천.
프로젝트에 처음 module Federation적용 당시 vue-cli로 구성된 공식 예제가 없어 webpack.config.js를 한땀한땀 설정해야 했다. 하지만 2022년 vue-cli 5.x가 공식 릴리즈 되었고, 해당버전은 webpack5을 근간으로 vue 프로젝트르 Schaffold해준다. 이는 곧 vue-cli를 이용해 module Federation을 구성 할 수 있음을 의미하고 복잡한 설정 없이 module Federation의 대중화 시대가 온것이다.

  1. vue-cli-service 상속 후 federation플러그인 추가
  2. webpack.config.js 메뉴얼 세팅
    • vue가 어떤 플러그인들로, 어떤 설정으로 번들링 되는지 잘 알고 있어야하고 vue-cli-service에서 제공하는 모든 설정을 그대로 반영하려면 방대한 webpack.config.js설정 이해 필요.
  • vue가 webpack으로 번들링되기 위해 필요한 설정 코드 (1254Line)
    ....

반드시 직면하게 될 문제

  • Util,Store 공유시 타입추론,자동완성 부재
  • Static Files (Lang, JsonFile) 공유시점.
  • Remote의 i18n

삽질방지 정보.

-> vue cli 3.x는 webpack.config.js에 웹팩 설정을 기입.
-> vue cli 4.x 이상부터 vue.config.js에 기입
-> vue cli 5.x도 역시 vue.config.js 파일 수정 필요. (참고 : https://cli.vuejs.org/guide/webpack.html, https://vuedal.tistory.com/2)

많이 받았던 질문

  • remote는 모듈공유만을 위해 존재 하나요? => 아니요. 일반적인 웹사이트에서 webpack으로 번들링된 일부 요소들 공유
  • remote 컴포넌트의 다국어는 어떻게 처리해요? => json export, host에서 조합.
  • MonoRepository와 Module-Federation을 꼭 같이 설정 해야 하나요? => 전혀 상관 없다 단, 시너지 효과가 클뿐. MonoRepository설정에 익숙하지 않으면 분리할것을 추천

ref

module-federation : https://webpack.kr/concepts/module-federation/

profile
의미있는10%코드를 위하여

0개의 댓글