Vercelでrewriteの設定をvercel.jsonもしくはServerless Functions with Honoで行う

マイクロフロントエンド・・・というには大袈裟ですが、複数のサイト（CMS + Next.jsなどと、コードから生成するDocsサイトなど）を同一ドメインでホストしようとすると、rewriteルールの設定が必要になります。

今回はVercelで、Next.jsの機能を使わずに実装する方法を2つ試しました。

vercel.jsonでリライトルールを設定する

確実なのはこちらです。destinationにもう一つのサイトのURLを指定しましょう。

{
  "rewrites": [
    {
      "source": "/SUBDIRECTORY_NAME",
      "destination": "https://DESTINATION_DOMAIN/SUBDIRECTORY_NAME"
    },
  ]
}

下層ページがある場合は、正規表現をパスにつけます。

{
  "rewrites": [
    {
      "source": "/proxy/:match*",
      "destination": "https://example.com/:match*"
    }
  ]
}

HonoとServerless Functionsで実装する

もう一つの方法は、コードで実装するものです、vercel.jsonでHonoのソースコードを配置しているディレクトリにリライトさせましょう。

{
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/api"
    },
  ]
}

その後api/index.tsでリライトの実装を追加します。

import { Hono } from 'hono'
import { handle } from 'hono/vercel'

export const config = {
  runtime: 'edge',
}

const app = new Hono()
const elementsApp = new Hono()

elementsApp.get('/*', c => {
  const path = c.req.path.replace(/^\/SUBDIRECTORY_NAME/, '')
  return fetch(`https://DESTINATION_DOMAIN/SUBDIRECTORY_NAME${path}`)
})

app.route('/SUBDIRECTORY_NAME', elementsApp)

export default handle(app)

vercel.jsonのリライトで要件を満たせない場合があるなら、Honoを使う？

JSONファイルを配置するだけで実現できる要件を、わざわざコードを書いて対応する必要はないと思います。とはいえ、この手の作業はどこかで「設定項目が足りない」か「レスポンスなどをカスタマイズしないといけない」ケースが起きます。そんな時のためにやり方を知っておいても損はしないかなと思いました。