Giả sử bạn có một trang web được xây dựng trên một nền tảng vượt trội về thiết kế và nó có sẵn tại example.com. Nhưng nền tảng đó không thành công trong việc viết blog. Vì vậy, bạn tự nghĩ: “Điều gì sẽ xảy ra nếu tôi có thể sử dụng một nền tảng blog khác và cung cấp nó tại example.com/blog? "

Hầu hết mọi người sẽ nói với bạn rằng điều đó đi ngược lại cách DNS và các trang web được cho là hoạt động và thay vào đó sử dụng tên miền phụ. Nhưng có những lợi ích khi giữ nội dung của bạn trên miền gốc mà chúng tôi không nhận được với các miền phụ.

Có một cách để phân phát hai nền tảng khác nhau trên cùng một URL. Và tôi sẽ chỉ cho bạn nước sốt bí mật để đến cuối bài viết này, chúng ta sẽ làm blog.example.com phục vụ như example.com/blog.

Tại sao bạn muốn làm điều này

Bởi vì bạn ở đây, bạn có thể đã biết tại sao đây là một con đường để theo đuổi. Nhưng tôi muốn đảm bảo rằng bạn ở đây vì lý do chính để làm điều này: SEO. Kiểm tra những 14 nghiên cứu điển hình cho thấy kết quả tích cực khi mọi người chuyển tên miền phụ của họ sang thư mục con. Bạn muốn blog và miền của bạn chia sẻ giá trị SEO. Đặt nó trên một miền phụ sẽ phần nào ngắt kết nối hai miền.

Đây là lý do của tôi và hợp nhất hai nền tảng, trong đó miền chính nằm trên WordPress và miền phụ trên Drupal. Nhưng hướng dẫn này là bất khả tri nền tảng - nó sẽ hoạt động với bất kỳ nền tảng nào.

Điều đó nói lên rằng, cách tiếp cận Cloudflare mà chúng tôi đề cập trong hướng dẫn này không tương thích với Shopify trừ khi bạn thanh toán cho gói Doanh nghiệp của Cloudflare. Đó là bởi vì Shopify cũng sử dụng Cloudflare và không cho phép chúng tôi ủy quyền lưu lượng truy cập trên cấp giá miễn phí của họ.

Bước 0 (Xem trước)

Trước khi bắt đầu, tôi muốn giải thích mức độ cao của những gì sắp xảy ra. Tóm lại, chúng tôi sẽ có hai trang web: một trang web chính của chúng tôi (example.com) và miền phụ (blog.example.com). Tôi sử dụng “blog” làm ví dụ, nhưng trong trường hợp của tôi, tôi cần sử dụng Drupal với một loại nội dung khác. Nhưng blog là trường hợp sử dụng điển hình.

Cách tiếp cận này dựa vào việc sử dụng Cloudflare cho DNS và một chút thứ gì đó bổ sung sẽ cung cấp điều kỳ diệu. Chúng tôi sẽ nói với Cloudflare rằng khi ai đó truy cập example.com/blog, nó nên:

1. chặn yêu cầu đó (bởi vì example.com/blog không thực sự tồn tại),
2. yêu cầu một miền khác (blog.example.com/blog) đằng sau hậu trường, và
3. cung cấp kết quả từ bước cuối cùng đó cho khách truy cập example.com/blog.

Được rồi, chúng ta hãy đi sâu vào nó chi tiết hơn!

Bước 1: Sử dụng Cloudflare

Một lần nữa, chúng tôi đang sử dụng CloudFlare cho DNS. Chỉ DNS cho miền của bạn là bước đầu tiên để bắt đầu.

Lý do cho Cloudflare là nó cho phép chúng tôi tạo Người lao động có khả năng chạy một đoạn mã bất cứ lúc nào ai đó truy cập vào các URL nhất định (được gọi là Định tuyến mà chúng ta sẽ tạo ở bước 3). Mã này sẽ chịu trách nhiệm chuyển đổi các trang web đằng sau hậu trường.

Cloudflare có một hướng dẫn tuyệt vời để bắt đầu. Mục tiêu là trỏ miền của bạn - bất cứ nơi nào nó được đăng ký - đến máy chủ định danh của Cloudflare và xác nhận rằng Cloudflare được kết nối trong tài khoản Cloudflare của bạn.

Bước 2: Tạo Công nhân

Mã này sẽ chịu trách nhiệm chuyển đổi các trang web đằng sau hậu trường. Đi qua Người lao động và nhấp Tạo một dịch vụ.

Đặt tên cho dịch vụ của bạn, sau đó chọn “Trình xử lý HTTP”:

Nhấp chuột Tạo dịch vụ và sau đó Chỉnh sửa nhanh.

