เชื่อมต่อ Upstash Redis กับ Cloudflare Workers ได้อย่างง่ายดาย:สร้างตัวย่อ URL แบบไร้เซิร์ฟเวอร์

การใช้ตัวย่อ URL

การใช้งานของเราจะค่อนข้างง่าย จะมีสองฟังก์ชันการทำงาน:

• เมื่อ URL ถูกส่งโดยใช้วิธี POST คีย์ที่สร้างแบบสุ่มจะถูกกำหนดให้กับ URL นั้น คู่คีย์-URL นี้จะถูกจัดเก็บไว้ใน Redis เพื่อเรียกข้อมูล คีย์จะถูกต่อท้ายเป็นเส้นทางไปยัง URL ของผู้ปฏิบัติงาน และส่งไปยังผู้ใช้ใน 68 รูปแบบ

• เมื่อผู้ใช้เข้าถึง URL ของผู้ปฏิบัติงานโดยใช้คีย์ที่เพิ่มไว้ก่อนหน้านี้เป็นเส้นทาง ค่าที่สอดคล้องกันของคีย์จะถูกดึงมาจาก Redis จากนั้นผู้ใช้จะถูกเปลี่ยนเส้นทางไปยัง URL นี้ด้วย 73 รหัสตอบกลับ

เราจะใช้งานแอปพลิเคชันใน 85 ไฟล์. ด้านล่างนี้คือการใช้งานพื้นฐานของเครื่องมือย่อ URL ของเรา:

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

เมื่ออัลกอริทึมของเราพร้อมแล้ว เหลือเพียงขั้นตอนเดียวเท่านั้น:การปรับใช้แอปพลิเคชัน ไปที่ 98 โฟลเดอร์จากเทอร์มินัล และรันคำสั่งด้านล่าง:

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

ขอให้สนุกกับการเขียนโค้ด!