【Vercel】Monorepoで複数のプロジェクトに同じドメインを当てる方法
2021-11-24
やってみるとめちゃくちゃ簡単だったので備忘録をば。
公式ドキュメント
If you'd like to host multiple projects under a single domain, you can create a new project, assign the domain in the project settings, and proxy requests to the other upstream projects.
と書かれていたので『別のプロジェクトも立ち上げる必要があるのか?』と思いましたが、全然そんなことはなかったです。
前提
- npm Workspaces
- Next.js
- Vercel
とはいえ Vercel 以外はてきとうで大丈夫です。
サンプル
消しちゃったら申し訳ないです。
手順
- 各々のプロジェクトを Vercel から import します
vercel.json
をいずれかのプロジェクトに配置し、よしなにrewrites
します
{
"rewrites": [
{
"destination": "https://workspace-fuga.vercel.app/:path*",
"source": "/piyo/:path*"
}
]
}
めっちゃ簡単ですね。
注意事項
- Vercel 側に複数のリポジトリを紐付ける必要がある、てっきり 1 つの Monorepo を紐付ければ良いと思っていたので、妙に手間取りました…。
未確認事項
- Cookie の扱い方はどうなるのか、多分大丈夫だと思っているが未確認
- rewrites 前の url にもアクセスできてしまう、サーバー側で弾くしかなさそう?
そんな感じです、思った以上に素直にすんなり動いちゃったのでビビりました。
おそらくやっていることとしては Nginx で rewrite しているだけだとは思いますが、それをフロント側から調整可能なのはエグいなーと。