blog.unresolved.xyzblog.unresolved.xyz

Nxに入門したので覚書します

Thu Nov 25 2021
  • Nx

Nx: Smart, Extensible Build Framework

用語の整理

  • ワークスペース
    • そのプロジェクト全体のこと
    • ワークスペースの中にAPIやWebなど複数のアプリケーションが配置されます
  • アプリケーション
    • そのプロジェクトに必要なAPIやWebといった単位のソースコード群のこと

今回のゴール

  • バックエンドAPIとフロントエンドをぞれぞれNest.js、Next.jsで軽く動くところまでやります
  • generateコマンドでコンポーネントか何かを作ってみます

ワークスペースを作る

とりあえずAPIから作ります、Nest.jsです。

1[21-12-03 8:34] ~/Desktop/nx $ npx create-nx-workspace
2npx: installed 48 in 8.219s
3✔ Workspace name (e.g., org name)     · myapp
4✔ What to create in the new workspace · nest
5✔ Application name                    · api
6✔ Use Nx Cloud? (It's free and doesn't require registration.) · No

実行が終わるとこんな感じでワークスペース名のディレクトリができます。

1[21-12-03 8:37] ~/Desktop/nx (master) $ tree -L 2
2.
3└── myapp
4    ├── README.md
5    ├── apps
6    ├── jest.config.js
7    ├── jest.preset.js
8    ├── libs
9    ├── node_modules
10    ├── nx.json
11    ├── package-lock.json
12    ├── package.json
13    ├── tools
14    ├── tsconfig.base.json
15    └── workspace.json
16
175 directories, 8 files

この apps の中に見慣れたNest.jsのファイル群が配置されています。

1[21-12-03 8:38] ~/Desktop/nx/myapp/apps (main) $ tree -L 3
2.
3└── api
4    ├── jest.config.js
5    ├── project.json
6    ├── src
7    │   ├── app
8    │   ├── assets
9    │   ├── environments
10    │   └── main.ts
11    ├── tsconfig.app.json
12    ├── tsconfig.json
13    └── tsconfig.spec.json

Next.jsのコード群を追加する

ドキュメントはここです。

@nrwl/next:application - Nx

@nrwl/next を使いたいので依存性に追加します。

1[21-12-03 8:49] ~/Desktop/nx/myapp (main) $ yarn add -D @nrwl/next

インストールできたらgenerateコマンドでアプリケーションを追加します、 web という命名にしておきます。

1[21-12-03 8:50] ~/Desktop/nx/myapp (main) $ npx nx g @nrwl/next:application web
2✔ Which stylesheet format would you like to use? · css

apps/web に見慣れたものが追加されました！

1[21-12-03 8:52] ~/Desktop/nx/myapp/apps (*main) $ tree -L 2
2.
3├── api
4│   ├── jest.config.js
5│   ├── project.json
6│   ├── src
7│   ├── tsconfig.app.json
8│   ├── tsconfig.json
9│   └── tsconfig.spec.json
10├── web
11│   ├── index.d.ts
12│   ├── jest.config.js
13│   ├── next-env.d.ts
14│   ├── next.config.js
15│   ├── pages
16│   ├── project.json
17│   ├── public
18│   ├── specs
19│   ├── tsconfig.json
20│   └── tsconfig.spec.json
21└── web-e2e
22    ├── cypress.json
23    ├── project.json
24    ├── src
25    └── tsconfig.json

e2eは何でしょうか？一旦置いておきます。

とりあえず起動してみる

npx nx serve [application] で起動できる模様です、まずはAPIから。

