LernaでReactとNestJSのプロジェクトをモノレポ化する

はじめに

複数のプロジェクトを、まとめて一つのgitリポジトリで管理したかったので、
Lerna という、複数パッケージを管理するためのツールを試してみました。

複数のプロジェクトを作成する

フロント側はReactで作成し、サーバ側はNestJSで作成します。

まず最初にsampleディレクトリを作成し、そのディレクトリの中に移動します。

mkdir sample
cd sample

Lernaがインストールされていない場合は、インストールしておきます。
グローバルインストールしても構いません。

npm install lerna --save-dev

次に以下のコマンドを入力し、Reactのプロジェクトを作成します。
{プロジェクト名}には任意のプロジェクト名を設定できます。
今回は「front」にしました。

npx create-react-app {プロジェクト名} --template typescript

プロジェクトが作成されたら、
frontディレクトリ内の.gitを削除しておきます。

rm -rf front/.git

次に以下のコマンドを入力し、NestJSのプロジェクトを作成します。
{プロジェクト名}には任意のプロジェクト名を設定できます。
今回は「server」にしました。

nest new {プロジェクト名}

プロジェクトが作成されたら、
serverディレクトリ内の.gitを削除しておきます。

rm -rf server/.git

次に、フロント側とサーバ側のポート番号が衝突しないよう、
サーバ側のポート番号を 3000 → 3001 に変更します。

server/src/main.ts

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(3001); // 3000 → 3001 に変更
}
bootstrap();

モノレポ化を行う

それではいよいよLernaでモノレポ化していきます。
以下のコマンドを実行すると、lerna.json、package.json、packagesが作成されます。

lerna init

続いて、front、serverをパッケージ化するために以下のコマンドを実行します。

mv front packages
lerna create @sample/front packages/front

mv server packages
lerna create @sample/server packages/server

これでモノレポ化は完了です。
以下のコマンドで、それぞれのプロジェクトでビルドを実行でき流ようになっていると思います。

lerna run build

おわりに

まだ他にも設定しなきゃいけないことはありますが、
ひとまずモノレポ化の手順については以上になります。