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 を使いたいので依存性に追加する
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
ええ・・・できたけどダセえ・・・
まあいいか。
コンポーネントをgenerateしてみる
ドキュメントはここ、Next.js用のコンポーネントジェネレーターがある
ちなみに --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もデフォのまま使えそうだし、プロダクションで使ってみたいところ
次はデプロイまでやってみようかな〜
参考になりそうなリンク
- 【フロントエンド、バックエンドを一つのリポジトリで管理】monorepoを実現できるNxをさわってみた | DevelopersIO
- めちゃ詳細に書かれてて良さそうだった、ちゃんと読んでないけど困ったら読もう