1[21-12-03 8:54] ~/Desktop/nx/myapp (main) $ npx nx serve api
2
3> nx run api:serve
4chunk (runtime: main) main.js (main) 2.82 KiB [entry] [rendered]
5webpack compiled successfully (c6c55bd9a9c7a0f8)
6Debugger listening on ws://localhost:9229/2546e79e-3fd2-4432-9568-8a1a1e908488
7Debugger listening on ws://localhost:9229/2546e79e-3fd2-4432-9568-8a1a1e908488
8For help, see: https://nodejs.org/en/docs/inspector
9Issues checking in progress...
10[Nest] 33832  - 12/03/2021, 8:54:19 AM     LOG [NestFactory] Starting Nest application...
11[Nest] 33832  - 12/03/2021, 8:54:19 AM     LOG [InstanceLoader] AppModule dependencies initialized +14ms
12[Nest] 33832  - 12/03/2021, 8:54:19 AM     LOG [RoutesResolver] AppController {/api}: +5ms
13[Nest] 33832  - 12/03/2021, 8:54:19 AM     LOG [RouterExplorer] Mapped {/api, GET} route +2ms
14[Nest] 33832  - 12/03/2021, 8:54:19 AM     LOG [NestApplication] Nest application successfully started +2ms
15[Nest] 33832  - 12/03/2021, 8:54:19 AM     LOG 🚀 Application is running on: http://localhost:3333/api
16No issues found.

できてそうです。

1[21-12-03 8:55] ~/Desktop/nx/myapp (main) $ curl http://localhost:3333/api
2{"message":"Welcome to api!"}

webも起動してみます。

1[21-12-03 8:55] ~/Desktop/nx/myapp (main) $ npx nx serve web
2
3> nx run web:serve
4We detected TypeScript in your project and reconfigured your tsconfig.json file for you. Strict-mode is set to false by default.
5
6The following suggested values were added to your tsconfig.json. These values can be changed to fit your project's needs:
7
8        - incremental was set to true
9
10info  - automatically enabled Fast Refresh for 1 custom loader
11event - compiled successfully (174 modules)
12[ ready ] on http://localhost:4200

できましたが・・・見た目がいまいちです・・・

Screen Shot 2021-12-03 at 8.56.40

まあいいでしょう。

コンポーネントをgenerateしてみる

ドキュメントはここです、Next.js用のコンポーネントジェネレーターがあります。

@nrwl/next:component - Nx

ちなみに --dry-run フラグでドライランができます、便利です。

--project を指定しないと nx.json で指定されているデフォルトプロジェクトの api 側に作ってしまうので注意が必要です。

1[21-12-03 9:01] ~/Desktop/nx/myapp (main) $ npx nx g @nrwl/next:component Header --project=web --dry-run
2✔ Which stylesheet format would you like to use? · css
3CREATE apps/web/components/header/header.module.css
4CREATE apps/web/components/header/header.spec.tsx
5CREATE apps/web/components/header/header.tsx
6
7NOTE: The "dryRun" flag means no changes were made.

specもできるのがいいですね！ファイル名がアッパーキャメルではないのがちょっと気になります・・・

コンポーネントのtsxはこんな感じで、 React.FC<HeaderProps> になっていないのが少し気になるところです。

1import './header.module.css';
2
3/* eslint-disable-next-line */
4export interface HeaderProps {}
5
6export function Header(props: HeaderProps) {
7  return (
8    <div>
9      <h1>Welcome to Header!</h1>
10    </div>
11  );
12}
13
14export default Header;

specはこのようになっています。

1import { render } from '@testing-library/react';
2
3import Header from './header';
4
5describe('Header', () => {
6  it('should render successfully', () => {
7    const { baseElement } = render(<Header />);
8    expect(baseElement).toBeTruthy();
9  });
10});

便利すぎて感動しました。

とりあえずバックエンド、フロントエンドがそれぞれ動いたのでここまでにします。

また進めていくと無限に躓きそうですが、肌感はわかったのでよしとします！

所感

全体的に便利でした、気になったのはこの辺りです。

  • nxを経由していろんなこと（起動など諸々）をやるのは、いらない依存が増えるという見方もできるかなと思いました
  • generator、カスタマイズしたくなったら面倒そうだなと思いました
    • カスタマイズするよりhygenなどにしてしまったほうがいいのでしょうか？

とはいえ思っていたより便利で満足です、generatorもデフォルトのまま使えそうですし、プロダクションで使ってみたいところです。

次はデプロイまでやってみようかなと思います。

参考になりそうなリンク