首页 >web前端 >css教程 >如何将子域作为子目录服务

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

Lisa Kudrow
Lisa Kudrow原创
2025-03-13 10:14:09632浏览

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

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