曾 俊

曾 俊

1661799600

使用 Cloudflare Workers 创建 URL 缩短器

您是否曾经使用过BitlyTinyURL等工具来缩短长链接?或者,您想知道这些服务是如何工作的吗?也许您想构建一个 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文件
  • tsconfig.json包含所有 TypeScript 配置的文件
  • src/index.ts带有一些简单逻辑的文件以从我们的 Worker 中获得响应

惊人的。让我们看看这个东西是否有效!

让我们cd进入short-it目录并以本地开发模式启动 Wrangler:

$ cd short-it
$ wrangler dev --local

这应该在http://localhost:8787/上运行我们的 Worker 。如果我们访问 localhost,我们应该会看到一个简单的“Hello World!” 信息:

你好世界消息

Generated Worker 显示“Hello World!” 信息。

耶!我们让它工作。但是怎么做?让我们仔细看看。

Cloudflare Workers 如何工作?

我们从生成的 Worker 在本地获得了第一条消息,但它究竟是如何工作的呢?

让我们浏览生成的src/index.ts文件,以更好地了解那里发生的事情。

// src/index.ts

/**
 * Welcome to Cloudflare Workers! This is your first worker.
 *
 * - Run `wrangler dev src/index.ts` in your terminal to start a development server
 * - Open a browser tab at http://localhost:8787/ to see your worker in action
 * - Run `wrangler publish src/index.ts --name my-worker` to publish your worker
 *
 * Learn more at https://developers.cloudflare.com/workers/
 */

export interface Env {
  // Example binding to KV. Learn more at https://developers.cloudflare.com/workers/runtime-apis/kv/
  // MY_KV_NAMESPACE: KVNamespace;
  //
  // Example binding to Durable Object. Learn more at https://developers.cloudflare.com/workers/runtime-apis/durable-objects/
  // MY_DURABLE_OBJECT: DurableObjectNamespace;
  //
  // Example binding to R2. Learn more at https://developers.cloudflare.com/workers/runtime-apis/r2/
  // MY_BUCKET: R2Bucket;
}

export default {
  async fetch(
    request: Request,
    env: Env,
    ctx: ExecutionContext
  ): Promise<Response> {
    return new Response("Hello World!");
  },
};

上面的代码包括我们的环境(Env接口)的定义和一些与接口相关的注释ENV

由于接口超出了本文的范围,我们将忽略这部分代码,只关注主要逻辑:

// src/index.ts

export default {
  async fetch(
    request: Request,
    env: Env,
    ctx: ExecutionContext
  ): Promise<Response> {
    return new Response("Hello World!");
  },
};

这里发生的是我们index.ts导出了一个fetch函数。这是一个类似于Web Workers的界面。事实上,“Cloudflare Workers”这个名字就是从这个界面来的。Cloudflare Workers 类似于 Web Workers,不同之处在于它运行在 Cloudflare 基础架构而不是浏览器上。

在上面的代码中,fetch函数返回一个Response带有“Hello World!”的新对象。文本。所以当我们运行我们的 Worker 时,fetch会调用这个函数。然后,被调用的fetch函数返回“Hello World!” 响应,这就是我们在浏览器中获取的(或通过任何用于调用 Worker 的工具)。

好的,我们已经了解了 Cloudflare Workers 的基础知识。我们可以充满信心地继续前进。如果您是 TypeScript 新手,请不要担心;我们只会轻轻地使用它的功能。将其想象为 TypeScript 世界的轻量级入门。

太好了,让我们继续前进!

添加第一个重定向

我们将从一个温和的开始着手我们的逻辑。首先,我们将让我们的 URL 缩短器将用户重定向到不同的网站。这将是以后更改的基础。

现在,当用户访问我们的本地 Worker 时,我们将让用户访问https://http.cat/网站上的一个页面。

如果你不熟悉https://http.cat/,它是一个有趣的网站,显示不同 HTTP 状态的各种猫图片。例如,如果用户向我们的 Worker 请求http://localhost:8787/404,他们将被定向到https://http.cat/404

要实现此重定向,我们将编辑src/index.ts,如下所示:

// src/index.ts
// ...

const basePath = "https://http.cat";

export default {
  async fetch(
    request: Request,
    _env: Env,
    _ctx: ExecutionContext
  ): Promise<Response> {
    const url = new URL(request.url);

    const { pathname } = url;

    const redirectURL = basePath + pathname;

    if (pathname === "/") {
      return new Response("Hello World from our awesome Worker!");
    }

    return Response.redirect(redirectURL, 301);
  },
};

现在,如果我们访问http://localhost:8787,我们将收到一条更新的消息:“Hello World from our awesome Worker!”,如下所示:

来自真棒工人的你好世界

显示更新的“Hello world”消息的工作人员。

但是,如果我们尝试访问http://localhost:8787/404,我们将被重定向到https://http.cat/404

用户重定向

用户被重定向到 http.cat/404 网站。

太好了,我们的第一个重定向开始了。现在,让我们的 URL 缩短器实际上缩短了一些 URL。

缩短网址

现在,我们将添加一个小数据结构来存储我们缩短的 URL。我们可以这样做:

const shortURLs = {
  "/blog": "https://pragmaticpineapple.com/",
  "/twitter": "https://twitter.com/nikolalsvk",
  "/github": "https://github.com/nikolalsvk",
} as Record<any, string>;

export default {
  async fetch(
    request: Request,
    _env: Env,
    _ctx: ExecutionContext
  ): Promise<Response> {
    const url = new URL(request.url);

    const { pathname } = url;

    const redirectURL = shortURLs[pathname];

    if (!redirectURL) {
      return new Response(
        `There is no defined URL for the path: '${pathname}', sorry :(`
      );
    }

    return Response.redirect(redirectURL, 301);
  },
};

在这里,我们添加了几个缩短的 URL:

您可以将其更改为您喜欢的任何内容,以使其正常工作。现在,当我访问http://localhost:8787/blog时,我被重定向到我的博客所在的更长的 URL。结果如下:

重定向到博客

访问 /blog 会重定向到实际的博客页面。

但是,如果我们请求一些路径,例如http://localhost:8787/missing,我们会收到以下错误消息:“路径没有定义的 URL:'/missing',对不起 :(”。

错误消息丢失

访问 /missing 会显示错误消息。

太棒了,现在我们已经准备好将硬编码的 URL 及其缩短的版本移动到某个地方的存储中。幸运的是,我们正在使用 Cloudflare Workers,它提供了一种称为 KV 的简单键值存储。

添加存储

在我们为项目实际创建 KV 之前,我们首先需要通过 Wrangler 登录 Cloudflare Workers。这是必要的,因为 Wrangler 稍后需要联系 Cloudflare 以便为我们创建 KV 实例。

登录 Cloudflare

要登录 Cloudflare,请使用以下命令:

$ wrangler login

将打开一个浏览器,要求您登录 Cloudflare。不用担心; 免费计划涵盖了本教程所需的一切,并且不会要求您付款。继续注册,如果您已经有帐户,请登录。

接下来,Cloudflare 将询问您是否要授予 Wrangler 授权。同意后,您应该会看到以下屏幕:

牧马人 CLI 工具

Wrangler CLI 工具现在已正确连接。

在注册过程中不应该有任何问题。但是,如果您在任何时候遇到困难,可以按照Cloudflare 的创建帐户指南进行操作

惊人的!现在您已注册并登录,让我们检查一切是否正确连接。

使用以下命令:

$ wrangler whoami
  wrangler 2.0.21
--------------------
Getting User settings...
 You are logged in with an OAuth Token, associated with the email 'nikolaseap@gmail.com'!
┌──────────────────────┬──────────────────────────────────┐
│ Account Name │ Account ID │
├──────────────────────┼──────────────────────────────────┤
│ Nikola Đuza Personal │ 98a16dfefca0e2ee27e1e79ba590d973 │
└──────────────────────┴──────────────────────────────────┘

太好了,我们已经准备好创建 KV 命名空间了。

创建 KV 命名空间

可以将 KV 命名空间视为 Cloudflare 网络上的 KV up 实例。我们将创建两个 KV 命名空间:一个用于我们的应用程序将生活和工作的生产环境,另一个用于预览环境。我们将在测试和开发 URL 缩短器时使用 preview 命名空间。

我们将使用以下命令通过 Wrangler 创建 KV 命名空间:

$ wrangler kv:namespace create SHORT_URLS
 Creating namespace with title "short-it-SHORT_URLS"
 Success!
Add the following to your configuration file in your kv_namespaces array:
{ binding = "SHORT_URLS", id = "029d374ebd984e19b0bb98e37ab1a95e" }

$ wrangler kv:namespace create SHORT_URLS --preview
  wrangler 2.0.21
--------------------
 Creating namespace with title "short-it-SHORT_URLS_preview"
 Success!
Add the following to your configuration file in your kv_namespaces array:
{ binding = "SHORT_URLS", preview_id = "99a72876e5f84cf58de722b1c2080604" }

在这两个命令运行并创建了两个命名空间之后,我们需要告诉 Wrangler 在运行时使用这些命名空间wrangler dev

wrangler.toml我们将在项目根目录的文件中添加有关 KV 命名空间的信息。它应该看起来像这样:

name = "short-it"
main = "src/index.ts"
compatibility_date = "2022-07-15"

kv_namespaces = [
  { binding = "SHORT_URLS", id = "029d374ebd984e19b0bb98e37ab1a95e", preview_id = "99a72876e5f84cf58de722b1c2080604" }
]

wrangler.toml文件是一个配置文件,它告诉wrangler我们项目的某些信息。现在,我们已经准备好将一些数据添加到我们的 KV 中。

向 KV 添加数据

我们的下一步是将数据播种到 KV。请记住,我们有两个命名空间,所以我们必须运行两个命令才能在两个地方都有数据。让我们将/blog条目添加到 KV:

$ wrangler kv:key put --binding SHORT_URLS "/blog" "https://pragmaticpineapple.com/" --preview false
  wrangler 2.0.21
--------------------
Writing the value "https://pragmaticpineapple.com/" to key "/blog" on namespace 029d374ebd984e19b0bb98e37ab1a95e.

$ wrangler kv:key put --binding SHORT_URLS "/blog" "https://pragmaticpineapple.com/" --preview
  wrangler 2.0.21
--------------------
Writing the value "https://pragmaticpineapple.com/" to key "/blog" on namespace 99a72876e5f84cf58de722b1c2080604.

惊人的。现在我们在 KV 中有一个条目。接下来,让我们添加从 KV 读取并重定向用户的逻辑。

从 KV 读取

我们将快速删除旧的硬编码短 URL,并添加对 KV 的调用,如下所示:

// src/index.ts
export interface Env {
  SHORT_URLS: KVNamespace;
}

export default {
  async fetch(
    request: Request,
    env: Env,
    _ctx: ExecutionContext
  ): Promise<Response> {
    const url = new URL(request.url);

    const { pathname } = url;

    const redirectURL = await env.SHORT_URLS.get(pathname);

    if (!redirectURL) {
      return new Response(
        `There is no defined URL for the path: '${pathname}', sorry :(`
      );
    }

    return Response.redirect(redirectURL, 301);
  },
};

在这里,我们添加SHORT_URLSKVNamespace类型。这将允许我们调用 KV 方法来获取正确的数据。这次我们使用await env.SHORT_URLS.get(pathname).