Dán mã sau và thay thế các tên miền bằng tên miền của riêng bạn trên dòng 16:

// Listen for every request and respond with our function.
// Note, this will only run on the routes configured in Cloudflare.
addEventListener('fetch', function(event) {
  event.respondWith(handleRequest(event.request))
})

// Our function to handle the response.
async function handleRequest(request) {
  // Only GET requests work with this proxy.
  if (request.method !== 'GET')
  return MethodNotAllowed(request);
  // The URL that is being requested.
  const url = new URL(request.url);
  // Request "origin URL" aka the real blog instead of what was requested.
  // This switches out the absolute URL leaving the relative path unchanged.
  const originUrl = url.toString().replace('https://example.com', 'https://blog.example.com');
  // The contents of the origin page.
  const originPage = await fetch(originUrl);
  // Give the response our origin page.
  const newResponse = new Response(originPage.body, originPage); return newResponse;
}

// Hey! GET requests only
function MethodNotAllowed(request) {
  return new Response(`Method ${request.method} not allowed.`, {
    status: 405,
    headers: { 'Allow': 'GET' }
  })
}

Cuối cùng, nhấp vào Lưu và Triển khai.

Bước 3: Thêm các tuyến đường

Bây giờ, hãy thông báo cho Cloudflare những URL nào (hay còn gọi là Đường dẫn) để chạy mã này. Đi tới trang web trong Cloudflare, sau đó nhấp vào Người lao động.

Có phần Công nhân trên màn hình chính của Cloudflare, nơi bạn chỉnh sửa mã và sau đó có phần Công nhân trên mỗi trang web nơi bạn thêm các tuyến đường. Họ là hai nơi khác nhau, và thật khó hiểu.

Trước hết, hãy nhấp vào Thêm tuyến đường:

Bởi vì chúng tôi đang thêm một blog có nhiều trang con, chúng tôi sẽ sử dụng https://example.com/blog*. Lưu ý rằng dấu hoa thị hoạt động như một thẻ đại diện để đối sánh. Mã này sẽ chạy trên trang blog và mọi trang bắt đầu bằng blog.

Điều này có thể gây ra những hậu quả không lường trước được. Ví dụ: giả sử bạn có một trang bắt đầu bằng “blog” nhưng không phải là một phần của blog thực, như https://example.com/blogging-services. Điều đó sẽ được chọn với quy tắc này.

Sau đó, chọn Công nhân trong Dịch vụ thả xuống.

Chúng tôi còn rất nhiều việc phải làm, nhưng có nhiều tuyến hơn chúng tôi cần thêm - CSS, JavaScript và các đường dẫn tệp khác mà blog phụ thuộc vào (trừ khi tất cả các tệp được lưu trữ trên một URL khác, chẳng hạn như trên một CDN). Một cách tốt để tìm chúng là kiểm tra tuyến đường của bạn và kiểm tra bảng điều khiển.

Đối đầu với bạn https://example.com/blog và đảm bảo rằng một cái gì đó đang tải. Nó trông sẽ lộn xộn vì nó thiếu các tệp chủ đề. Điều đó tốt cho đến thời điểm hiện tại, miễn là nó không tạo ra lỗi 404. Điều quan trọng là mở DevTools của trình duyệt của bạn, kích hoạt bảng điều khiển và ghi chú lại tất cả các URL màu đỏ mà nó không thể tìm thấy hoặc tải (thường là 404 hoặc 403) là một phần của miền của bạn.

Bạn sẽ muốn thêm chúng dưới dạng các tuyến đường… nhưng chỉ thực hiện các đường dẫn chính. Vì vậy, nếu URL màu đỏ của bạn là https://example.com/wp-content/themes/file1.css, sau đó làm https://example.com/wp-content* như tuyến đường của bạn. Bạn cũng có thể thêm một đường dẫn con, nếu bạn muốn cụ thể hơn, nhưng ý tưởng là sử dụng một đường dẫn để bắt hầu hết các tệp.

Sau khi bạn thêm các tuyến đường đó, hãy kiểm tra URL của bạn và xem nó có giống miền phụ của bạn không. Nếu không, hãy kiểm tra các bước trước đó. (Rất có thể bạn sẽ cần thêm nhiều tuyến đường hơn.)

Tốt nhất bạn nên kiểm tra chất lượng bằng cách điều hướng đến nhiều trang và xem có gì bị thiếu không. Tôi cũng khuyên bạn nên mở DevTools và tìm kiếm miền phụ của bạn (blog.example.com). Nếu điều đó đang hiển thị, bạn cần phải thêm các tuyến đường để nhắm mục tiêu các tài nguyên đó or làm điều gì đó với nền tảng của bạn để ngừng xuất các URL đó. Ví dụ: nền tảng của tôi đang xuất thẻ chuẩn với tên miền phụ của tôi, vì vậy tôi đã tìm thấy một plugin để sửa đổi URL chuẩn thành tên miền gốc của mình.

