免費自訂網域 URL 縮短器（使用 Cloudflare Workers）

在這篇文章中，我將與大家分享 如何使用 Cloudflare Workers 建立您自己的自訂網域 URL 縮短器。無論您是希望添加另一種工具的 Web 開發人員、希望在不花費高昂價格的情況下打造連結品牌的企業主，還是只是喜歡擺弄 Web 技術的人，本分步指南都適合您。

身為網頁開發人員和技術愛好者，我一直對讓網路變得更有效率和用戶友好的小事著迷。有一天，當我與一位同事分享一個特別長且笨重的 URL 時，我發現自己希望有一種簡單、個人化的方法來縮短連結。當然，市面上有很多 URL 縮短服務，但我想要一些感覺更「我」的東西——我可以自訂和控制的東西。

就在那時，我偶然發現了使用 Cloudflare Workers 建立自己的自訂 URL 縮短器的想法。這就像在浩瀚的網路科技海洋中發現了隱藏的寶藏。我不僅可以縮短 URL，還可以使用自己的網域來實現，而且是免費的！這項發現的興奮讓我想起了第一次部署網站時的那種強烈的授權和無限的可能性。

讓這項發現變得更加令人興奮的是，我們意識到它可以作為 Bit.ly 或 TinyURL 等流行服務的絕佳免費替代品，用於在自訂網域上建立品牌短連結。許多企業和個人為這種功能付出了高昂的代價，但這裡有一種無需花費一毛錢即可實現相同結果的方法。

步驟 1：註冊域名（使用短域名）

建立自訂 URL 縮短器的第一步是註冊網域名稱。這將是您的品牌短連結的基礎，因此請明智地選擇！

以下是一些可幫助您選擇完美網域的提示：

保持簡短：URL 縮短器的全部目的是建立簡潔的連結。如果可能，請尋找包含 3-5 個字元的網域。這可以是縮寫、首字母縮寫或朗朗上口的單字。
令人難忘：選擇一些容易記住和輸入的內容。這將使您和其他人更輕鬆地使用您的縮短連結。
考慮您的品牌：如果您將此網域用於企業或個人品牌，請嘗試使網域名稱與您現有的品牌識別保持一致。
檢查可用性：簡短、吸引人的網域需求量很大。如果您的第一選擇不可用，您可能需要發揮創意或考慮替代頂級域 (TLD)，例如 .io、.co 或 .me。
考慮 TLD：雖然 .com 很受歡迎，但不要迴避其他 TLD。有些，例如 .link 或 .click，可能特別適合 URL 縮短器。

以下是一些可以啟發您的範例：

abc.link
去.io
shrt.co
札普我

選擇網域後，您需要從網域註冊商購買。一些流行的選項包括：

Namecheap
GoDaddy的
的CloudFlare （推薦 - 這也非常方便，因為我們將使用 Cloudflare Workers）

請記住，雖然網域需要花錢，但它是每年一次性購買的，而我們的 URL 縮短器設定的其餘部分將使用 Cloudflare Workers 免費。

專業提示：在最終購買之前，請確保網域不與任何垃圾郵件或惡意活動相關聯。您可以使用 Domain Tools 或 Wayback Machine 等工具來查看其歷史記錄。

有了閃亮的新域名，您就可以繼續下一步：為您的域名設定 Cloudflare。但我們將在下一節中介紹這一點。

步驟 2：為您的網域設定 DNS 記錄

現在您已擁有網域，是時候設定 DNS 配置了。此步驟對於確保您的 Cloudflare Workers 在新註冊的網域中正常運作至關重要。

我們來回顧一下整個過程：

1. 將您的網域加入 Cloudflare

如果您還沒有這樣做，建立一個免費的 Cloudflare 帳戶.
在 Cloudflare 儀表板中，按一下「新增網站」並輸入您的網域。
Cloudflare 將掃描現有的 DNS 記錄。刪除它找到的任何記錄（除非您還將該網域用於電子郵件或其他重要服務，在這種情況下，請保留這些記錄）。

2. 更新網域名稱伺服器（如果您的網域名稱已在 Cloudflare 註冊，請忽略此步驟）

Cloudflare 將為您提供一組名稱伺服器。
造訪您的網域註冊商的網站，並將現有的網域伺服器替換為 Cloudflare 提供的網域名稱伺服器。
此步驟可能需要長達 24 小時才能在全球範圍內傳播。

3.配置DNS記錄

在您的 Cloudflare DNS 設定中，我們將新增兩個新的 A 記錄。
添加以下內容：

類型： A
名稱： @
內容： 192.0.2.1
TTL： 汽車
代理狀態： 代理商 （橙色雲 - 非常重要）

類型： A
名稱： 萬維網
內容： 192.0.2.1
TTL： 汽車
代理狀態： 代理商 （橙色雲 - 非常重要）

