blog.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もデフォのまま使えそうだし、プロダクションで使ってみたいところ

次はデプロイまでやってみようかな〜

参考になりそうなリンク