Bước 4: Bí quyết làm nước sốt (noindex)

Bạn có thể thấy rằng chúng tôi có một vấn đề. URL của chúng tôi có sẵn ở hai URL khác nhau. Vâng, chúng ta có thể sử dụng canonical để thông báo cho Google URL nào là URL "chính" của chúng tôi, nhưng đừng để Google chọn đúng.

Đầu tiên, đặt toàn bộ miền phụ của bạn là noindex (cách thực hiện sẽ khác nhau tùy theo nền tảng). Sau đó, trong Cloudflare Worker, chúng tôi sẽ thêm dòng mã sau, về cơ bản nói rằng loại bỏ noindex khi URL hiện tại được truy cập thông qua proxy.

newResponse.headers.delete("x-robots-tag");

Giải pháp mã đầy đủ được cung cấp ở cuối bài viết này.

Bước 5: Sửa đổi sơ đồ trang web

Điều cuối cùng cần làm là sửa đổi sơ đồ trang web của miền phụ để nó không sử dụng miền phụ trong đó. Cách thực hiện điều này sẽ khác nhau tùy theo nền tảng, nhưng mục tiêu là sửa đổi cơ sở / tuyệt đối / miền trong sơ đồ trang web của bạn để nó in example.com/mypost) thay vì blog.exmaple.com/mypost. Một số plugin và mô-đun sẽ cho phép điều này mà không cần mã tùy chỉnh.

Đó là điều đó! Giải pháp sẽ hoạt động!

Hạn chế

Phép thuật Cloudflare này không phải là không có nhược điểm của nó. Ví dụ, nó chỉ chấp nhận GET yêu cầu, nghĩa là chúng tôi chỉ có thể nhận được những thứ từ máy chủ. Chúng tôi không thể POST đó là những gì biểu mẫu sử dụng. Vì vậy, nếu bạn cần khách truy cập của mình đăng nhập hoặc gửi biểu mẫu, sẽ có nhiều công việc hơn những gì chúng tôi đã làm. Tôi đã thảo luận một số giải pháp cho vấn đề này trong bài viết khác.

Như đã lưu ý trước đó, một hạn chế khác là việc sử dụng phương pháp này trên Shopify yêu cầu đăng ký cấp giá Doanh nghiệp của Cloudflare. Một lần nữa, đó là bởi vì Shopify cũng sử dụng Cloudflare và hạn chế khả năng ủy quyền lưu lượng truy cập trên các gói khác của họ.

Bạn cũng có thể gặp một số vấn đề nếu bạn đang cố gắng hợp nhất hai phiên bản của cùng một nền tảng với nhau (ví dụ: cả miền cấp cao nhất và miền phụ của bạn đều sử dụng WordPress). Nhưng trong trường hợp như vậy, bạn sẽ có thể hợp nhất và sử dụng một phiên bản của nền tảng.

Giải pháp đầy đủ

Đây là mã trong tất cả vinh quang của nó:

// Listen for every request and respond with our function.
// Note, this will only run on the routes configured in Cloudflare.
addEventListener('fetch', function(event) {
  event.respondWith(handleRequest(event.request))
})
// Our function to handle the response.
async function handleRequest(request) {
  // Only GET requests work with this proxy.
  if (request.method !== 'GET') return MethodNotAllowed(request);
  // The URL that is being requested.
  const url = new URL(request.url);
  // Request "origin URL" aka the real blog instead of what was requested.
  // This switches out the absolute URL leaving the relative path unchanged.
  const originUrl = url.toString().replace('https://example.com', 'https://blog.example.com');
  // The contents of the origin page.
  const originPage = await fetch(originUrl);
  // Give the response our origin page.
  const newResponse = new Response(originPage.body, originPage);
  // Remove "noindex" from the origin domain.
  newResponse.headers.delete("x-robots-tag");
  // Remove Cloudflare cache as it's meant for WordPress.
  // If you are using Cloudflare APO and your blog isn't WordPress, (but
  // your main domain is), then stop APO from running on your origin URL.
  // newResponse.headers.set("cf-edge-cache", "no-cache"); return newResponse;
}
// Hey! GET requests only
function MethodNotAllowed(request) {
  return new Response(`Method ${request.method} not allowed.`, {
    status: 405,
    headers:
    { 'Allow': 'GET' }
  })
}

Nếu bạn cần trợ giúp trong quá trình này, tôi hoan nghênh bạn liên hệ với tôi qua trang web của tôi CreateToday.io hoặc kiểm tra YouTube của tôi để trình diễn video.