NxでAngular,Nestjsのクライアント・サーバのMonorepoをさくっと作る-2022

2022-12-08T16:03:09Z

この記事はAngular Advent Calendar 2022の9日目の記事です。

NxでAngularとNestjsのモノレポを作ろうとしたところ以前の方法では作れなくなっていたので記事にしてみました。

Summary

# リポジトリとnestjsアプリ作成
$ npx create-nx-workspace@latest
✔ Choose your style                     · integrated
✔ What to create in the new workspace   · nest
✔ Repository name                       · test-monorepo<your name>
✔ Application name                      · test-api<your api name>
✔ Enable distributed caching to make your CI faster · No

# Angularアプリ作成
$ cd test-monorepo
$ npm install -D @nrwl/angular
# package.jsonのscriptに`"nx": "nx"`を追加。
# yarnをつかう場合は`yarn  nx`でリポジトリのnxが使用できるのでスクリプトは不要。
$ npm run nx g @nrwl/angular:app test-web-app

---------------------------

動機

Angularってとっつきにくさを指摘されることも多いですが、CLIツールが充実しているのでさくっと動くものを作ってプロトタイピングするのに意外と向いています。

最近クライアント・サーバモデルのプロトタイピングをさくっと作りたいなとNxを使ってみたところ簡単にできました。ただ以前日本語の記事などで紹介されている方法とは少し変わってしまっていたので今回記事にしてみました(CLIからangular-nestのテンプレートが使えなくなってた)。

Nxとは

https://nx.dev/

スマート、ファースト

拡張可能なビルドシステム

ファーストクラスの monorepo サポートと強力な統合機能を備えた次世代ビルドシステムです。

前提

Node.js@v16.18.1
npm@8.19.2
create-nx-workspace@15.2.4(今回はlatestで使ってますが一応メモとして)

を使用しています。`npx`が使えるバージョンを使用してください。

リポジトリの作成

$ npx create-nx-workspace@latest
✔ Choose your style                     · integrated
✔ What to create in the new workspace   · nest
✔ Repository name                       · test-monorepo<your name>
✔ Application name                      · test-api<your api name>
✔ Enable distributed caching to make your CI faster · No

`style`はフレームワークのテンプレートが使用できるintegratedを選択します。`workspace`はnestにしていますが、あとでnestを入れるならangularでも大丈夫です。

`Enable distributed caching`はどちらでもいいのですが、今回別にCIしないということと、nxCloudと通信してしまうのも気持ち悪いので一応切ってます。

こんなディレクトリが生成されれば完了です。

/test-monorepo
├── apps
│   └── test-api
├── jest.config.ts
├── jest.preset.js
├── libs
├── node_modules  [635 entries exceeds filelimit, not opening dir]
├── nx.json
├── package.json
├── package-lock.json
├── tools
│   ├── generators
│   └── tsconfig.tools.json
└── tsconfig.base.json

リポジトリのルートディレクトリに移動してアプリを実行するとすぐにnestjsが実行できます。

$ cd test-monorepo/
$ npm run start

Angularアプリケーションの追加

Angularの雛形を使うには`@nrwl/angular`が必要です。

$ npm install -D @nrwl/angular

nxをグローバルにインストールしていないのでpackage.jsonのスクリプトに`"nx": "nx"`を追加します。(`yarn`使う場合は不要)

# package.json
{
...
  "scripts": {
    "start": "nx serve",
    "build": "nx build",
    "test": "nx test",
    "nx": "nx"
  },
...
}

`test-web-app`という名前のAngularのアプリを作成します。

$ npm run nx g @nrwl/angular:app test-web-app

appsディレクトリ以下にAngularアプリが作成されました。

/apps
├── test-api
│   ├── jest.config.ts
│   ├── project.json
│   ├── src
│   ├── tsconfig.app.json
│   ├── tsconfig.json
│   └── tsconfig.spec.json
├── test-web-app
│   ├── jest.config.ts
│   ├── project.json
│   ├── src
│   ├── tsconfig.app.json
│   ├── tsconfig.editor.json
│   ├── tsconfig.json
│   └── tsconfig.spec.json
└── test-web-app-e2e
    ├── cypress.config.ts
    ├── project.json
    ├── src
    └── tsconfig.json

小ネタ

同時実行

AngularとNestjsを同時実行する場合以下のスクリプトで実行できます。

# package.json
## script
"run-many": "nx run-many --target=serve --projects=test-api,test-web-app"

デフォルトだと`http://localhost:4200/`でAngularが`http://localhost:3333/api`でNestjsがローカル実行されることを確認できます。

ちなみにテストを同時実行したい場合はこうなります。

"test-many": "nx run-many --target=test --projects=test-api,test-web-app"

APIつなぎこみ

せっかくなのでAPIにWebアプリをつなぐとこまでやってみましょう。Angularのapp.component.htmlとapp.component.tsの内容を書き換えます。

# app.component.html
<p>{{response | async | json}}</p>

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'test-monorepo-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  title = 'test-web-app';
  response = fetch('http://localhost:3333/api').then(res => res.json());
}

パイプをフル活用してみました。

しかしこれで起動するとCORSのエラーが出てAPIを利用できません。

API側で`Access-Control-Allow-Origin`ヘッダーを設定する必要があります。

// app.controller.ts
import { Controller, Get, Header } from '@nestjs/common';

import { AppService } from './app.service';

@Controller()
export class AppController {
  constructor(private readonly appService: AppService) {}

  @Header('Access-Control-Allow-Origin', 'http://localhost:4200')
  @Get()
  getData() {
    return this.appService.getData();
  }
}

できました。