परिचय
अगर आपको कभी ऐसा ऐप बनाना पड़ा हो जो एप्लिकेशन उपयोग को ट्रैक करे, संसाधन उपयोग को प्रतिबंधित करे या ऐप परफॉरमेंस बढ़ाने के लिए कैश से डेटा लाए, तो आप जानते होंगे कि रेडिस इन आवश्यकताओं का जवाब है! रेडिस एक इन-मेमोरी, की-वैल्यू डेटाबेस है। यह ओपन सोर्स है और रिमोट डिक्शनरी सर्वर के लिए खड़ा है।
इस आर्टिकल में, हम अपस्टैश, रेडिस डेटाबेस और Vue SSR फ्रेमवर्क नक्स्ट 3 के हालिया बीटा रिलीज़ पर चर्चा करेंगे। यह एक शुरुआती-अनुकूल आर्टिकल है जो रेडिस डेटाबेस का पता लगाता है, जहां हम एक बेसिक ऐप बनाएंगे जो नक्स्ट ऐप के पेज-विज़िट को ट्रैक करता है।
संसाधन
- GitHub रेपो: https://github.com/Krutie/upstash-nuxt-demo
- डेमो:
- क्लाउडफ्लेयर वर्कर: https://upstash-demo.krutie-patel.workers.dev/contact
- नेटलीफाई: https://thirsty-visvesvaraya-a09ab9.netlify.app/
अपस्टैश क्या है?
अपस्टैश एक सर्विस है जो रेडिस डेटाबेस के लिए सर्वरलेस एक्सेस प्रदान करती है। इसलिए हमारे लिए रेडिस फंडामेंटल्स सीखना आवश्यक हो जाता है जिसमें रेडिस उपयोग के मामले और विभिन्न प्रकार के डेटा को मैनिपुलेट करने के लिए उपलब्ध कमांड शामिल हैं।
रेडिस क्या है?
रेडिस के लोकप्रिय उपयोग के मामले हैं:
- डेटा और सेशन कैशिंग
- लीडरबोर्ड - कंप्यूटर गेमिंग या गेमिफिकेशन सिद्धांतों के साथ बने किसी भी सॉफ्टवेयर में नाम और स्कोर रैंक करना
- क्यू - बाद में बैकग्राउंड में प्रोसेस होने के लिए टास्क शेड्यूल करना
- उपयोग मीटरिंग/काउंटिंग - संसाधन उपयोग को प्रतिबंधित करना, संसाधन वितरण को नियंत्रित करना या बड़े पैमाने पर काउंटिंग करना जैसे ई-कॉमर्स साइट्स, सोशल मीडिया, मोबाइल ऐप्स आदि
- कंटेंट फ़िल्टरिंग - उदाहरण के लिए, प्रतिबंधित शब्दों की सूची के खिलाफ कंटेंट फ़िल्टर करना
बेसिक लेवल पर, रेडिस डेटाबेस डेटा को की-वैल्यू पेयर में स्टोर करता है। लेकिन यह एडवांस्ड डेटा स्ट्रक्चर जैसे लिस्ट, सेट, सॉर्टेड सेट आदि में भी डेटा स्टोर कर सकता है। रेडिस इन डेटा-स्ट्रक्चर को मैनिपुलेट करने के लिए कमांड का एक सेट भी प्रदान करता है। चूंकि हम अपने उदाहरण ऐप में उनमें से एक का उपयोग करेंगे, इसलिए उनकी हाई-लेवल परिभाषाओं को देखना उचित है।
- लिस्ट - एक बेसिक ऐरे की तरह है। लिस्ट आपको एक सीक्वेंस के दोनों सिरों से आइटम पुश और पॉप करने, व्यक्तिगत आइटम लाने और कई अन्य ऑपरेशन करने की अनुमति देती है। लिस्ट कमांड 'L' अक्षर से शुरू होते हैं, जैसे LPOP, LPUSH, LSET, आदि
- हैश - आपको एक सिंगल रेडिस की में की-वैल्यू पेयर के ग्रुप को स्टोर करने की अनुमति देता है। हैश कमांड 'H' अक्षर से शुरू होते हैं, जैसे HSET, HGET, HDEL, आदि
- सेट - लिस्ट की तरह हैं, लेकिन सेट यूनिक हैं और आइटम को अनऑर्डर्ड लिस्ट में स्टोर करते हैं। इसलिए सेट सॉर्टेबल नहीं हैं, लेकिन आप जल्दी से आइटम जोड़, हटा सकते हैं और निर्धारित कर सकते हैं कि कोई आइटम सेट में है या नहीं। सेट कमांड 'S' अक्षर से शुरू होते हैं, जैसे SADD, SCARD, SISMEMBER, आदि
- सॉर्टेड सेट - सेट की तरह हैं, लेकिन सॉर्टेड सेट स्कोर द्वारा सॉर्टिंग की अनुमति देते हैं जो की-वैल्यू पेयर की तरह दिखता है। हम इन न्यूमेरिक स्कोर को मैनिपुलेट और सॉर्ट भी कर सकते हैं। सॉर्टेड सेट कमांड 'Z' अक्षर से शुरू होते हैं, जैसे ZADD, ZINCRBY, ZSCORE, आदि
अन्य रेडिस कमांड के बारे में अधिक जानें https://redis.io/commands पर
अपस्टैश सेटअप
डॉक्स के अनुसार अकाउंट और डेटाबेस सेटअप करने के निर्देशों का पालन करें: https://docs.upstash.com/
नक्स्ट ऐप बनाने पर जाने से पहले, सुनिश्चित करें कि आपका अपस्टैश अकाउंट तैयार है। आपको फ्री-टियर के साथ एक डेटाबेस बनाने में सक्षम होना चाहिए।
एक बार आपका डेटाबेस बन जाने के बाद, आप किसी भी रेडिस क्लाइंट का उपयोग करके रेडिस डेटाबेस बना और एक्सेस कर सकते हैं। वैकल्पिक रूप से, आप अपस्टैश कंसोल में प्रदान किए गए ब्राउज़र-आधारित CLI का उपयोग करके तुरंत शुरू कर सकते हैं।
रेडिस CLI
आप अपने मशीन टर्मिनल पर redis-cli सेटअप कर सकते हैं ताकि कमांड लाइन इंटरफेस से सीधे रेडिस डेटाबेस बना और एक्सेस कर सकें।
रेडिस NPM पैकेज
रेडिस डेटाबेस के साथ इंटरैक्ट करने के लिए हमारे पास कई NPM पैकेज भी हैं। हम अपने नक्स्ट प्रोजेक्ट में रेडिस कमांड एक्सेस करने के लिए 1) @upstash/redis और 2) ioredis का उपयोग करेंगे।
नक्स्ट 3 के बारे में बात करते हैं
नक्स्ट 3 एक नया CLI nuxi पेश करता है नक्स्ट ऐप बनाने के लिए।
npx nuxi init nuxt3-app
हम /pages डायरेक्टरी बनाएंगे और नीचे दिए अनुसार कुछ सरल रूट्स जोड़ेंगे:
-pages
--index.vue
--about.vue
app.vue
app.vue नक्स्ट 3 में एक नया परिचय है जो मुख्य कंपोनेंट के रूप में कार्य करता है। app.vue /pages डायरेक्टरी में परिभाषित हर रूट के लिए लोड होगा।
नाइट्रो सर्वर इंजन
नक्स्ट 3 एक बिल्कुल नया सर्वर इंजन नाइट्रो भी पेश करता है। हम सर्वर API एंडपॉइंट और सर्वर मिडलवेयर बनाने के लिए नाइट्रो की शक्ति का लाभ उठा सकते हैं, बस server डायरेक्टरी बनाकर जिसमें api और middleware सब-डायरेक्टरी के रूप में हों। आप GitHub रेपो में इस मिनिमलिस्ट डायरेक्टरी स्ट्रक्चर की समीक्षा कर सकते हैं।
-server
--api
--middleware
API और मिडलवेयर दोनों को एक डिफ़ॉल्ट फंक्शन एक्सपोर्ट करना चाहिए जो API रिक्वेस्ट को हैंडल करे और प्रॉमिस/JSON डेटा वापस करे। नक्स्ट 2 के विपरीत, हमें nuxt.config.js में सर्वर-मिडलवेयर को परिभाषित नहीं करना पड़ता।
हमारे ऐप को बनाने के लिए हमें जिन हाई-लेवल स्टेप्स की आवश्यकता है, वे यहां हैं:
- पहले, हम रेडिस डेटाबेस से कनेक्ट करते हैं।
- पेज विज़िट रिकॉर्ड करने के लिए, हम सर्वर पर किए गए हर पेज रिक्वेस्ट को इंटरसेप्ट करते हैं, उस पेज के काउंटर को एक से बढ़ाते हैं, और उसका मान रेडिस डेटाबेस में स्टोर करते हैं।
- फिर, हम क्लाइंट-साइड से API कॉल करके रेडिस डेटाबेस से विज़िट-काउंट प्राप्त करते हैं और उसे नक्स्ट पेज पर प्रदर्शित करते हैं।
नक्स्ट 3 के बारे में अधिक जानें https://v3.nuxtjs.org/getting-started/installation पर
REST रेडिस क्लाइंट का उपयोग करें
अपस्टैश अपना खुद का HTTP/REST आधारित रेडिस क्लाइंट - @upstash/redis - प्रदान करता है जिसे हम अपने नक्स्ट प्रोजेक्ट में डिपेंडेंसी के रूप में जोड़ सकते हैं।
yarn add @upstash/redis
रेडिस DB को ऑथेंटिकेट करें
रेडिस डेटाबेस को ऑथेंटिकेट करने के लिए, हमें निम्नलिखित एनवायरनमेंट वेरिएबल्स का पता लगाने की आवश्यकता है:
- REST URL (UPSTASH_REDIS_REST_URL), और
- टोकन (UPSTASH_REDIS_REST_TOKEN)
...अपस्टैश कंसोल से - डेटाबेस के तहत।
प्राइवेट रनटाइम कॉन्फ़िगरेशन
अब, इन एनवायरनमेंट वेरिएबल्स को सर्वर-साइड पर एक्सपोज़ करने के लिए, नक्स्ट रनटाइम कॉन्फ़िगरेशन प्रदान करता है जिसे हम nuxt.config.js फाइल में परिभाषित करते हैं।
// nuxt.config.js
export default defineNuxtConfig({
publicRuntimeConfig: {},
privateRunimeConfig: {
UPSTASH_REDIS_REST_URL: process.env.UPSTASH_REDIS_REST_URL,
UPSTASH_REDIS_REST_TOKEN: process.env.UPSTASH_REDIS_REST_TOKEN,
},
});
अब, हम #config इम्पोर्ट करके इन एनवायरनमेंट वेरिएबल्स को सीधे एक्सेस कर सकते हैं।
import { Redis } from "@upstash/redis";
import config from "#config";
const redis = new Redis({
url: config.UPSTASH_REDIS_REST_URL,
token: config.UPSTASH_REDIS_REST_TOKEN,
});
एक विकल्प के रूप में, ज़ीरो-कॉन्फ़िग दृष्टिकोण UPSTASH_REDIS_REST_URL और UPSTASH_REDIS_REST_TOKEN को सीधे .env फाइल में जोड़ना होगा और const redis = Redis.fromEnv() का उपयोग करके रेडिस इंस्टेंस बनाना होगा, बिना इन वेरिएबल्स को Redis में पास किए। ध्यान दें कि यह जादू केवल @upstash/redis रेडिस क्लाइंट का उपयोग करते समय लागू होता है।
नक्स्ट सर्वर-मिडलवेयर के साथ रिक्वेस्ट इंटरसेप्ट करें
हम यहां से किसी भी आवश्यक रेडिस कमांड का उपयोग करने के लिए स्वतंत्र हैं। इस उदाहरण के लिए, हम सॉर्टेड-सेट का उपयोग करेंगे, क्योंकि सॉर्टेड-सेट यूनिक हैं और स्कोर की सॉर्टिंग और मैनिपुलेशन की भी अनुमति देते हैं।
उदाहरण के लिए, हम हर बार पेज पर रिक्वेस्ट आने पर पेज स्कोर को बढ़ाने के लिए zincrby का उपयोग कर सकते हैं।
// server/middleware/pageCount.js
import { Redis } from "@upstash/redis";
import { getRedisKey } from "../utils";
const redis = Redis.fromEnv();
export default async function (req, res, next) {
const redisKey = getRedisKey(req.url);
await redis.zincrby("myPageCounts", 1, redisKey);
next();
}
नेमस्पेस जेनरेट करना
रेडिस NoSQL डेटाबेस है जो डेटा को की-वैल्यू पेयर में स्टोर करता है। इसमें ऑटो-इन्क्रीमेंटिंग कीज़ की अवधारणा नहीं है या किसी भी प्रकार के यूनिक UUID को डायनामिक रूप से जेनरेट करने का कोई तरीका नहीं है। यहीं पर हम getRedisKey() यूटिलिटी फंक्शन पेश करते हैं।
यह यूटिलिटी फंक्शन रिक्वेस्ट URL को प्रोसेस करता है और यूनिक की बनाता है - जिसका उपयोग हम प्रत्येक पेज के खिलाफ विज़िट-काउंट स्टोर करने के लिए करेंगे। इस तरह हम अपने काउंटर को उसी की के खिलाफ बढ़ने से रोक सकते हैं।
हमारे उदाहरण में, हम रिक्वेस्ट URL लेते हैं और '/' के सभी इंस्टेंस को '.' से बदलकर यूनिक नेमस्पेस्ड कीज़ जेनरेट करते हैं।
export const getRedisKey = (url: string) => {
const reqURL = url?.replace("/", ".");
const redisKey = reqURL === "." ? "page.home" : `page${reqURL}`;
return redisKey;
};
यह हमें उदाहरण के लिए /about पेज को नेमस्पेस्ड की में बदलने में मदद करेगा जो page.about के रूप में पढ़ा जाएगा।
REST API एंडपॉइंट्स का उपयोग करके रेडिस DB एक्सेस करें
आइए एक API एंडपॉइंट बनाएं जो संबंधित पेजों के लिए वर्तमान काउंट या स्कोर लाएगा।
नक्स्ट 3 में, डेटा लाने के दो तरीके हैं: 1) useAsyncData और 2) useFetch। app.vue में, हम useAsyncData का उपयोग ohmyfetch लाइब्रेरी द्वारा प्रदान किए गए $fetch के साथ करेंगे।
// app.vue
जैसा कि आप देख सकते हैं, API कॉल के साथ, हमने रूटर पथ को क्वेरी पैरामीटर के रूप में पास किया है ताकि एक्सेस किए जा रहे पेज की पहचान की जा सके।
सर्वर-मिडलवेयर के विपरीत, हमें इस API एंडपॉइंट, /api/count का उपभोग करना होगा ताकि विज़िट काउंट प्राप्त किया जा सके। यही मजेदार हिस्सा है!
आइए इस API एंडपॉइंट को server/api/count.ts पर बनाएं। हम h3 लाइब्रेरी द्वारा प्रदान की गई useQuery मेथड का उपयोग करके क्लाइंट-साइड से भेजे गए क्वेरी पैरामीटर को एक्सेस करेंगे।
// server/api/count.ts
import { useQuery } from "h3";
export default async (req, res) => {
let query = await useQuery(req);
const redisKey = getRedisKey(query.path);
};
यहां 👆 हम उसी getRedisKey() यूटिलिटी का उपयोग करेंगे ताकि यह की मिडलवेयर में पेज की काउंट बढ़ाने के लिए उपयोग की गई नेमस्पेस्ड की से मेल खाए।
तो, अब हम इस की को zscore में पास कर सकते हैं जिसे हम निश्चित हैं कि डेटाबेस में मौजूद है ताकि स्कोर/काउंट प्राप्त किया जा सके। 👇
// server/api/count.ts
// ...
import { Redis } from "@upstash/redis";
const redis = Redis.fromEnv();
export default async () => {
// ...
const count = await redis.zscore("myPageCounts", redisKey);
return { count };
};
ioredis के साथ सीधे रेडिस API का उपयोग करें
हम ioredis लाइब्रेरी का उपयोग करके भी वही हासिल कर सकते हैं।
yarn add ioredis
ioredis का उपयोग करते समय, हमारे पास auth मेथड उपलब्ध नहीं होगी। हालांकि, हमारे पास एक कनेक्शन स्ट्रिंग है - जो अपस्टैश कंसोल में उपलब्ध है - जिसका उपयोग हम रेडिस डेटाबेस से कनेक्ट करने के लिए कर सकते हैं।
हम UPSTASH_REDIS_CONN को रनटाइम कॉन्फ़िगरेशन वेरिएबल के रूप में सेट कर सकते हैं जैसे हमने पहले रेस्ट-यूआरएल और टोकन के लिए किया था।
// nuxt.config.js
export default defineNuxtConfig({
publicRuntimeConfig: {},
privateRunimeConfig: {
UPSTASH_REDIS_CONN: process.env.UPSTASH_REDIS_CONN,
},
});
अब, मिडलवेयर में, हम कनेक्शन बनाने और client से सभी रेडिस कमांड एक्सेस करने के लिए new Redis() इंस्टेंस बनाएंगे।
// server/middleware/pageCount.js
import config from "#config";
import Redis from "ioredis";
const client = new Redis(config.UPSTASH_REDIS_CONN);
नक्स्ट सर्वर-मिडलवेयर के साथ रिक्वेस्ट इंटरसेप्ट करें
हमारा नक्स्ट मिडलवेयर पहले जैसा ही रहेगा, सिवाय इसके कि हम zincrby को कैसे एक्सेस करते हैं, वह बदल जाएगा।
// server/middleware/pageCount.js
// ...
export default async function (req, res, next) {
// ...
await client.zincrby("myPageCounts", 1, redisKey);
next();
}
REST API एंडपॉइंट्स का उपयोग करके रेडिस DB एक्सेस करें
पहले, हमने कस्टम API एंडपॉइंट server/api/count.ts बनाया था काउंट प्राप्त करने के लिए। वह API एंडपॉइंट भी वही रहेगा, सिवाय इसके कि हम zscore मेथड को कैसे कॉल करते हैं, वह थोड़ा बदल जाएगा।
// server/api/count.ts
import config from "#config";
import Redis from "ioredis";
const client = new Redis(config.UPSTASH_REDIS_CONN);
export default async (req: IncomingMessage, res: ServerResponse) => {
// ...
const count = await client.zscore("myPageCounts", redisKey);
return { count };
};
अपस्टैश CLI के साथ टेस्ट करें
चूंकि हम सारा डेटा सॉर्टेड-सेट में स्टोर कर रहे हैं, हम अपने सॉर्टेड-सेट से सभी आइटम लाने के लिए zrange का उपयोग कर सकते हैं।
आप अपस्टैश कंसोल में प्रदान किए गए रेडिस CLI को एक्सेस कर सकते हैं और निम्नलिखित कमांड चला सकते हैं:
zrange myPageCounts 0 -1
यहां 👆:
myPageCountsहमारे सॉर्टेड-सेट का नाम है,0 -1रेंज को दर्शाता है, जहां0शुरुआती मान है और-1सेट का अंतिम आइटम दर्शाता है।
ऊपर दिया गया कमांड उनके स्कोर के बिना सभी कीज़ को सूचीबद्ध करता है। हम WITHSCORES जोड़कर इसे ठीक कर सकते हैं 👇
// सबसे कम स्कोर पहले
zrange myPageCounts 0 -1 WITHSCORES
// सबसे अधिक स्कोर पहले
zrevrange myPageCounts 0 -1 WITHSCORES
// page.home हिट्स के लिए स्कोर प्राप्त करें
zscore myPageCounts page.home
जब आप अपने API और मिडलवेयर को टेस्ट करते हैं, तो अपनी वेबसाइट पर होने वाली सभी गतिविधियों के लिए अपस्टैश कंसोल देखना सुनिश्चित करें।
अपने नक्स्ट 3 ऐप को डिप्लॉय करें
नाइट्रो सर्वर इंजन नक्स्ट 3 ऐप को डिप्लॉय करते समय महत्वपूर्ण भूमिका निभाता है।
नेटलीफाई
नेटलीफाई पर डिप्लॉय करने के लिए, हम हमेशा की तरह अपने नक्स्ट ऐप के GitHub रेपो को पुश करेंगे। सुनिश्चित करें कि आप निम्नलिखित तीन चीजों का ध्यान रखते हैं ताकि आपका डिप्लॉयमेंट सुचारू रूप से चले।
- नेटलीफाई में, बिल्ड कमांड के रूप में
npm run buildऔर पब्लिश करने के लिए डायरेक्टरी के रूप मेंdistका उपयोग करें। - डिप्लॉय करने से पहले नेटलीफाई में रेस्ट-यूआरएल, टोकन या रेडिस कनेक्शन के लिए एनवायरनमेंट वेरिएबल्स बनाएं।
- अंतिम लेकिन कम नहीं, सुनिश्चित करें कि आपने अपने नक्स्ट प्रोजेक्ट के रूट में
netlify.tomlबनाया है। इस फाइल की सामग्री के लिए, netlify.toml पर जाएं।
जब हम yarn build करते हैं, तो नक्स्ट 3 .output नामक एक डायरेक्टरी बनाता है जिसका उपयोग हमने अपने .toml फाइल में अपने फंक्शन के लिए पथ प्रदान करने के लिए किया है।
// netlify.toml
//...
[build]
// ...
functions = ".output/server";
इस आर्टिकल का नक्स्ट उदाहरण नेटलीफाई पर चल रहा है: https://thirsty-visvesvaraya-a09ab9.netlify.app/
क्लाउडफ्लेयर
हम अपने नक्स्ट 3 ऐप को सीधे टर्मिनल से क्लाउडफ्लेयर वर्कर पर डिप्लॉय कर सकते हैं! नक्स्ट 3 डॉक्स आपके ऐप को स्थानीय रूप से टेस्ट करने के लिए मिनिफ्लेयर और फिर रैंगलर का उपयोग करके प्रीव्यू और पब्लिश करने की सलाह देते हैं।
अपने क्लाउडफ्लेयर account_id और एनवायरनमेंट वेरिएबल्स के साथ प्रोजेक्ट रूट में wrangler.toml फाइल जोड़ना सुनिश्चित करें जैसा कि इस उदाहरण फाइल में दिखाया गया है।
क्लाउडफ्लेयर डिप्लॉयमेंट के लिए, हम entry-point और बिल्ड कमांड को NITRO_PRESET=cloudflare के साथ प्रदान करेंगे।
// wrangler.toml
//..
[site]
bucket = ".output/public"
entry-point = ".output"
[build]
command = "NITRO_PRESET=cloudflare yarn nuxt build"
upload.format = "service-worker"
इस आर्टिकल का नक्स्ट उदाहरण क्लाउडफ्लेयर वर्कर पर चल रहा है: https://upstash-demo.krutie-patel.workers.dev/contact
निष्कर्ष
हमने अपस्टैश सेवाओं का उपयोग करके रेडिस के सबसे बुनियादी एप्लिकेशन को कवर किया है यह देखने के लिए कि हम इसे सर्वर-साइड रेंडरिंग फ्रेमवर्क जैसे नक्स्ट (v3) के साथ कैसे एकीकृत कर सकते हैं:
- रेडिस डेटाबेस से कनेक्ट करना,
- यूनिक कीज़ बनाना और की-वैल्यू पेयर को डेटाबेस में लिखना,
- रेडिस डेटाबेस से डेटा पढ़ना और
- अपने ऐप को नेटलीफाई और क्लाउडफ्लेयर वर्कर्स पर डिप्लॉय करना।
अपस्टैश हमारे द्वारा बनाए गए प्रत्येक डेटाबेस के लिए डेटा ट्रैफिक को एन्क्रिप्ट करने का विकल्प भी प्रदान करता है, साथ ही डेटा को कई उपलब्धता क्षेत्रों में रेप्लिकेट करने और हमारे REST API रिस्पॉन्स को विश्व स्तर पर वितरित एज लोकेशन पर कैश करने का विकल्प भी देता है। आप इन विकल्पों को अपस्टैश कंसोल में, अपने डेटाबेस के डिटेल्स टैब के तहत पा सकते हैं।
रेडिस DB का पता लगाने के इच्छुक किसी भी शुरुआती के लिए, अपस्टैश उन फ्रंट-एंड टेक्नोलॉजी के साथ काम करने के मामले में शुरू करना काफी आसान बनाता है जिन्हें हम पहले से जानते हैं और प्यार करते हैं। मुझे उम्मीद है कि यह आर्टिकल आपको अपनी रेडिस यात्रा शुरू करने के लिए एक अच्छा प्रारंभिक बिंदु देता है।