调用env.SHORT_URLS.get(pathname)尝试从 KV 获取密钥。如果它返回一个承诺,我们必须await. 但是,如果给定的 有一个值pathname,那么用户将被重定向到该 URL。

现在,当我们访问http://localhost:8787/blog时,我们将被重定向到我们放入 KV 中的实际博客 URL。它看起来像这样:

仍然重定向博客

访问 /blog 仍然会将我们重定向到实际的博客页面。

但是,如果我们现在尝试访问我们硬编码的任何其他 URL,我们将收到一条消息,指出这些 URL 缺少重定向:

URL 缺少重定向

访问 /twitter 会产生一条消息,指示该 URL 缺少重定向。

让我们使用以下命令快速将 Twitter 缩短的 URL 添加到 KV:

$ wrangler kv:key put --binding SHORT_URLS "/twitter" "https://twitter.com/nikolalsvk" --preview false
 wrangler 2.0.21
--------------------
Writing the value "https://twitter.com/nikolalsvk" to key "/twitter" on namespace 029d374ebd984e19b0bb98e37ab1a95e.

$ wrangler kv:key put --binding SHORT_URLS "/twitter" "https://twitter.com/nikolalsvk" --preview
  wrangler 2.0.21
--------------------
Writing the value "https://twitter.com/nikolalsvk" to key "/twitter" on namespace 99a72876e5f84cf58de722b1c2080604.

现在,当我们刷新http://localhost:8787/twitter时,我们应该会被重定向到 Twitter 帐户。

推特加载

在我们将缩短的 URL 添加到 KV 后加载 Twitter。

太棒了,现在我们有两个短 URL:/blog/twitter. 让我们尝试部署我们的服务并在生产中查看它。

部署 Cloudflare Worker

Cloudflare Workers 部署步骤相当简单。我们将使用wrangler publish,如下所示:

$ wrangler publish
  wrangler 2.0.21
--------------------
Retrieving cached values for userId from node_modules/.cache/wrangler
Your worker has access to the following bindings:
- KV Namespaces:
  - SHORT_URLS: 029d374ebd984e19b0bb98e37ab1a95e
Total Upload: 0.45 KiB / gzip: 0.29 KiB
Worker ID: short-it
Worker ETag: f8395cab29edf297137631b803b14c32daaae982758c23e3019b700e2468c277
Uploaded short-it (2.14 sec)
Published short-it (6.33 sec)
  short-it.nikolalsvk.workers.dev

现在,这些服务在https://short-it.nikolalsvk.workers.dev上线。耶!

如果您按照本教程进行操作,您的服务应该位于 URL https://short-it.YOUR_SUBDOMAIN.workers.dev的某个位置,具体取决于您选择的内容YOUR_SUBDOMAIN

此时,我们的 Worker 脚本已部署在全球各地的 Cloudflare Edge 网络上。这意味着全球各地的朋友和陌生人访问https://short-it.nikolalsvk.workers.dev/twitter时,可以极快地重定向到我们的 Twitter 帐户。

包起来

感谢您继续使用 Cloudflare Workers 创建简单的 URL 缩短服务。在本文中,我们介绍了 Cloudflare 上下文中 Worker 的概念。我们还演示了如何在 Cloudflare 的 KV 存储中创建和管理数据。

我们能够使用 Wrangler 顺利执行所有这些工作,这提供了出色的开发人员体验。但是,最重要的是,我们设法创建、测试和部署了在世界各个角落快速运行的小型服务。

在类似的技术或服务中实现这一目标可能需要大量的金钱和努力。但是,Cloudflare 支持每天 100,000 个请求的免费套餐。因此,您可以在违反付费计划之前缩短许多 URL 并对其进行多次访问。

本文中的所有代码都可以在GitHub 存储库中找到(如果喜欢,请给它加星标)。缩短服务在https://short-it.nikolalsvk.workers.dev上线。

如果您喜欢这篇文章,请考虑与您的朋友和同事分享。

直到下一次,干杯!

来源:https ://blog.logrocket.com/creating-url-shortener-cloudflare-workers/

#cloudflare #url 

What is GEEK

Buddha Community

使用 Cloudflare Workers 创建 URL 缩短器
曾 俊

曾 俊

1661799600

使用 Cloudflare Workers 创建 URL 缩短器

您是否曾经使用过BitlyTinyURL等工具来缩短长链接?或者,您想知道这些服务是如何工作的吗?也许您想构建一个 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文件
  • tsconfig.json包含所有 TypeScript 配置的文件
  • src/index.ts带有一些简单逻辑的文件以从我们的 Worker 中获得响应

惊人的。让我们看看这个东西是否有效!

让我们cd进入short-it目录并以本地开发模式启动 Wrangler:

$ cd short-it
$ wrangler dev --local

这应该在http://localhost:8787/上运行我们的 Worker 。如果我们访问 localhost,我们应该会看到一个简单的“Hello World!” 信息:

你好世界消息

Generated Worker 显示“Hello World!” 信息。

耶!我们让它工作。但是怎么做?让我们仔细看看。

Cloudflare Workers 如何工作?

我们从生成的 Worker 在本地获得了第一条消息,但它究竟是如何工作的呢?

让我们浏览生成的src/index.ts文件,以更好地了解那里发生的事情。

// src/index.ts

/**
 * Welcome to Cloudflare Workers! This is your first worker.
 *
 * - Run `wrangler dev src/index.ts` in your terminal to start a development server
 * - Open a browser tab at http://localhost:8787/ to see your worker in action
 * - Run `wrangler publish src/index.ts --name my-worker` to publish your worker
 *
 * Learn more at https://developers.cloudflare.com/workers/
 */

export interface Env {
  // Example binding to KV. Learn more at https://developers.cloudflare.com/workers/runtime-apis/kv/
  // MY_KV_NAMESPACE: KVNamespace;
  //
  // Example binding to Durable Object. Learn more at https://developers.cloudflare.com/workers/runtime-apis/durable-objects/
  // MY_DURABLE_OBJECT: DurableObjectNamespace;
  //
  // Example binding to R2. Learn more at https://developers.cloudflare.com/workers/runtime-apis/r2/
  // MY_BUCKET: R2Bucket;
}

export default {
  async fetch(
    request: Request,
    env: Env,
    ctx: ExecutionContext
  ): Promise<Response> {
    return new Response("Hello World!");
  },
};

上面的代码包括我们的环境(Env接口)的定义和一些与接口相关的注释ENV

由于接口超出了本文的范围,我们将忽略这部分代码,只关注主要逻辑:

// src/index.ts

export default {
  async fetch(
    request: Request,
    env: Env,
    ctx: ExecutionContext
  ): Promise<Response> {
    return new Response("Hello World!");
  },
};

这里发生的是我们index.ts导出了一个fetch函数。这是一个类似于Web Workers的界面。事实上,“Cloudflare Workers”这个名字就是从这个界面来的。Cloudflare Workers 类似于 Web Workers,不同之处在于它运行在 Cloudflare 基础架构而不是浏览器上。

在上面的代码中,fetch函数返回一个Response带有“Hello World!”的新对象。文本。所以当我们运行我们的 Worker 时,fetch会调用这个函数。然后,被调用的fetch函数返回“Hello World!” 响应,这就是我们在浏览器中获取的(或通过任何用于调用 Worker 的工具)。

好的,我们已经了解了 Cloudflare Workers 的基础知识。我们可以充满信心地继续前进。如果您是 TypeScript 新手,请不要担心;我们只会轻轻地使用它的功能。将其想象为 TypeScript 世界的轻量级入门。

太好了,让我们继续前进!

添加第一个重定向

我们将从一个温和的开始着手我们的逻辑。首先,我们将让我们的 URL 缩短器将用户重定向到不同的网站。这将是以后更改的基础。

现在,当用户访问我们的本地 Worker 时,我们将让用户访问https://http.cat/网站上的一个页面。

如果你不熟悉https://http.cat/,它是一个有趣的网站,显示不同 HTTP 状态的各种猫图片。例如,如果用户向我们的 Worker 请求http://localhost:8787/404,他们将被定向到https://http.cat/404

要实现此重定向,我们将编辑src/index.ts,如下所示:

// src/index.ts
// ...

const basePath = "https://http.cat";

export default {
  async fetch(
    request: Request,
    _env: Env,
    _ctx: ExecutionContext
  ): Promise<Response> {
    const url = new URL(request.url);

    const { pathname } = url;

    const redirectURL = basePath + pathname;

    if (pathname === "/") {
      return new Response("Hello World from our awesome Worker!");
    }

    return Response.redirect(redirectURL, 301);
  },
};

现在,如果我们访问http://localhost:8787,我们将收到一条更新的消息:“Hello World from our awesome Worker!”,如下所示:

来自真棒工人的你好世界

显示更新的“Hello world”消息的工作人员。

但是,如果我们尝试访问http://localhost:8787/404,我们将被重定向到https://http.cat/404

用户重定向

用户被重定向到 http.cat/404 网站。

太好了,我们的第一个重定向开始了。现在,让我们的 URL 缩短器实际上缩短了一些 URL。

缩短网址

现在,我们将添加一个小数据结构来存储我们缩短的 URL。我们可以这样做:

const shortURLs = {
  "/blog": "https://pragmaticpineapple.com/",
  "/twitter": "https://twitter.com/nikolalsvk",
  "/github": "https://github.com/nikolalsvk",
} as Record<any, string>;

export default {
  async fetch(
    request: Request,
    _env: Env,
    _ctx: ExecutionContext
  ): Promise<Response> {
    const url = new URL(request.url);

    const { pathname } = url;

    const redirectURL = shortURLs[pathname];

    if (!redirectURL) {
      return new Response(
        `There is no defined URL for the path: '${pathname}', sorry :(`
      );
    }

    return Response.redirect(redirectURL, 301);
  },
};

在这里,我们添加了几个缩短的 URL:

您可以将其更改为您喜欢的任何内容,以使其正常工作。现在,当我访问http://localhost:8787/blog时,我被重定向到我的博客所在的更长的 URL。结果如下:

重定向到博客

访问 /blog 会重定向到实际的博客页面。

但是,如果我们请求一些路径,例如http://localhost:8787/missing,我们会收到以下错误消息:“路径没有定义的 URL:'/missing',对不起 :(”。

错误消息丢失

访问 /missing 会显示错误消息。

太棒了,现在我们已经准备好将硬编码的 URL 及其缩短的版本移动到某个地方的存储中。幸运的是,我们正在使用 Cloudflare Workers,它提供了一种称为 KV 的简单键值存储。

添加存储

在我们为项目实际创建 KV 之前,我们首先需要通过 Wrangler 登录 Cloudflare Workers。这是必要的,因为 Wrangler 稍后需要联系 Cloudflare 以便为我们创建 KV 实例。

登录 Cloudflare

要登录 Cloudflare,请使用以下命令:

$ wrangler login

将打开一个浏览器,要求您登录 Cloudflare。不用担心; 免费计划涵盖了本教程所需的一切,并且不会要求您付款。继续注册,如果您已经有帐户,请登录。

接下来,Cloudflare 将询问您是否要授予 Wrangler 授权。同意后,您应该会看到以下屏幕:

牧马人 CLI 工具

Wrangler CLI 工具现在已正确连接。

在注册过程中不应该有任何问题。但是,如果您在任何时候遇到困难,可以按照Cloudflare 的创建帐户指南进行操作

