高橋  花子

高橋 花子

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 

What is GEEK

Buddha Community

Cloudflare Workers で 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 

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 

曾 俊

曾 俊

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 

Thai  Son

Thai Son

1661797800

Tạo Trình Rút Ngắn URL Với Cloudflare Worker

Bạn đã bao giờ sử dụng các công cụ như Bitly hoặc TinyURL để rút ngắn các liên kết dài chưa? Hoặc, bạn đã tự hỏi làm thế nào các dịch vụ này hoạt động? Có thể bạn muốn xây dựng một công cụ rút ngắn URL nhưng chưa bao giờ tìm thấy thời gian hoặc công cụ thích hợp để làm điều đó. Trong mọi trường hợp, nếu bạn quan tâm đến chủ đề này, bài viết này là hoàn hảo cho bạn.

Trong bài đăng này, chúng tôi sẽ trình bày cách tạo dịch vụ rút gọn URL cơ bản bằng Cloudflare worker . Chúng tôi sẽ cung cấp thông tin chi tiết về cách hoạt động của các dịch vụ rút gọn URL, giới thiệu một số tính năng của Cloudflare worker và hướng dẫn từng bước về cách bắt đầu với Cloudflare worker.

Bắt đầu nào!

Công nhân Cloudflare là gì?

Cloudflare worker là một dịch vụ cho phép bạn triển khai mã không máy chủ vào mạng Cloudflare. Mạng Cloudflare, hay Edge, là một mạng lưới các máy chủ web trải rộng trên toàn cầu. Một điều tuyệt vời về Cloudflare worker là bạn không phải lo lắng về việc mở rộng mã của mình. Ngoài ra, bạn không phải lo lắng về múi giờ mà mã của bạn đang sống; mã của bạn trong Công nhân được lan truyền trên toàn cầu vài giây sau khi được triển khai.

Trên hết, Cloudflare worker đi kèm với một kho dữ liệu giá trị-khóa đơn giản, được gọi là KV. Trong hướng dẫn này, chúng tôi sẽ sử dụng kết hợp Cloudflare worker và KV lưu trữ để xây dựng URL của chúng tôi ngắn hơn.

Tổng quan về dự án: Dịch vụ rút gọn URL

Chúng tôi sẽ bắt đầu bằng cách xây dựng một trình rút ngắn URL đơn giản, không động, nơi bạn mã hóa cứng các trang web mà bạn muốn chuyển hướng đến. Đây sẽ là phần giới thiệu để học cách sử dụng Wrangler (công cụ CLI chính thức của Cloudflare) và sẽ trình bày các khái niệm cơ bản trong lĩnh vực Công nhân.

Tiếp theo, chúng tôi sẽ thêm gia vị cho mọi thứ và thêm hỗ trợ cho các URL động. Về cơ bản, chúng tôi sẽ tương tác với cửa hàng Cloudflare worker KV và nhập các phiên bản ngắn của URL và URL thực mà chúng tôi muốn chuyển hướng đến. Dữ liệu trong KV store sẽ tương tự như cấu trúc sau:

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

Cuối cùng, chúng tôi sẽ triển khai mã của mình để sản xuất và xem nó hoạt động trực tiếp trên toàn cầu.

Bạn đã hào hứng chưa? Tuyệt vời, chúng ta hãy nhảy vào!

Thiết lập môi trường

Để làm theo bài viết này, bạn sẽ cần những thứ sau:

  • Node.js và npm
  • Wrangler
  • curl (hoặc trình duyệt bạn chọn) để kiểm tra trình rút gọn URL

Tôi sử dụng công cụ asdf để quản lý các phụ thuộc cục bộ của mình, nhưng bạn có thể sử dụng bất kỳ trình quản lý phiên bản nào bạn muốn. Tại thời điểm viết bài, đây là phiên bản Node và npm của tôi:

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

