はじめに
今回Nxで構築していたプロジェクトをVercel純正のモノレポツールであるTurborepoに移行することになったので、その際詰まったことなどを記載します。始めて書く記事なのでわかりにくいなどあれば教えていただけると幸いです。
こんな人におすすめ
- Next.jsでマイクロフロントエンドを築したい人
- Turborepoを使ってみたい人
- WEBプロジェクトをモノレポで構築したい人
- でも、Nxは微妙だと思った人（筆者）
マイクロフロントエンドとは
マイクロフロントエンドは、フロントエンドを複数の独立したアプリケーションに分割し、それぞれが独立して開発・デプロイ可能なアーキテクチャ。大規模開発や複数チーム開発に適した構成。（GPTより）
要するに、アプリを小単位に分割して管理・構築しようね、ってやつです。
マイクロフロントエンドは昨今のWEB開発に必要不可欠な技術です。
フロントエンド技術は日々進歩し、それに伴ってコードも複雑化・肥大化しています。
それに加えて、巨大なアプリ構築ではライブラリ競合などが発生しやすくなり、管理が面倒です。
マイクロフロントエンドはそういった問題を解決してくれます。
複数アプリに分割したアプリを管理しやすくするのがTurborepoやNX等のモノレポツールです。
今回はマイクロフロントエンドを意識したモノレポをTurborepoで構築する方法について書きます。
プロジェクト作成
については他に詳しい記事があるのでここでの記載は割愛します。
https://zenn.dev/hayato94087/articles/d2956e662202a7
アプリ間の遷移
マイクロフロントエンドでは複数アプリを別々のアプリとして構築することでそれぞれの独自性を保っています。しかし実際にそれぞれのアプリとしてホスティングはせず、あくまで一つのアプリとしてルーティングさせたいです。
/apps
/host ← ホスト兼統合プロキシ
/app1
/app2
その場合、next.config.tsをそれぞれ以外のようにします。
host
module.exports = {
async rewrites() {
return [
{
source: '/app1/:path*',
destination: 'http://localhost:3001/app1/:path*',
},
{
source: '/app2/:path*',
destination: 'http://localhost:3002/app2/:path*',
},
];
},
};
app1（app2も同様に）
const isProd = true; // ← devでもtrueに固定しておく
module.exports = {
basePath: '/app1',
assetPrefix: '/app1',
trailingSlash: true,
};
これでhostのリンクをベースパスとしてルーティングするようになります
すなわち、http://localhost:3000/app1にアクセスするとlocalhost:3001/のページが表示されるわけです。
問題点
しかし上記のようにホストアプリからの読み込みという形にすると、本来なら各アプリへの直接遷移という形で読み込まれるはずの静的コンテンツが読み込まれなくなります。
そうなるとtailwindcssが適用されません。
そこで、ルートのpackage.jsonに以下を記載することで、ローカルプロキシとして動作するので、直接アクセスと同じ挙動にできます。
"scripts": {
"dev:proxy": "turbo run dev --filter=proxy-host",
"dev:app1": "next dev apps/app1 -p 3001",
"dev:app2": "next dev apps/app2 -p 3002",
"dev:all": "concurrently \"yarn dev:app1\" \"yarn dev:app2\" \"yarn dev:proxy\""
}
あとはホスティング時にVercelなどでプロキシによるルーティングを設定すれば完成です。
まとめ
今回はモノレポでマイクロフロントエンドを構築する方法を書いてみました。参考になれば幸いです。