惊人的!现在您已注册并登录,让我们检查一切是否正确连接。

使用以下命令:

$ wrangler whoami
  wrangler 2.0.21
--------------------
Getting User settings...
 You are logged in with an OAuth Token, associated with the email 'nikolaseap@gmail.com'!
┌──────────────────────┬──────────────────────────────────┐
│ Account Name │ Account ID │
├──────────────────────┼──────────────────────────────────┤
│ Nikola Đuza Personal │ 98a16dfefca0e2ee27e1e79ba590d973 │
└──────────────────────┴──────────────────────────────────┘

太好了,我们已经准备好创建 KV 命名空间了。

创建 KV 命名空间

可以将 KV 命名空间视为 Cloudflare 网络上的 KV up 实例。我们将创建两个 KV 命名空间:一个用于我们的应用程序将生活和工作的生产环境,另一个用于预览环境。我们将在测试和开发 URL 缩短器时使用 preview 命名空间。

我们将使用以下命令通过 Wrangler 创建 KV 命名空间:

$ wrangler kv:namespace create SHORT_URLS
 Creating namespace with title "short-it-SHORT_URLS"
 Success!
Add the following to your configuration file in your kv_namespaces array:
{ binding = "SHORT_URLS", id = "029d374ebd984e19b0bb98e37ab1a95e" }

$ wrangler kv:namespace create SHORT_URLS --preview
  wrangler 2.0.21
--------------------
 Creating namespace with title "short-it-SHORT_URLS_preview"
 Success!
Add the following to your configuration file in your kv_namespaces array:
{ binding = "SHORT_URLS", preview_id = "99a72876e5f84cf58de722b1c2080604" }

在这两个命令运行并创建了两个命名空间之后,我们需要告诉 Wrangler 在运行时使用这些命名空间wrangler dev

wrangler.toml我们将在项目根目录的文件中添加有关 KV 命名空间的信息。它应该看起来像这样:

name = "short-it"
main = "src/index.ts"
compatibility_date = "2022-07-15"

kv_namespaces = [
  { binding = "SHORT_URLS", id = "029d374ebd984e19b0bb98e37ab1a95e", preview_id = "99a72876e5f84cf58de722b1c2080604" }
]

wrangler.toml文件是一个配置文件,它告诉wrangler我们项目的某些信息。现在,我们已经准备好将一些数据添加到我们的 KV 中。

向 KV 添加数据

我们的下一步是将数据播种到 KV。请记住,我们有两个命名空间,所以我们必须运行两个命令才能在两个地方都有数据。让我们将/blog条目添加到 KV:

$ wrangler kv:key put --binding SHORT_URLS "/blog" "https://pragmaticpineapple.com/" --preview false
  wrangler 2.0.21
--------------------
Writing the value "https://pragmaticpineapple.com/" to key "/blog" on namespace 029d374ebd984e19b0bb98e37ab1a95e.

$ wrangler kv:key put --binding SHORT_URLS "/blog" "https://pragmaticpineapple.com/" --preview
  wrangler 2.0.21
--------------------
Writing the value "https://pragmaticpineapple.com/" to key "/blog" on namespace 99a72876e5f84cf58de722b1c2080604.

惊人的。现在我们在 KV 中有一个条目。接下来,让我们添加从 KV 读取并重定向用户的逻辑。

从 KV 读取

我们将快速删除旧的硬编码短 URL,并添加对 KV 的调用,如下所示:

// src/index.ts
export interface Env {
  SHORT_URLS: KVNamespace;
}

export default {
  async fetch(
    request: Request,
    env: Env,
    _ctx: ExecutionContext
  ): Promise<Response> {
    const url = new URL(request.url);

    const { pathname } = url;

    const redirectURL = await env.SHORT_URLS.get(pathname);

    if (!redirectURL) {
      return new Response(
        `There is no defined URL for the path: '${pathname}', sorry :(`
      );
    }

    return Response.redirect(redirectURL, 301);
  },
};

在这里,我们添加SHORT_URLSKVNamespace类型。这将允许我们调用 KV 方法来获取正确的数据。这次我们使用await env.SHORT_URLS.get(pathname).

调用env.SHORT_URLS.get(pathname)尝试从 KV 获取密钥。如果它返回一个承诺,我们必须await. 但是,如果给定的 有一个值pathname,那么用户将被重定向到该 URL。

现在,当我们访问http://localhost:8787/blog时,我们将被重定向到我们放入 KV 中的实际博客 URL。它看起来像这样:

仍然重定向博客

访问 /blog 仍然会将我们重定向到实际的博客页面。

但是,如果我们现在尝试访问我们硬编码的任何其他 URL,我们将收到一条消息,指出这些 URL 缺少重定向:

URL 缺少重定向

访问 /twitter 会产生一条消息,指示该 URL 缺少重定向。

让我们使用以下命令快速将 Twitter 缩短的 URL 添加到 KV:

$ wrangler kv:key put --binding SHORT_URLS "/twitter" "https://twitter.com/nikolalsvk" --preview false
 wrangler 2.0.21
--------------------
Writing the value "https://twitter.com/nikolalsvk" to key "/twitter" on namespace 029d374ebd984e19b0bb98e37ab1a95e.

$ wrangler kv:key put --binding SHORT_URLS "/twitter" "https://twitter.com/nikolalsvk" --preview
  wrangler 2.0.21
--------------------
Writing the value "https://twitter.com/nikolalsvk" to key "/twitter" on namespace 99a72876e5f84cf58de722b1c2080604.

现在,当我们刷新http://localhost:8787/twitter时,我们应该会被重定向到 Twitter 帐户。

推特加载

在我们将缩短的 URL 添加到 KV 后加载 Twitter。

太棒了,现在我们有两个短 URL:/blog/twitter. 让我们尝试部署我们的服务并在生产中查看它。

部署 Cloudflare Worker

Cloudflare Workers 部署步骤相当简单。我们将使用wrangler publish,如下所示:

$ wrangler publish
  wrangler 2.0.21
--------------------
Retrieving cached values for userId from node_modules/.cache/wrangler
Your worker has access to the following bindings:
- KV Namespaces:
  - SHORT_URLS: 029d374ebd984e19b0bb98e37ab1a95e
Total Upload: 0.45 KiB / gzip: 0.29 KiB
Worker ID: short-it
Worker ETag: f8395cab29edf297137631b803b14c32daaae982758c23e3019b700e2468c277
Uploaded short-it (2.14 sec)
Published short-it (6.33 sec)
  short-it.nikolalsvk.workers.dev

现在,这些服务在https://short-it.nikolalsvk.workers.dev上线。耶!

如果您按照本教程进行操作,您的服务应该位于 URL https://short-it.YOUR_SUBDOMAIN.workers.dev的某个位置,具体取决于您选择的内容YOUR_SUBDOMAIN

此时,我们的 Worker 脚本已部署在全球各地的 Cloudflare Edge 网络上。这意味着全球各地的朋友和陌生人访问https://short-it.nikolalsvk.workers.dev/twitter时,可以极快地重定向到我们的 Twitter 帐户。

包起来

感谢您继续使用 Cloudflare Workers 创建简单的 URL 缩短服务。在本文中,我们介绍了 Cloudflare 上下文中 Worker 的概念。我们还演示了如何在 Cloudflare 的 KV 存储中创建和管理数据。

我们能够使用 Wrangler 顺利执行所有这些工作,这提供了出色的开发人员体验。但是,最重要的是,我们设法创建、测试和部署了在世界各个角落快速运行的小型服务。

在类似的技术或服务中实现这一目标可能需要大量的金钱和努力。但是,Cloudflare 支持每天 100,000 个请求的免费套餐。因此,您可以在违反付费计划之前缩短许多 URL 并对其进行多次访问。

本文中的所有代码都可以在GitHub 存储库中找到(如果喜欢,请给它加星标)。缩短服务在https://short-it.nikolalsvk.workers.dev上线。

如果您喜欢这篇文章,请考虑与您的朋友和同事分享。

直到下一次,干杯!

来源:https ://blog.logrocket.com/creating-url-shortener-cloudflare-workers/

#cloudflare #url 

How to Get Current URL in Laravel

In this small post we will see how to get current url in laravel, if you want to get current page url in laravel then we can use many method such type current(), full(), request(), url().

Here i will give you all example to get current page url in laravel, in this example i have used helper and function as well as so let’s start example of how to get current url id in laravel.

Read More : How to Get Current URL in Laravel

https://websolutionstuff.com/post/how-to-get-current-url-in-laravel


Read More : Laravel Signature Pad Example

https://websolutionstuff.com/post/laravel-signature-pad-example

#how to get current url in laravel #laravel get current url #get current page url in laravel #find current url in laravel #get full url in laravel #how to get current url id in laravel

Create A URL Shortener with Cloudflare Workers

Have you ever used tools like Bitly or TinyURL to shorten long links? Or, have you wondered how these services work? Maybe you wanted to build a URL shortener but never found the time or the proper tools to do so. In any case, if you are interested in this topic, this article is perfect for you.

In this post, we’ll demonstrate how to build a basic URL shortener service using Cloudflare Workers. We’ll provide detailed information about how URL shortener services work, introduce several features of Cloudflare Workers, and give step-by-step instructions on how to get started with Cloudflare Workers.

Let’s get started!

Source: https://blog.logrocket.com/creating-url-shortener-cloudflare-workers/

#cloudflare #url 

高橋  花子

高橋 花子

1661796000

Cloudflare Workers で URL 短縮サービスを作成する

BitlyTinyURLなどのツールを使用して長いリンクを短縮したことがありますか? または、これらのサービスがどのように機能するのか疑問に思ったことはありませんか? おそらく、URL 短縮サービスを構築したいと思っていましたが、それを行うための時間や適切なツールが見つかりませんでした。いずれにせよ、このトピックに興味がある場合は、この記事が最適です。

この投稿では、Cloudflare Workersを使用して基本的な URL 短縮サービスを構築する方法を紹介します。URL短縮サービスがどのように機能するかについての詳細な情報を提供し、Cloudflare Workersのいくつかの機能を紹介し、Cloudflare Workersを使い始める方法について順を追って説明します.

始めましょう!

Cloudflare ワーカーとは何ですか?

Cloudflare Workers は、サーバーレス コードを Cloudflare ネットワークにデプロイできるサービスです。Cloudflare ネットワークまたは Edge は、世界中に広がる Web サーバーのネットワークです。Cloudflare Workers の素晴らしい点の 1 つは、コードのスケーリングについて心配する必要がないことです。また、コードが存在するタイム ゾーンについて心配する必要はありません。Workers のコードは、デプロイされてから数秒後に世界中に広がります。

その上、Cloudflare ワーカーには、KV と呼ばれる単純なキーと値のデータ ストアが付属しています。このチュートリアルでは、Cloudflare ワーカーと KV ストレージを組み合わせて、URL を短くします。

事業概要:URL短縮サービス

まず、リダイレクト先の Web サイトをハードコーディングする、単純で非動的な 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
  • ラングラー
  • URL 短縮サービスをテストするための curl (または選択したブラウザー)

私はasdf ツールを使用してローカルの依存関係を管理していますが、任意のバージョン マネージャーを使用できます。執筆時点では、これが私の Node と npm のバージョンです。

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

