on
[NX-Micro Frontend] NX기반 Enterprise Angular Monorepo Patterns
[NX-Micro Frontend] NX기반 Enterprise Angular Monorepo Patterns
NX + Angular 기반 개발시 엔터프라이즈 애플리케이션 개발방법에 대한 글을 정리한다. Micro Frontend 개발방법이라기 보다는 애플리케이션을 개발하며 지속적으로 확장할 필요가 있을 때 관심사들을 어떻게 분리하여(Bounded Context) 개발할 수 있을지 보여준다.
https://indepth.dev/the-shell-library-patterns-with-nx-and-monorepo-architectures/
https://connect.nrwl.io/app/books/enterprise-angular-monorepo-patterns
nx.dev를 이용한 라이브러리 관리
Nx는 하나의 레파지토리에서 멀티 애플리케이션과 라이브러리를 개발할 수 있는 환경을 제공한다. @angular/cli를 확장한 형태로 Angular, React, NodeJS를 함께 개발하고 별개로 번들링 배포할 수 있다. Nx 설치는 이전 글을 참조한다.
workspace/libs 하위로 폴더를 구분하여 업무를 개발할 수 있고, workspace/apps 의 애플리케이션에서 libs의 내용을 통합하여 사용하는 방법을 제시한다.
application application 안에서 sub-domain을 import하거나, routing 한다. sub-domain을 통합하는 방식이다. 애플리케이션, web, desktop(using Eletron), mobile(Ionic)을 이용하여 sub-domain을 사용한다.
sub-domain 업무 도메인이다. sub-domain은 Bounded Context 이다. Bounded Context는 업무 논리적으로 분리될 수 있는 단위이다. feature-shell 업무 도메인의 페이지를 통합하고 routing을 설정한다. sub-domain 안에 1개 존재한다. shell은 sub-domain을 접근토록 하는 entry point 모듈이다. shell orachestrate the routes of "Bounded Context" feature- 일반적으로 웹 화면(Page) 하나라고 정의하자. sub-domain 안에는 feature-가 여러개 존재할 수 있다.
Nx applications과 libraries 폴더 구조
NX Workspace 의 apps, libs 폴더 구성 예
Feature-shell에서 sub-doamin(Bounded Context) 라우팅하기
shell에서 Bounded Context 즉, sub-domain을 routing한다.
애플리케이션에서 Feature-shell 라우팅하기. 애플리케이션에서 feature-shell을 조합하여 사용한다.
애플리케이션에서 feature-shell 라우팅
NX에서 Library 분류 및 개발 방법
nx workspace의 libs/ 밑으로 라이브러리를 개발할 때 다음과 같이 분류하여 개발한다.
Feature-Shell library 업무 sub-domain을 통합하여 애플리케이션에서 사용할 수 있도록 한다.
UI library presentation component로써 버튼, 모달같은 업무 로직이 없는 컴포넌트들
Shared library Data Access library REST API 서비스 WebSocket 통신 Ngrx/Store 기반 State 관리 Utils library 유틸리티 서비스
NX에서 tag 구분 keywords
scope sub-domain grouping folder
type feature-shell ui data-cess
platform desktop mobile
예) scope:shared, type:feature,platform:desktop
각 라이브러리의 특성에 맞게 libs/ 밑으로 폴더/폴더 형태의 grouping folder 구조로 개발한다.
예로 booking 폴더 밑에 feature-shell libary가 존재
feature-shell의 모듈 명칭은 "feature-shell" 으로 한다.
nx를 이용하여 library 생성시 옵션들
--directory=
--routing: forChild routing 자동 설정
--lazy: application에 lazy routing 자동 설정, 반드시 parent-module을 지정함.
--parent-module=: lazy 옵션 설정시 lazy routing 설정할 module 위치를 지정함.
--tags=,: nx.json에 포함됨, nx.json에서 직접 수정 및 추가 가능 예) --tags=scope:shared,type:feature
--publishable: 특별히 npm registry에 publish 할 수 있는 library를 만들고 싶을 때 사용한다. ng-packagr 기반이다.
//Command nx g lib feature- --routing --directory= --lazy --parent-module=apps//src/app/app.module.ts //Sample $ nx g lib feature-shell --routing --directory=admin --lazy --parent-module=apps/app-container/src/app/app.module.ts ? Which stylesheet format would you like to use? SASS(.scss) [ http://sass-lang.com ] CREATE libs/admin/feature-shell/README.md (162 bytes) CREATE libs/admin/feature-shell/tsconfig.lib.json (459 bytes) CREATE libs/admin/feature-shell/tslint.json (276 bytes) CREATE libs/admin/feature-shell/src/index.ts (50 bytes) CREATE libs/admin/feature-shell/src/lib/admin-feature-shell.module.ts (367 bytes) CREATE libs/admin/feature-shell/src/lib/admin-feature-shell.module.spec.ts (432 bytes) CREATE libs/admin/feature-shell/tsconfig.json (138 bytes) CREATE libs/admin/feature-shell/jest.config.js (405 bytes) CREATE libs/admin/feature-shell/tsconfig.spec.json (258 bytes) CREATE libs/admin/feature-shell/src/test-setup.ts (30 bytes) UPDATE angular.json (15807 bytes) UPDATE nx.json (1098 bytes) UPDATE tsconfig.json (863 bytes)
품질 및 일관성 유지 방법
Single Version을 apps와 libs에 적용한다. package.json에서 관리한다.
Code Formatting은 prettier를 사용한다. prettier 설정 관련하여 블로그 글 참조
Library Dependencies 관리 library 순환 참조는 안된다. library가 application을 import하거나 의존하지 않는다. npm run dep-graph 또는 npm run affected:dep-graph 수행하면 라이브러리 의존관계도가 자동생성되어 웹브라우져에서 확인할 수 있다. MS Code Editor의 Plugin으로 "Nx Console"을 설치하면 Editor에서 바로 수행해 볼 수도 있다.
의존성 그래프를 웹에서 확인
Nx Console이 Left Menu 하단에 N> 아이콘으로 있고, 명령어 목록을 클릭한다.
Nx Schematics 관리
Nx에 Built-in 된 schematics
ngrx: Ngrx/store 기반으로 reducer, action, selector, facade를 자동 생성함
node: Express node application의 경우
jest: unit test
cypress: E2E test
etc..
Custom schematic 만들기
개발자들이 샘플코드를 copy & paste하지 않고 schematic을 통해 업무 개발을 위한 파일을 생성토록할 때 사용한다.
nx g workspace-schematic 명령을 수행하면 workspace/tools/ 폴더 밑에 schematic파일이 생성됨. 예제 파일 생성: nx g workspace-schematic data-access-lib 수행 예제 파일 수행: npm run workspace-schematic data-access-lib
명령을 수행하면 workspace/tools/ 폴더 밑에 schematic파일이 생성됨.
index.ts에서 개발함
//index.ts에 ngrx를 추가로 적용한 예제 import { chain, externalSchematic, Rule } from '@angular-devkit/schematics'; import * as path from 'path'; export default function (schema: any): Rule { if (!schema.name.startsWith('data-access-')) { throw new Error(`Data-access lib names should start with 'data-access-'`); } const stateName = schema.name.replace('data-access-', ''); return chain([ externalSchematic('@nrwl/workspace', 'lib', { name: schema.name, tags: 'type:data-access', }), externalSchematic('@nrwl/schematics', 'ngrx', { name: stateName, module: path.join('libs', schema.name, 'src', 'lib', `${schema.name}.module.ts`), }), ]); }
관련소스: github.com/ysyun/blog-5730-micro-demo.git
참조
https://indepth.dev/the-shell-library-patterns-with-nx-and-monorepo-architectures/
NX에서 Eletron, Ionic, NativeScript 통합 개발하기
https://nstudio.io/xplat/fundamentals/architecture
from http://mobicon.tistory.com/574 by ccl(A) rewrite - 2021-01-05 12:59:32