🏍️

Rush で NestJS + Next.js 構成のモノレポを作る

2022/12/22に公開

モノレポ

rush

tech

概要

Rushで以下の構成のモノレポを作る
- backend という名前の workspace を作成し、 NestJS を導入する
- frontend という名前の workspace を作成し、 Next.js を導入する

Rush とは

TypeScript の本家である Microsoft が開発したモノレポマネージャーです。

https://rushjs.io/

モノレポを実現することは yarn や npm でもできます。

個人的に今まで携わっていた案件では yarn workspace を使うことが多かったです。
以下は yarn workspace で似たようなのことをする手順をまとめた拙記事です。

npmでもバージョン7からはworkspaces機能がサポートされています。
これに関しては以下の記事が参考になりました。

Rushには以下のような特徴があるようです。

スケーラブル（マイクロソフトの数百のリポジトリで導入実績あり・大規模なチーム向けに設計されている）
合理的にライブラリの依存関係を管理できる
- 循環した依存関係などが原因で生じるパッケージ間の不整合の解消
- 同じライブラリの同じバージョンが重複してインストールされるような事態の回避

詳しくは公式のトップページでも解説されています。

https://rushjs.io/

前提

Node.js がすでにインストールされていること

各種バージョンは以下で試行しました。

env/lib	version
Node.js	16.13.0
npm	9.2.0
rush	5.87.0

Rush のインストールと初期化

以下でインストールします。

$ npm install -g @microsoft/rush

ディレクトリの場所は適当に決めて初期化します。

$ cd /path/to/somewhere
$ mkdir rush-handson
$ cd $_
$ rush init

色々ファイルが作られます。
各々の役割は公式ドキュメントで解説されてます。

特定の状況下では削除した方がいいファイルもあるみたいですが(例えばGitを使わないのであれば .gitattributes を削除するよう促されてたりする)ここでは一旦そのまま進めます。

ここではGitの使用は便宜上割愛していますが、Gitを使って rush init などステップごとにコミットしておくと各コマンドがどういった出力をするのかがよくわかります。この点は適宜試行するとより理解が深まると思います。

backend 側の対応

まずNestJS側です。

まず以下でNestJSのCLIをインストールします。

$ npm i -g @nestjs/cli

あとは上記を利用してNestJSアプリを作成します。
プロジェクトは apps 以下に作っていくことになります。

$ mkdir apps
$ cd $_
$ nest new backend --skip-git

この時点でパッケージ名を編集しておきます。
（別に vim で編集する必要はなくて別のエディタでも大丈夫です）

$ cd backend
$ vim package.json
{
  "name": "@rush-handson/backend",
...（以下省略）

つづいて、 rush.json に今作ったプロジェクトを登録します。
projects っていう配列のセクションがあるので、そこにパッケージ名と配置したパスをそれぞれ持たせたオブジェクトを追加します。以下のような感じです。

$ cd ../..
$ vim rush.json
...
  "projects": [
    {
      "packageName": "@rush-handson/backend",
      "projectFolder": "apps/backend"
    }
...

rush.json の編集が完了したら、以下のコマンドでRushにプロジェクトを認識させて依存関係等の面倒を見てもらえるようになります。

$ rush update

今回追加した NestJS のプロジェクトに関しては、以下の手順で開発用サーバーを起動させることができます。

$ cd apps/backend
$ rushx start:dev

http://localhost:3000/ にアクセスして 'Hello World!' と表示されていたら成功です。

frontend側の対応

Next.js 側もプロジェクトとして登録しますが、前節とほぼ同じ手順となるので割愛します・・・

注意点

今後使用していく上での注意点です。

パッケージの管理は全て rush を経由して行う
- その他のパッケージマネージャー(npm, yarn など)のコマンドを使わないように注意

（まだ入門レベルなので実践経験を積んだ上でこれは適宜追加していきます）

概要

Rush とは

前提

Rush のインストールと初期化

backend 側の対応

frontend側の対応

注意点

参考

Discussion