【Vercel】Monorepoで複数のプロジェクトに同じドメインを当てる方法

やってみるとめちゃくちゃ簡単だったので備忘録をば。

公式ドキュメント

Monorepos

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 以外はてきとうで大丈夫です。

サンプル

workspace-test

消しちゃったら申し訳ないです。

手順

1. 各々のプロジェクトを Vercel から import します
2. vercel.json をいずれかのプロジェクトに配置し、よしなに rewrites します

{
  "rewrites": [
    {
      "destination": "https://workspace-fuga.vercel.app/:path*",
      "source": "/piyo/:path*"
    }
  ]
}

めっちゃ簡単ですね。

注意事項

• Vercel 側に複数のリポジトリを紐付ける必要がある、てっきり 1 つの Monorepo を紐付ければ良いと思っていたので、妙に手間取りました…。

未確認事項

• Cookie の扱い方はどうなるのか、多分大丈夫だと思っているが未確認
• rewrites 前の url にもアクセスできてしまう、サーバー側で弾くしかなさそう？

そんな感じです、思った以上に素直にすんなり動いちゃったのでビビりました。

おそらくやっていることとしては Nginx で rewrite しているだけだとは思いますが、それをフロント側から調整可能なのはエグいなーと。