Wrangler はビルド用のコマンドライン ツールで、最近 2.0 バージョンがリリースされました。この投稿では、Wrangler がすべてのニーズを満たします。将来的には、より堅牢で機能豊富な Wrangler の兄弟である Miniflareを使用する可能性があります。しかし、ここでは、npm を介して Wrangler をグローバルにインストールしましょう。

$ npm install -g wrangler@2.0.21

執筆時点で最新の Wrangler バージョンは 2.0.21 であるため、それを使用します。

涼しい。すべての依存関係が整ったので、Wrangler CLI を使用してスターター Cloudflare Worker を生成できます。

プロジェクトの生成

ここでは、Wrangler CLI ツールが非常に役立ちます。

まず、コマンドを実行して、プロジェクトを適切に開始および設定しましょう。

$ wrangler init short-it

このコマンドは、いくつかの質問をします。ここでは、それらすべてに対して( yと入力して) yes と答えます。

$ 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ファイル
  • tsconfig.jsonすべての TypeScript 構成を含むファイル
  • src/index.tsワーカーから応答を取得するための簡単なロジックを含むファイル

素晴らしい。これが機能するかどうか見てみましょう!

cdディレクトリに入り、Wranglershort-itをローカル開発モードで起動します。

$ cd short-it
$ wrangler dev --local

これにより、ワーカーがhttp://localhost:8787/で実行されます。localhost にアクセスすると、単純な「Hello World!」が表示されるはずです。メッセージ:

ハローワールドメッセージ

生成されたワーカーは「Hello World!」を表示しています。メッセージ。

わーい!私たちはそれを機能させました。しかし、どのように?詳しく見てみましょう。

Cloudflare ワーカーはどのように機能しますか?

生成されたワーカーからローカルで最初のメッセージを取得しましたが、それはどのように機能したのでしょうか?

src/index.ts何が起こっているのかをよりよく理解するために、生成されたファイルを調べてみましょう。

// src/index.ts

/**
 * Welcome to Cloudflare Workers! This is your first worker.
 *
 * - Run `wrangler dev src/index.ts` in your terminal to start a development server
 * - Open a browser tab at http://localhost:8787/ to see your worker in action
 * - Run `wrangler publish src/index.ts --name my-worker` to publish your worker
 *
 * Learn more at https://developers.cloudflare.com/workers/
 */

export interface Env {
  // Example binding to KV. Learn more at https://developers.cloudflare.com/workers/runtime-apis/kv/
  // MY_KV_NAMESPACE: KVNamespace;
  //
  // Example binding to Durable Object. Learn more at https://developers.cloudflare.com/workers/runtime-apis/durable-objects/
  // MY_DURABLE_OBJECT: DurableObjectNamespace;
  //
  // Example binding to R2. Learn more at https://developers.cloudflare.com/workers/runtime-apis/r2/
  // MY_BUCKET: R2Bucket;
}

export default {
  async fetch(
    request: Request,
    env: Env,
    ctx: ExecutionContext
  ): Promise<Response> {
    return new Response("Hello World!");
  },
};

上記のコードには、環境 (Envインターフェース) の定義と、インターフェースに関連するいくつかのコメントが含まれていENVます。

インターフェイスはこの記事の範囲外であるため、コードのその部分は無視して、メイン ロジックのみに焦点を当てます。

// src/index.ts

export default {
  async fetch(
    request: Request,
    env: Env,
    ctx: ExecutionContext
  ): Promise<Response> {
    return new Response("Hello World!");
  },
};

ここで何が起こるかというと、関数をindex.tsエクスポートするというfetchことです。これはWeb Workersに似たインターフェースです。実際、「Cloudflare Workers」という名前が由来するのは、このインターフェースからです。Cloudflare Workers は Web Workers と似ていますが、ブラウザーではなく Cloudflare インフラストラクチャで実行される点が異なります。

上記のコードでは、関数は「Hello World!」をfetch含む新しいオブジェクトを返します。Response文章。そのため、Worker を実行すると、このfetch関数が呼び出されます。次に、呼び出されたfetch関数は「Hello World!」を返します。これは、ブラウザーで (またはワーカーの呼び出しに使用される任意のツールを介して) 取得したものです。

OK、Cloudflare Workers の基本を片付けました。自信を持って進むことができます。TypeScript を初めて使用する場合でも、心配する必要はありません。その機能を軽く使用します。これを、TypeScript の世界への軽量のオンボーディングと想像してください。

よし、先に進もう!

最初のリダイレクトの追加

穏やかなスタートでロジックの作業を開始します。まず、URL 短縮サービスでユーザーを別の Web サイトにリダイレクトします。これは、後の変更の基礎となります。

ここでは、ユーザーがローカル ワーカーにアクセスしたときに、 https://http.cat/ Web サイトのページにアクセスするようにします。

https://http.cat/に慣れていない場合は、HTTP ステータスごとにさまざまな猫の写真が表示される楽しいサイトです。たとえば、ユーザーがワーカーにhttp://localhost:8787/404へのリクエストを行うと、リクエストはhttps://http.cat/404に転送されます。

このリダイレクトを実現するには、次のsrc/index.tsようにを編集します。

// src/index.ts
// ...

const basePath = "https://http.cat";

export default {
  async fetch(
    request: Request,
    _env: Env,
    _ctx: ExecutionContext
  ): Promise<Response> {
    const url = new URL(request.url);

    const { pathname } = url;

    const redirectURL = basePath + pathname;

    if (pathname === "/") {
      return new Response("Hello World from our awesome Worker!");
    }

    return Response.redirect(redirectURL, 301);
  },
};

ここで、http://localhost:8787にアクセスすると、以下に示すように、「Hello World from our awesome Worker!」という更新されたメッセージが表示されます。

Hello World From Awesome Worker

更新された「Hello world」メッセージを表示するワーカー。

ただし、http://localhost:8787/404にアクセスしようとすると、 https://http.cat/404にリダイレクトされます。

ユーザーがリダイレクトされました

ユーザーは http.cat/404 Web サイトにリダイレクトされます。

よし、最初のリダイレクトを開始しました。では、URL 短縮機能で実際にいくつかの URL を短縮してみましょう。

URL の短縮

ここでは、短縮 URL を保存するための小さなデータ構造を追加します。次のように実行できます。

const shortURLs = {
  "/blog": "https://pragmaticpineapple.com/",
  "/twitter": "https://twitter.com/nikolalsvk",
  "/github": "https://github.com/nikolalsvk",
} as Record<any, string>;

export default {
  async fetch(
    request: Request,
    _env: Env,
    _ctx: ExecutionContext
  ): Promise<Response> {
    const url = new URL(request.url);

    const { pathname } = url;

    const redirectURL = shortURLs[pathname];

    if (!redirectURL) {
      return new Response(
        `There is no defined URL for the path: '${pathname}', sorry :(`
      );
    }

    return Response.redirect(redirectURL, 301);
  },
};

ここでは、いくつかの短縮 URL を追加しました。

動作を確認するために、好きなように変更できます。今、http://localhost:8787/blogにアクセスすると、ブログのある長い URL にリダイレクトされます。結果は次のとおりです。

ブログにリダイレクト

/blog にアクセスすると、実際のブログ ページにリダイレクトされます。

しかし、 http://localhost:8787/missingのようなパスを要求すると、次のエラー メッセージが表示されます。

エラーメッセージがありません

/missing にアクセスすると、エラー メッセージが表示されます。

これで、ハードコードされた URL とその短縮バージョンをどこかのストレージに移動する準備が整いました。幸いなことに、私たちは Cloudflare Workers を使用しており、KV と呼ばれるシンプルなキーと値のストレージを提供しています。

ストレージの追加

プロジェクトの KV を実際に作成する前に、Wrangler 経由で Cloudflare Workers にログインする必要があります。KV インスタンスを作成するために、後で Wrangler が Cloudflare に連絡する必要があるため、これが必要です。

Cloudflareへのログイン

Cloudflare にログインするには、次のコマンドを使用します。

$ wrangler login

ブラウザーが開き、Cloudflare へのログインを求められます。心配しないで; 無料プランには、このチュートリアルに必要なものがすべて含まれており、支払いを求められることはありません。先に進んで登録するか、すでにアカウントをお持ちの場合はログインしてください。

次に、Cloudflare は、Wrangler に承認を付与するかどうかを尋ねます。同意すると、次の画面が表示されます。

ラングラー CLI ツール

Wrangler CLI ツールが正しく接続されました。

サインアップ プロセス中に問題が発生することはありません。ただし、どこかで行き詰まった場合は、アカウントの作成に関する Cloudflare のガイドに従うことができます。

素晴らしい!サインアップしてログインしたので、すべてが正しく接続されているかどうかを確認しましょう。

次のコマンドを使用します。

$ wrangler whoami
  wrangler 2.0.21
--------------------
Getting User settings...
 You are logged in with an OAuth Token, associated with the email 'nikolaseap@gmail.com'!
┌──────────────────────┬──────────────────────────────────┐
│ Account Name │ Account ID │
├──────────────────────┼──────────────────────────────────┤
│ Nikola Đuza Personal │ 98a16dfefca0e2ee27e1e79ba590d973 │
└──────────────────────┴──────────────────────────────────┘

これで、KV 名前空間を作成する準備が整いました。

KV 名前空間の作成

KV 名前空間は、Cloudflare ネットワーク上の KV のインスタンスと考えることができます。2 つの KV 名前空間を作成します。1 つはアプリが存在して動作する本番用で、もう 1 つはプレビュー環境用です。URL 短縮サービスをテストおよび開発する間は、プレビューの名前空間を使用します。

次のコマンドを使用して、Wrangler 経由で KV 名前空間を作成します。

$ wrangler kv:namespace create SHORT_URLS
 Creating namespace with title "short-it-SHORT_URLS"
 Success!
Add the following to your configuration file in your kv_namespaces array:
{ binding = "SHORT_URLS", id = "029d374ebd984e19b0bb98e37ab1a95e" }

$ wrangler kv:namespace create SHORT_URLS --preview
  wrangler 2.0.21
--------------------
 Creating namespace with title "short-it-SHORT_URLS_preview"
 Success!
Add the following to your configuration file in your kv_namespaces array:
{ binding = "SHORT_URLS", preview_id = "99a72876e5f84cf58de722b1c2080604" }

これら 2 つのコマンドが実行され、両方の名前空間が作成されたら、実行時にこれらの名前空間を使用するように Wrangler に指示する必要がありますwrangler dev

wrangler.tomlプロジェクトのルートにあるファイルに KV 名前空間に関する情報を追加します。次のようになります。

name = "short-it"
main = "src/index.ts"
compatibility_date = "2022-07-15"

kv_namespaces = [
  { binding = "SHORT_URLS", id = "029d374ebd984e19b0bb98e37ab1a95e", preview_id = "99a72876e5f84cf58de722b1c2080604" }
]

このファイルは、プロジェクトに関する特定の情報wrangler.tomlを伝える構成ファイルです。wranglerこれで、KV にデータを追加する準備が整いました。

KV へのデータの追加

次のステップは、データを KV にシードすることです。2 つの名前空間があるため、2 つのコマンドを実行して両方の場所にデータを配置する必要があることを思い出してください。/blogKV にエントリを追加しましょう。

$ wrangler kv:key put --binding SHORT_URLS "/blog" "https://pragmaticpineapple.com/" --preview false
  wrangler 2.0.21
