如何將子域作為子目錄服務

假設您有一個網站構建在一個擅長設計的平台上，並且可以在示例中獲得。但是該平台在博客方面缺乏。因此，您對自己想：“如果我可以使用其他博客平台並在example.com/blog上提供它怎麼辦？”

大多數人會告訴您，這與DNS和網站應該如何工作和使用子域相反。但是，將您的內容放在我們根本無法使用子域的根域上有好處。

有一種方法可以在同一URL上提供兩個不同的平台。我將向您展示秘密醬汁，以便在本文結尾處，我們將成為blog.example.com作為example.com/blog。

為什麼要這樣做

因為您在這裡，您可能已經知道為什麼這是追求的途徑。但是，我想確保您在這裡是為了這樣做的主要原因：SEO。查看這14個案例研究，這些案例研究表明，當人們將子域移到子目錄中時，結果表明了積極的結果。您希望您的博客和域共享SEO值。將其放在子域上會有些斷開兩者的連接。

這就是我的理由，並結束了兩個平台，主要領域在WordPress上，子域則在Drupal上。但是本教程是平台不可知的 - 它幾乎可以與任何平台一起使用。

也就是說，除非您支付Cloudflare的企業計劃，否則我們在本教程中涵蓋的Cloudflare方法與Shopify不相容。那是因為Shopify還使用Cloudflare，不允許我們在免費定價層上代理流量。

步驟0（預覽）

在跳入之前，我想解釋將要發生的事情的高水平。簡而言之，我們將有兩個網站：我們的主要網站（example.com）和子域（blog.example.com）。我以“博客”為例，但是就我而言，我需要使用不同類型的內容進行Drupal。但是博客是典型的用例。

這種方法依賴於將CloudFlare用於DNS，並提供一些提供魔術的額外內容。我們要告訴Cloudflare，當某人訪問example.com/blog時，應該：

1. 攔截該請求（因為example.com/blog確實不存在），
2. 在幕後請求其他域（blog.example.com/blog），然後
3. 通過example.com/blog將結果從最後一步傳遞到訪問者。

好吧，讓我們更詳細地研究它！

步驟1：使用Cloudflare

同樣，我們將Cloudflare用於DNS。指向您的域DNS是開始的第一步。

CloudFlare的原因是，它允許我們創建能夠在某人訪問某些URL時能夠運行一些代碼的工人（稱為路由，我們將在步驟3中創建）。該代碼將負責切換幕後網站。

Cloudflare有一個出色的指南入門。目的是將您的域（無論何處註冊）指向CloudFlare的名稱服務器，並確認CloudFlare是否在您的Cloudflare帳戶中連接。

步驟2：創建工人

該代碼將負責切換幕後網站。前往工人，然後單擊創建服務。

命名您的服務，然後選擇“ HTTP處理程序”：

單擊創建服務，然後快速編輯。

將以下代碼粘貼，然後在第16行中替換域名：

 //聆聽每個請求，並響應我們的功能。
//注意，這僅在CloudFlare配置的路由上運行。
AddEventListener（'fetch'，function（event）{
  event.respondwith（handleRequest（event.request））
}））

//我們處理響應的功能。
異步函數handlequest（請求）{
  //只能通過此代理使用請求。
  if（request.method！=='get'）
  返回methodnotallowed（請求）;
  //請求的URL。
  const url = new URL（request.url）;
  //請求“ Origin URL”又稱真實博客，而不是請求的內容。
  //這將切換出絕對URL，使相對路徑保持不變。 
  const Originurl = url.tostring（）.replace（'https://example.com'，'https://blog.example.com'）;
  //原始頁面的內容。
  const OriginPage =等待提取（OriginUrl）;
  //給出我們的原始頁面。
  const newResponse = new響應（OriginPage.Body，OriginPage）;返回newresponse;
}

// 嘿！僅獲取請求 
函數方法notallowed（請求）{
  返回新響應（`方法$ {request.method}不允許。
    狀態：405，
    標題：{'允許'：'get'}
  }））
}

最後，單擊“保存”並部署。

步驟3：添加路線

現在，讓我們通知CloudFlare哪些URL（又稱路由）以運行此代碼。前往CloudFlare的網站，然後單擊工人。

在Cloudflare主屏幕上有工人部分，您可以在其中編輯代碼，然後在每個網站上添加路線的工人部分。它們是兩個不同的地方，這令人困惑。

首先，單擊添加路由：

因為我們添加了一個具有許多子頁面的博客，所以我們將使用https://example.com/blog*。請注意，星號充當匹配的通配符。該代碼將在博客頁面和以博客開頭的每個頁面上運行。

這可能會帶來意想不到的後果。例如，您有一個以“博客”開頭的頁面，但不是實際博客的一部分，例如https://example.com/blogging-services。這將被此規則所掌握。

然後，在服務下拉列表中選擇工人。

我們完成了很多工作，但是我們需要添加更多路線 - 博客取決於博客的CSS，JavaScript和其他文件路徑（除非所有文件都託管在其他URL上，例如在CDN上）。找到這些的好方法是測試您的路線並檢查控制台。

轉到您的https://example.com/blog，並確保加載某些內容。它看起來會弄亂，因為它缺少主題文件。目前可以，只要沒有產生404錯誤。重要的是要打開瀏覽器的DevTools，啟動控制台，並記下它找不到或加載的所有紅色URL（通常是404或403）。

您需要將這些添加為路線……但只能執行父路徑。因此，如果您的紅色URL為https://example.com/wp-content/themes/file1.css，則將https://example.com/wp-contenthe作為路線做。如果您想更具體，也可以添加兒童路徑，但是想法是使用一條路線來捕獲大多數文件。

添加這些路線後，請查看您的URL，看看它看起來像您的子域。如果沒有，請檢查上一個步驟。 （您可能需要添加更多路線。）

最好通過導航到多頁並查看是否缺少任何內容來進行質量檢查。我還建議打開DevTools並蒐索您的子域（blog.example.com）。如果出現了，您要么需要添加路由來定位這些資源，要么使用平台做某事以停止輸出這些URL。例如，我的平台正在用子域輸出一個規範標籤，因此我找到了一個插件來修改規範URL為我的根域。

步驟4：調味料的秘密（noindex）

您可能會看到我們有問題。我們的URL有兩個不同的URL。是的，我們可以使用規範屬性來告知Google哪個URL是我們的“主要”，但我們不要將其留給Google選擇正確的url。

首先，將整個子域設置為NOIndex（這樣做的方法將因平台而異）。然後，在CloudFlare Worker中，我們將添加以下代碼行，這基本上說是在通過代理訪問當前URL時刪除NOINDEX。

 newResponse.headers.delete（“ x-robots-tag”）;

完整的代碼解決方案是在本文末尾提供的。

步驟5：修改站點地圖

最後要做的是修改子域的站點地圖，以免使用其中的子域。這樣做的方法會因平台而異，但目標是修改站點地圖中的基本/絕對/域，以便打印示例example.com/mypost），而不是blog.exmaple.com/mypost。一些插件和模塊將允許無自定義代碼。

就是這樣！解決方案應該起作用！

限制

這種Cloudflare Magic並非沒有缺點。例如，它只接受獲取請求，這意味著我們只能從服務器中獲取東西。我們無法發布哪種形式使用。因此，如果您需要讓訪問者登錄或提交表格，那麼我們已經完成的工作還會有更多工作。我在另一篇文章中討論了一些解決方案。

如前所述，另一個限制是，在Shopify上使用這種方法需要訂閱Cloudflare的企業定價層。同樣，這是因為Shopify還使用Cloudflare並限制了在其其他計劃中代理流量的能力。

如果您試圖將同一平台的兩個實例合併在一起（例如，您的頂級域和子域都使用WordPress），您也可能會遇到一些問題。但是在這種情況下，您應該能夠合併並使用平台的一個實例。

完整的解決方案

這是所有榮耀的代碼：

 //聆聽每個請求，並響應我們的功能。
//注意，這僅在CloudFlare配置的路由上運行。
AddEventListener（'fetch'，function（event）{
  event.respondwith（handleRequest（event.request））
}））
//我們處理響應的功能。
異步函數handlequest（請求）{
  //只能通過此代理使用請求。
  if（request.method！=='get'）返回methodnotlowered（request）;
  //請求的URL。
  const url = new URL（request.url）;
  //請求“ Origin URL”又稱真實博客，而不是請求的內容。
  //這將切換出絕對URL，使相對路徑保持不變。 
  const Originurl = url.tostring（）.replace（'https://example.com'，'https://blog.example.com'）;
  //原始頁面的內容。
  const OriginPage =等待提取（OriginUrl）;
  //給出我們的原始頁面。
  const newResponse = new響應（OriginPage.Body，OriginPage）;
  //從原始域中刪除“ noindex”。
  newResponse.headers.delete（“ x-robots-tag”）;
  //刪除CloudFlare緩存，因為它是用於WordPress的。
  //如果您使用的是Cloudflare Apo，並且您的博客不是WordPress（但是
  //您的主要域是），然後阻止APO在原點URL上運行。
  // newResponse.headers.set（“ CF-edge-cache”，“ no-Cache”）;返回newresponse; 
}
// 嘿！僅獲取請求 
函數方法notallowed（請求）{
  返回新響應（`方法$ {request.method}不允許。
    狀態：405，
    標題：
    {'允許'：'get'}
  }））
}

如果您一路上需要幫助，我歡迎您通過我的網站CreateToday.io與我聯繫，或者查看我的YouTube進行視頻演示。

以上是如何將子域作為子目錄服務的詳細內容。更多資訊請關注PHP中文網其他相關文章！