モノレポ構成のNext.jsプロジェクトを作成し、Vercelにデプロイする

2022.7.13

最近クライアントとAPIなWebアプリケーションの開発を行っていて、その際モノレポ構成をとってみることにしました。
もともとクライアント側だけ開発していた所からモノレポに切り替えたので、その辺りの話からVercelのデプロイまでを書いておきます。

構成

クライアント
API

この2つでのモノレポ構成で、パッケージの管理は npm workspaces を使用しました。

現状はAPI側の開発はしっかり行っていませんが、クライアント側を中心に。
こういう形になりました。

├── README.md
├── client
│   ├── package.json
│   ├── :
│   ├── src
│   └── tsconfig.json
│
├── package-lock.json
├── package.json
└── tsconfig.json

プロジェクトルートの package.json で共通パッケージの管理をし、 client/package.json で固有のパッケージを管理するようになっています。

既存プロジェクトからの移行

既存のプロジェクトをサブディレクトリに移動してパッケージを移動すると処理が終わらなかったので、改めてプロジェクトルートとサブディレクトリ内それぞれに package.json を作成。

プロジェクトルート側に workspaces の設定を追加しました。

{
  :
  "workspaces": [
    "client"
  ]
}

その上でプロジェクトで共通して使えるものはいつもの通りインストールし、パッケージ固有のものは npm i パッケージ名 -w client でインストールすることで上手くインストールすることができました。

この辺りはこの記事が参考になりました。

eslintrc.json / tsconfig.json の設定

それぞれプロジェクトルートのファイルに共通の設定を書いておき、 extends することになります。

client/eslintrc.json

設定は以下のようになります。

{
  "extends": [
    "next/core-web-vitals",
    "../.eslintrc.json"
  ],
  "parserOptions": {
    "sourceType": "module",
    "project": "./tsconfig.json"
  }
}

1つ上のルートディレクトリにある共通設定を継承しつつ、必要な設定を追記しました。
パスが上手く解決できないようで、tsconfig.json の指定はこちらで書いています。

tsconfig.json

{
  "extends": "../tsconfig.json",
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
  }
}

こちらもプロジェクトルートの設定を継承し、設定を追記しています。
こちらは大半いけましたが、パスエイリアスの指定のみ調整をしました。

Vercel へのデプロイ

Vercelはプロジェクトルートをcloneしてコマンドを実行するようなので、少し調整を入れました。

ポイントとしては2つ

BUILD COMMANDを変更する
OUTPUT DIRECTORYを変更する

1.BUILD COMMANDを変更する

ワークスペースを指定してビルドのコマンドを実行すれば良いようです

npm run build  -w client

2.OUTPUT DIRECTORYを変更する

こちらも階層が変わるので変更します

client/.next

これでビルドができるようになりました。

やってみて

まだ調整が必要になりそうではありますが、できてみると色々納得感があるように思いました。

Github Actionsもパスやワークスペース指定をして上手く動いたので良かったです。

引き続き調整しつつ開発を進めていこうかな