Wrangler là một công cụ dòng lệnh để xây dựng và gần đây, nó đã có phiên bản 2.0. Với mục đích của bài đăng này, Wrangler sẽ đáp ứng mọi nhu cầu của chúng tôi. Trong tương lai, chúng tôi có thể sử dụng Miniflare, một người anh em mạnh mẽ hơn và giàu tính năng hơn của Wrangler . Tuy nhiên, hiện tại, hãy cài đặt Wrangler trên toàn cầu thông qua npm:

$ npm install -g wrangler@2.0.21

Tại thời điểm viết bài, phiên bản Wrangler mới nhất là 2.0.21, vì vậy chúng tôi sẽ tiếp tục với phiên bản đó.

Mát mẻ. Bây giờ chúng ta đã có tất cả các phụ thuộc, chúng ta có thể sử dụng Wrangler CLI để tạo Cloudflare Worker khởi đầu của chúng ta.

Tạo dự án

Công cụ Wrangler CLI sẽ tỏ ra rất hữu ích ở đây.

Để bắt đầu, hãy chạy một lệnh để bắt đầu và thiết lập dự án của chúng tôi đúng cách:

$ wrangler init short-it

Lệnh này sẽ hỏi một số câu hỏi. Hiện tại, chúng tôi sẽ trả lời có (bằng cách nhập y ) cho tất cả chúng:

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

Nếu bạn trả lời tích cực cho tất cả các câu hỏi từ Wrangler, thì bạn sẽ có tên dự án short-it, với nội dung sau:

  • .gitthư mục trong dự án của bạn, nghĩa là bạn đã sẵn sàng đẩy nó đến nhà cung cấp Git của mình
  • package.jsontập tin
  • tsconfig.jsontệp với tất cả cấu hình TypeScript
  • src/index.tstệp với một số logic đơn giản để nhận được phản hồi từ Nhân viên của chúng tôi

Đáng kinh ngạc. Hãy xem điều này có hiệu quả không nhé!

Hãy cdvào thư mục short-itvà khởi động Wrangler ở chế độ phát triển cục bộ:

$ cd short-it
$ wrangler dev --local

Điều này sẽ chạy Worker của chúng tôi trên http: // localhost: 8787 / . Nếu chúng ta truy cập localhost, chúng ta sẽ thấy một thông báo đơn giản "Hello World!" thông điệp:

Hello World Message

Generated Worker đang hiển thị thông báo “Hello World!” thông điệp.

Yay! Chúng tôi đã làm cho nó hoạt động. Nhưng bằng cách nào? Chúng ta hãy xem xét kỹ hơn.

Công nhân Cloudflare hoạt động như thế nào?

Chúng tôi đã nhận được thông báo cục bộ đầu tiên từ Worker được tạo, nhưng chính xác thì thông báo đó hoạt động như thế nào?

Hãy xem qua src/index.tstệp đã tạo để hiểu rõ hơn về những gì đang xảy ra ở đó.

// 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ạn mã trên bao gồm định nghĩa cho môi trường của chúng ta ( Envgiao diện) và một số nhận xét liên quan đến ENVgiao diện.

Vì giao diện nằm ngoài phạm vi của bài viết này, chúng tôi sẽ bỏ qua phần đó của mã và chỉ tập trung vào logic chính:

// src/index.ts

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

Điều xảy ra ở đây là chúng ta index.tsxuất một fetchhàm. Đây là một giao diện tương tự như Web Worker . Trên thực tế, chính từ giao diện này mà tên gọi “Cloudflare worker” bắt nguồn. Cloudflare worker tương tự như Web worker, ngoại trừ nó chạy trên cơ sở hạ tầng Cloudflare chứ không phải trình duyệt.

Trong đoạn mã trên, fetchhàm trả về một Responseđối tượng mới với "Hello World!" chữ. Vì vậy, khi chúng tôi chạy Worker của mình, fetchhàm này sẽ được gọi. Sau đó, hàm được gọi fetchtrả về "Hello World!" và đây là những gì chúng tôi nhận được trong trình duyệt (hoặc thông qua bất kỳ công cụ nào được sử dụng để gọi Worker).

