Open6
next.jsプロジェクトのmonorepo化について調べる
Hirotaka Miyagiやりたいこと
- Vercelでホスティングしているnext.jsプロジェクトで、もう一つ別でnext.jsプロジェクトを作りたくなってきた
- pagesやホスティング先は違うが、コンポーネントなどで共通で利用できるものは利用したいため、monorepoにするのが妥当そう
Hirotaka Miyagi
- 複数のpackageを管理するための規約を提供する
- サブディレクトリのpackageで必要な依存関係をルートディレクトリのnode_modulesでhoistedできる
- ルートで実行できるコマンド
-
yarn workspaces infoでpackageを一覧表示 -
yarn workspaces run xxxでpackageそれぞれでxxxを実行
Hirotaka Miyagi続いてVercelでのmonorepo対応状況を見ていく
プロジェクトのroot directoryを変更することで利用できそうだ
ということで試してみる
この設定は特定のPreview環境だけで有効化することができないので、production環境に影響するのではないかとかなり怖い。安全に進めるならVercelで別のプロジェクトを作って再度repositoryのimportから進めた方が良いかもしれない
このプロジェクトは個人サイトなので影響範囲は少ないためガンガン進める
Hirotaka Miyagi
Next.jsアプリを apps/blog ディレクトリに移動して動かせるようにする
まずは単純にディレクトリを移動させる
ルートディレクトリにpackage.jsonを新しく作り、workspacesの設定を追加する
{
"name": "mh4gf.dev",
"version": "0.0.1",
"repository": "git@github.com:MH4GF/log.mh4gf.dev.git",
"author": "MH4GF <h.miyagi.cnw@gmail.com>",
"license": "MIT",
"private": true,
"workspaces": ["apps/blog"]
}
- https://github.com/MH4GF/log.mh4gf.dev/commit/9bbfaa3adc630f6d16aa70e6e042cc6b6db1b59f
- これで
yarn installを実行するとルートディレクトリにyarn.lockが追加され、各パッケージの依存が全てルートのnode_modulesに追加される- そのためサブディレクトリに移動させたyarn.lockは削除して良い
各種コマンドが動くようにする
- huskyが失敗していたのでルートに移動させた
- TypeScriptのコンパイルが動いていなかったため、ルートディレクトリにベースとなるtsconfig.jsonを置き、各パッケージのtsconfig.jsonでextendsさせるようにした
- VSCode上のESLintでエラーが大量に出ているため、.eslintrc.jsonをルートに移動させた
- https://github.com/MH4GF/log.mh4gf.dev/commit/6be0bf018d79dd533c5f6237840c13843b6f8ad1
- それだけではうまくいかなかったが、VSCodeの設定を変更して解決できた
- ref: https://zenn.dev/naotaro0123/articles/4a633da53390f2
ここまでで、 yarn workspace blog dev で apps/blog ディレクトリの yarn dev がいつも通り実行できるようになった
Hirotaka Miyagiturborepoの導入
- 差分ビルドとクラウドキャッシングの提供 ... キャッシュヒットすればビルドがすぐ終わる、クラウド経由でキャッシュアーティファクトを取得できる
- 並列実行 ... 複数プロセス(yarn dev等)を同時に実行できる
- タスクパイプライン ... タスクの依存関係を制御できる
まだ1つのサブパッケージしかないが、導入しておくとサブパッケージの追加がしやすそうなので今のうちに使ってみる
とりあえずよくあるコマンド(dev, build, lint, format)は yarn workspace を叩かずとも実行できるようになった
Hirotaka Miyagilib配下のコードの一部を別packagesとして管理してみる
自身のアプリケーションにはNotion APIを利用しており、それらはapp/blog/lib/notion配下に置いていたので、試しに別パッケージとして移動して複数アプリケーションから参照できるようにしてみる。
ディレクトリの移動
- libのファイルをpackages/notn配下に移動する
- app/blogのpackage.jsonのdependenciesとしてnotnを追加
- アプリケーションから呼び出している箇所でimport元を変更
このままだと以下のようなエラーが出る。
Module parse failed: Unexpected token (4:17)
moet:dev: You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
外部ディレクトリに移動したことでwebpackでのloadingができていないようだ。
https://github.com/martpie/next-transpile-modules を利用することで、外部ディレクトリのファイルのトランスパイルができる。
参考: