Vercelでサブパスホスティングを設定する

VercelとNext.jsを使用すると、ウェブサイトのサブパスにヘルプセンターをホストできます。

例えば、help.yourdomain.com のようなサブドメインを使用する代わりに、yourdomain.com/help、yourdomain.com/docs、または yourdomain.com/support からヘルプセンターを提供できます。

この設定は、ウェブサイトが既にVercelでホストされており、ドキュメント、ナレッジベース、またはサポートコンテンツを同じドメイン内に維持したい場合に便利です。

このガイドでは、Next.jsプロキシを設定する方法を学びます。これにより、訪問者はメインのウェブサイトを変更せずに、選択したサブパスから直接ヘルプセンターにアクセスできるようになります。

始める前に

Vercelでサブパスホスティングを設定する前に、以下のものを用意してください。

既存の Notiondesk ヘルプセンター

Vercelプロジェクトへのアクセス

ウェブサイトのコードベースへのアクセス

Vercel上に展開されたウェブサイト

ヘルプセンターに使用したいサブパスの例：
- /help
- /docs
- /support

Notiondesk でサブパスホスティングが有効になりました

このガイドは、WebサイトがNext.jsで構築され、Vercelにデプロイされていることを前提としています。他のプロバイダーのサポートについては、こちらをご覧ください：サブパスでヘルプセンターをホストする。

Notiondesk でサブパスホスティングを有効にする

Notiondesk ダッシュボードを開き、Settings > General に移動します。

Domains セクションまでスクロールし、Subpath スイッチを有効にします。

セットアッププロバイダーとしてVercelを選択してください。Notiondeskが、ヘルプセンター用のVercel / Next.jsプロキシコードを生成します。

生成されたコードをコピーしてください。次のステップで、このコードをNext.jsプロジェクトに追加します。

Next.jsプロジェクトにプロキシファイルを追加します。

Notiondesk から生成されたコードをコピーした後、それを Next.js プロジェクトに追加します。

ファイル名はNext.jsのバージョンによって異なります。

Next.js 15以前の場合は、middleware.tsを使用してください。

Next.js 16以降の場合は、proxy.tsを使用してください。

プロジェクトのルートディレクトリにファイルを追加してください。

または、プロジェクトでsrcディレクトリを使用している場合：

Next.js 16以降の場合は、同じ場所を使用しますが、代わりにproxy.tsを使用してください。

Notiondesk によって生成されたコードをこのファイルに貼り付けてください。

このプロキシは、ブラウザのURLを変更することなく、/helpなどの選択したサブパスからのリクエストをNotiondeskヘルプセンターに転送します。

マッチャーを設定する

マッチャーは、どのルートをNotiondeskプロキシで処理すべきかをNext.jsに指示します。

/help でホストされているヘルプセンターの場合、マッチング条件には以下を含める必要があります。

/docs や /support など、別のサブパスを使用する場合は、/help を選択したサブパスに置き換えてください。

middleware.ts

src/middleware.ts

matcher: ["/help", "/help/:path*", "/_nd/:path*"]

このルートは必須です。ルートが設定されていない場合、一部のアセットやヘルプセンターの機能が正しく動作しない可能性があります。/_nd/:path*

Vercel / Next.js プロキシの例

以下は、/help でホストされているヘルプセンターの Next.js プロキシ設定の例です。

// Next.js <= 15: middleware.ts
// Next.js 16+: proxy.ts with export function proxy
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

const ORIGIN = "https://your-help-center.notiondesk.help";
const CUSTOM_HOST = "yourdomain.com";
const SUBPATH = "/help";

function isSubpathRequest(pathname: string) {
  return pathname === SUBPATH || pathname.startsWith(SUBPATH + "/");
}

export function middleware(request: NextRequest) {
  const isSubpath = isSubpathRequest(request.nextUrl.pathname);
  const target = new URL(request.nextUrl.pathname + request.nextUrl.search, ORIGIN);

  const headers = new Headers(request.headers);
  headers.set("Host", CUSTOM_HOST);
  headers.set("X-Forwarded-Host", CUSTOM_HOST);
  headers.set("X-Forwarded-Proto", "https");

  if (isSubpath) {
    headers.set("X-Site-Path-Prefix", SUBPATH);
  }

  return NextResponse.rewrite(target, { request: { headers } });
}

export const config = {
  matcher: ["/help", "/help/:path*", "/_nd/:path*"],
};

この例は参考用です。値はヘルプセンター、ドメイン、選択したサブパスによって異なるため、ダッシュボードで生成されたコードを使用してください。

Vercelプロジェクトをデプロイします

プロキシファイルを追加し、マッチャーを設定したら、変更内容をVercelにデプロイしてください。

変更を確定する

コードをGitリポジトリにプッシュする

Vercelの展開が完了するまでお待ちください。

デプロイが稼働すると、選択したサブパスへのリクエストはプロキシを経由してルーティングされ、Notiondesk ヘルプセンターによって処理されます。

設定を確認してください

展開が完了したら、ヘルプセンターが正しく動作していることを確認してください。

ヘルプセンターのホームページを開きます。次に、既知の記事のURLを開き、ページが正常に読み込まれることを確認してください。

以下の点を確認してください。

ヘルプセンターはメインドメインで読み込まれます

記事ページが正しく開きます

画像、スタイル、スクリプトは正しく読み込まれます

ブラウザのURLはカスタムドメインのままです。

メインウェブサイトはヘルプセンターのサブパス外でも引き続き動作します。

すべてが正しく読み込まれたら、サブパスホスティングの設定は完了です！

目次