원문: https://module-federation.io/practice/monorepos/nx-for-module-federation.html
Nx는 모노레포(Monorepo)와 특히 잘 작동하는 강력한 오픈 소스 빌드 시스템으로, Angular와 React 프로젝트를 위한 Module Federation에 대한 내장 지원을 제공한다.
아직 모노레포에서 Module Federation을 사용하는 이점에 대해 읽어보지 않았다면, 먼저 Benefits of Module Federation in a Monorepo를 확인해보길 바란다.
What is Nx?
Nx는 개발자 생산성을 향상시키고, CI 성능을 최적화하며, 코드 품질을 유지하기 위한 도구와 기법을 제공하는 강력한 오픈 소스 빌드 시스템이다. 이는 모노레포(Monorepo)를 구축하고 유지 관리하는 데뿐만 아니라 Module Federation 프로젝트를 관리하는 데에도 최고의 도구다.
Core Features of Nx
- 작업 효율적으로 실행: Nx는 작업을 병렬로 실행하며, 작업 간의 종속성을 기반으로 순서를 정리한다.
- CI에서 작업 분산: Nx는 작업을 여러 VM에 분산하여 CI를 확장한다. 저장소 크기가 아무리 커도 CI는 빠르게 실행된다.
- 로컬 및 원격 캐싱: 로컬 및 원격 캐싱을 통해 Nx는 불필요한 작업 재실행을 방지하여 개발 시간을 절약하고 CI 시간을 단축한다.
- E2E 테스트 분할 및 불안정 테스트 재실행: Nx는 대규모 E2E 테스트를 자동으로 분할하여 여러 VM에 분산 실행한다. 또한, 불안정한(flaky) E2E 테스트를 자동으로 식별하고 재실행할 수 있다.
- 종속성 업데이트 자동화: Nx 플러그인을 활용하면 코드 생성 및 코드베이스와 종속성을 자동으로 업그레이드하는 도구와 같은 추가 기능을 사용할 수 있다.
- 맞춤화 가능: Nx는 높은 수준으로 커스터마이징 및 확장이 가능하다. 조직을 위한 플러그인을 만들거나 도구 플러그인을 생성하여 세부적으로 조정할 수 있다.
Nx Module Federation Features
Nx는 Angular 및 React 프로젝트, 그리고 서버 사이드 렌더링(SSR)이 포함된 프로젝트를 위한 Module Federation을 기본적으로 지원한다.
Generators for Scaffolding Module Federation Projects
Nx 제너레이터는 프로젝트를 스캐폴딩하는 데 일관되고 편리한 방법을 제공한다. Angular(@nx/angular)와 React(@nx/react)를 위한 Nx 플러그인은 Module Federation 프로젝트를 빠르게 스캐폴딩할 수 있는 제너레이터를 제공하며, 시스템에 Consumer(호스트)와 Producer(리모트)를 쉽게 추가할 수 있다.
아래는 Nx consumer 제너레이터의 예시다:
# 세 개의 Producer를 포함한 Angular Consumer 애플리케이션 생성
nx g @nx/angular:consumer shell --producers=products,cart,checkout
# 세 개의 Producer를 포함한 React Consumer 애플리케이션 생성
nx g @nx/react:consumer shell --producers=products,cart,checkoutNx를 사용하여 Module Federation을 설정하는 방법에 대한 자세한 내용은 Angular와 React용 가이드를 참고할 수 있다.
Executors
Nx는 Module Federation 애플리케이션을 빌드하고 제공하기 위한 실행기(executor)를 제공한다. 그중 중요한 실행기는 module-federation-dev-server로, 애플리케이션을 로컬에서 제공하는 데 사용된다. 이 실행기는 다음과 같은 기능을 제공한다:
- Consumer(host) 프로젝트와 모든 Producer(remote)를 단일 명령어로 실행할 수 있으며, 최고의 리소스 관리와 개발자 경험(DX)을 지원한다.
- 현재 작업 중인 개별 Producer(리모트)를 실행할 수 있으며, HMR(핫 모듈 리로딩)과 파일 감시(file watching)를 통해 더 빠른 로컬 개발을 지원한다.
Nx는 Consumer(host) 프로젝트와 모든 Producer(remote)를 단일 명령어로 실행하므로, Producer(remote) 프로젝트의 변경 사항이 시스템 내 다른 프로젝트에 영향을 미치는 경우 즉각적인 피드백을 받을 수 있다. 또한, 배포된 애플리케이션을 사용하는 사용자와 동일한 흐름을 따르면서 개발할 수 있도록 해준다.
module-federation-dev-server 실행기를 사용하여 Nx가 이를 어떻게 구현했는지에 대한 자세한 내용은 Nx Module Federation Technical Overview를 참고할 수 있다.
Scaling Developer Experience (DX)
Nx의 module-federation-dev-server 실행기를 활용하여 빠른 개발 주기를 보장하기 위해 Nx는 다음과 같은 방법으로 빠른 개발 서버 시작 시간을 제공한다:
- Module Federation 시스템의 각 프로젝트에 대한 빌드 아티팩트를 로컬 캐시에 저장.
- Module Federation 시스템의 각 프로젝트에 대한 빌드 아티팩트를 원격 캐시에 저장하여, 개별 팀이 다른 팀이 생성한 캐시를 활용할 수 있도록 지원. 이는 특정 Producer(remote)를 작업하지 않는 팀에게 특히 중요하다.
- Producer(remote)의 빌드를 병렬로 실행하여 빌드 프로세스를 가속화. (캐시된 아티팩트가 있으면 이를 사용함.)
- 개발 서버에서 지정된 Producer(remote)만 실행하여 감시해야 하는 파일의 수를 제한.
- 모놀리식 빌드를 더 작은 청크로 분할하고, 변경 사항에 영향을 받은 프로젝트에 대해서만 작업을 실행하기 위해
affected명령을 사용.
참고: 원격 캐싱은 Nx Cloud에서 제공된다.
Developer as a User
최상의 개발자 경험(DX)과 Module Federation 아키텍처의 가장 정확한 개발을 위해, Nx는 이를 단일 애플리케이션으로 간주할 것을 권장한다. 즉, Consumer(호스트)와 모든 Producer(리모트)는 단일 애플리케이션을 구성한다.
Consumer(호스트)는 진입점이며, Producer(리모트)는 애플리케이션에서 사용되는 모듈이다. 단지 Producer(리모트)가 애플리케이션에 번들링되지 않고, 런타임에 네트워크를 통해 가져온다는 점만 다르다.
이를 지원하고 훌륭한 로컬 개발자 경험을 보장하기 위해, Nx의 Module Federation 지원은 로컬 개발 시 항상 Consumer(호스트) 애플리케이션에서 serve 명령을 실행하도록 설계되었다. 이를 통해 전체 Module Federation 아키텍처가 시작되며, Consumer(호스트)는 webpack-dev-server로, 각 Producer(리모트)는 단일 http-server로 제공된다. 이에 대한 자세한 내용은 Nx Module Federation Technical Overview에서 확인할 수 있다.
특정 Producer(리모트) 애플리케이션에서 작업 중일 경우, --devProducers 옵션을 사용하여 현재 개발 중인 Producer(리모트)를 지정해야 한다. 예: nx serve shell --devProducers=checkout. 이를 통해 해당 Producer(리모트)가 webpack-dev-server를 통해 제공되며, HMR(핫 모듈 리로딩) 및 라이브 리로딩이 가능하다.
Use Cases Supported by Nx
Micro-frontend Architecture
Nx는 독립적인 배포가 필요한 팀들에게 마이크로 프런트엔드 아키텍처를 권장한다. 독립적 배포(Independent Deployability)는 조직 내 개별 팀이 다른 팀과 상관없이 자신의 릴리스 주기에 따라 작업물을 배포하는 개념으로, 팀의 자율성을 높여준다. 이는 Module Federation을 통해 실현될 수 있으며, 조직과 애플리케이션이 성장할수록 더욱 매력적으로 다가온다.
Module Federation을 사용하면 각 팀이 필요한 시점에 배포할 수 있는 Producer(리모트)를 소유할 수 있다. Consumer(호스트) 애플리케이션은 이를 예상대로 사용할 수 있으므로, 모든 것을 재배포하지 않아도 해당 Producer(리모트)를 업데이트할 수 있다. 이는 마이크로 프런트엔드 접근 방식과 잘 맞는다.
마이크로 프런트엔드 아키텍처에 대한 자세한 내용은 Nx의 문서를 참조하면 된다.
Faster Builds
Module Federation을 사용하면 애플리케이션을 런타임에만 필요한 더 작은 배포 가능 청크로 분할할 수 있어 빌드 시간을 단축할 수 있다.
여러 작은 애플리케이션의 빌드를 병렬로 실행하고 이를 한 번에 배포할 수 있어, 팀 간에 단일 릴리스 주기와 조율을 유지하면서도 개발자 로컬 환경과 CI에서 빌드 시간을 단축하는 이점을 얻을 수 있다.
Nx Workspace에 Nx Cloud를 추가하면, 다른 팀원이나 CI에서 생성된 일부 빌드 결과의 캐시를 활용할 수 있어 빌드 시간을 더욱 단축할 수 있다.
더 빠른 빌드에 대한 자세한 내용은 Nx의 문서를 참고하길 바란다.
Resources
