MonoRepository

God Beom·2022년 3월 10일
0
post-thumbnail

TL;DR

  • 이번 포스트에서는 Lerna를 이용한 MonoRepository방식을 프로젝트에 적용한 이야기를 해 보고자 한다 (lerna + yarn + 모듈간 다국어 처리)

프로젝트 적용 시 곤란했던 상황

  • 모듈간 다국어 처리 문제. => 해결
  • PreBuild, Include 방식 결정. => PreBuild 지향
  • 새로운 환경이 불편한 팀원(코드가 한곳에 모여 있으면 실수로 수정하면 어떡해요?, 책임질 수 있어요?)

use

NameVersion
Vue3.0.0
Node16.14.0
lerna4.0.0
yarn1.22.17
tsc4.5.4

Mono프로젝트 구조.

--applications
    ㄴ dml : 몰 프로젝트
    ㄴ dsv : 서비스 프로젝트

--components
    ㄴ comm-components : 공통 컴포넌트(Include)
    ㄴ comm-search : 통합검색 컴포넌트(PreBuild)

--packages
    ㄴ lru-cache : LruCache 패키지(PreBuild)
    ㄴ mock-service : MockService 패키지(PreBuild)
    ㄴ type-utils : 유틸 패키지(PreBuild)
    

프로젝트 실행과정

Mono를 왜 도입 했는가.

  1. 코드 횡단가시성 : 프로젝트간 코드 횡단 가시성
  2. 모듈별 격리 : 각 모듈들은 IDE를 통해 독립 실행 & 테스트 가능
  3. 재사용 : 공통으로 사용하는 컴포넌트, 화면, 모듈화

모듈타입

PreBuild : 모듈에서 Bundler에 의해 빌드되어 타 프로젝트에 의존/주입

    - 장점1 : 컴파일된 결과를 의존-> CI/CD시 빌드 불필요.
    - 장점2 : Bundler에 의해 빌드된 결과물을 참조하므로 Module-Federation Remote로 제공 가능
    - 단점 : 의존하고 있는 프로젝트(부모)에서 수정사항을 확인 하려면 컴파일 해줘야 한다.(스스로는 핫리로드로 확인 가능)

Include : 부모 프로젝트에 코드가 추가 되어 부모에서 빌드됨. 프레임워크나 번들러에 종속적일 수 있음.

    - 장점: 핫 리로드 지원
    - 단점1 : 컴파일 시점에 코드를 의존함, 추후 Module-Federation 전환 시 사용 불가. 
    - 단점2 : 절대경로(@)사용 불가 : 부모 프로젝트로 추가되어 빌드되므로 컴파일러가 혼동
    ex) components/quassar/q-btn을 dml에서 사용 시 빌드 불가. dml은 quassar 프레임워크를 사용하지 않으므로 quassar 컴파일 불가. 

Repo Rules

  • applications/* 모듈간 의존하지 않아야 한다.

  • components/* 모듈간 의존하지 않아야 한다.

  • packages/* 모듈간 의존하지 않아야 한다.

  • packages/*는 다른 workspace에서도 자유롭게 참조 가능.

  • components/*는 applications workspace에서만 참조.

  • 각모듈은 서로 내부에서 어떤일이 일어나는지 알 수 없어야 한다.

  • 가능한 preBuild모듈타입을 지향하여 개발한다.

plugins

  • ESLint
  • Vetur
  • Prettier

installs

- nvm use 16.14.0
- npm install --global yarn@1.22.17
- npm install -g lerna@4.0.0
- npm install @vue/cli -g (@vue/cli 4.5.15 - Optional

Execute

- lerna bootstrap
- lerna run build
- yarn serve:dml

workspace Script

  • cd {yourPath}/mono
  • "build:dml": "yarn workspace dml build",
  • "serve:dml": "yarn workspace dml serve",
  • "build:search": "yarn workspace @god/comm-search build",
  • "serve:search": "yarn workspace @god/comm-search serve"

mono Repo 중 dml프로젝트 Docker 이미지 생성과정

Husky Rules : 어디에나 짱구는 있다

짱구란? : Master브랜치에 직접 푸시, 타 서비스 개발자 코드 침범, 타인에 코드를 리펙토링하는 패기넘치는 신입님들 등.. 이런 모든 상황을 모든 개발자에게 설명하고 이해시키는 것 자체가 상당한 일이며 가장 중요 한것은 그렇게 많은 시간을 들여 교육을 했다고 하더라도 짱구 문제는 계속해서 발생한다. 그럼 어떻게 해결 해야할까? 그렇다. 시스템에서 막아버리면 된다. 시스템은 실수도, 예외도 없으니 짱구들이 하지 말아야 할 것들을 명세해 놓으면 시스템은 알아서 짱구들을 걸러낼 것이다.

아래는 공통컴포넌트 개발자가 아닌 짱구가 공통컴포넌트 프로젝트에 커밋을 시도 할경우 제한하는 명세 코드

  • 공통 개발자 외에 공통 workspace 커밋을 제한.(휴먼에러 시스템이 제한)
// {yourPath}/mono/.husky/pre-commit
readonly COMM_OWNER_HOST_NAMES=("godBeomPC")
  • 필요한 경우 일반 개발자도 쉽게 커밋제한을 해제 할 수 있어야 한다.
    weak limit : 불편함을 통한 제한.
>> whoami
commDeveloperPC
readonly COMM_OWNER_HOST_NAMES=("godBeomPC", "commDeveloperPC") // 추가

husky 적용

// installs
yarn add husky -W -D

// enableHusky
npx husky install 

// package.json
"scripts": {
   "prepare": "husky install"
   //"postinstall": "husky install && cp -a .husky/. .git/hooks/" // if use GitKraken
 }

다음 시리즈에서 알아볼 것들.

  • WebPack5 module-federation이라는 webPack에 대해서도 알아보자.
  • lerna를 대체할만한 yarn workspaces를 알아보자.
  • yarn2 Berry를 통한 Zero-install에 대해서도 알아보자.

refs

  • 최근 yarn2 Berry에서도 lerna를 대체할만한 기능이 추가 되었다.
  • zero-install 적용
  • yarn2 berry Plugin적용
  • storybook적용
  • husky Workspace Commit제한 -> 완료(2.28) comm-workspaces Owners(COMM_OWNER_HOST_NAMES)가 아닌자가 커밋을 시도 할 경우 Commit FailBack
  • esLint 공통화 (Typescript, vue)
  • DockerFile Build 속도 개선(lerna/yarn docker Image, 선택적 copy )
  • components/* 상대경로 적용
  • packages/, components/ save To build ->완료 (2.22)
  • packages/* index.ts 전환 -> 완료 (2.15)
  • Git Publish 연동 Shell -> 완료 (2.23)
profile
의미있는10%코드를 위하여

0개의 댓글