创建免费的自定义域名 URL 缩短器(使用 Cloudflare Workers)

in 资源和工具

我们的内容是读者支持的. 如果您点击我们的链接,我们可能会赚取佣金。 我们如何审核.

在这篇文章中,我将与大家分享 如何使用 Cloudflare Workers 创建您自己的自定义域名 URL 缩短器。无论您是想添加其他工具的 Web 开发人员,还是想以低廉的价格为您的链接打上品牌的企业主,或者只是喜欢摆弄 Web 技术的人,本分步指南都适合您。

作为一名网络开发者和技术爱好者,我一直对那些让互联网更高效、更人性化的小细节着迷。有一天,当我与同事分享一个特别长且笨重的 URL 时,我发现自己希望有一种简单、个性化的方式来缩短链接。当然,市面上有很多 URL 缩短服务,但我想要一种更“属于我”的东西——我可以自定义和控制的东西。

就在那时,我偶然想到使用 Cloudflare Workers 创建自己的自定义 URL 缩短器。这就像在浩瀚的网络技术海洋中发现了宝藏。我不仅可以缩短 URL,还可以免费使用自己的域名!这一发现让我兴奋不已,让我想起了第一次部署网站时的那种感觉——那种充满力量和无限可能的快感。

更令人兴奋的是,我发现它可以成为 Bit.ly 或 TinyURL 等热门服务的绝佳免费替代品,用于在自定义域名上创建品牌短链接。许多企业和个人为此类功能付出了高昂代价,但这里有一种方法可以不花一分钱就实现同样的效果。