--------------------
Writing the value "https://pragmaticpineapple.com/" to key "/blog" on namespace 029d374ebd984e19b0bb98e37ab1a95e.

$ wrangler kv:key put --binding SHORT_URLS "/blog" "https://pragmaticpineapple.com/" --preview
  wrangler 2.0.21
--------------------
Writing the value "https://pragmaticpineapple.com/" to key "/blog" on namespace 99a72876e5f84cf58de722b1c2080604.

素晴らしい。これで、KV に 1 つのエントリができました。次に、KV から読み取ってユーザーをリダイレクトするロジックを追加しましょう。

KV からの読み取り

古いハードコードされた短い URL をすばやく削除し、次のように KV への呼び出しを追加します。

// src/index.ts
export interface Env {
  SHORT_URLS: KVNamespace;
}

export default {
  async fetch(
    request: Request,
    env: Env,
    _ctx: ExecutionContext
  ): Promise<Response> {
    const url = new URL(request.url);

    const { pathname } = url;

    const redirectURL = await env.SHORT_URLS.get(pathname);

    if (!redirectURL) {
      return new Response(
        `There is no defined URL for the path: '${pathname}', sorry :(`
      );
    }

    return Response.redirect(redirectURL, 301);
  },
};

ここではSHORT_URLS、タイプとして追加しKVNamespaceます。これにより、KV メソッドを呼び出して適切なデータを取得できます。URL でハードコーディングされたオブジェクトの代わりに、今回はawait env.SHORT_URLS.get(pathname).

への呼び出しenv.SHORT_URLS.get(pathname)は、KV からキーを取得しようとします。promise を返す場合は、 する必要がありawaitます。ただし、指定された の値がある場合pathname、ユーザーはその URL にリダイレクトされます。

ここで、http://localhost:8787/blogにアクセスすると、KV に入力した実際のブログ URL にリダイレクトされます。次のようになります。

それでもブログをリダイレクト

/blog にアクセスすると、実際のブログ ページにリダイレクトされます。

しかし、ハードコーディングした他の URL にアクセスしようとすると、それらの URL にリダイレクトがないというメッセージが表示されます。

URL のリダイレクトがありません

/twitter にアクセスすると、URL にリダイレクトがないことを示すメッセージが表示されます。

次のコマンドを使用して、Twitter の短縮 URL を KV にすばやく追加しましょう。

$ wrangler kv:key put --binding SHORT_URLS "/twitter" "https://twitter.com/nikolalsvk" --preview false
 wrangler 2.0.21
--------------------
Writing the value "https://twitter.com/nikolalsvk" to key "/twitter" on namespace 029d374ebd984e19b0bb98e37ab1a95e.

$ wrangler kv:key put --binding SHORT_URLS "/twitter" "https://twitter.com/nikolalsvk" --preview
  wrangler 2.0.21
--------------------
Writing the value "https://twitter.com/nikolalsvk" to key "/twitter" on namespace 99a72876e5f84cf58de722b1c2080604.

ここで、http://localhost:8787/twitterを更新すると、Twitter アカウントにリダイレクトされるはずです。

読み込み中

短縮 URL を KV に追加すると、Twitter が読み込まれます。

/blogこれでとの 2 つの短い URL ができ/twitterました。サービスをデプロイして、本番環境で確認してみましょう。

Cloudflare ワーカーのデプロイ

Cloudflare Workers の展開手順はかなり簡単です。を次wrangler publishのように利用します。

$ wrangler publish
  wrangler 2.0.21
--------------------
Retrieving cached values for userId from node_modules/.cache/wrangler
Your worker has access to the following bindings:
- KV Namespaces:
  - SHORT_URLS: 029d374ebd984e19b0bb98e37ab1a95e
Total Upload: 0.45 KiB / gzip: 0.29 KiB
Worker ID: short-it
Worker ETag: f8395cab29edf297137631b803b14c32daaae982758c23e3019b700e2468c277
Uploaded short-it (2.14 sec)
Published short-it (6.33 sec)
  short-it.nikolalsvk.workers.dev

現在、サービスはhttps://short-it.nikolalsvk.workers.devで公開されています。わーい!

このチュートリアルに従っている場合、サービスは、選択した内容に応じて、URL https://short-it.YOUR_SUBDOMAIN.workers.devYOUR_SUBDOMAINのどこかに存在するはずです。

この時点で、Worker スクリプトは Cloudflare Edge ネットワーク上で世界中に展開されています。これは、世界中の友人や見知らぬ人がhttps://short-it.nikolalsvk.workers.dev/twitterにアクセスすると、非常に高速に Twitter アカウントにリダイレクトされることを意味します。

まとめ

Cloudflare Workers を使用してシンプルな URL 短縮サービスを作成する旅を続けてくれてありがとう。この記事では、Cloudflare コンテキスト内のワーカーの概念を紹介しました。また、Cloudflare の KV ストレージでデータを作成および管理する方法も示しました。

優れた開発者エクスペリエンスを提供する Wrangler を使用して、これらすべてをスムーズに実行することができました。しかし、最も重要なことは、世界の隅々で高速に動作する小さなサービスを作成、テスト、デプロイすることができたことです。

同様の技術やサービスでこれを実現するには、多額の費用と労力が必要になる場合があります。ただし、Cloudflare は、1 日あたり 100,000 リクエストの寛大な無料利用枠をサポートしています。したがって、有料プランに違反する前に、多くの URL を短縮し、それらに多くの訪問をすることができます.

この記事のすべてのコードは、GitHub リポジトリで入手できます(気に入った場合はスターを付けてください)。短縮サービスはhttps://short-it.nikolalsvk.workers.devで公開されています。

投稿が気に入ったら、友人や同僚と共有することを検討してください。

次回まで、乾杯!

ソース: https://blog.logrocket.com/creating-url-shortener-cloudflare-workers/

BitlyTinyURLなどのツールを使用して長いリンクを短縮したことがありますか? または、これらのサービスがどのように機能するのか疑問に思ったことはありませんか? おそらく、URL 短縮サービスを構築したいと思っていましたが、それを行うための時間や適切なツールが見つかりませんでした。いずれにせよ、このトピックに興味がある場合は、この記事が最適です。

この投稿では、Cloudflare Workersを使用して基本的な URL 短縮サービスを構築する方法を紹介します。URL短縮サービスがどのように機能するかについての詳細な情報を提供し、Cloudflare Workersのいくつかの機能を紹介し、Cloudflare Workersを使い始める方法について順を追って説明します.

始めましょう!

Cloudflare ワーカーとは何ですか?

Cloudflare Workers は、サーバーレス コードを Cloudflare ネットワークにデプロイできるサービスです。Cloudflare ネットワークまたは Edge は、世界中に広がる Web サーバーのネットワークです。Cloudflare Workers の素晴らしい点の 1 つは、コードのスケーリングについて心配する必要がないことです。また、コードが存在するタイム ゾーンについて心配する必要はありません。Workers のコードは、デプロイされてから数秒後に世界中に広がります。

その上、Cloudflare ワーカーには、KV と呼ばれる単純なキーと値のデータ ストアが付属しています。このチュートリアルでは、Cloudflare ワーカーと KV ストレージを組み合わせて、URL を短くします。

事業概要:URL短縮サービス

まず、リダイレクト先の Web サイトをハードコーディングする、単純で非動的な 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
  • ラングラー
  • URL 短縮サービスをテストするための curl (または選択したブラウザー)

私はasdf ツールを使用してローカルの依存関係を管理していますが、任意のバージョン マネージャーを使用できます。執筆時点では、これが私の Node と npm のバージョンです。

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

Wrangler はビルド用のコマンドライン ツールで、最近 2.0 バージョンがリリースされました。この投稿では、Wrangler がすべてのニーズを満たします。将来的には、より堅牢で機能豊富な Wrangler の兄弟である Miniflareを使用する可能性があります。しかし、ここでは、npm を介して Wrangler をグローバルにインストールしましょう。

$ npm install -g wrangler@2.0.21

執筆時点で最新の Wrangler バージョンは 2.0.21 であるため、それを使用します。

涼しい。すべての依存関係が整ったので、Wrangler CLI を使用してスターター Cloudflare Worker を生成できます。

プロジェクトの生成

ここでは、Wrangler CLI ツールが非常に役立ちます。

まず、コマンドを実行して、プロジェクトを適切に開始および設定しましょう。

$ wrangler init short-it

このコマンドは、いくつかの質問をします。ここでは、それらすべてに対して( yと入力して) yes と答えます。

$ 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ファイル
  • tsconfig.jsonすべての TypeScript 構成を含むファイル
  • src/index.tsワーカーから応答を取得するための簡単なロジックを含むファイル

素晴らしい。これが機能するかどうか見てみましょう!

cdディレクトリに入り、Wranglershort-itをローカル開発モードで起動します。

$ cd short-it
$ wrangler dev --local

これにより、ワーカーがhttp://localhost:8787/で実行されます。localhost にアクセスすると、単純な「Hello World!」が表示されるはずです。メッセージ:

ハローワールドメッセージ

生成されたワーカーは「Hello World!」を表示しています。メッセージ。

わーい!私たちはそれを機能させました。しかし、どのように?詳しく見てみましょう。

Cloudflare ワーカーはどのように機能しますか?

生成されたワーカーからローカルで最初のメッセージを取得しましたが、それはどのように機能したのでしょうか?

src/index.ts何が起こっているのかをよりよく理解するために、生成されたファイルを調べてみましょう。

// src/index.ts

/**
 * Welcome to Cloudflare Workers! This is your first worker.
 *
 * - Run `wrangler dev src/index.ts` in your terminal to start a development server
 * - Open a browser tab at http://localhost:8787/ to see your worker in action
 * - Run `wrangler publish src/index.ts --name my-worker` to publish your worker
 *
 * Learn more at https://developers.cloudflare.com/workers/
 */

export interface Env {
  // Example binding to KV. Learn more at https://developers.cloudflare.com/workers/runtime-apis/kv/
  // MY_KV_NAMESPACE: KVNamespace;
  //
  // Example binding to Durable Object. Learn more at https://developers.cloudflare.com/workers/runtime-apis/durable-objects/
  // MY_DURABLE_OBJECT: DurableObjectNamespace;
  //
  // Example binding to R2. Learn more at https://developers.cloudflare.com/workers/runtime-apis/r2/
  // MY_BUCKET: R2Bucket;
}

export default {
  async fetch(
    request: Request,
    env: Env,
    ctx: ExecutionContext
  ): Promise<Response> {
    return new Response("Hello World!");
  },
};

上記のコードには、環境 (Envインターフェース) の定義と、インターフェースに関連するいくつかのコメントが含まれていENVます。

インターフェイスはこの記事の範囲外であるため、コードのその部分は無視して、メイン ロジックのみに焦点を当てます。

// src/index.ts

export default {
  async fetch(
    request: Request,
    env: Env,
    ctx: ExecutionContext
  ): Promise<Response> {
    return new Response("Hello World!");
  },
};

ここで何が起こるかというと、関数をindex.tsエクスポートするというfetchことです。これはWeb Workersに似たインターフェースです。実際、「Cloudflare Workers」という名前が由来するのは、このインターフェースからです。Cloudflare Workers は Web Workers と似ていますが、ブラウザーではなく Cloudflare インフラストラクチャで実行される点が異なります。

