<पी> क्लाउडफ़ेयर ने हाल ही में क्लाउडफ़ेयर वर्कर्स के लिए अपस्टैश इंटीग्रेशन जारी किया है। इससे श्रमिकों पर अपस्टैश उत्पादों का उपयोग करना और भी आसान हो जाता है। इस ब्लॉग पोस्ट में, हम सर्वर रहित यूआरएल शॉर्टनर बनाने के लिए अपस्टैश रेडिस एकीकरण का उपयोग करने जा रहे हैं। आरंभ करना
<पी> इस परियोजना के निर्माण के चरण यहां दिए गए हैं: - एक अपस्टैश डेटाबेस सेट करें
- क्लाउडफ्लेयर पर वर्कर बनाएं
- क्लाउडफ्लेयर वर्कर्स को अपस्टैश के साथ एकीकृत करें
- प्रोजेक्ट एल्गोरिदम लागू करें।
- अपना एप्लिकेशन परिनियोजित करें
डेटाबेस बनाना
<पी> अपस्टैश कंसोल पर नेविगेट करें, और डेटाबेस बनाएं पर क्लिक करके अपने लिए एक रेडिस डेटाबेस बनाएं। रेडिस में बटन अनुभाग. <पी>
<पी> ठीक वैसे ही, आपका डेटाबेस बिल्कुल तैयार है! क्लाउडफ्लेयर वर्कर बनाना
<पी> हम वर्कर उत्पन्न करने के लिए क्लाउडफ्लेयर सीएलआई टूल का उपयोग करने जा रहे हैं। यह काफी सरल प्रक्रिया है. बस अपना टर्मिनल खोलें और नीचे कमांड टाइप करें: npm create cloudflare@latest
<पी> इस आदेश को निष्पादित करने से आपको एप्लिकेशन के विकल्पों और कॉन्फ़िगरेशन के बारे में पता चल जाएगा। अंत में, यह आपसे क्लाउडफ़ेयर में लॉग इन करने का अनुरोध करेगा। नीचे मेरे कॉन्फ़िगरेशन और परिणामी आउटपुट का एक उदाहरण है: <पी> हमने सिंगल लाइन कमांड का उपयोग करके एप्लिकेशन बनाया और तैनात किया है। इस आदेश को इसके समान एक फ़ोल्डर प्रारंभ करना चाहिए था: /यूआरएल-शॉर्टनरsrc
└── worker.ts
node_modules
package-lock.json
package.json
tsconfig.json
wrangler.toml
<पी> अपस्टैश एकीकरण को सक्षम करना भी उतना ही सरल होगा। क्लाउडफ्लेयर - अपस्टैश इंटीग्रेशन
<पी> क्लाउडफ़ेयर डैशबोर्ड तक पहुंचें और उसी खाते से लॉगिन करें जिसे आपने url-shortener बनाया है आवेदन. फिर, कर्मचारी और पेज> अवलोकन पर जाएँ साइडबार का अनुभाग. यहां, आपको url-shortener मिलेगा आवेदन सूचीबद्ध। <पी>
<पी> एप्लिकेशन पर क्लिक करने से आप एप्लिकेशन विवरण पृष्ठ पर पहुंच जाएंगे, जहां हम एकीकरण प्रक्रिया निष्पादित करेंगे। सेटिंग्स पर स्विच करें एप्लिकेशन विवरण में टैब करें, और एकीकरण पर आगे बढ़ें अनुभाग. आप सूचीबद्ध विभिन्न कार्यकर्ता एकीकरण देखेंगे। आगे बढ़ने के लिए, एकीकरण जोड़ें पर क्लिक करें अपस्टैश रेडिस से संबद्ध बटन। <पी>
<पी> एकीकरण पृष्ठ पर, अपने अपस्टैश खाते से कनेक्ट करें। फिर, url-shortener चुनें ड्रॉपडाउन मेनू से डेटाबेस। सहेजें बटन दबाकर प्रक्रिया को अंतिम रूप दें . <पी> ध्यान दें: कृपया कॉन्फ़िगर रहस्यों पर गुप्त नामों में कोई बदलाव न करें कदम. ये क्रेडेंशियल Redis.fromEnv(env) द्वारा स्वचालित रूप से उठाए जाएंगे कोड में UPSTASH_REDIS_REST_URL के रूप में पंक्ति और UPSTASH_REDIS_REST_TOKEN . <पी>
यूआरएल शॉर्टनर लागू करना
<पी> हमारा कार्यान्वयन काफी सरल होगा। इसकी दो कार्यक्षमताएँ होंगी: - <पी> जब कोई URL POST विधि का उपयोग करके भेजा जाता है, तो उस URL को एक यादृच्छिक रूप से उत्पन्न कुंजी सौंपी जाएगी। यह कुंजी-यूआरएल जोड़ी पुनर्प्राप्ति के लिए रेडिस में संग्रहीत की जाएगी। कुंजी को वर्कर यूआरएल के पथ के रूप में जोड़ा जाएगा और
<YOUR_WORKER_URL>/<KEY> में उपयोगकर्ता को भेजा जाएगा। प्रारूप.
- <पी> जब कोई उपयोगकर्ता पथ के रूप में पहले से जोड़ी गई कुंजी के साथ वर्कर यूआरएल तक पहुंचता है, तो कुंजी का संबंधित मान रेडिस से पुनर्प्राप्त किया जाएगा। फिर उपयोगकर्ता को
307 के साथ इस URL पर पुनः निर्देशित किया जाएगा प्रतिक्रिया कोड.
<पी> हम एप्लिकेशन को src/worker.ts में लागू करेंगे फ़ाइल. नीचे हमारे URL शॉर्टनर का मूल कार्यान्वयन है: src/worker.tsimport { 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 });
}
},
};
<पी> अब जबकि हमारा एल्गोरिदम तैयार है, केवल एक चरण बचा है:एप्लिकेशन को तैनात करना। url-shortener पर नेविगेट करें टर्मिनल से फ़ोल्डर, और नीचे कमांड चलाएँ: npm run deploy
<पी> हमारा क्लाउडफ्लेयर वर्कर अब काम कर रहा है! आप इसका परीक्षण या तो एप्लिकेशन डैशबोर्ड में, या कर्ल अनुरोध के माध्यम से कर सकते हैं। यहां आपके लिए एक उदाहरण अनुरोध है. आप यूआरएल को अपने वर्कर यूआरएल से बदल सकते हैं, या मेरे कार्यान्वयन के साथ परीक्षण कर सकते हैं:पी> curl -X POST https://url-shortener.fahreddin.workers.dev \
-d '{ "longUrl" : "https://google.com" }'
<पी> प्रतिक्रिया URL पर क्लिक करने से आप https://google.com पर रीडायरेक्ट हो जाएंगे . निष्कर्ष
<पी> ट्यूटोरियल का अनुसरण करने के लिए धन्यवाद! <पी> जैसा कि आपने पाया है, सर्वर रहित फ़ंक्शंस और अपस्टैश रेडिस की शक्ति का संयोजन आपकी परियोजनाओं के लिए संभावनाओं की दुनिया खोलता है। इस जोड़ी की बहुमुखी प्रतिभा और दक्षता आपको ऐसे समाधान बनाने में सशक्त बनाती है जो न केवल नवीन हैं बल्कि उल्लेखनीय रूप से प्रतिक्रियाशील भी हैं। <पी> याद रखें, यह मार्गदर्शिका केवल शुरुआत है। आप इस प्रोजेक्ट का विस्तार और सुधार कैसे कर सकते हैं इसकी कोई सीमा नहीं है। <पी> यदि आपका कोई प्रश्न या समस्या हो, तो बेझिझक मुझसे fahreddin@upstash.com पर संपर्क करें। <पी> हैप्पी कोडिंग!