Skonfiguruj hosting podścieżek za pomocą Vercel

Centrum pomocy Notiondesk możesz umieścić w ścieżce podrzędnej swojej witryny, korzystając z Vercel i Next.js.

Na przykład zamiast używać subdomeny takiej jak help.yourdomain.com, możesz obsługiwać swoje centrum pomocy z: yourdomain.com/help, yourdomain.com/docs lub yourdomain.com/support

Taka konfiguracja jest przydatna, gdy Twoja witryna jest już hostowana w systemie Vercel i chcesz, aby dokumentacja, baza wiedzy lub treści pomocy technicznej pozostały w tej samej domenie.

W tym przewodniku dowiesz się, jak skonfigurować serwer proxy Next.js, aby użytkownicy mogli uzyskać dostęp do Twojego centrum pomocy bezpośrednio z wybranej przez Ciebie ścieżki podrzędnej, nie zmieniając przy tym głównej witryny.

Zanim zaczniesz

Przed skonfigurowaniem hostingu podścieżek w Vercel upewnij się, że masz:

Istniejące centrum pomocy Notiondesk

Dostęp do Twojego projektu Vercel

Dostęp do bazy kodu Twojej witryny

Strona internetowa wdrożona na platformie Vercel

Podścieżka, której chcesz użyć dla swojego centrum pomocy, taka jak:
- __ZACHOWANO_21__
- __ZACHOWANO_20__
- __ZACHOWANE_19__

Hosting podścieżki włączony w Notiondesk

W tym przewodniku założono, że Twoja witryna została zbudowana w oparciu o Next.js i wdrożona w Vercel. Informacje o wsparciu innych dostawców znajdziesz tutaj: Umieść swoje centrum pomocy na ścieżce podrzędnej .

Włącz hosting podścieżek w Notiondesk

Otwórz pulpit nawigacyjny Notiondesk i przejdź do Settings > General.

Przewiń do sekcji Domains, a następnie włącz przełącznik Subpath.

Wybierz Vercel jako dostawcę instalacji. Notiondesk wygeneruje kod proxy Vercel / Next.js dla Twojego centrum pomocy.

Skopiuj wygenerowany kod. Dodasz go do projektu Next.js w następnym kroku.

Dodaj plik proxy do swojego projektu Next.js

Po skopiowaniu wygenerowanego kodu z Notiondesk dodaj go do projektu Next.js.

Nazwa pliku zależy od wersji Next.js:

W przypadku Next.js w wersji 15 lub starszej użyj middleware.ts

W przypadku Next.js w wersji 16 lub nowszej użyj proxy.ts

Dodaj plik do katalogu głównego swojego projektu:

Lub jeśli Twój projekt wykorzystuje katalog src:

W przypadku Next.js w wersji 16 lub nowszej użyj tej samej lokalizacji, ale zamiast tego użyj proxy.ts.

Wklej kod wygenerowany przez Notiondesk do tego pliku.

Ten serwer proxy będzie przekazywał żądania z wybranej przez Ciebie ścieżki podrzędnej, np. /help, do centrum pomocy Notiondesk bez zmiany adresu URL w przeglądarce.

Skonfiguruj matcher

Funkcja dopasowująca informuje Next.js, które trasy powinny być obsługiwane przez serwer proxy Notiondesk.

W przypadku centrum pomocy znajdującego się pod adresem /help, wyszukiwarka powinna zawierać:

Jeśli używasz innej ścieżki podrzędnej, np. /docs lub /support, zastąp /help wybraną przez siebie ścieżką podrzędną.

middleware.ts

src/middleware.ts

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

Trasa jest wymagana. Bez niej niektóre zasoby i funkcje Centrum pomocy mogą nie działać poprawnie./_nd/:path*

Przykład proxy Vercel / Next.js

Poniżej znajduje się przykład konfiguracji serwera proxy Next.js dla centrum pomocy hostowanego pod adresem /help.

// 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*"],
};

Ten przykład ma charakter wyłącznie poglądowy. Użyj kodu wygenerowanego w panelu, ponieważ wartości są specyficzne dla Twojego centrum pomocy, domeny i wybranej ścieżki podrzędnej.

Wdróż swój projekt Vercel

Po dodaniu pliku proxy i skonfigurowaniu programu dopasowującego wdróż zmiany w Vercel.

Zatwierdź zmiany

Prześlij swój kod do repozytorium Git

Poczekaj na zakończenie wdrażania Vercel

Po uruchomieniu wdrożenia żądania kierowane do wybranej ścieżki podrzędnej będą kierowane przez serwer proxy i obsługiwane przez centrum pomocy Notiondesk.

Sprawdź swoją konfigurację

Po zakończeniu wdrażania sprawdź, czy centrum pomocy działa prawidłowo.

Otwórz stronę główną centrum pomocy. Następnie otwórz znany adres URL artykułu i sprawdź, czy strona ładuje się pomyślnie.

Potwierdź, że:

Centrum pomocy ładuje się w Twojej domenie głównej

Strony artykułów otwierają się poprawnie

Obrazy, style i skrypty ładują się prawidłowo

Adres URL przeglądarki pozostaje w Twojej domenie niestandardowej

Główna strona internetowa nadal działa poza podścieżką centrum pomocy

Jeśli wszystko załaduje się poprawnie, konfiguracja hostingu podścieżki jest ukończona!

Spis treści