모노레포(monorepo)도입에 대한 고민(2) - NX

NX
NX - core-tutorial

1. NX 설치

yarn add global nx

1-1. workspace 생성해보기

npx create-nx-workspace@latest

nx를 global환경에 설치한 뒤 npx create-nx-workspace@latest를 입력합니다.

myworkspace라는 이름으로 생성해봤습니다.

1-2. 공통모듈 설치

workspace내에서 공통으로 사용할 모듈을 설치합니다.

yarn add -D @11ty/eleventy@1.0.0

@11ty/eleventy 모듈은 정적리소스들을 쉽게 serving할 수 있게 해줍니다.

1-3. packages

[workspace]/package.json파일을 보면

  "workspaces": [
    "packages/**"
  ]

처럼 glob 패턴으로 작성되어 있는 걸 볼 수 있습니다.
packages안에 여러 프로젝트들을 생성할 수 있습니다.

1-4. 하위프로젝트 생성

터미널에서 packages로 이동해 yarn init을 실행했습니다.

• packages.json에 테스트를 위한 스크립트를 설정해보겠습니다.

{
  "name": "blog",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "build": "npx eleventy --input=./src --output=../../dist/packages/blog",
    "serve": "npx eleventy --serve --input=./src --output=../../dist/packages/blog"
  }
}

build, serve 스크립트를 추가했습니다.
스크립트 옵션에서 볼 수 있듯이 하위에 src폴더를 생성하고 정적리소스를 생성해보겠습니다.

• src/index.html

<p>Hello, Eleventy</p>

1-5. workspace 레벨에서 실행

nx serve blog

잘 실행이 되는 걸 확인했습니다.

1-6. workspace dist 폴더

nx serve blog를 실행하면
[workspace]/dist/blog를 참조하게됩니다.

2. 다른 프로젝트 생성

2-1. blog2 만들기

blog2 프로젝트를 생성해 11ty모듈을 사용해보겠습니다.
packages폴더 안에 blog2 프로젝트를 생성합니다.

nx serve blog2를 실행해볼텐데
blog2/package.json의 스크립트를 일부 수정해야합니다. nx serve 명령어가 [workspace]/dist/blog 를 참조하기 때문입니다.

• blog2/package.json

{
    "name": "blog2",
    "version": "1.0.0",
    "license": "MIT",
    "scripts": {
      "build": "npx eleventy --input=./src --output=../../dist/packages/blog2",
      "serve": "npx eleventy --serve --input=./src --output=../../dist/packages/blog2"
    }
  }

2-2. 실행하기

nx serve blog2

아래처럼 잘 실행되는 것을 볼 수 있습니다.

---

3. CLI

nx 명령어를 입력하면 아래처럼 cheat sheet를 볼 수 있습니다.

아까 nx serve blog를 입력 했을 때,
nx run blog:serve가 실행되고 blog의 package.json에 설정한 serve script가 실행됐습니다.

nx graph를 입력하면 시각화된 종속성도 확인할 수 있습니다.
현재는 아래처럼 두 개의 프로젝트밖에 없습니다.

실제 프로젝트에서는 아래처럼 종속성을 한 눈에 볼 수 있어서 구조를 파악하는데 도움이 될 것 같습니다.

---

4. GUI

NX는 VSC와 호환이 좋습니다.
VSC의 Marketplace에서 plugin을 검색해서 설치하면 GUI로 사용할 수 있습니다.

Nx Console VSCode Plugin

---

5. 그 외

5-1. Caching

nx serve blog2를 실행했을 때 커맨드라인에서 아래같은 결과를 볼 수 있습니다.

그리고 index.html을 수정하면 캐싱덕분에 0.02s --> 0.01s 으로 점점 시간이 줄어듭니다.

거대한 프로젝트에서는 좀 더 좋은 경험을 할 수 있을 것 같습니다.
NX - How Caching Works

5-2 Task Pipeline

NX - Task Pipeline

5-2-1 병렬 실행

아래처럼 작성하면 nx가 병렬로 실행할 수 있는 작업 프로세스 수를 정의할 수도 있습니다.

• nx.json

{
  "tasksRunnerOptions": {
    "default": {
      "runner": "nx/tasks-runners/default",
      "options": {
        "cacheableOperations": [],
        "parallel": 5
      }
    }
  }
}

---

5-2-2. 의존성

{
  ...
  "targetDefaults": {
    "build": {
      "dependsOn": ["^build", "prebuild"]
    },
    "test": {
      "dependsOn": ["build"]
    }
  }
}

아래 코드처럼 작성한 뒤 nx test myproj를 입력하면

• nx.json

{
  ...
  "targetDefaults": {
    "build": {
      "dependsOn": ["^build", "prebuild"]
    },
    "test": {
      "dependsOn": ["build"]
    }
  }
}

dependsOn이라는 종속성배열에 따라 build가 먼저 실행됩니다.
또 build 자체적으로 prebuild -> ^build(모든 종속성에대해 build) 덕분에 아래 그림처럼 실행됩니다.

---

이 밖에도 다양한 기능들을 제공하고 있습니다.