Upstash RedisとCloudflare Workersを連携：サーバーレスURL短縮ツールの作り方

Cloudflareは recently、Cloudflare Workers向けのUpstashインテグレーションをリリースしました。これにより、Workers上でUpstash製品をこれまで以上に簡単に利用できるようになっています。本記事では、Upstash Redisインテグレーションを活用して、サーバーレスのURL短縮ツールを構築する方法を解説します。

はじめに

このプロジェクトの構築手順は以下の通りです。

• Upstashデータベースのセットアップ
• CloudflareでのWorker作成
• Cloudflare WorkersとUpstashの連携
• プロジェクトロジックの実装
• アプリケーションのデプロイ

データベースの作成

まずUpstashコンソールにアクセスし、RedisセクションにあるCreate databaseボタンをクリックして、Redisデータベースを作成します。

これだけでデータベースの準備は完了です。

Cloudflare Workerの作成

Workerの生成には、Cloudflare公式のCLIツールを使用します。手順は非常にシンプルで、ターミナルを開いて以下のコマンドを実行するだけです。

npm create cloudflare@latest

このコマンドを実行すると、アプリケーションのオプションや設定について対話形式で案内され、最後にCloudflareへのログインを求められます。以下は設定例とその出力結果です。

たった1行のコマンドで、アプリケーションの作成とデプロイが完了しました。このコマンドにより、以下のようなフォルダ構成が初期化されているはずです。

/url-shortener

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

Upstash連携の有効化も、同じくらい簡単に行えます。

CloudflareとUpstashの連携

Cloudflareダッシュボードにアクセスし、url-shortenerアプリケーションを作成したときと同じアカウントでログインします。続いて、サイドバーのWorkers & Pages > Overviewセクションへ移動すると、url-shortenerアプリケーションが一覧に表示されています。

アプリケーションをクリックすると詳細ページに移動し、ここで連携作業を行います。詳細ページのSettingsタブを開き、Integrationsセクションに進みましょう。各種Workerインテグレーションが表示されるので、Upstash RedisのAdd Integrationボタンをクリックしてください。

インテグレーションページでUpstashアカウントに接続し、ドロップダウンメニューからurl-shortener用のデータベースを選択します。最後にSaveボタンを押せば完了です。

注意： Configure secretsステップでは、シークレット名を変更しないでください。これらの認証情報は、コード内のRedis.fromEnv(env)によって、UPSTASH_REDIS_REST_URLおよびUPSTASH_REDIS_REST_TOKENとして自動的に読み込まれます。

URL短縮ツールの実装

今回の実装はかなりシンプルで、次の2つの機能を持たせます。

• POSTメソッドでURLが送信されると、ランダムに生成されたキーがそのURLに割り当てられます。この「キーとURL」のペアは取得用にRedisへ保存され、キーはWorkerのURLにパスとして追加されたうえで、<YOUR_WORKER_URL>/<KEY>という形式でユーザーに返されます。
• ユーザーが登録済みのキーをパスとしてWorkerのURLにアクセスすると、Redisから対応する値が取得されます。その後、307レスポンスコードで該当URLへリダイレクトされます。

実装はsrc/worker.tsファイルに行います。以下がURL短縮ツールの基本実装です。

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関数は7桁の英数字キーを返します。
 同じキーがRedisに存在する場合は、新しいキーを生成します。
 */
 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;
 }
 
 /*
 リクエストメソッドがPOSTの場合、リクエストボディから
 "longUrl"フィールドを取り出し、このURL用の新しいキーを生成します。
 その後、このキーと値のペアを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;
 
 /*
 slugがRedis内のキーとして存在する場合、ユーザーは値のURLへリダイレクトされます。
 slugが存在しない、または空の場合はエラーが返されます。
 */
 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 });
 }
 },
};

ロジックの準備が整ったら、残すはデプロイのみです。ターミナルでurl-shortenerフォルダに移動し、以下のコマンドを実行しましょう。

npm run deploy

これでCloudflare Workerが稼働を開始しました！ アプリケーションのダッシュボードからでも、curlリクエスト経由でもテストできます。以下はリクエスト例です。URLをご自身のWorker URLに置き換えてもよいですし、筆者の実装でそのまま試してみても構いません。

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

返却されたURLをクリックすると、https://google.comへリダイレクトされます。

まとめ

最後までチュートリアルをお読みいただき、ありがとうございました！

ご覧いただいたように、サーバーレス関数とUpstash Redisの組み合わせは、プロジェクトの可能性を大きく広げてくれます。この2つの柔軟性と高い効率性により、革新的でありながら応答性に優れたソリューションを構築できます。

このガイドはあくまで入門にすぎません。このプロジェクトをどう拡張・改善していくかは、あなたのアイデア次第です。

質問や不明点がある場合は、fahreddin@upstash.comまでお気軽にお問い合わせください。

それでは、Happy coding!