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

サンプル

workspace-test

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

手順

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

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

めっちゃ簡単ですね。

注意事項

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

未確認事項

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

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

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