Nxv15でモノレポ環境構築備忘録

# 初めに
初めまして。フロントエンジニアのもっぴーです。

今回はNxv15の環境構築方法を備忘録として記載します。
後ほどv16の備忘録も書こうと思います。

今回構築する環境は下記の構成にします。
* フロントエンド：React
* バックエンド：Nest.js

https://nx.dev/

# Nx v15 環境構築

## Nxのワークスペースを作成
下記コマンドでNxのワークスペースを作成します。
```
npx create-nx-workspace@15.9.4
```

どの形式でワークスペースを作成するの？と聞かれるので、上から二番目の
`Integrated monorepo:        Nx configures your favorite frameworks and lets you focus on shipping features.`
を選択します。
```
Package-based monorepo:     Nx makes it fast, but lets you run things your way.
Integrated monorepo:        Nx configures your favorite frameworks and lets you focus on shipping features.
Standalone React app:       Nx configures Vite (or Webpack), ESLint, and Cypress.
Standalone Angular app:     Nx configures Jest, ESLint and Cypress.
Standalone Node Server app: Nx configures a framework (ex. Express), esbuild, ESlint and Jest.
```

作成したワークスペースに何を追加するの？と聞かれるので、一番上の
`apps              [an empty monorepo with no plugins with a layout that works best for building apps]`
を選択します。

:::note warn
今回は空の`apps`フォルダから始めます。
:::
```
What to create in the new workspace   … 
apps              [an empty monorepo with no plugins with a layout that works best for building apps]
ts                [an empty monorepo with the JS/TS plugin preinstalled]
react             [a monorepo with a single React application]
angular           [a monorepo with a single Angular application]
next.js           [a monorepo with a single Next.js application]
nest              [a monorepo with a single Nest application]
react-native      [a monorepo with a single React Native application]
```

リポジトリ名は何？と聞かれるので、お好きに命名してください。
```
? Repository name                       › nx-v15-app 
```

分散キャッシュを有効にしてCI を高速化しちゃう？と聞かれるので`Yes`
```
? Enable distributed caching to make your CI faster … 
Yes
No
```

それぞれの設定を反映して作成してくれるので少し待ちます。
```
Installing dependencies with npm
```
以下が表示されれば、ワークスペースの作成は完了です。
```
✔ Installing dependencies with npm
✔ Nx has successfully created the workspace: nx-v15-app.
✔ NxCloud has been set up successfully
```

この段階でフォルダ構成は以下のようになります。
![スクリーンショット 2023-08-05 22.36.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526092/95248384-2640-a4c1-12c5-aa447d6b93c2.png)

## Reactプロジェクトを作成
次に作成したワークスペースにReactのプロジェクトを作成します。
まずはReactプロジェクトを作成する為にNxの`プラグイン`をインストールします。
```
npm i -D @nrwl/react@15.9.4
```

インストールしたプラグインを使用してReactプロジェクトを作成します。

```
nx g @nrwl/react:application frontend
```

スタイルには何を使う？と聞かれるのでお好きなものを選んでください。
今回は`styled-components`を選択します。
```
? Which stylesheet format would you like to use? … 
CSS
SASS(.scss)       [ http://sass-lang.com                     ]
Stylus(.styl)     [ http://stylus-lang.com                   ]
LESS              [ http://lesscss.org                       ]
styled-components [ https://styled-components.com            ]
emotion           [ https://emotion.sh                       ]
styled-jsx        [ https://www.npmjs.com/package/styled-jsx ]
None
```

React Router追加できるけどどうする？と聞かれるので`y`
```
Would you like to add React Router to this application? (y/N) · true
```

バンドラーはどうする？と聞かれるのでお好きな方を選んでください。
今回は`vite`を選択します。
```
Which bundler do you want to use to build the application? … 
vite
webpack
```

作ってくれました。
```
CREATE tsconfig.base.json
UPDATE .vscode/extensions.json
UPDATE package.json
UPDATE nx.json
CREATE apps/frontend/index.html
CREATE apps/frontend/public/favicon.ico
CREATE apps/frontend/src/app/app.spec.tsx
CREATE apps/frontend/src/assets/.gitkeep
CREATE apps/frontend/src/main.tsx
CREATE apps/frontend/tsconfig.app.json
CREATE apps/frontend/src/app/nx-welcome.tsx
CREATE apps/frontend/src/app/app.tsx
CREATE apps/frontend/tsconfig.json
CREATE apps/frontend/project.json
CREATE apps/frontend/vite.config.ts
CREATE apps/frontend/tsconfig.spec.json
CREATE .eslintrc.json
CREATE .eslintignore
CREATE apps/frontend/.eslintrc.json
```
この段階で`apps`フォルダ配下は以下のようになります。
これでReactプロジェクトの作成は完了です。
![スクリーンショット 2023-08-05 23.58.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526092/6b802018-66d2-6f94-063c-0cf9b11339cd.png)