OK, chúng tôi đã làm rõ những điều cơ bản về Cloudflare worker. Chúng ta có thể tự tin bước tiếp. Nếu bạn chưa quen với TypeScript, đừng lo lắng; chúng tôi sẽ chỉ sử dụng các tính năng của nó một cách nhẹ nhàng. Hãy tưởng tượng điều này giống như một sự giới thiệu nhẹ đến thế giới của TypeScript.

Tuyệt vời, chúng ta hãy tiếp tục!

Thêm chuyển hướng đầu tiên

Chúng tôi sẽ bắt đầu làm việc trên logic của chúng tôi với một khởi đầu nhẹ nhàng. Đầu tiên, chúng tôi sẽ yêu cầu trình rút gọn URL của chúng tôi chuyển hướng người dùng đến một trang web khác. Đây sẽ là nền tảng cho những thay đổi sau này.

Hiện tại, chúng tôi sẽ yêu cầu người dùng truy cập một trang trên trang web https://http.cat/ khi họ truy cập Nhân viên địa phương của chúng tôi.

Nếu bạn chưa quen với https://http.cat/ , đây là một trang web thú vị hiển thị nhiều hình ảnh mèo khác nhau cho các trạng thái HTTP khác nhau. Ví dụ: nếu người dùng yêu cầu Nhân viên của chúng tôi đến http: // localhost: 8787/404 , họ sẽ được chuyển hướng đến https://http.cat/404 .

Để đạt được chuyển hướng này, chúng tôi sẽ chỉnh sửa src/index.ts, như sau:

// 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);
  },
};

Bây giờ, nếu chúng tôi truy cập http: // localhost: 8787 , chúng tôi sẽ nhận được một thông báo cập nhật: “Xin chào Thế giới từ Người lao động tuyệt vời của chúng tôi!”, Như được hiển thị bên dưới:

Xin chào thế giới từ người lao động tuyệt vời

Nhân viên hiển thị thông báo “Hello world” được cập nhật.

Tuy nhiên, nếu chúng tôi cố gắng truy cập http: // localhost: 8787/404 , chúng tôi sẽ được chuyển hướng đến https://http.cat/404 .

Người dùng được chuyển hướng

Người dùng được chuyển hướng đến trang web http.cat/404.

Great, we got our first redirect going. Now, let’s make our URL shortener actually shorten some URLs.

Shortening the URL

For now, we’ll add a small data structure to store our shortened URLs. We can do it like this:

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);
  },
};

Here, we added a couple of shortened URLs:

You can change it to whatever you like just to see it working. Now, when I visit http://localhost:8787/blog, I get redirected to a longer URL where my blog is located. Here’s the result:

Chuyển hướng đến Blog

Visiting /blog redirects to the actual blog page.

But, if we request some path, like http://localhost:8787/missing, we get the following error message: “There is no defined URL for the path: ‘/missing’, sorry :(“.

Thiếu thông báo lỗi

Visiting /missing displays an error message.

Awesome, now we are ready to move our hardcoded URLs and their shortened versions to a storage somewhere. Fortunately, we’re using Cloudflare Workers, and it offers a simple key-value storage called KV.

Adding storage

Before we actually create the KV for our project, we first need to log into Cloudflare Workers via Wrangler. This is necessary because Wrangler will later need to contact Cloudflare in order to create a KV instance for us.

Logging into Cloudflare

To log into Cloudflare, use the following command:

$ wrangler login

A browser will open, asking you to log in to Cloudflare. Don’t worry; the free plan covers everything we’ll need for this tutorial, and you will not be asked for payment. Go ahead and register, or log in if you already have an account.

Next, Cloudflare will ask if you want to grant authorization to Wrangler. After you agree, you should see the following screen:

Công cụ Wrangler CLI

The Wrangler CLI tool is now properly connected.

There shouldn’t be any hiccups during the signup process. But, if you got stuck at any point, you can follow Cloudflare’s guide on creating an account.

Awesome! Now that you are signed up and logged in, let’s check whether everything is connected properly.

Use the following command:

$ 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 │
└──────────────────────┴──────────────────────────────────┘

Great, we’re ready to make a KV namespace.

