[Day5] 用Workers做縮網址服務 — 30天實戰Cloudflare

本篇會講解如何透過Workers KV當資料庫，來製作一個縮網址服務。我們構想我們的服務會有個介面，可以輸入一串網址後，產生一個縮網址。

建立KV#

KV是Cloudflare Workers中提供的Key-value資料庫，可以儲存資料，由於我們需要建立將短網址轉換成長網址，也需要將長網址轉換成短網址，因此我會建立兩個KV表做儲存。

先到Workers KV中建立兩個命名空間：url-to-short、short-to-url。

Workers範例#

我們建立一個新的Workers，並到設定>變數>KV命名空間連結，將剛剛建立的兩個KV引入。

我規劃的網站有三個路徑如下：

/ ：首頁，輸入網址產生縮網址
/gen?url=XXX：產生縮網址
/XXX：縮網址跳轉

Demo畫面如下，我們在首頁按下按鈕後，會跳到gen頁面，頁面上會產生縮網址，而且同一個網址會產生同樣的縮網址。

程式碼如下，結合之前幾篇的範例，在首頁回傳一個HTML，按下按鈕後，會觸發Javascript重新導向gen頁面，就能夠取得縮網址連結。而進入縮網址後透過302跳轉到原本的網頁。

gen_id這個function用來產生縮網址的ID，並透過遞迴的寫法檢查ID是否存在過，上面有個length的參數，可以設定縮網址的長度。

1
export default {
2
  async fetch(request, env, ctx) {
3
    const length = 8;
4
    async function gen_id() {
5
      let result = "";
6
      const characters = "ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz123456789";
7
      for (let i = 0; i < length; i++) {
8
        result += characters.charAt(Math.floor(Math.random() * characters.length));
9
      }
10
      const find = await env["short-to-url"].get(result);
11
      if (find == null) {
12
        return result;
13
      } else {
14
        return gen_id();
15
      }
16
    }
17

18
    const { pathname, searchParams } = new URL(request.url);
19
    if (pathname == "/") {
20
      // 首頁
21
      const html = `<!DOCTYPE html><body>
22
      <h1>縮網址</h1>
23
      <input type="text" id="url" size="70">
24
      <button onclick="location.href='/gen?url='+encodeURIComponent(document.getElementById('url').value)">產生縮網址</button>
25
      </body>`;
26
      return new Response(html, {
27
        headers: {
28
          "content-type": "text/html;charset=UTF-8",
29
        },
30
      });
31
    } else if (pathname == "/gen") {
32
      // 產生短網址，檢查URL是否已經有對應ID
33
      try {
34
        const url = searchParams.get('url');
35
        new URL(url); // test url
36
        let id = await env["url-to-short"].get(url);
37
        if (id == null) {
38
          id = await gen_id();
39
          await env["short-to-url"].put(id, url);
40
          await env["url-to-short"].put(url, id);
41
        }
42
        return new Response("https://short-url.hchou.workers.dev/" + id);
43
      } catch (e) {
44
        return new Response("URL error");
45
      }
46
    } else {
47
      // 縮網址跳轉，檢查ID是否存在
48
      const id = pathname.split("/")[1];
49
      const url = await env["short-to-url"].get(id);
50
      if (url == null) {
51
        return new Response("Not found");
52
      } else {
53
        return Response.redirect(url, 302);
54
      }
55
    }
56
  },
57
};

到KV的後台也可以看到已經使用的縮網址。

結語#

整合KV與Worker，我們就可以來開發小型的專案，部署在Worker也快速方便，不需要另外維護伺服器。