使用 Cloudflare Workers 创建 URL 缩短器

您是否曾经使用过 Bitly 或 TinyURL 等工具来缩短长链接？ 或者，您想知道这些服务是如何工作的吗？ 也许您想构建一个 URL 缩短器，但从未找到时间或合适的工具来做这件事。 无论如何，如果您对此主题感兴趣，那么本文非常适合您。

在这篇文章中，我们将演示如何使用 Cloudflare Workers 构建基本的 URL 缩短服务。 我们将提供有关 URL 缩短服务如何工作的详细信息，介绍 Cloudflare Workers 的几个功能，并提供有关如何开始使用 Cloudflare Workers 的分步说明。

Cloudflare Workers？

Cloudflare Workers 是一项服务，可让您将无服务器代码部署到 Cloudflare 网络。 Cloudflare 网络或 Edge 是遍布全球的 Web 服务器网络。 Cloudflare Workers 的一大优点是您不必担心扩展代码。 此外，您不必担心代码所在的时区； 您在 Workers 中的代码在部署后的几秒钟内就会在全球范围内传播。

最重要的是，Cloudflare Workers 带有一个简单的键值对数据存储，称为 KV。 在本教程中，我们将结合使用 Cloudflare Workers 和 KV 存储来构建更短的 URL。

项目概述：URL 缩短服务

我们将首先构建一个简单的非动态 URL 缩短器，您可以在其中硬编码要重定向到的网站。 这将作为学习如何使用 Wrangler （Cloudflare 的官方 CLI 工具）的介绍，并将演示 Workers 领域的基本概念。

接下来，我们将增加一些趣味并添加对动态 URL 的支持。 基本上，我们将与 Cloudflare Workers KV 存储进行交互，并输入 URL 的简短版本和我们想要重定向到的实际 URL。 KV 存储中的数据将类似于以下结构：

'short-url': 'https://my-cool-website.com'
'submit': 'https://my-cool-site.org/blog/ideas/submit'

最后，我们会将我们的代码部署到生产环境中，并在全球范围内看到它的运行情况。

你已经兴奋了吗？ 太好了，让我们跳进去！

设置环境

要继续阅读本文，您需要以下内容：

• Node.js 和 npm

• 牧马人

• curl（或您选择的浏览器）来测试 URL 缩短器

我使用 asdf 工具 来管理我的本地依赖项，但您可以使用任何您喜欢的版本管理器。 在撰写本文时，这是我的 Node 和 npm 版本：

$ node --version
v18.5.0
$ npm --version
8.12.1

Wrangler 是一个用于构建的命令行工具，最近它有了 2.0 版本。 就本文而言，牧马人将满足我们的所有需求。 将来，我们可能会使用 Miniflare，它是 Wrangler 的一个更强大、功能更丰富的兄弟 。 但是，现在，让我们通过 npm 全局安装 Wrangler：

$ npm install -g wrangler@2.0.21

在撰写本文时，最新的 Wrangler 版本是 2.0.21，所以我们将使用那个版本。

凉爽的。 现在我们已经有了所有的依赖项，我们可以使用 Wrangler CLI 来生成我们的入门 Cloudflare Worker。

生成项目

Wrangler CLI 工具在这里将非常有用。

首先，让我们运行一个命令来正确启动和设置我们的项目：

$ wrangler init short-it

这个命令会问几个问题。 现在，我们将为所有这些回答是（通过输入 y ）：

$ wrangler init short-it
  wrangler 2.0.21
--------------------
Using npm as package manager.
 Created short-it/wrangler.toml
Would you like to use git to manage this Worker? (y/n)
 Initialized git repository at short-it
No package.json found. Would you like to create one? (y/n)
 Created short-it/package.json
Would you like to use TypeScript? (y/n)
 Created short-it/tsconfig.json
Would you like to create a Worker at short-it/src/index.ts?
  None
❯ Fetch handler
  Scheduled handler
 Created short-it/src/index.ts
​
added 62 packages, and audited 63 packages in 1s
​
1 package is looking for funding
  run `npm fund` for details
​
found 0 vulnerabilities
 Installed @cloudflare/workers-types and typescript into devDependencies
​
To start developing your Worker, run `cd short-it && npm start`
To publish your Worker to the Internet, run `npm run deploy`

如果您对 Wrangler 提出的所有问题的回答都是肯定的，那么您将拥有一个项目名称 short-it, 里面有以下内容：

• .git项目中的目录，这意味着您已准备好将其推送到您的 Git 提供程序

• package.json文件