如何将子域作为子目录服务

假设您有一个网站构建在一个擅长设计的平台上，并且可以在示例中获得。但是该平台在博客方面缺乏。因此，您对自己想：“如果我可以使用其他博客平台并在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中文网其他相关文章！