如何从您自己的域名为任何网站提供服务（免费！）

您是否想过给某个网站贴上白标，比如把它展示在您自己的域名上？或者您是否想过去除某个要求付费的网站（当然，是出于教育目的）上的水印？

好了，本指南包含了您在自定义域名/子域名上代理网站/网页所需的一切知识！让我们开始吧！😃

🔥 背景故事（可选阅读）

几个月前，我从谷歌注册了自己的域名，并且在上面发布了很长时间的内容。不过，在社交媒体方面，我更想展示一个包含个人简介链接的页面，而不是我的个人作品集页面。

我研究了一些解决方案。找到了一些像 short.io 这样的网站，可以让你缩短链接并使其在你的域名库中可见，但它们是付费的，而且几乎没有自定义空间。而那些提供出色功能的网站大多也是付费的。

所以我别无选择，只能采用标准解决方案：像bio.link或 Linktree[ https://linktr.ee ] 这样的主流网站。我把链接上传到上面，并根据自己的喜好进行了自定义，看起来真的很酷。

但由于我认为自己有点完美主义者（有时是轻描淡写），并且喜欢带来一些独特的东西，所以我想到了一种在自己的域名上提供生物链接页面的方法。

⚖️ 但为什么呢？一些优点和缺点

托管域名确实有不少👍好处！举几个例子，对我来说，它能够：

使您的链接在简历页面看起来独一无二：与 bio.link/username 页面不同，自定义域名页面看起来非常专业，就像您的作品集youdomain.dev相比3p-domain.vercel.app
完全控制域名上提供的任何内容：轻松删除水印或修改现有内容！

Cloudflare Workers 的具体优点：

分析- Cloudflare 通过其代理跟踪每个请求，因此您可以直接了解您的域名访问来自哪里，以及它们如何到达您的网站。
缓存（更快的加载） ——Cloudflare 还会缓存通过其 DNS 代理的每个请求，因此速度较慢的 SPA 可以轻松地从同一用户的后续请求中受益，开箱即用（尽管默认情况下处于禁用状态）
即使源网站瘫痪，也能增加正常运行时间：如果源网站短时间瘫痪，由于最近对其进行了缓存，因此通过该域提供的内容仍可完美运行。
负载平衡- 您可以从 2-3 个不同的来源随机获取并获得非常基本的负载平衡版本。
绕过账户的免费限制- 例如，如果您在 Vercel 上有 2-3 个账户托管同一个网站，您可以轻松修改工作器代码，随机从其中任何一个账户获取流量。这样，您就可以在各个账户之间平均分配数据使用量，而不会达到源网站的免费账户限制（尽管这可能违反公平使用政策）。

👎缺点

值得注意的是，这样做的缺点

可能并非适用于所有网站——像 Google 的身份验证平台这样精心设计的 Web 应用可以轻松检测接收者（在本例中为 Cloudflare 的服务器）是否是请求的最终用户。这样，它们就可以防止类似中间人攻击的情况。但 99% 的网站不会出现此类问题。
添加额外的层- 虽然这不太明显，因为响应未缓存，但基本上，由于所有数据都经过第三方（Cloudflare），因此每个请求的资源使用量也会增加。
可能会变得非常昂贵（有时）：如果您的使用情况统计数据超出上限，并且每天收到超过 100k 个请求，则如果您使用免费计划，后续用户可能会遇到错误，直到配额被重置。

不过，对于轻度使用和非常典型的用例来说，这些缺点可能无关紧要。事实上，有了缓存和简单分析等功能，优点肯定大于缺点。

🙋‍♂️ 但是“Cloudflare Workers”是什么？

很高兴你问了这个问题！根据Workers 的文档

“Cloudflare Workers” 提供无服务器执行环境，允许您创建全新的应用程序或增强现有应用程序，而无需配置或维护基础设施。

它基本上是一种运行无服务器功能的方式，就像 AWS Lambda 或 Google Cloud Run 一样，但有一些细微的差别。

成本：在撰写本文时，它每天有大约 10 万个免费请求（甚至对于非常著名的网页来说也足够了）。

🚶‍♀️ 分步指南

本指南假设您对 Cloudflare 和 Cloudflare Workers 一无所知或了解甚少。不过，如果您经验丰富，本指南也不会为了简洁而牺牲质量。🙃

创建您的 Cloudflare 帐户并添加域（可选）

按照配置域名服务器的常规说明进行操作，如其“添加站点”文档中所示！

如果您没有通过 Cloudflare 管理 DNS，请将域名指向 Cloudflare 的服务器。阅读他们的文档了解更多信息。

添加您的 Cloudflare 工作器路由

添加 catch-all 域/子域

点击“管理Worker”，创建一个新的Worker服务。

创建工作器时选择第二个选项（HTTP Router），因为我们不想只发送一个简单的响应

打开 Web 代码编辑器快速编辑 Cloudflare Worker 逻辑

编辑/粘贴代码并预览

编辑编辑器中已有的默认代码片段，或添加以下内容：

addEventListener("fetch", (event) => {
  event.respondWith(
    handleRequest(event.request).catch(
      (err) => new Response(err.stack, { status: 500 })
    )
  );
}); 

/**
* Many more examples available at:
* https://developers.cloudflare.com/workers/examples
* @param {Request} request
* @returns {Promise<Response>}
*/

async  function handleRequest(request)  {
  return fetch("https://justmohit.bio.link");
}