[모노레포, 마이크로 프론트엔드(MF)] 호스트 앱과 리모트 앱 동시 실행하기

목차

---

1. 문제 정의
2. 해결방안
3. 해결과정
   1. 상위 프로젝트 세팅
   2. lerna 설치 및 세팅
   3. 오류 해결(trouble-shooting)

 

문제 정의

---

MFA 구조는 호스트 앱과 리모트 앱이 독립적으로 배포 및 실행되어야 한다. 따라서, 로컬 개발 단에서는 1개의 서비스 앱과 n개의 리모트 앱을 일일히 하나씩 실행하고 종료해야 한다. 이 부분은 시간소모를 일으키며 유지보수 시 어떤 앱을 실행해야할지 직접 신경써야 하므로 번거로울 수 있다.

 

해결방안

---

모든 앱을 포괄하는 상위 프로젝트를 만든 후 호스트 앱과 리모트 앱을 병렬로 실행하는 커맨드를 만든다.

해당 커멘드는 lerna 라이브러리를 이용해 설정한다.

 

해결과정

---

상위 프로젝트 세팅

• 호스트 앱과 리모트 앱을 포함하는 상위 디렉토리 root1을 생성한다. 이 디렉토리가 각 앱을 병렬 실행하는 상위 프로젝트가 될 예정이다.
• root1에 npm 세팅을 한다.
  • 커맨드 npm init -y 실행
  • 생성된 package.json의 workspace에 병렬 실행할 프로젝트의 폴더명을 적어준다.

{ 
 // 나머지 설정들
 
 // 실행할 리모트 앱 설정
  "workspaces": [
	  "host-app-foo1",
    "remote-app-bar1",
    "remote-app-baz1",
  ],
  
  }

• root1에서 npm i 를 실행하여 하위 패키지에 필요한 공통 의존성을 세팅한다.

 

lerna 설치 및 세팅

• 참고 lerna와 monorepo에 관하여
  • 원래 lerna는 하나의 저장소에서 모든 패키지를 관리하는 모노 레포(monorepo)용 운영 도구이다. 여기서는 레포 관리 기능은 사용하지 않고 병렬 실행 기능만을 이용할 예정이다.
  • lerna란?
  • 레포지토리 관리 방식(monorepo, multi-repo)

• lerna를 설치한다.
  • 전역 설치이든 로컬 설치든 상관없다.
    • 전역 설치 :npm install --global lerna
    • 로컬 설치: npm install --save-dev lerna
• lerna를 초기화한다.
  • 커맨드: lerna init
  • 주의사항
    • powershell로 커맨드를 입력 시, 아래처럼 권한 오류가 발생할 수 있다. 이럴 때에는 다른 cli로 실행하면 된다..

lerna : 이 시스템에서 스크립트를 실행할 수 없으므로
C:\\Users\\FE\\AppData\\Roaming\\npm\\lerna.ps1 파일을 로드할 수 없습니다.
자세한 내용은 about_Execution_Policies([]()[t.com/fwlink/?LinkID=135170](<http://t.com/fwlink/?LinkID=135170>))를 참조하십시오

• 생성된 leran.json에 아래처럼 작성한다.
  
  • 각 속성 설명
    • $schema : lerna.json 작성 시 자동완성을 도와 주는 JSON 스키마 설정
    • packages : 실행할 리모트 앱 이름
    • npmClient: lerna가 패키지 설치 시 사용할 클라이언트
    • npmClientArgs: lerna에서 패키지 설치 시 사용하는 인자 옵션
      • "--no-package-lock" : npm 패키지 설치 시 --no-package-lock을 설치하지 않음

{
  "version": "independent",
  "$schema": "node_modules/lerna/schemas/lerna-schema.json",
  "packages": ["common", "main", "settlement-environment"],
  "npmClient": "npm",
  "npmClientArgs": ["--no-package-lock"]

}

4. z-map의 package.json에 lernam를 실행하는 커맨드로 아래 작성 후, npm start

  "scripts": {
    "start": "lerna run start --parallel"
  },

 

오류 해결(trouble-shooting)

• [webpack-cli] Error: Cannot find module 'ajv/dist/compile/codegen' Require stack:
  • 웹팩관련 의존성이 설치되지 않았을 때, 생기는 오류로 수동으로 직접 설치해줘야 함.
    • npm install ajv ajv-keywords
    • npm install webpack webpack-cli webpack-dev-server --save-dev