🗼

Vercelで複数のNext.jsプロジェクトを同じドメイン(サブディレクトリ)で動かす!

2022/10/19に公開約1,500字

背景

複数のアプリケーションを同じURL(サブディレクトリ[1])上で実現したい。URLはそのままに違う環境のアプリケーションを動かしたいときに便利です。特に複雑な設定をする必要もなくNext.jsを設定するだけで実現できます。

初見で簡単にできそうな感じがしたんですが、かなりの時間をドキュメントの閲覧に費やすことになったので、この記事で解決できれば幸いです!

目的

複数のNext.jsアプリケーションをVercel上で1つのドメインにホスティングしてるかのように見せる。(実際はRewriteでルーティングを行う)
完成系は下記の通りに、Project2をProject1/project2以下にルーティングした形です。

Project1: https://project1.com
Project2: https://project1.com/project2

前提

Project1,Project2はそれぞれ独立したVercelのプロジェクトです。
Project1には、https://project1.com
Project2には、https://project2.com のドメインが割り当てられています。

※等環境下では、ネームサーバーではなく、cネームによりドメイン管理していました。

Project1の設定

next.config.jsで、ルーティングの設定をします。下記の設定だとhttps://project1/project2 にアクセスした際に、Project2のアプリケーションにアクセスします。

next.config.js
{
 async rewrites() {
    return [
      {
        source: '/project2/:match*',
        destination: process.env.PROJECT2_URL + ':match*',
      },
    ];
  },
}
env
PROJECT2_URL=https://project2.com/

Project2の設定

Project2のnext.config.js

next.config.js
{
  assetPrefix: env.ASSET_PREFIX
}
env
ASSET_PREFIX=https://project2.com/

書きながら気づいたんですが、VercelのNEXT_PUBLIC_VERCEL_URLを使った方がenvも増えず合理的ですね!

参考

https://vercel.com/guides/how-can-i-serve-multiple-projects-under-a-single-domain
https://nextjs.org/docs/api-reference/next.config.js/cdn-support-with-asset-prefix

脚注
  1. サブディレクトリは、独自ドメインの後ろに新たな文字列を追加したドメインです。ベースとなる独自ドメインの後ろにスラッシュを入力し、文字列を追加します。
    引用元:https://gmotech.jp/semlabo/seo/blog/subdomain-subdirectory/

    ↩︎

Discussion

ログインするとコメントできます