上記のコードでは、関数は「Hello World!」をfetch含む新しいオブジェクトを返します。Response文章。そのため、Worker を実行すると、このfetch関数が呼び出されます。次に、呼び出されたfetch関数は「Hello World!」を返します。これは、ブラウザーで (またはワーカーの呼び出しに使用される任意のツールを介して) 取得したものです。

OK、Cloudflare Workers の基本を片付けました。自信を持って進むことができます。TypeScript を初めて使用する場合でも、心配する必要はありません。その機能を軽く使用します。これを、TypeScript の世界への軽量のオンボーディングと想像してください。

よし、先に進もう!

最初のリダイレクトの追加

穏やかなスタートでロジックの作業を開始します。まず、URL 短縮サービスでユーザーを別の Web サイトにリダイレクトします。これは、後の変更の基礎となります。

ここでは、ユーザーがローカル ワーカーにアクセスしたときに、 https://http.cat/ Web サイトのページにアクセスするようにします。

https://http.cat/に慣れていない場合は、HTTP ステータスごとにさまざまな猫の写真が表示される楽しいサイトです。たとえば、ユーザーがワーカーにhttp://localhost:8787/404へのリクエストを行うと、リクエストはhttps://http.cat/404に転送されます。

このリダイレクトを実現するには、次のsrc/index.tsようにを編集します。

// src/index.ts
// ...

const basePath = "https://http.cat";

export default {
  async fetch(
    request: Request,
    _env: Env,
    _ctx: ExecutionContext
  ): Promise<Response> {
    const url = new URL(request.url);

    const { pathname } = url;

    const redirectURL = basePath + pathname;

    if (pathname === "/") {
      return new Response("Hello World from our awesome Worker!");
    }

    return Response.redirect(redirectURL, 301);
  },
};

ここで、http://localhost:8787にアクセスすると、以下に示すように、「Hello World from our awesome Worker!」という更新されたメッセージが表示されます。

Hello World From Awesome Worker

更新された「Hello world」メッセージを表示するワーカー。

ただし、http://localhost:8787/404にアクセスしようとすると、 https://http.cat/404にリダイレクトされます。

ユーザーがリダイレクトされました

ユーザーは http.cat/404 Web サイトにリダイレクトされます。

よし、最初のリダイレクトを開始しました。では、URL 短縮機能で実際にいくつかの URL を短縮してみましょう。

URL の短縮

ここでは、短縮 URL を保存するための小さなデータ構造を追加します。次のように実行できます。

const shortURLs = {
  "/blog": "https://pragmaticpineapple.com/",
  "/twitter": "https://twitter.com/nikolalsvk",
  "/github": "https://github.com/nikolalsvk",
} as Record<any, string>;

export default {
  async fetch(
    request: Request,
    _env: Env,
    _ctx: ExecutionContext
  ): Promise<Response> {
    const url = new URL(request.url);

    const { pathname } = url;

    const redirectURL = shortURLs[pathname];

    if (!redirectURL) {
      return new Response(
        `There is no defined URL for the path: '${pathname}', sorry :(`
      );
    }

    return Response.redirect(redirectURL, 301);
  },
};

ここでは、いくつかの短縮 URL を追加しました。

動作を確認するために、好きなように変更できます。今、http://localhost:8787/blogにアクセスすると、ブログのある長い URL にリダイレクトされます。結果は次のとおりです。

ブログにリダイレクト

/blog にアクセスすると、実際のブログ ページにリダイレクトされます。

しかし、 http://localhost:8787/missingのようなパスを要求すると、次のエラー メッセージが表示されます。

エラーメッセージがありません

/missing にアクセスすると、エラー メッセージが表示されます。

これで、ハードコードされた URL とその短縮バージョンをどこかのストレージに移動する準備が整いました。幸いなことに、私たちは Cloudflare Workers を使用しており、KV と呼ばれるシンプルなキーと値のストレージを提供しています。

ストレージの追加

プロジェクトの KV を実際に作成する前に、Wrangler 経由で Cloudflare Workers にログインする必要があります。KV インスタンスを作成するために、後で Wrangler が Cloudflare に連絡する必要があるため、これが必要です。

Cloudflareへのログイン

Cloudflare にログインするには、次のコマンドを使用します。

$ wrangler login

ブラウザーが開き、Cloudflare へのログインを求められます。心配しないで; 無料プランには、このチュートリアルに必要なものがすべて含まれており、支払いを求められることはありません。先に進んで登録するか、すでにアカウントをお持ちの場合はログインしてください。

次に、Cloudflare は、Wrangler に承認を付与するかどうかを尋ねます。同意すると、次の画面が表示されます。

ラングラー CLI ツール

Wrangler CLI ツールが正しく接続されました。

サインアップ プロセス中に問題が発生することはありません。ただし、どこかで行き詰まった場合は、アカウントの作成に関する Cloudflare のガイドに従うことができます。

素晴らしい!サインアップしてログインしたので、すべてが正しく接続されているかどうかを確認しましょう。

次のコマンドを使用します。

$ wrangler whoami
  wrangler 2.0.21
--------------------
Getting User settings...
 You are logged in with an OAuth Token, associated with the email 'nikolaseap@gmail.com'!
┌──────────────────────┬──────────────────────────────────┐
│ Account Name │ Account ID │
├──────────────────────┼──────────────────────────────────┤
│ Nikola Đuza Personal │ 98a16dfefca0e2ee27e1e79ba590d973 │
└──────────────────────┴──────────────────────────────────┘

これで、KV 名前空間を作成する準備が整いました。

KV 名前空間の作成

KV 名前空間は、Cloudflare ネットワーク上の KV のインスタンスと考えることができます。2 つの KV 名前空間を作成します。1 つはアプリが存在して動作する本番用で、もう 1 つはプレビュー環境用です。URL 短縮サービスをテストおよび開発する間は、プレビューの名前空間を使用します。

次のコマンドを使用して、Wrangler 経由で KV 名前空間を作成します。

$ wrangler kv:namespace create SHORT_URLS
 Creating namespace with title "short-it-SHORT_URLS"
 Success!
Add the following to your configuration file in your kv_namespaces array:
{ binding = "SHORT_URLS", id = "029d374ebd984e19b0bb98e37ab1a95e" }

$ wrangler kv:namespace create SHORT_URLS --preview
  wrangler 2.0.21
--------------------
 Creating namespace with title "short-it-SHORT_URLS_preview"
 Success!
Add the following to your configuration file in your kv_namespaces array:
{ binding = "SHORT_URLS", preview_id = "99a72876e5f84cf58de722b1c2080604" }

これら 2 つのコマンドが実行され、両方の名前空間が作成されたら、実行時にこれらの名前空間を使用するように Wrangler に指示する必要がありますwrangler dev

wrangler.tomlプロジェクトのルートにあるファイルに KV 名前空間に関する情報を追加します。次のようになります。

name = "short-it"
main = "src/index.ts"
compatibility_date = "2022-07-15"

kv_namespaces = [
  { binding = "SHORT_URLS", id = "029d374ebd984e19b0bb98e37ab1a95e", preview_id = "99a72876e5f84cf58de722b1c2080604" }
]

このファイルは、プロジェクトに関する特定の情報wrangler.tomlを伝える構成ファイルです。wranglerこれで、KV にデータを追加する準備が整いました。

KV へのデータの追加

次のステップは、データを KV にシードすることです。2 つの名前空間があるため、2 つのコマンドを実行して両方の場所にデータを配置する必要があることを思い出してください。/blogKV にエントリを追加しましょう。

$ wrangler kv:key put --binding SHORT_URLS "/blog" "https://pragmaticpineapple.com/" --preview false
  wrangler 2.0.21
--------------------
Writing the value "https://pragmaticpineapple.com/" to key "/blog" on namespace 029d374ebd984e19b0bb98e37ab1a95e.

$ wrangler kv:key put --binding SHORT_URLS "/blog" "https://pragmaticpineapple.com/" --preview
  wrangler 2.0.21
--------------------
Writing the value "https://pragmaticpineapple.com/" to key "/blog" on namespace 99a72876e5f84cf58de722b1c2080604.

素晴らしい。これで、KV に 1 つのエントリができました。次に、KV から読み取ってユーザーをリダイレクトするロジックを追加しましょう。

KV からの読み取り

古いハードコードされた短い URL をすばやく削除し、次のように KV への呼び出しを追加します。

// src/index.ts
export interface Env {
  SHORT_URLS: KVNamespace;
}

export default {
  async fetch(
    request: Request,
    env: Env,
    _ctx: ExecutionContext
  ): Promise<Response> {
    const url = new URL(request.url);

    const { pathname } = url;

    const redirectURL = await env.SHORT_URLS.get(pathname);

    if (!redirectURL) {
      return new Response(
        `There is no defined URL for the path: '${pathname}', sorry :(`
      );
    }

    return Response.redirect(redirectURL, 301);
  },
};

ここではSHORT_URLS、タイプとして追加しKVNamespaceます。これにより、KV メソッドを呼び出して適切なデータを取得できます。URL でハードコーディングされたオブジェクトの代わりに、今回はawait env.SHORT_URLS.get(pathname).

への呼び出しenv.SHORT_URLS.get(pathname)は、KV からキーを取得しようとします。promise を返す場合は、 する必要がありawaitます。ただし、指定された の値がある場合pathname、ユーザーはその URL にリダイレクトされます。

ここで、http://localhost:8787/blogにアクセスすると、KV に入力した実際のブログ URL にリダイレクトされます。次のようになります。

それでもブログをリダイレクト

/blog にアクセスすると、実際のブログ ページにリダイレクトされます。

しかし、ハードコーディングした他の URL にアクセスしようとすると、それらの URL にリダイレクトがないというメッセージが表示されます。

URL のリダイレクトがありません

/twitter にアクセスすると、URL にリダイレクトがないことを示すメッセージが表示されます。

次のコマンドを使用して、Twitter の短縮 URL を KV にすばやく追加しましょう。

$ wrangler kv:key put --binding SHORT_URLS "/twitter" "https://twitter.com/nikolalsvk" --preview false
 wrangler 2.0.21
--------------------
Writing the value "https://twitter.com/nikolalsvk" to key "/twitter" on namespace 029d374ebd984e19b0bb98e37ab1a95e.

$ wrangler kv:key put --binding SHORT_URLS "/twitter" "https://twitter.com/nikolalsvk" --preview
  wrangler 2.0.21
--------------------
Writing the value "https://twitter.com/nikolalsvk" to key "/twitter" on namespace 99a72876e5f84cf58de722b1c2080604.

ここで、http://localhost:8787/twitterを更新すると、Twitter アカウントにリダイレクトされるはずです。

読み込み中

短縮 URL を KV に追加すると、Twitter が読み込まれます。

/blogこれでとの 2 つの短い URL ができ/twitterました。サービスをデプロイして、本番環境で確認してみましょう。

Cloudflare ワーカーのデプロイ

Cloudflare Workers の展開手順はかなり簡単です。を次wrangler publishのように利用します。

$ wrangler publish
  wrangler 2.0.21
--------------------
Retrieving cached values for userId from node_modules/.cache/wrangler
Your worker has access to the following bindings:
- KV Namespaces:
  - SHORT_URLS: 029d374ebd984e19b0bb98e37ab1a95e