:::note warn
e2eプロジェクトは自動生成ですが、上記コマンドでオプション`--e2eTestRunner none`
を追加すると作成しないようにもできます。
:::

## Nest.jsプロジェクトを作成
次に作成したワークスペースにNest.jsのプロジェクトを作成します。
まずはNest.jsプロジェクトを作成する為にNxの`プラグイン`をインストールします。
```
npm i -D @nrwl/nest@15.9.4
```

インストールしたプラグインを使用してNest.jsプロジェクトを作成します。
```
nx g @nrwl/nest:application backend --frontendProject frontend
```

作ってくれました。
```
CREATE jest.preset.js
UPDATE nx.json
CREATE jest.config.ts
UPDATE package.json
UPDATE .vscode/extensions.json
CREATE apps/backend/src/assets/.gitkeep
CREATE apps/backend/src/main.ts
CREATE apps/backend/tsconfig.app.json
CREATE apps/backend/tsconfig.json
CREATE apps/backend/webpack.config.js
CREATE apps/backend/project.json
CREATE apps/backend/.eslintrc.json
CREATE apps/backend/jest.config.ts
CREATE apps/backend/tsconfig.spec.json
CREATE apps/backend-e2e/project.json
CREATE apps/backend-e2e/jest.config.ts
CREATE apps/backend-e2e/src/backend/backend.spec.ts
CREATE apps/backend-e2e/src/support/global-setup.ts
CREATE apps/backend-e2e/src/support/global-teardown.ts
CREATE apps/backend-e2e/src/support/test-setup.ts
CREATE apps/backend-e2e/tsconfig.json
CREATE apps/backend-e2e/tsconfig.spec.json
CREATE apps/backend-e2e/.eslintrc.json
CREATE apps/frontend/proxy.conf.json
UPDATE apps/frontend/project.json
CREATE apps/backend/src/app/app.controller.spec.ts
CREATE apps/backend/src/app/app.controller.ts
CREATE apps/backend/src/app/app.module.ts
CREATE apps/backend/src/app/app.service.spec.ts
CREATE apps/backend/src/app/app.service.ts
```

この段階で`apps`フォルダ配下は以下のようになります。
これでNest.jsプロジェクトの作成も完了です。
![スクリーンショット 2023-08-06 0.03.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526092/3a16d547-ed03-a302-5051-27f4305673da.png)

:::note warn
e2eプロジェクトは自動生成ですが、上記コマンドでオプション`--unitTestRunner none`
を追加すると作成しないようにもできます。
:::

## 作成したプロジェクトを一括起動
最後に作成したReact、Nest.jsのプロジェクトを同時に起動してみましょう。
package.jsonのscriptに以下を追記します。
```
"start": "nx run-many --target serve --all --parallel"
```

コマンドを実行します
```
npm run start
```

ターミナルの内容

```
> nx-v15-app@0.0.0 start
> nx run-many --target serve --all --parallel


 >  NX   Running target serve for 2 projects:

    - frontend
    - backend

 —————————————————————————————————————————————————————————————————————————————————————————

> nx run frontend:serve:development


> nx run backend:serve:development

Loading proxy configuration from: /Users/〇〇/Desktop/work/Nx-v15-Template/nx-v15-app/apps/frontend/proxy.conf.json
  ➜  Local:   http://localhost:4200/
chunk (runtime: main) main.js (main) 2.77 KiB [entry] [rendered]
webpack compiled successfully (67baf8e30669221e)
Debugger listening on ws://localhost:9229/59511579-063c-40c1-a6f5-579f3e66369b
Debugger listening on ws://localhost:9229/59511579-063c-40c1-a6f5-579f3e66369b
For help, see: https://nodejs.org/en/docs/inspector
Type-checking in progress...
[Nest] 18559  - 2023/08/06 0:09:54     LOG [NestFactory] Starting Nest application...
[Nest] 18559  - 2023/08/06 0:09:54     LOG [InstanceLoader] AppModule dependencies initialized +6ms
[Nest] 18559  - 2023/08/06 0:09:54     LOG [RoutesResolver] AppController {/api}: +11ms
[Nest] 18559  - 2023/08/06 0:09:54     LOG [RouterExplorer] Mapped {/api, GET} route +2ms
[Nest] 18559  - 2023/08/06 0:09:54     LOG [NestApplication] Nest application successfully started +1ms
[Nest] 18559  - 2023/08/06 0:09:54     LOG 🚀 Application is running on: http://localhost:3000/api
No errors found.
```


[React](http://localhost:4200/)の内容
![スクリーンショット 2023-08-06 0.11.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526092/49bcd841-7e72-63b1-5bac-fab1d9d61565.png)

[Nest.js](http://localhost:3000/api)の内容
![スクリーンショット 2023-08-06 0.12.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526092/8c3150e3-aa54-f4aa-efe8-c2e61ad82e6d.png)

起動できました！簡単！！さすがモノレポ！！！:flower_playing_cards: