首頁 >web前端 >css教學 >如何將子域作為子目錄服務

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

Lisa Kudrow
Lisa Kudrow原創
2025-03-13 10:14:09637瀏覽

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

假設您有一個網站構建在一個擅長設計的平台上,並且可以在示例中獲得。但是該平台在博客方面缺乏。因此,您對自己想:“如果我可以使用其他博客平台並在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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn