Cloudflare gần đây đã phát hành Tích hợp Upstash cho Cloudflare Workers. Điều này giúp việc sử dụng các sản phẩm Upstash trên Công nhân trở nên dễ dàng hơn. Trong bài đăng trên blog này, chúng tôi sẽ sử dụng tính năng tích hợp Upstash Redis để xây dựng trình rút ngắn URL không có máy chủ.
Bắt đầu
Dưới đây là các bước để xây dựng dự án này:
- Thiết lập cơ sở dữ liệu Upstash
- Tạo Worker trên Cloudflare
- Tích hợp Cloudflare Workers với Upstash
- Triển khai thuật toán dự án.
- Triển khai ứng dụng của bạn
Tạo cơ sở dữ liệu
Điều hướng tới bảng điều khiển Upstash và tạo cho mình cơ sở dữ liệu Redis bằng cách nhấp vào Tạo cơ sở dữ liệu nút trong Redis phần.
Như vậy là cơ sở dữ liệu của bạn đã được thiết lập xong!
Tạo Cloudflare Worker
Chúng ta sẽ sử dụng công cụ Cloudflare CLI để tạo Worker. Đó là một quá trình khá đơn giản. Chỉ cần mở terminal của bạn và gõ lệnh bên dưới:
npm create cloudflare@latest
Việc thực thi lệnh này sẽ dẫn bạn đến các tùy chọn và cấu hình cho ứng dụng. Cuối cùng, nó sẽ yêu cầu bạn đăng nhập vào Cloudflare. Dưới đây là ví dụ về cấu hình của tôi và kết quả đầu ra:
Chúng tôi đã tạo và triển khai ứng dụng bằng một lệnh dòng duy nhất. Lệnh này lẽ ra phải khởi tạo một thư mục tương tự như sau:
/url-rút gọnsrc
└── worker.ts
node_modules
package-lock.json
package.json
tsconfig.json
wrangler.tomlViệc kích hoạt tích hợp Upstash cũng không kém phần đơn giản.
Cloudflare - Tích hợp Upstash
Truy cập vào Bảng điều khiển Cloudflare và đăng nhập bằng chính tài khoản mà bạn đã tạo url-shortener ứng dụng. Sau đó, điều hướng đến Người lao động &Trang> Tổng quan phần của thanh bên. Tại đây, bạn sẽ tìm thấy url-shortener ứng dụng được liệt kê.
Nhấp vào ứng dụng sẽ đưa bạn đến trang chi tiết ứng dụng, nơi chúng tôi sẽ thực hiện quá trình tích hợp. Chuyển sang Cài đặt trong chi tiết ứng dụng và tiến tới Tích hợp phần. Bạn sẽ thấy nhiều tiện ích tích hợp Worker khác nhau được liệt kê. Để tiếp tục, hãy nhấp vào Thêm tích hợp nút được liên kết với Upstash Redis.
Trên trang Tích hợp, kết nối với tài khoản Upstash của bạn. Sau đó, chọn url-shortener cơ sở dữ liệu từ menu thả xuống. Hoàn tất quy trình bằng cách nhấn nút Lưu .
Lưu ý: Vui lòng không thực hiện bất kỳ thay đổi nào đối với tên bí mật trên Định cấu hình bí mật bước. Những thông tin xác thực này sẽ được tự động lấy bởi Redis.fromEnv(env) dòng trong mã là UPSTASH_REDIS_REST_URL và UPSTASH_REDIS_REST_TOKEN .
Triển khai trình rút ngắn URL
Việc thực hiện của chúng tôi sẽ khá đơn giản. Nó sẽ có hai chức năng:
-
Khi một URL được gửi bằng phương thức POST, một khóa được tạo ngẫu nhiên sẽ được gán cho URL đó. Cặp khóa-URL này sẽ được lưu trữ trong Redis để truy xuất. Khóa sẽ được thêm dưới dạng đường dẫn đến URL Công nhân và được gửi tới người dùng trong
<YOUR_WORKER_URL>/<KEY>định dạng. -
Khi người dùng truy cập URL Công nhân bằng khóa đã thêm trước đó làm đường dẫn, giá trị tương ứng của khóa sẽ được lấy từ Redis. Sau đó, người dùng sẽ được chuyển hướng đến URL này với
307mã phản hồi.
Chúng tôi sẽ triển khai ứng dụng trong src/worker.ts tập tin. Dưới đây là cách triển khai cơ bản về Trình rút ngắn URL của chúng tôi:
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 });
}
},
};
Bây giờ thuật toán của chúng tôi đã sẵn sàng, chỉ còn một bước nữa:triển khai ứng dụng. Điều hướng đến url-shortener thư mục từ thiết bị đầu cuối và chạy lệnh bên dưới:
npm run deployCloudflare Worker của chúng tôi hiện đã hoạt động! Bạn có thể kiểm tra nó trong bảng điều khiển ứng dụng hoặc thông qua yêu cầu cuộn tròn. Đây là một yêu cầu ví dụ cho bạn. Bạn có thể thay thế URL bằng URL công nhân của mình hoặc kiểm tra cách triển khai của tôi:
curl -X POST https://url-shortener.fahreddin.workers.dev \
-d '{ "longUrl" : "https://google.com" }'Nhấp vào URL phản hồi sẽ chuyển hướng bạn đến https://google.com .
Kết luận
Cảm ơn bạn đã theo dõi hướng dẫn!
Như bạn đã khám phá, sự kết hợp giữa các chức năng serverless và sức mạnh của Upstash Redis sẽ mở ra vô số khả năng cho các dự án của bạn. Tính linh hoạt và hiệu quả của cặp này giúp bạn tạo ra các giải pháp không chỉ đổi mới mà còn có khả năng phản hồi nhanh chóng.
Hãy nhớ rằng, hướng dẫn này chỉ là sự khởi đầu. Không có giới hạn về cách bạn có thể mở rộng và cải thiện dự án này.
Nếu bạn có bất kỳ câu hỏi hoặc vấn đề nào, vui lòng liên hệ với tôi theo địa chỉ fahreddin@upstash.com.
Chúc bạn viết mã vui vẻ!