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

2021-11-24

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


公式ドキュメント

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 しているだけだとは思いますが、それをフロント側から調整可能なのはエグいなーと。

© 2018 kk-web