Thiết lập dịch vụ lưu trữ đường dẫn con với Vercel

Bạn có thể lưu trữ trung tâm trợ giúp Notiondesk của mình trên một đường dẫn phụ của trang web bằng cách sử dụng Vercel và Next.js.

Ví dụ, thay vì sử dụng tên miền phụ như help.yourdomain.com, bạn có thể cung cấp trung tâm trợ giúp của mình từ: yourdomain.com/help , yourdomain.com/docs hoặc yourdomain.com/support

Cấu hình này hữu ích khi trang web của bạn đã được lưu trữ trên Vercel và bạn muốn tài liệu, cơ sở kiến thức hoặc nội dung hỗ trợ của mình vẫn nằm dưới cùng một tên miền.

Trong hướng dẫn này, bạn sẽ học cách cấu hình proxy Next.js để khách truy cập có thể truy cập trung tâm trợ giúp của bạn trực tiếp từ đường dẫn phụ đã chọn mà không làm thay đổi trang web chính của bạn.

Trước khi bạn bắt đầu

Trước khi thiết lập dịch vụ lưu trữ đường dẫn con với Vercel, hãy đảm bảo bạn đã chuẩn bị đầy đủ các điều kiện sau:

Trung tâm trợ giúp hiện có của Notiondesk

Truy cập vào dự án Vercel của bạn

Quyền truy cập vào mã nguồn trang web của bạn

Một trang web được triển khai trên nền tảng Vercel.

Một đường dẫn phụ bạn muốn sử dụng cho trung tâm trợ giúp của mình, ví dụ:
- __ĐƯỢC BẢO QUẢN_21__
- __ĐƯỢC BẢO QUẢN_20__
- __ĐƯỢC BẢO QUẢN_19__

Tính năng lưu trữ đường dẫn con đã được bật trong Notiondesk

Hướng dẫn này giả định trang web của bạn được xây dựng bằng Next.js và triển khai trên Vercel. Xem hỗ trợ cho các nhà cung cấp khác tại đây: Lưu trữ trung tâm trợ giúp của bạn trên một đường dẫn con .

Bật tính năng lưu trữ đường dẫn con trong Notiondesk

Mở bảng điều khiển Notiondesk của bạn và truy cập Settings > General.

Cuộn xuống phần Domains, sau đó bật công tắc Subpath.

Chọn Vercel làm nhà cung cấp thiết lập. Notiondesk sẽ tạo mã proxy Vercel / Next.js cho trung tâm trợ giúp của bạn.

Sao chép đoạn mã được tạo ra. Bạn sẽ thêm nó vào dự án Next.js của mình ở bước tiếp theo.

Thêm tệp proxy vào dự án Next.js của bạn.

Sau khi sao chép mã được tạo từ Notiondesk, hãy thêm nó vào dự án Next.js của bạn.

Tên tệp phụ thuộc vào phiên bản Next.js của bạn:

Đối với Next.js phiên bản 15 trở xuống, hãy sử dụng middleware.ts

Đối với Next.js phiên bản 16 trở lên, hãy sử dụng proxy.ts

Thêm tệp này vào thư mục gốc của dự án:

Hoặc, nếu dự án của bạn sử dụng thư mục src:

Đối với Next.js phiên bản 16 trở lên, hãy sử dụng cùng vị trí đó nhưng thay thế bằng proxy.ts.

Dán mã được tạo bởi Notiondesk vào tệp này.

Máy chủ proxy này sẽ chuyển tiếp các yêu cầu từ đường dẫn phụ bạn đã chọn, chẳng hạn như /help, đến trung tâm trợ giúp Notiondesk của bạn mà không thay đổi URL trong trình duyệt.

Cấu hình bộ so khớp

Bộ so khớp cho Next.js biết những tuyến đường nào nên được xử lý bởi proxy Notiondesk.

Đối với trung tâm trợ giúp được lưu trữ tại /help, bộ so khớp cần bao gồm:

Nếu bạn đang sử dụng một đường dẫn con khác, chẳng hạn như /docs hoặc /support, hãy thay thế /help bằng đường dẫn con bạn đã chọn.

middleware.ts

src/middleware.ts

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

Cần phải có đường dẫn này. Nếu không có nó, một số tài nguyên và chức năng của trung tâm trợ giúp có thể không hoạt động chính xác./_nd/:path*

Ví dụ về proxy Vercel / Next.js

Dưới đây là ví dụ về cấu hình proxy Next.js cho trung tâm trợ giúp được lưu trữ tại /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*"],
};

Ví dụ này chỉ mang tính chất tham khảo. Hãy sử dụng mã được tạo trong bảng điều khiển của bạn, vì các giá trị này dành riêng cho trung tâm trợ giúp, tên miền và đường dẫn phụ đã chọn của bạn.

Triển khai dự án Vercel của bạn

Sau khi bạn đã thêm tệp proxy và cấu hình bộ so khớp, hãy triển khai các thay đổi lên Vercel.

Lưu lại các thay đổi của bạn

Đẩy mã của bạn lên kho lưu trữ Git.

Chờ quá trình triển khai Vercel hoàn tất.

Sau khi quá trình triển khai hoàn tất, các yêu cầu đến đường dẫn phụ bạn đã chọn sẽ được định tuyến qua máy chủ proxy và được phục vụ bởi trung tâm trợ giúp Notiondesk của bạn.

Kiểm tra thiết lập của bạn

Sau khi quá trình triển khai hoàn tất, hãy xác minh rằng trung tâm trợ giúp của bạn hoạt động chính xác.

Mở trang chủ trung tâm trợ giúp của bạn. Sau đó, mở một URL bài viết quen thuộc và xác nhận rằng trang tải thành công.

Xác nhận rằng:

Trung tâm trợ giúp sẽ được tải trong phần tên miền chính của bạn.

Các trang bài viết mở đúng cách

Hình ảnh, kiểu dáng và tập lệnh được tải đúng cách

URL trình duyệt vẫn giữ nguyên trên tên miền tùy chỉnh của bạn.

Trang web chính vẫn hoạt động bình thường ngay cả khi không truy cập vào đường dẫn phụ trung tâm trợ giúp.

Nếu mọi thứ tải đúng cách, quá trình thiết lập máy chủ đường dẫn phụ của bạn đã hoàn tất!

Bảng mục lục