הגדר אירוח תת-נתיב עם Vercel

ניתן לארח את מרכז העזרה Notiondesk שלך בתת-נתיב של אתר האינטרנט שלך באמצעות Vercel ו-Next.js.

לדוגמה, במקום להשתמש בתת-דומיין כמו help.yourdomain.com, ניתן לשרת את מרכז העזרה שלך מ: yourdomain.com/help, yourdomain.com/docs או yourdomain.com/support

הגדרה זו שימושית כאשר אתר האינטרנט שלך כבר מאוחסן ב-Vercel ואתה רוצה שהתיעוד, מאגר הידע או תוכן התמיכה שלך יישארו תחת אותו דומיין.

במדריך זה, תלמדו כיצד להגדיר פרוקסי של Next.js כך שמבקרים יוכלו לגשת למרכז העזרה שלכם ישירות מנתיב המשנה שבחרתם, תוך שמירה על אתר האינטרנט הראשי שלכם ללא שינוי.

לפני שאתם מתחילים

לפני הגדרת אירוח תת-נתיב עם Vercel, ודא שיש לך:

• מרכז עזרה קיים של Notiondesk

• גישה לפרויקט Vercel שלך

• גישה לבסיס הקוד של האתר שלך

• אתר אינטרנט שנפרס על גבי Vercel

• נתיב משנה שברצונך להשתמש בו עבור מרכז העזרה שלך, כגון:
  • __נשמר_21__

  • __נשמר_20__

  • __נשמר_19__

• אירוח תת-נתיב מופעל ב-Notiondesk

מדריך זה מניח שהאתר שלך בנוי עם Next.js ונפרס על Vercel. ראה תמיכה של ספקים אחרים כאן: אחסון מרכז העזרה שלך בנתיב משנה .

הפעל אירוח נתיב משנה ב-Notiondesk

פתח את לוח המחוונים Notiondesk ועבור אל Settings > General.

גלול לקטע Domains, לאחר מכן הפעל את המתג Subpath.

בחר Vercel כספק ההתקנה. Notiondesk ייצור את קוד הפרוקסי של Vercel / Next.js עבור מרכז העזרה שלך.

העתיקו את הקוד שנוצר. תוסיפו אותו לפרויקט Next.js שלכם בשלב הבא.

הוסף את קובץ ה-proxy לפרויקט Next.js שלך

לאחר העתקת הקוד שנוצר מ-Notiondesk, הוסיפו אותו לפרויקט Next.js שלכם.

שם הקובץ תלוי בגרסת Next.js שלך:

• עבור Next.js גרסה 15 ומטה, השתמש ב-middleware.ts

• עבור Next.js גרסה 16 ומעלה, השתמש ב-proxy.ts

הוסף את הקובץ בשורש הפרויקט שלך:

או, אם הפרויקט שלך משתמש בספרייה src:

עבור Next.js 16 ומעלה, השתמשו באותו מיקום אך עם proxy.ts במקום זאת.

הדבק את הקוד שנוצר על ידי Notiondesk לתוך קובץ זה.

פרוקסי זה יעביר בקשות מנתיב המשנה שבחרת, כגון /help, למרכז העזרה Notiondesk שלך מבלי לשנות את כתובת ה-URL בדפדפן.

הגדר את ההתאמה

ההתאמה אומרת ל-Next.js אילו נתיבים צריכים להיות מטופלים על ידי ה-proxy Notiondesk.

עבור מרכז עזרה המתארח ב-/help, ההתאמה צריכה לכלול:

אם אתם משתמשים בנתיב משנה אחר, כגון /docs או /support, החליפו את /help בנתיב המשנה שבחרתם.

middleware.ts

src/middleware.ts

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

המסלול נדרש. בלעדיו, ייתכן שחלק מהנכסים ופונקציונליות מרכז העזרה לא יפעלו כראוי./_nd/:path*

דוגמה לפרוקסי של Vercel / Next.js

להלן דוגמה לתצורת פרוקסי Next.js עבור מרכז עזרה המתארח ב-/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*"],
};

דוגמה זו היא לעיון בלבד. השתמש בקוד שנוצר בלוח המחוונים שלך, מכיוון שהערכים ספציפיים למרכז העזרה, לדומיין ולנתיב המשנה שנבחר.

פרוס את פרויקט Vercel שלך

לאחר שהוספת את קובץ ה-proxy והגדרת את ההתאמה, פרוס את השינויים ב-Vercel.

1. בצע את השינויים שלך

2. דחפו את הקוד שלכם למאגר הגיט שלכם

3. המתן להשלמת פריסת Vercel

לאחר שהפריסה תהיה פעילה, בקשות לתת-הנתיב שבחרת ינותבו דרך ה-proxy ויוגשו על ידי מרכז העזרה Notiondesk שלך.

אימות ההגדרה שלך

לאחר השלמת הפריסה, ודא שמרכז העזרה שלך פועל כראוי.

פתח את דף הבית של מרכז העזרה. לאחר מכן פתח כתובת URL ידועה של המאמר וודא שהדף נטען בהצלחה.

אשר כי:

• מרכז העזרה נטען תחת הדומיין הראשי שלך

• דפי המאמר נפתחים כראוי

• תמונות, סגנונות וסקריפטים נטענים כראוי

• כתובת ה-URL של הדפדפן נשארת בדומיין המותאם אישית שלך

• האתר הראשי ממשיך לפעול מחוץ לנתיב המשנה של מרכז העזרה

אם הכל נטען כהלכה, הגדרת אירוח תת-הנתיב שלך הושלמה!