Creating a KV namespace

A KV namespace can be thought of it as an instance of KV up on the Cloudflare network. We’ll create two KV namespaces: one for production where our app will live and work and another for the preview environment. We’ll use the preview namespace while we test and develop our URL shortener.

We’ll create our KV namespaces via Wrangler with the following commands:

$ 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" }

After these two commands run and both namespaces are created, we need to tell Wrangler to use these namespaces when we run wrangler dev.

We’ll add information about KV namespaces to the wrangler.toml file at the root of our project. It should look something like this:

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

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

The wrangler.toml file is a configuration file that tells wrangler certain information about our project. Now, we’re strapped up and ready to add some data to our KV.

Adding data to the KV

Our next step is to seed the data to the KV. Remember, we have two namespaces so we’ll have to run two commands to have the data in both places. Let’s add the /blog entry to the 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.

Awesome. Now we have one entry in the KV. Next, let’s add logic that reads from the KV and redirects the user.

Reading from the KV

We’ll quickly remove our old hardcoded short URLs and add a call to the KV, like so:

// 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);
  },
};

Here, we add SHORT_URLS as a KVNamespace type. This will allow us to call KV methods to get the proper data. Instead of the hardcoded object with URLs, this time we use await env.SHORT_URLS.get(pathname).

The call to env.SHORT_URLS.get(pathname) tries to get the key from the KV. If it returns a promise, we must await. But, if there’s a value for the given pathname, then the user is redirected to that URL.

Now, when we visit http://localhost:8787/blog, we will be redirected to the actual blog URL we put in the KV. It will look like this:

Blog Vẫn chuyển hướng

Visiting /blog still redirects us to the actual blog page.

But, if we now try to visit any of the other URLs we hardcoded, we’ll get a message saying that those URLs are missing a redirect:

URL thiếu chuyển hướng

Visiting /twitter results in a message indicating the URL is missing a redirect.

Let’s quickly add the Twitter shortened URL to the KV using these commands:

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

Now, when we refresh the http://localhost:8787/twitter, we should get redirected to the Twitter account.

Đang tải trên Twitter

Twitter loads after we added the shortened URL to the KV.

Awesome, now we have two short URLs: /blog and /twitter. Let’s try to deploy our service and see it in production.

Deploying Cloudflare Workers

The Cloudflare Workers deployment step is fairly easy. We’ll utilize wrangler publish, like so:

$ 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

Now, the services are live at https://short-it.nikolalsvk.workers.dev. Yay!

If you’re following along with this tutorial, your services should live somewhere along the URL https://short-it.YOUR_SUBDOMAIN.workers.dev, depending on what you selected for YOUR_SUBDOMAIN.

At this point, our Worker script is deployed across the globe on the Cloudflare Edge network. This means that friends and strangers across the globe can get redirected blazingly fast to our Twitter account if they visit https://short-it.nikolalsvk.workers.dev/twitter.

Wrapping up

Thanks for following along on the journey of creating a simple URL shortener service using Cloudflare Workers. In this article, we introduced the concepts of a Worker inside the Cloudflare context. We also demonstrated how to create and manage data in Cloudflare’s KV storage.

We were able to execute all of this smoothly using Wrangler, which provides a great developer experience. But, most importantly, we managed to create, test, and deploy our small service that runs fast in all corners of the world.

Achieving this in a similar technology or service might require a lot of money and effort. However, Cloudflare supports a generous free tier of 100,000 requests per day. So you can shorten many URLs and have many visits on them before breaching into a paid plan.

Tất cả mã trong bài viết này đều có trong repo GitHub (vui lòng gắn dấu sao nếu bạn thích). Dịch vụ rút gọn có trực tuyến tại https://short-it.nikolalsvk.workers.dev .

Nếu bạn thích bài đăng, vui lòng xem xét chia sẻ nó với bạn bè và đồng nghiệp của bạn.

Cho đến lần sau, chúc mừng!

Nguồn: https://blog.logrocket.com/creating-url-shortener-cloudflare-workers/

 #cloudflare #url