Total Upload: 0.45 KiB / gzip: 0.29 KiB
Worker ID: short-it
Worker ETag: f8395cab29edf297137631b803b14c32daaae982758c23e3019b700e2468c277
Uploaded short-it (2.14 sec)
Published short-it (6.33 sec)
  short-it.nikolalsvk.workers.dev

現在、サービスはhttps://short-it.nikolalsvk.workers.devで公開されています。わーい!

このチュートリアルに従っている場合、サービスは、選択した内容に応じて、URL https://short-it.YOUR_SUBDOMAIN.workers.devYOUR_SUBDOMAINのどこかに存在するはずです。

この時点で、Worker スクリプトは Cloudflare Edge ネットワーク上で世界中に展開されています。これは、世界中の友人や見知らぬ人がhttps://short-it.nikolalsvk.workers.dev/twitterにアクセスすると、非常に高速に Twitter アカウントにリダイレクトされることを意味します。

まとめ

Cloudflare Workers を使用してシンプルな URL 短縮サービスを作成する旅を続けてくれてありがとう。この記事では、Cloudflare コンテキスト内のワーカーの概念を紹介しました。また、Cloudflare の KV ストレージでデータを作成および管理する方法も示しました。

優れた開発者エクスペリエンスを提供する Wrangler を使用して、これらすべてをスムーズに実行することができました。しかし、最も重要なことは、世界の隅々で高速に動作する小さなサービスを作成、テスト、デプロイすることができたことです。

同様の技術やサービスでこれを実現するには、多額の費用と労力が必要になる場合があります。ただし、Cloudflare は、1 日あたり 100,000 リクエストの寛大な無料利用枠をサポートしています。したがって、有料プランに違反する前に、多くの URL を短縮し、それらに多くの訪問をすることができます.

この記事のすべてのコードは、GitHub リポジトリで入手できます(気に入った場合はスターを付けてください)。短縮サービスはhttps://short-it.nikolalsvk.workers.devで公開されています。

投稿が気に入ったら、友人や同僚と共有することを検討してください。

次回まで、乾杯!

ソース: https://blog.logrocket.com/creating-url-shortener-cloudflare-workers/

  #cloudflare #url 

Rui  Silva

Rui Silva

1661799600

Crie Um Encurtador De URL Com Cloudflare Workers

Você já usou ferramentas como Bitly ou TinyURL para encurtar links longos? Ou você já se perguntou como esses serviços funcionam? Talvez você quisesse criar um encurtador de URL, mas nunca encontrou tempo ou as ferramentas adequadas para fazê-lo. De qualquer forma, se você está interessado neste tema, este artigo é perfeito para você.

Neste post, demonstraremos como construir um serviço básico de encurtador de URL usando Cloudflare Workers . Forneceremos informações detalhadas sobre como os serviços de encurtador de URL funcionam, apresentaremos vários recursos do Cloudflare Workers e forneceremos instruções passo a passo sobre como começar com o Cloudflare Workers.

Vamos começar!

O que são os Trabalhadores da Cloudflare?

O Cloudflare Workers é um serviço que permite implantar código sem servidor na rede Cloudflare. A rede Cloudflare, ou Edge, é uma rede de servidores web espalhados pelo mundo. Uma grande vantagem dos Cloudflare Workers é que você não precisa se preocupar em dimensionar seu código. Além disso, você não precisa se preocupar com os fusos horários em que seu código reside; seu código no Workers está espalhado pelo mundo segundos depois de implantado.

Além disso, os Cloudflare Workers vêm com um armazenamento de dados de chave-valor simples, chamado KV. Neste tutorial, usaremos uma combinação de Cloudflare Workers e armazenamento KV para criar nossa URL mais curta.

Visão geral do projeto: serviço de encurtador de URL

Começaremos criando um encurtador de URL simples e não dinâmico, onde você codifica os sites para os quais deseja redirecionar. Isso servirá como uma introdução para aprender a usar o Wrangler (ferramenta CLI oficial da Cloudflare) e demonstrará os conceitos básicos do domínio Workers.

Em seguida, vamos apimentar um pouco as coisas e adicionar suporte para URLs dinâmicos. Basicamente, vamos interagir com a loja Cloudflare Workers KV e inserir versões curtas da URL e a URL real para a qual queremos redirecionar. Os dados no armazenamento KV serão semelhantes à seguinte estrutura:

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

Por fim, implantaremos nosso código em produção e o veremos funcionar ao vivo em todo o mundo.

Já está animado? Ótimo, vamos pular!

Configurando o ambiente

Para acompanhar este artigo, você precisará do seguinte:

  • Node.js e npm
  • Peão
  • curl (ou o navegador de sua escolha) para testar o encurtador de URL

Eu uso a ferramenta asdf para gerenciar minhas dependências locais, mas você pode usar qualquer gerenciador de versão que preferir. No momento em que escrevo, aqui está minha versão do Node e do npm:

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

Wrangler é uma ferramenta de linha de comando para construção e, recentemente, ganhou sua versão 2.0. Para os propósitos deste post, o Wrangler atenderá a todas as nossas necessidades. No futuro, podemos usar o Miniflare, um irmão mais robusto e rico em recursos do Wrangler . Mas, por enquanto, vamos instalar o Wrangler globalmente via npm:

$ npm install -g wrangler@2.0.21

No momento em que escrevo, a versão mais recente do Wrangler é 2.0.21, então vamos usar essa.

Legal. Agora que temos todas as dependências em vigor, podemos usar a CLI do Wrangler para gerar nosso Cloudflare Worker inicial.

Gerando o projeto

A ferramenta Wrangler CLI será muito útil aqui.

Para começar, vamos executar um comando para iniciar e configurar nosso projeto corretamente:

$ wrangler init short-it

Este comando fará algumas perguntas. Por enquanto, vamos responder sim (digitando y ) para todos eles:

