Upstash Redis を Cloudflare ワーカーに簡単に接続:サーバーレス URL 短縮ツールを構築する

Cloudflareは最近、Cloudflareワーカー向けのUpstash統合をリリースしました。これにより、Workers で Upstash 製品をさらに簡単に使用できるようになります。このブログ投稿では、Upstash Redis 統合を使用してサーバーレス URL 短縮ツールを構築します。

はじめに

このプロジェクトを構築する手順は次のとおりです。

• Upstash データベースをセットアップする
• Cloudflare でワーカーを作成する
• Cloudflare Worker を Upstash と統合する
• プロジェクト アルゴリズムを実装します。
• アプリケーションをデプロイする

データベースの作成

Upstash コンソールに移動し、データベースの作成をクリックして Redis データベースを作成します。 Redis のボタン セクション。

このようにして、データベースの設定はすべて完了です!

Cloudflare ワーカーの作成

Cloudflare CLI ツールを使用してワーカーを生成します。とても簡単なプロセスです。ターミナルを開いて以下のコマンドを入力するだけです:

npm create cloudflare@latest

このコマンドを実行すると、アプリケーションのオプションと構成が表示されます。最後に、Cloudflareへのログインを要求されます。以下は、私の構成とその結果の出力の例です。

単一行のコマンドを使用してアプリケーションを作成し、デプロイしました。このコマンドにより、次のようなフォルダーが初期化されるはずです。

/url-shortener

src
└── worker.ts
node_modules
package-lock.json
package.json
tsconfig.json
wrangler.toml

Upstash 統合の有効化も同様に簡単です。

Cloudflare - Upstash の統合

Cloudflare ダッシュボードにアクセスし、url-shortener を作成したのと同じアカウントでログインします。 アプリケーション。次に、[ワーカーとページ]> [概要] に移動します。 サイドバーのセクション。ここに url-shortener があります。 アプリケーションがリストされています。

アプリケーションをクリックすると、アプリケーションの詳細ページに移動し、そこで統合プロセスを実行します。 設定に切り替えます。 アプリケーションの詳細のタブをクリックし、統合に進みます。 セクション。さまざまなワーカー統合がリストされます。続行するには、[統合の追加] をクリックします。 Upstash Redis に関連付けられたボタン。

[統合] ページで、Upstash アカウントに接続します。次に、url-shortener を選択します。 ドロップダウン メニューからデータベースを選択します。 保存ボタンを押してプロセスを完了します。 .

注: [シークレットの設定] でシークレット名を変更しないでください。 ステップ。これらの認証情報は Redis.fromEnv(env) によって自動的に取得されます。 コード内の行は UPSTASH_REDIS_REST_URL です。 と UPSTASH_REDIS_REST_TOKEN .

短縮 URL の実装

私たちの実装はかなり単純なものになります。これには 2 つの機能があります:

• POST メソッドを使用して URL が送信されると、ランダムに生成されたキーがその URL に割り当てられます。このキーと URL のペアは、取得のために Redis に保存されます。キーはワーカー URL へのパスとして追加され、<YOUR_WORKER_URL>/<KEY> でユーザーに送信されます。 フォーマット。

• ユーザーが以前に追加したキーをパスとして使用してワーカー URL にアクセスすると、キーの対応する値が Redis から取得されます。ユーザーは 307 でこの URL にリダイレクトされます。 応答コード。

src/worker.ts でアプリケーションを実装します。 ファイル。以下は、URL Shortener の基本的な実装です。

src/worker.ts

import { Redis } from "@upstash/redis/cloudflare";
 
export interface Env {
 UPSTASH_REDIS_REST_URL: string;
 UPSTASH_REDIS_REST_TOKEN: string;
}
 
export default {
 async fetch(
 request: Request,
 env: Env,
 ctx: ExecutionContext,
 ): Promise<Response> {
 const redis = Redis.fromEnv(env);
 
 /*
 generateRandomKey function returns a 7 digit alphanumerical key.
 If an identical key exists in Redis, it will create new key.
 */
 async function generateRandomKey(): Promise<string> {
 const key: string = btoa(
 crypto.getRandomValues(new Uint8Array(2)).toString(),
 ).replaceAll("=", "");
 if (await redis.exists(key)) {
 return generateRandomKey();
 }
 return key;
 }
 
 /*
 If the request method is POST, "longUrl" field will be extracted from
 the request body and new key will be generated for this url.
 Then, this key-value pair will be persisted to Redis.
 */
 if (request.method === "POST") {
 const requestUrl = request.url;
 const body = await request.text();
 const { longUrl } = JSON.parse(body);
 const key = await generateRandomKey();
 redis.set(key, longUrl);
 
 const responseUrl = requestUrl + key;
 return new Response(responseUrl);
 }
 
 const slug: string = request.url.split("/").pop() || "";
 const url = (await redis.get(slug)) as string;
 
 /*
 If the slug exists in the Redis DB as key, user will be redirected to URL in the value.
 If the slug doesn't exist in the Redis, or it doesn't exist at all,
 an error will be returned.
 */
 if (url) {
 return Response.redirect(url, 307);
 } else {
 const errorText = !slug
 ? "Please provide a slug."
 : `Slug ${slug} not found. `;
 
 return new Response(errorText, { status: 404 });
 }
 },
};

アルゴリズムの準備ができたので、残っているステップは 1 つだけです。それはアプリケーションをデプロイすることです。 url-shortener に移動します ターミナルからフォルダーに移動し、以下のコマンドを実行します。

npm run deploy

Cloudflare Worker が稼働中です。アプリケーション ダッシュボードまたはカール リクエスト経由でテストできます。以下にリクエストの例を示します。 URL をワーカー URL に置き換えることも、私の実装でテストすることもできます。

curl -X POST https://url-shortener.fahreddin.workers.dev \
 -d '{ "longUrl" : "https://google.com" }'

応答 URL をクリックすると、https://google.com にリダイレクトされます。 .

結論

チュートリアルに従っていただきありがとうございます。

お気づきのとおり、サーバーレス機能と Upstash Redis のパワーを組み合わせることで、プロジェクトの可能性が広がります。この組み合わせの多用途性と効率性により、革新的なだけでなく、驚くほど応答性の高いソリューションを作成できるようになります。

このガイドはほんの始まりにすぎないことを忘れないでください。このプロジェクトを拡張および改善する方法に制限はありません。

ご質問や問題がございましたら、fahreddin@upstash.com までお気軽にご連絡ください。

コーディングを楽しんでください!