Nx를 사용하여 gatsby 프로젝트를 시작하는 이점

Table of Contents

Nx란?

Nx로 프로젝트 만들기

Nx를 사용하여 gatsby 프로젝트를 만드는 이점

1. What is Nx?

Nrwl Inc이 제공하는 monorepo/micofrontend의 ​​작업 공간을 관리하고 작성하기위한 Open Source 라이브러리입니다.
lerna 같은 차이점은 패키지를 관리하는 대신 여러 프로젝트를 관리하고 공통 라이브러리를 만드는 것에 특화되어 있다고 생각합니다.

Nrwl

응 x

1. Nx로 Gatsby Project 만들기

자신이 느낀 메리트를 기재하는 것보다 프로젝트를 작성하는 것이 메리트를 느낄 수 있다고 생각하기 때문에, 먼저 nx를 이용해 Gatsby의 프로젝트를 작성합니다.

1-1. nx 때문에 작업 공간 만들기

create-nx-workspace를 이용하여 작업공간(여러 프로젝트를 관리, 작성)을 작성합니다.

$ pwd
/your/project/path
$ npx create-nx-workspace@latest

? Workspace name (e.g., org name)     my-workspace # ディレクトリの名前になります

? What to create in the new workspace empty #emptyを選択します
react             [a workspace with a single React application] 
react-express     [a workspace with a full stack application (React + Express)] 
next.js           [a workspace with a single Next.js application] 
empty             [an empty workspace with a layout that works best for buildi
ng apps] 
oss               [an empty workspace with a layout that works best for open-s
ource projects] 
web components    [a workspace with a single app built using web components] 
angular           [a workspace with a single Angular application]
angular-nest      [a workspace with a full stack application (Angular + Nest)]

? CLI to power the Nx workspace　　　　Nx
Nx           [Recommended for all applications (React, Node, etc..)] 
Angular CLI  [Recommended for Angular only workspaces]

? Use the free tier of the distributed cache provided by Nx Cloud No
Yes [Faster command execution, faster CI. Learn more at https://nx.app] 
No  [Only use local computation cache]

$ cd my-workspace
$ tree -L 2 -I node_modules
├── README.md
├── apps
│   ├── .gitkeep
├── jest.config.js
├── libs
├── nx.json
├── package.json
├── tools
│   ├── schematics
│   └── tsconfig.tools.json
├── tsconfig.base.json
├── tslint.json
├── workspace.json
└── yarn.lock

이제 기본 작업 공간 환경이 작성되었습니다.
기본적으로 nrwl이 제공하는 cli를 이용하기 위해 global에 install합니다.

$ pwd
my-workspace
$ yarn global add @nrwl/cli

1-2. Gatsy 프로젝트 만들기

install이 완료되면, gatsby의 환경을 작성해 갑니다.

$ pwd
my-workspace
$ yarn add -D @nrwl/gatsby #gatsbyの依存関係をinstallします
$ nx g @nrwl/gatsby:app sample # gatsbyのapplicationを作成します
$ tree -L 2 -I node_modules
├── README.md
├── apps
│   ├── sample
│   └── sample-e2e
├── jest.config.js
├── libs
├── nx.json
├── package.json
├── tools
│   ├── schematics
│   └── tsconfig.tools.json
├── tsconfig.base.json
├── tslint.json
├── workspace.json
└── yarn.lock

이제 gatsby의 응용 프로그램 환경을 만들 수있었습니다.
gatsby의 프로젝트를 확인하기 위해 dev server를 시작하십시오. 명령은 nx serve <>로 실행 서버를 시작할 수 있습니다.

$ nx serve sample
ou can now view gatsby-starter-default in the browser.
⠀
  http://localhost:4200/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
  http://localhost:4200/___graphql

localhost:4200 을 브라우저에서 열고 아래와 같은 화면이 표시되면 완성됩니다.



이것으로 기본 프로젝트가 완성되었습니다.

2. Nx를 이용하여 gatsby 프로젝트를 만드는 이점

개인적으로 nx를 이용한 이점은 크게 나누어 2개.

개발에 필요한 최소 종속성을 만들 수 있습니다 (react, typescript, jest, cypress)

기업 수준의 라이브러리 (특히 UI 라이브러리 유틸리티 기능) 및 응용 프로그램을 단일 리포지토리에서 관리 할 수 ​​있습니다.

2-1. 개발에 필요한 최소 종속성을 구축할 수 있다(react, typescript, jest, cypress)

초기 설정으로 typescript, jest (unit test, integration test), cypress(e2e test)가 설정되어 있어 올레올레 환경을 피해 정비 비용을 낮출 수 있습니다.
또, nx를 이용해 story book을 추가할 수도 있으므로, 초기 세트로서는 12분이라고 생각한다.

2-2. 엔터프라이즈급 library 및 application을 하나의 리포지토리로 관리할 수 있습니다.

예를 들어, ui library를 독자적으로 만들려고 생각했을 때에 기존이라면 git의 리포지토리를 작성해, 거기에 작성해 git로 의존관계를 구축해 package에 의존관계가 있거나 등 1개의 메인 리포지토리라면 좋다 하지만, LP Application ApiServer등 하는 일이 늘어나면 매번 의존관계를 구축하지 않으면 안 되지만, nx를 이용하면 해당 관계를 1개로 관리할 수 있다.

예를 들어, 현재 프로젝트에 react ui 라이브러리를 만들면,

react library 환경 만들기

gatsby application에서 사용

와 3 단계로 대응이 가능합니다.

2-1-1. react library 환경 만들기

Gatsby의 종속성만 있기 때문에 react 종속성을 추가합니다.
(20200729의 타이밍에 @nrwl/react를 이용하지 않는 경우 path is undefined의 형식이 되어 에러가 된다)

$ yarn add -D @nrwl/react
$ nx g @nrwl/react:lib ui-button --style=css
$ tree -L 2 -I node_modules
.
├── README.md
├── apps
│   ├── sample
│   └── sample-e2e
├── babel.config.json
├── jest.config.js
├── libs
│   └── ui-button # 先ほど指定した ui-buttonが追加される
├── nx.json
├── package.json
├── tools
│   ├── schematics
│   └── tsconfig.tools.json
├── tsconfig.base.json
├── tslint.json
├── workspace.json
└── yarn.lock

gatsby application에서 사용

apps/sample/pages/index.tsx

// @<<workspace-name>>/<<library name>>で指定が可能
// 参照先はlibs/@<<workspace-name>>/src/index.ts だと思ってもらえればいいです
// 下記でimport可能
import { UiButton } from '@gatsby-sample/ui-button';

위와 같은 짧은 단계로 라이브러리를 만들 수 있습니다.

이상이 Nx를 이용해 gatsby의 프로젝트를 시작하는 이점이었습니다. 이 이외에도 plugin이나 schematics등 여러가지 일이 가능하기 때문에, 큰 이점을 느낄 수 있다고 생각합니다.

repo