$ 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`

Se você respondeu positivamente a todas as perguntas do Wrangler, você terá um nome de projeto short-it, com o seguinte dentro:

  • .gitdiretório em seu projeto, o que significa que você está pronto para enviá-lo ao seu provedor Git
  • package.jsonArquivo
  • tsconfig.jsonarquivo com toda a configuração do TypeScript
  • src/index.tsarquivo com alguma lógica direta para obter uma resposta do nosso Worker

Incrível. Vamos ver se essa coisa funciona!

Vamos cdentrar no short-itdiretório e iniciar o Wrangler no modo de desenvolvimento local:

$ cd short-it
$ wrangler dev --local

Isso deve executar nosso Worker em http://localhost:8787/ . Se visitarmos o localhost, devemos ver um simples “Hello World!” mensagem:

Mensagem Olá Mundo

O trabalhador gerado está exibindo um "Hello World!" mensagem.

Yay! Nós fizemos isso funcionar. Mas como? Vamos olhar mais de perto.

Como funcionam os Cloudflare Workers?

Recebemos nossa primeira mensagem localmente do Worker gerado, mas como exatamente isso funcionou?

Vamos analisar o src/index.tsarquivo gerado para entender melhor o que está acontecendo lá.

// src/index.ts

/**
 * Welcome to Cloudflare Workers! This is your first worker.
 *
 * - Run `wrangler dev src/index.ts` in your terminal to start a development server
 * - Open a browser tab at http://localhost:8787/ to see your worker in action
 * - Run `wrangler publish src/index.ts --name my-worker` to publish your worker
 *
 * Learn more at https://developers.cloudflare.com/workers/
 */

export interface Env {
  // Example binding to KV. Learn more at https://developers.cloudflare.com/workers/runtime-apis/kv/
  // MY_KV_NAMESPACE: KVNamespace;
  //
  // Example binding to Durable Object. Learn more at https://developers.cloudflare.com/workers/runtime-apis/durable-objects/
  // MY_DURABLE_OBJECT: DurableObjectNamespace;
  //
  // Example binding to R2. Learn more at https://developers.cloudflare.com/workers/runtime-apis/r2/
  // MY_BUCKET: R2Bucket;
}

export default {
  async fetch(
    request: Request,
    env: Env,
    ctx: ExecutionContext
  ): Promise<Response> {
    return new Response("Hello World!");
  },
};

O código acima inclui uma definição para nosso ambiente (a Envinterface) e alguns comentários relacionados à ENVinterface.

Como a interface está fora do escopo deste artigo, vamos ignorar essa parte do código e focar apenas na lógica principal:

// src/index.ts

export default {
  async fetch(
    request: Request,
    env: Env,
    ctx: ExecutionContext
  ): Promise<Response> {
    return new Response("Hello World!");
  },
};

O que acontece aqui é que nosso index.tsexport uma fetchfunção. Esta é uma interface semelhante ao Web Workers . Na verdade, é dessa interface que se origina o nome “Cloudflare Workers”. O Cloudflare Workers é semelhante ao Web Workers, exceto que é executado na infraestrutura da Cloudflare em vez de em um navegador.

No código acima, a fetchfunção retorna um novo Responseobjeto com a mensagem “Hello World!” texto. Então, quando executamos nosso Worker, essa fetchfunção é invocada. Em seguida, a função invocada fetchretorna o “Hello World!” resposta, e é isso que pegamos no navegador (ou por meio de qualquer ferramenta usada para invocar o Worker).

OK, esclarecemos o básico dos Trabalhadores da Cloudflare. Podemos seguir em frente com confiança. Se você é novo no TypeScript, não se preocupe; usaremos seus recursos apenas levemente. Imagine isso como uma integração leve ao mundo do TypeScript.

Ótimo, vamos em frente!

Adicionando um primeiro redirecionamento

Começaremos a trabalhar em nossa lógica com um início suave. Primeiro, faremos com que nosso encurtador de URL redirecione um usuário para um site diferente. Esta será a base para alterações posteriores.

Por enquanto, faremos com que o usuário acesse uma página no site https://http.cat/ quando visitar nosso Worker local.

Se você não estiver familiarizado com https://http.cat/ , é um site divertido que exibe várias imagens de gatos para diferentes status HTTP. Por exemplo, se um usuário fizer uma solicitação ao nosso Trabalhador para http://localhost:8787/404 , ele será direcionado para https://http.cat/404 .

Para conseguir esse redirecionamento, editaremos o src/index.ts, assim:

// src/index.ts
// ...

const basePath = "https://http.cat";

export default {
  async fetch(
    request: Request,
    _env: Env,
    _ctx: ExecutionContext
  ): Promise<Response> {
    const url = new URL(request.url);

    const { pathname } = url;

    const redirectURL = basePath + pathname;

    if (pathname === "/") {
      return new Response("Hello World from our awesome Worker!");
    }

    return Response.redirect(redirectURL, 301);
  },
};

Agora, se visitarmos http://localhost:8787 , receberemos uma mensagem atualizada: “Hello World from our awesome Worker!”, conforme mostrado abaixo:

Olá mundo do trabalhador incrível

Trabalhador exibindo uma mensagem “Hello world” atualizada.

Mas, se tentarmos ir para http://localhost:8787/404 , seremos redirecionados para https://http.cat/404 .

Usuário redirecionado

O usuário é redirecionado para o site http.cat/404.

Ótimo, iniciamos nosso primeiro redirecionamento. Agora, vamos fazer nosso encurtador de URL realmente encurtar alguns URLs.

Encurtando o URL

Por enquanto, adicionaremos uma pequena estrutura de dados para armazenar nossos URLs encurtados. Podemos fazer assim:

const shortURLs = {
  "/blog": "https://pragmaticpineapple.com/",
  "/twitter": "https://twitter.com/nikolalsvk",
  "/github": "https://github.com/nikolalsvk",
} as Record<any, string>;

export default {
  async fetch(
    request: Request,
    _env: Env,
    _ctx: ExecutionContext
  ): Promise<Response> {
    const url = new URL(request.url);

    const { pathname } = url;

    const redirectURL = shortURLs[pathname];

    if (!redirectURL) {
      return new Response(
        `There is no defined URL for the path: '${pathname}', sorry :(`
      );
    }

    return Response.redirect(redirectURL, 301);
  },
};

Aqui, adicionamos alguns URLs abreviados:

Você pode alterá-lo para o que quiser apenas para vê-lo funcionando. Agora, quando visito http://localhost:8787/blog , sou redirecionado para uma URL mais longa onde meu blog está localizado. Aqui está o resultado:

Redirecionamentos para o blog

Visitar /blog redireciona para a página real do blog.

Mas, se solicitarmos algum caminho, como http://localhost:8787/missing , recebemos a seguinte mensagem de erro: “Não há URL definida para o caminho: '/missing', desculpe :(“.

Mensagem de erro ausente

Visitar/ausente exibe uma mensagem de erro.

Incrível, agora estamos prontos para mover nossos URLs codificados e suas versões abreviadas para um armazenamento em algum lugar. Felizmente, estamos usando Cloudflare Workers e ele oferece um armazenamento simples de valor-chave chamado KV.

Adicionando armazenamento

Antes de realmente criarmos o KV para nosso projeto, primeiro precisamos fazer login no Cloudflare Workers via Wrangler. Isso é necessário porque o Wrangler posteriormente precisará entrar em contato com a Cloudflare para criar uma instância KV para nós.

Fazendo login na Cloudflare

Para fazer login na Cloudflare, use o seguinte comando:

$ wrangler login

Um navegador será aberto, solicitando que você faça login na Cloudflare. Não se preocupe; o plano gratuito cobre tudo o que precisamos para este tutorial, e você não precisará pagar. Vá em frente e registre-se ou faça login se você já tiver uma conta.

Em seguida, a Cloudflare perguntará se você deseja conceder autorização ao Wrangler. Após concordar, você deverá ver a seguinte tela:

Ferramenta CLI do Wrangler

A ferramenta Wrangler CLI agora está conectada corretamente.

Não deve haver nenhum soluço durante o processo de inscrição. Mas, se você ficar preso em algum ponto, você pode seguir o guia da Cloudflare sobre como criar uma conta .

Incrível! Agora que você está cadastrado e logado, vamos verificar se tudo está conectado corretamente.

Use o seguinte comando:

$ wrangler whoami
  wrangler 2.0.21
--------------------
Getting User settings...
 You are logged in with an OAuth Token, associated with the email 'nikolaseap@gmail.com'!
┌──────────────────────┬──────────────────────────────────┐
│ Account Name │ Account ID │
├──────────────────────┼──────────────────────────────────┤
│ Nikola Đuza Personal │ 98a16dfefca0e2ee27e1e79ba590d973 │
└──────────────────────┴──────────────────────────────────┘

Ótimo, estamos prontos para criar um namespace KV.

Criando um namespace KV

Um namespace KV pode ser considerado como uma instância de KV na rede Cloudflare. Criaremos dois namespaces KV: um para produção onde nosso aplicativo ficará e funcionará e outro para o ambiente de visualização. Usaremos o namespace de visualização enquanto testamos e desenvolvemos nosso encurtador de URL.

Criaremos nossos namespaces KV via Wrangler com os seguintes comandos:

$ wrangler kv:namespace create SHORT_URLS
 Creating namespace with title "short-it-SHORT_URLS"
 Success!
Add the following to your configuration file in your kv_namespaces array:
{ binding = "SHORT_URLS", id = "029d374ebd984e19b0bb98e37ab1a95e" }

$ wrangler kv:namespace create SHORT_URLS --preview
  wrangler 2.0.21
--------------------
 Creating namespace with title "short-it-SHORT_URLS_preview"
 Success!
Add the following to your configuration file in your kv_namespaces array:
{ binding = "SHORT_URLS", preview_id = "99a72876e5f84cf58de722b1c2080604" }

Depois que esses dois comandos são executados e ambos os namespaces são criados, precisamos dizer ao Wrangler para usar esses namespaces quando executarmos wrangler dev.

Adicionaremos informações sobre namespaces KV ao wrangler.tomlarquivo na raiz do nosso projeto. Deve ser algo assim:

name = "short-it"
main = "src/index.ts"
compatibility_date = "2022-07-15"

kv_namespaces = [
  { binding = "SHORT_URLS", id = "029d374ebd984e19b0bb98e37ab1a95e", preview_id = "99a72876e5f84cf58de722b1c2080604" }
]

O wrangler.tomlarquivo é um arquivo de configuração que informa wranglercertas informações sobre nosso projeto. Agora, estamos amarrados e prontos para adicionar alguns dados ao nosso KV.

Adicionando dados ao KV

Nosso próximo passo é semear os dados para o KV. Lembre-se, temos dois namespaces, então teremos que executar dois comandos para ter os dados em ambos os lugares. Vamos adicionar a /blogentrada ao KV:

$ wrangler kv:key put --binding SHORT_URLS "/blog" "https://pragmaticpineapple.com/" --preview false
  wrangler 2.0.21
--------------------
Writing the value "https://pragmaticpineapple.com/" to key "/blog" on namespace 029d374ebd984e19b0bb98e37ab1a95e.

$ wrangler kv:key put --binding SHORT_URLS "/blog" "https://pragmaticpineapple.com/" --preview
  wrangler 2.0.21
--------------------
Writing the value "https://pragmaticpineapple.com/" to key "/blog" on namespace 99a72876e5f84cf58de722b1c2080604.

Incrível. Agora temos uma entrada no KV. Em seguida, vamos adicionar a lógica que lê a partir do KV e redireciona o usuário.

Leitura do KV

Removeremos rapidamente nossos URLs curtos codificados antigos e adicionaremos uma chamada ao KV, assim:

// src/index.ts
export interface Env {
  SHORT_URLS: KVNamespace;
}

export default {
  async fetch(
    request: Request,
    env: Env,
    _ctx: ExecutionContext
  ): Promise<Response> {
    const url = new URL(request.url);

    const { pathname } = url;

    const redirectURL = await env.SHORT_URLS.get(pathname);

    if (!redirectURL) {
      return new Response(
        `There is no defined URL for the path: '${pathname}', sorry :(`
      );
    }

    return Response.redirect(redirectURL, 301);
  },
};

Aqui, adicionamos SHORT_URLScomo um KVNamespacetipo. Isso nos permitirá chamar métodos KV para obter os dados adequados. Em vez do objeto codificado com URLs, desta vez usamos await env.SHORT_URLS.get(pathname).

A chamada para env.SHORT_URLS.get(pathname)tenta obter a chave do KV. Se ele retornar uma promessa, devemos await. Mas, se houver um valor para determinado pathname, o usuário será redirecionado para esse URL.

Agora, quando visitarmos http://localhost:8787/blog , seremos redirecionados para a URL real do blog que colocamos no KV. Isso parecerá assim:

Ainda redireciona o blog

Visitar /blog ainda nos redireciona para a página real do blog.

Mas, se agora tentarmos visitar qualquer um dos outros URLs que codificamos, receberemos uma mensagem informando que esses URLs não têm um redirecionamento:

Redirecionamento de URL ausente

Visitar /twitter resulta em uma mensagem indicando que o URL não tem um redirecionamento.

Vamos adicionar rapidamente o URL encurtado do Twitter ao KV usando estes comandos:

$ wrangler kv:key put --binding SHORT_URLS "/twitter" "https://twitter.com/nikolalsvk" --preview false
 wrangler 2.0.21
--------------------
Writing the value "https://twitter.com/nikolalsvk" to key "/twitter" on namespace 029d374ebd984e19b0bb98e37ab1a95e.

$ wrangler kv:key put --binding SHORT_URLS "/twitter" "https://twitter.com/nikolalsvk" --preview
  wrangler 2.0.21
--------------------
Writing the value "https://twitter.com/nikolalsvk" to key "/twitter" on namespace 99a72876e5f84cf58de722b1c2080604.

Agora, quando atualizarmos o http://localhost:8787/twitter , devemos ser redirecionados para a conta do Twitter.

Carregando Twitter

O Twitter carrega depois que adicionamos o URL encurtado ao KV.

Incrível, agora temos dois URLs curtos: /bloge /twitter. Vamos tentar implantar nosso serviço e vê-lo em produção.

Como implantar trabalhadores do Cloudflare

A etapa de implantação do Cloudflare Workers é bastante fácil. Vamos utilizar wrangler publish, assim:

$ wrangler publish
  wrangler 2.0.21
--------------------
Retrieving cached values for userId from node_modules/.cache/wrangler
Your worker has access to the following bindings:
- KV Namespaces:
  - SHORT_URLS: 029d374ebd984e19b0bb98e37ab1a95e
Total Upload: 0.45 KiB / gzip: 0.29 KiB
Worker ID: short-it
Worker ETag: f8395cab29edf297137631b803b14c32daaae982758c23e3019b700e2468c277
Uploaded short-it (2.14 sec)
Published short-it (6.33 sec)
  short-it.nikolalsvk.workers.dev

Agora, os serviços estão disponíveis em https://short-it.nikolalsvk.workers.dev . Yay!

Se você estiver seguindo este tutorial, seus serviços devem estar em algum lugar ao longo da URL https://short-it.YOUR_SUBDOMAIN.workers.dev , dependendo do que você selecionou para YOUR_SUBDOMAIN.

Neste ponto, nosso script Worker é implantado em todo o mundo na rede Cloudflare Edge. Isso significa que amigos e estranhos em todo o mundo podem ser redirecionados incrivelmente rápido para nossa conta do Twitter se visitarem https://short-it.nikolalsvk.workers.dev/twitter .

Empacotando

Obrigado por acompanhar a jornada de criação de um serviço simples de encurtador de URL usando Cloudflare Workers. Neste artigo, apresentamos os conceitos de um Worker dentro do contexto Cloudflare. Também demonstramos como criar e gerenciar dados no armazenamento KV da Cloudflare.

Conseguimos executar tudo isso sem problemas usando o Wrangler, que oferece uma ótima experiência ao desenvolvedor. Mas, o mais importante, conseguimos criar, testar e implantar nosso pequeno serviço que roda rápido em todos os cantos do mundo.

Conseguir isso em uma tecnologia ou serviço semelhante pode exigir muito dinheiro e esforço. No entanto, a Cloudflare oferece suporte a um generoso nível gratuito de 100.000 solicitações por dia. Assim, você pode encurtar muitos URLs e ter muitas visitas antes de entrar em um plano pago.

Todo o código deste artigo está disponível no repositório do GitHub (por favor, marque-o com uma estrela, se você gostar). O serviço de encurtador está disponível em https://short-it.nikolalsvk.workers.dev .

Se você gostou do post, considere compartilhá-lo com seus amigos e colegas de trabalho.

Até a próxima, abração!

Fonte: https://blog.logrocket.com/creating-url-shortener-cloudflare-workers/

#cloudflare #url