步骤 1:注册域名(使用短域名)

    创建自定义 URL 缩短器的第一步是注册域名。这将是您品牌短链接的基础,因此请明智选择!

    以下提示可帮助您选择完美的域名:

    1. 保持简短:URL 缩短器的全部目的是创建简洁的链接。如果可能,请寻找包含 3-5 个字符的域名。这可能是缩写、首字母缩略词或朗朗上口的单词。
    2. 令人难忘:选择一些容易记住和输入的内容。这将使您和其他人更容易使用您的缩短链接。
    3. 考虑你的品牌:如果您将其用于商业或个人品牌,请尝试将域名与您现有的品牌标识保持一致。
    4. 检查可用性:简短、朗朗上口的域名需求量很大。如果您的首选域名不可用,您可能需要发挥创意或考虑其他顶级域名 (TLD),例如 .io、.co 或 .me。
    5. 考虑顶级域名:虽然 .com 很受欢迎,但不要回避其他 TLD。有些 TLD(如 .link 或 .click)可能特别适合 URL 缩短器。

    以下是一些可以启发您的示例:

    • abc.link
    • 去.io
    • shrt.co
    • zap.me

    选择域名后,您需要从域名注册商处购买。一些常见的选项包括:

    • Namecheap
    • GoDaddy
    • Cloudflare (推荐——这也非常方便,因为我们将使用 Cloudflare Workers)

    请记住,虽然域名需要花钱,但每年只需购买一次,而我们其余的 URL 缩短器设置将使用 Cloudflare Workers 免费。

    专业提示:在完成购买之前,请确保域名不与任何垃圾邮件或恶意活动相关联。您可以使用 Domain Tools 或 Wayback Machine 等工具检查其历史记录。

    有了崭新的域名,您就可以进行下一步了:为您的域名设置 Cloudflare。但我们将在下一节中介绍这一点。

    步骤 2:为您的域配置 DNS 记录

    现在您有了域名,是时候设置 DNS 配置了。此步骤对于确保您的 Cloudflare Workers 能够与新注册的域名正常运行至关重要。

    Cloudflare

    让我们来看看这个过程:

    1. 将您的域名添加到 Cloudflare

      • 如果你还没有这样做, 创建免费的 Cloudflare 帐户.
      • 在您的 Cloudflare 仪表板中,单击“添加站点”并输入您的域名。
      • Cloudflare 将扫描现有的 DNS 记录。删除它找到的所有记录(除非您还将该域名用于电子邮件或其他重要服务,在这种情况下,请保留这些记录)。

      2. 更新名称服务器(如果您的域名已在 Cloudflare 注册,请忽略此步骤)

        Cloudflare 名称服务器
        • Cloudflare 将为您提供一组名称服务器。
        • 转到您的域名注册商的网站,并用 Cloudflare 提供的名称服务器替换现有的名称服务器。
        • 此步骤可能需要长达 24 小时才能在全球范围内传播。

        3.配置DNS记录

        Cloudflare DNS 管理
        • 在您的 Cloudflare DNS 设置中,我们将添加两个新的 A 记录。
        • 添加以下内容:
        类型: A
        名称: @
        内容: 192.0.2.1
        TTL: Auto
        代理状态: 代理 (橙色云 - 非常重要)

        类型: A
        名称: 万维网
        内容: 192.0.2.1
        TTL: Auto
        代理状态: 代理 (橙色云 - 非常重要)

        这个 192.0.2.1 IP 是一个特殊的“虚拟”地址。它是为文档和测试保留的,非常适合我们的需求。

        4. 启用 Cloudflare 代理

        • 确保您的 DNS 记录的代理状态(橙色云图标)已启用。
        • 这允许 Cloudflare 代理您的流量,并且对于 Cloudflare Workers 的运行是必需的。

        5.验证配置

        • 一旦名称服务器更改传播完毕,Cloudflare 将显示您的域名为“活动”状态。
        • 您可以在 Cloudflare 仪表板中验证这一点。

          这里的关键点是,我们不会将您的域名指向任何实际的网络托管。 192.0.2.1 地址只是一个占位符。我们接下来要设置的 Cloudflare Worker 将拦截对您域的所有请求并处理 URL 缩短逻辑。

          专业提示:此设置意味着您无需支付或管理任何网络托管。Cloudflare Workers 将处理所有繁重的工作,使该解决方案不仅免费,而且非常轻便且易于维护。

          正确配置 DNS 后,您现在可以继续进行令人兴奋的部分 - 设置 Cloudflare Worker 来处理 URL 缩短。

          步骤 3:创建 Cloudflare Worker

          现在我们已经在 Cloudflare 中配置了域,是时候创建处理重定向的 Worker 了。Cloudflare Workers 提供了一个无服务器执行环境,使我们能够在靠近用户的边缘运行代码,以获得最佳性能。

          1. 创建 Cloudflare Worker

          • 访问工人部分:
            • 登录到您的 Cloudflare 仪表板。
            • 从侧边栏导航到“工人”部分。
            • 如果这是您的第一个 Worker,请单击“创建服务”;如果您已经有现有 Worker,请单击“创建 Worker”。
          • 给您的员工命名:
            • 为您的 Worker 选择一个描述性名称,例如“bulk-redirects-handler”。
            • 单击“创建服务”进入编辑器。
          • 编写工作脚本:
            • 在编辑器中,用重定向处理程序脚本替换默认代码:
          导出默认值{
          异步获取(请求){
          const redirectMap = new Map([
          ["google", "https://www.google.com?subId1=google"],
          ["bing", "https://www.bing.com?subId1=bing"],
          // 根据需要在此处添加更多重定向
          ])?

          const url = 新的 URL(请求.url);
          console.log("完整 URL:", url.toString());
          console.log("主机名:", url.hostname);
          console.log("路径名:", url.pathname);

          让 path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];

          如果(url.hostname.includes('workers.dev')){
          path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[1] || '';
          }

          console.log("处理完的路径:", path);

          const 位置 = redirectMap.get(路径);
          console.log("重定向位置:", location);

          // 更改为 301 以进行永久重定向
          如果(位置){
          返回 Response.redirect(location,302);
          }

          // 如果请求不在地图中,则返回 404 或您首选的后备方案
          返回新的 Response(`未找到:${path}`,{status:404});
          },
          };
          • 理解脚本:
            • 我们定义一个 重定向映射 其中包含我们的短路径及其对应的完整 URL。
                ["google", "https://www.google.com?subId1=google"],

          yourshorturl.com/google 重定向到 -> https://www.google.com?subId1=google

          ["bing", "https://www.bing.com?subId1=bing"],

          yourshorturl.com/bing 重定向至 -> https://www.bing.com?subId1=bing
          • 该脚本处理传入的请求,提取路径,并检查它是否与我们定义的任何重定向匹配。
          • 如果找到匹配项,它会向相应的 URL 返回 302(临时重定向)。
          • 如果未找到匹配项,则返回 404 Not Found 响应。
          • 测试 Worker:
            • 使用 Cloudflare 仪表板中的“快速编辑”功能进行更改并测试您的 Worker。
            • 您可以使用提供的 HTTP 测试工具来模拟请求并查看您的 Worker 如何响应。
          • 部署 Worker:
            • 对测试满意后,请单击“保存并部署”以使您的 Worker 上线。
          • 设置工人路线:
          cloudflare 工作者路线
          • 部署后,转到 Worker 的“触发器”选项卡。
          • 添加与您的域匹配的路由,例如 *推荐链接/*.
          • 这可确保您的域的所有请求均由此 Worker 处理。
          • 验证设置:
            • 尝试访问一些重定向路径(例如, https://recommends.link/url-shortener-guide) 以确保它们按预期工作。
            • 检查 Cloudflare 仪表板中的 Workers Logs 以查看控制台输出并验证路径是否正确处理。

          步骤 4:更多自定义(可选)

          使用 Cloudflare KV 进行动态重定向

          为了使我们的重定向系统更加灵活且更易于管理,我们可以使用 Cloudflare KV(键值)存储来存储我们的重定向:

          创建 KV 命名空间:

          • 在您的 Cloudflare 仪表板中,转到 Workers > KV。单击“创建命名空间”并命名它(例如“REDIRECT_MAP”)。
          将 KV 命名空间绑定到你的 Worker:
          • 转到 Worker 的设置。在“KV 命名空间绑定”下,添加新绑定。选择您的 KV 命名空间并为其指定一个变量名称(例如 REDIRECTS)。
          修改 Worker 脚本以使用 KV:

             导出默认值{
          异步获取(请求,环境){
          const url = 新的 URL(请求.url);
          const path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];

          const 位置 = 等待 env.REDIRECTS.get(路径);

          如果(位置){
          返回 Response.redirect(location,301);
          }

          返回新的 Response(`未找到:${path}`,{status:404});
          },
          };

          现在,您可以通过修改 KV 存储来添加、更新或删除重定向,而无需更改 Worker 代码。

          参数化重定向

          允许重定向中的动态参数:

               导出默认值{
            异步获取(请求,环境){
            const url = 新的 URL(请求.url);
            const [path,...params] = url.pathname.toLowerCase().replace(/^\//, '').split('/');

            让位置 = 等待 env.REDIRECTS.get(路径);

            如果(位置){
            // 用实际参数替换占位符
            params.forEach((param,index) => {
            位置 = 位置.replace(`{${index}}`,参数);
            });
            返回 Response.redirect(location,301);
            }

            返回新的 Response(`未找到:${path}`,{status:404});
            },
            };

            通过此设置,你可以拥有一个 KV 条目,如“product”:“https://mystore.com/item/{0}/details”,并将其用作 yourshortlink.com/product/12345.

            点击跟踪和分析

            通过记录重定向事件实现基本分析:

                 导出默认值{
              异步获取(请求,环境){
              const url = 新的 URL(请求.url);
              const path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];

              const 位置 = 等待 env.REDIRECTS.get(路径);

              如果(位置){
              // 记录重定向事件
              等待 env.REDIRECTS.put(`${path}_clicks`,(parseInt(等待 env.REDIRECTS.get(`${path}_clicks`) || '0') + 1).toString());
              返回 Response.redirect(location,301);
              }

              返回新的 Response(`未找到:${path}`,{status:404});
              },
              };

              自定义错误页面

              不返回纯文本 404 响应,而是返回自定义 HTML 页面:

                   const notFoundPage = `





                未找到链接

                主体 { 字体系列:Arial,sans-serif; 文本对齐:居中; 顶部填充:50px; }



                糟糕!链接未找到
                您要查找的短链接不存在。


                `;

                // 在你的获取函数中:
                返回新的 Response(notFoundPage,{
                状态:404,
                标题:{'内容类型':'text/html'}
                });

                速率限制

                实施基本速率限制以防止滥用:

                     导出默认值{
                  异步获取(请求,环境){
                  const ip = 请求.headers.get('CF-连接-IP');
                  const rateLimitKey = `速率限制:${ip}`;
                  const currentRequests = parseInt(await env.REDIRECTS.get(rateLimitKey) || '0');

                  if (currentRequests > 100) { // 每分钟限制 100 个请求
                  返回新的 Response('超出速率限制', { status: 429 });
                  }

                  等待 env.REDIRECTS.put(rateLimitKey,(currentRequests + 1)。toString(),{expirationTtl:60});

                  // 其余的重定向逻辑都在此处
                  },
                  };

                  A / B测试

                  对你的重定向实施简单的 A/B 测试:

                       导出默认值{
                    异步获取(请求,环境){
                    const url = 新的 URL(请求.url);
                    const path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];

                    const locationA = await env.REDIRECTS.get(`${path} _A`);
                    const locationB = await env.REDIRECTS.get(`${path} _B`);

                    如果 (位置A && 位置B) {
                    const 位置 = Math.random() < 0.5 ? 位置A : 位置B;
                    返回 Response.redirect(location,301);
                    }

                    // 如果未设置 A/B 测试,则返回正常重定向
                    const 位置 = 等待 env.REDIRECTS.get(路径);
                    如果(位置){
                    返回 Response.redirect(location,301);
                    }

                    返回新的 Response(`未找到:${path}`,{status:404});
                    },
                    };

                    这些自定义和扩展为您的批量重定向系统添加了重要功能,使其更加灵活、强大且信息丰富。这些功能中的每一个都可以根据您的特定需求和用例进一步完善和扩展。

                    在本篇博文中,我们探讨了如何使用 Cloudflare Workers 创建强大而灵活的自定义 URL 缩短器。此解决方案提供了一种免费且高效的方法来大规模创建短链接。

                    TL; DR:

                    1. Cloudflare Workers 提供了一个无服务器平台,用于实现具有全球分布和低延迟的自定义重定向逻辑。
                    2. 正确的 DNS 配置和 Worker Routes 设置对于将您的自定义域连接到 Worker 至关重要。
                    3. 一个简单的基于 JavaScript 的 Worker 可以有效地处理复杂的重定向场景。
                    4. 可以利用 Cloudflare 的键值 (KV) 存储来创建动态、易于管理的重定向映射。
                    5. 参数化重定向、点击跟踪、自定义错误页面、速率限制和 A/B 测试等高级功能可以在 Worker 生态系统中实现。
                    6. 该系统比传统系统具有显著优势 重定向方法,包括提高性能、简化管理和增强灵活性。

                    我们构建的解决方案具有以下几个优点:

                    • 可扩展性:处理数百万次重定向而不会降低性能。
                    • 灵活性:轻松添加、修改或删除重定向,而无需更改核心逻辑。
                    • 性能:利用 Cloudflare 的全球网络实现全球快速重定向。
                    • 个性化定制:允许分析和 A/B 测试等高级功能。
                    • 成本效益:利用无服务器架构,潜在地降低托管成本。
                    • 免费替代品 像 Bit.ly 或这样的热门服务 尤尔斯 用于在自定义域上创建品牌短链接。

                    现在您已经了解了这个基于 Cloudflare Worker 的重定向系统的强大功能和灵活性,现在是时候将其付诸实践了:

                    1. 如果您还没有,请注册一个 Cloudflare 帐户并熟悉 Workers 平台。
                    2. 为您自己的品牌短链接或批量重定向实施此系统。
                    3. 尝试我们讨论过的高级功能,以使系统满足您的特定需求。
                    4. 在下面的评论部分分享您的经验或提出问题。您的见解可以帮助社区中的其他人!
                    5. 对于更高级的用例或自定义实现,请考虑联系 Cloudflare Workers 专家或咨询服务。

                    保持好奇心,不断学习,并毫不犹豫地使用 Cloudflare Workers 等工具突破可能的界限。

                    作者简介

                    马特阿尔格伦

                    马蒂亚斯·阿尔格伦 (Mathias Ahlgren) 是 Website Rating,领导一支由编辑和作家组成的全球团队。他拥有信息科学和管理硕士学位。在大学期间获得早期网络开发经验后,他的职业生涯转向了 SEO。在 SEO、数字营销和网络开发领域拥有超过 15 年的经验。他的重点还包括网站安全,网络安全证书证明了这一点。这种多元化的专业知识巩固了他在 Website Rating.

                    » 资源和工具 » 创建免费的自定义域名 URL 缩短器(使用 Cloudflare Workers)
                    分享给...