這個 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 = 新地圖([
      ["google”，“https://www.google.com?subId1=google”],
      [“bing”，“https://www.bing.com?subId1=bing”]，
      // 根據需要在此處新增更多重定向
    ]）;

    const url = 新 URL(request.url);
    console.log("完整網址：", url.toString());
    console.log("主機名稱:", url.hostname);
    console.log("路徑名稱:", url.pathname);

    let path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
    
    if (url.hostname.includes('workers.dev')) {
      路徑 = url.pathname.toLowerCase().replace(/^\//, '').split('/')[1] || '';
    }
    
    console.log("處理後的路徑：", path);
    
    const 位置=redirectMap.get(path);
    console.log("重定向位置：", location);

// 改為 301 進行永久重定向
    如果（位置）{
      返回 Response.redirect(位置, 302);
    }
    
    // 如果請求不在地圖中，則傳回 404 或您首選的後備
    return new 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 回應。
測試工人：
- 使用 Cloudflare 儀表板中的「快速編輯」功能進行變更並測試您的 Worker。
- 您可以使用提供的 HTTP 測試工具來模擬請求並查看您的 Worker 如何回應。
部署工作人員：
- 一旦您對測試感到滿意，請按一下「儲存並部署」以使您的 Worker 上線。
設定工作路線：

部署後，轉到您的 Worker 的「觸發器」標籤。
新增與您的網域相符的路由，例如 *推薦.link/*.
這可確保對您的網域的所有請求均由該工作人員處理。
驗證設定：
- 嘗試存取一些重定向路徑（例如， https://recommends.link/url-shortener-guide）以確保它們按預期工作。
- 檢查 Cloudflare 儀表板中的工作人員日誌以查看控制台輸出並驗證路徑是否正在正確處理。

第 4 步：更多自訂（可選）

使用 Cloudflare KV 進行動態重新導向

為了讓我們的重定向系統更靈活且更易於管理，我們可以使用 Cloudflare KV（鍵值）儲存來儲存我們的重定向：

建立KV命名空間：

在您的 Cloudflare 儀表板中，前往 Workers > KV。

將 KV 命名空間綁定到您的 Worker：

前往您的 Worker 的設定。選擇您的 KV 命名空間並為其指定變數名稱（例如 REDIRECTS）。

修改Worker腳本以使用KV：

   導出默認值{
     非同步獲取（請求，環境）{
       const url = 新 URL(request.url);
       const path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
       
       const location = wait env.REDIRECTS.get(path);
       
       如果（位置）{
         返回 Response.redirect(位置, 301);
       }
       
       return new Response(`找不到：${path}`, { status: 404 });
     },
   };

現在，您可以透過修改 KV 儲存來新增、更新或刪除重新導向，而無需變更 Worker 程式碼。

參數化重定向

允許在重定向中使用動態參數：

   導出默認值{
     非同步獲取（請求，環境）{
       const url = 新 URL(request.url);
       const [path, ...params] = url.pathname.toLowerCase().replace(/^\//, '').split('/');
       
       讓位置=等待env.REDIRECTS.get(路徑);
       
       如果（位置）{
         // 用實際參數取代佔位符
         params.forEach((參數，索引) => {
           location = location.replace(`{${index}}`, param);
         }）;
         返回 Response.redirect(位置, 301);
       }
       
       return new Response(`找不到：${path}`, { status: 404 });
     },
   };

透過此設置，您可以擁有一個類似“product”的 KV 條目：“https://mystore.com/item/{0}/details”，並將其用作 yourshortlink.com/product/12345.

點擊追蹤和分析

透過記錄重定向事件來實施基本分析：

   導出默認值{
     非同步獲取（請求，環境）{
       const url = 新 URL(request.url);
       const path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
       
       const location = wait env.REDIRECTS.get(path);
       
       如果（位置）{
         // 記錄重定向事件
         等待 env.REDIRECTS.put(`${path}_clicks`, (parseInt(await env.REDIRECTS.get(`${path}_clicks`) || '0') + 1).toString());
         返回 Response.redirect(位置, 301);
       }
       
       return new Response(`找不到：${path}`, { status: 404 });
     },
   };

自訂錯誤頁面

返回自訂 HTML 頁面，而不是純文字 404 回應：

   常數未找到頁面 = `
   
   
   
     
     
     找不到連結
     
       內文 { 字型系列：Arial、無襯線字體；文字對齊：居中；頂部填充：50px； }
     
   
   
     哎呀！找不到連結
     您要查找的短連結不存在。
   
   
   `;

   // 在你的獲取函數中：
   傳回新的回應（notFoundPage，{ 
     狀態：404，
     headers: { 'Content-Type': 'text/html' }
   }）;

速率限制

實施基本速率限制以防止濫用：

   導出默認值{
     非同步獲取（請求，環境）{
       const ip = request.headers.get('CF-Connecting-IP');
       constrateLimitKey = `ratelimit:${ip}`;
       const currentRequests = parseInt(await env.REDIRECTS.get(rateLimitKey) || '0');
       
       if (currentRequests > 100) { // 每分鐘 100 個請求限制
         return new Response('超出速率限制', { status: 429 });
       }
       
       等待 env.REDIRECTS.put(rateLimitKey, (currentRequests + 1).toString(), {expirationTtl: 60});
       
       // 其餘的重定向邏輯在這裡
     },
   };

A / B測試

為您的重定向實施簡單的 A/B 測試：

   導出默認值{
     非同步獲取（請求，環境）{
       const url = 新 URL(request.url);
       const path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
       
       const locationA = wait env.REDIRECTS.get(`${path}_A`);
       const locationB = wait env.REDIRECTS.get(`${path}_B`);
       
       if (位置A && 位置B) {
         const 位置 = Math.random() < 0.5 ？地點A：地點B；
         返回 Response.redirect(位置, 301);
       }
       
       // 如果未設定 A/B 測試，則回退到正常重定向
       const location = wait env.REDIRECTS.get(path);
       如果（位置）{
         返回 Response.redirect(位置, 301);
       }
       
       return new Response(`找不到：${path}`, { status: 404 });
     },
   };

這些自訂和擴充功能為您的批量重定向系統添加了重要的功能，使其更加靈活、強大且資訊豐富。這些功能中的每一個都可以根據您的特定需求和用例進一步細化和擴展。

摘要：使用 Cloudflare Workers 建立自訂連結縮短器

在這篇文章中，我們探索如何使用 Cloudflare Workers 建立強大且靈活的自訂 URL 縮短器。該解決方案提供了一種免費且高效的方法來大規模創建短連結。

TL; DR：

Cloudflare Workers 提供了一個無伺服器平台，用於實現具有全球分佈和低延遲的自訂重新導向邏輯。
正確的 DNS 配置和工作器路由設定對於將自訂網域連接到工作器至關重要。
一個簡單的基於 JavaScript 的 Worker 可以有效地處理複雜的重定向場景。
Cloudflare 的鍵值 (KV) 儲存可用於建立動態、易於管理的重新導向對應。
參數化重定向、點擊追蹤、自訂錯誤頁面、速率限制和 A/B 測試等進階功能可以在 Worker 生態系統中實現。
與傳統系統相比，該系統具有顯著優勢重定向方法，包括改進的性能、更輕鬆的管理和增強的靈活性。

我們建構的解決方案具有以下幾個優點：

可擴展性：處理數百萬個重定向而不降低效能。
靈活性：輕鬆新增、修改或刪除重定向，而無需更改核心邏輯。
性能：利用 Cloudflare 的全球網路在全球快速重定向。
客製化服務：允許分析和 A/B 測試等高級功能。
成本效益：利用無伺服器架構，有可能降低託管成本。
免費替代品 到流行的服務，如 Bit.ly 或 YOURLS 用於在自訂網域上建立品牌短連結。

現在您已經了解了這個基於 Cloudflare Worker 的重定向系統的強大功能和靈活性，是時候將其付諸實踐了：

如果您還沒有註冊 Cloudflare 帳戶並熟悉 Workers 平台，請先註冊。
為您自己的品牌短連結或大量重定向實施此系統。
嘗試使用我們討論過的高級功能，根據您的特定需求自訂系統。
在下面的評論部分分享您的經驗或提出問題。您的見解可以幫助社群中的其他人！
對於更進階的用例或自訂實施，請考慮聯絡 Cloudflare Workers 專家或諮詢服務。

保持好奇心，不斷學習，並毫不猶豫地利用 Cloudflare Workers 等工具突破可能的界限。

步驟 1：註冊域名（使用短域名）

步驟 2：為您的網域設定 DNS 記錄

第 3 步：建立 Cloudflare Worker

第 4 步：更多自訂（可選）

使用 Cloudflare KV 進行動態重新導向

參數化重定向

點擊追蹤和分析

自訂錯誤頁面

速率限制

A / B測試

摘要：使用 Cloudflare Workers 建立自訂連結縮短器

作者簡介

馬特阿爾格倫

網頁

訪客最愛

工具與資源

建立免費的自訂網域 URL 縮短器（使用 Cloudflare Workers）

步驟 1：註冊域名（使用短域名）

步驟 2：為您的網域設定 DNS 記錄

第 3 步：建立 Cloudflare Worker

第 4 步：更多自訂（可選）

使用 Cloudflare KV 進行動態重新導向

參數化重定向

點擊追蹤和分析

自訂錯誤頁面

速率限制

A / B測試

摘要：使用 Cloudflare Workers 建立自訂連結縮短器

相關文章

作者簡介

馬特阿爾格倫

網頁

訪客最愛

工具與資源