Next.js में Upstash Redis के साथ फीचर फ्लैग लागू करें: सुरक्षित, लचीले रिलीज़ के लिए

परिचय

अपडेट हर सॉफ़्टवेयर का हिस्सा हैं; आपको बग ठीक करने, नई सुविधाएँ जोड़ने, और आम तौर पर चीज़ों को अधिक सुरक्षित, विश्वसनीय या तेज़ बनाने के लिए पुनरावृति करने की आवश्यकता होती है।

लेकिन सामान्य तौर पर नई सुविधाओं या परिवर्तनों को डिप्लॉयमेंट के साथ जोड़ना हमेशा एक अच्छा विचार नहीं है। कभी-कभी आप आवर्ती डिप्लॉयमेंट शेड्यूल का पालन करते हैं, लेकिन मार्केटिंग टीम नई सुविधा की घोषणा के लिए तैयार नहीं होती। यदि परिवर्तन हार्डकोडेड हैं, तो मार्केटिंग टीम को उन्हें सक्रिय या निष्क्रिय करने के लिए एक डेवलपर की आवश्यकता हो सकती है।

फीचर फ्लैग, या फीचर टॉगल, आपके परिवर्तनों को डिप्लॉयमेंट से अलग करने का एक तरीका है। आप एक परिवर्तन लागू करते हैं, लेकिन इसे एक इफ-स्टेटमेंट के पीछे छिपाते हैं; जब तक कोई वेरिएबल गलत है, सॉफ़्टवेयर आपके परिवर्तन से पहले के संस्करण का उपयोग करेगा; यदि वेरिएबल true है, तो यह नया संस्करण होगा। यदि वेरिएबल का मान उस डेटाबेस से आता है जिसे मार्केटिंग टीम एक्सेस कर सकती है, तो वे कोड परिवर्तन की आवश्यकता के बिना इन परिवर्तनों को टॉगल कर सकते हैं।

Upstash Redis® ऐसा डेटाबेस है। यह एक सरल की-वैल्यू स्टोर है जिसका उपयोग आप अपने फीचर फ्लैग स्टोर करने के लिए कर सकते हैं। चूंकि यह बिजली की तेजी से काम करता है, यह आपके एप्लिकेशन में कई अलग-अलग फ्लैग की जांच करने के लिए ज्यादा लेटेंसी नहीं जोड़ता।

यह ट्यूटोरियल आपको सिखाएगा कि अपने Next.js ऐप के लिए एक सरल फीचर फ्लैग मैकेनिज्म कैसे बनाया जाए। हम Vercel पर डिप्लॉय करेंगे और स्टोरेज के रूप में Upstash Redis® का उपयोग करेंगे।

पूर्वापेक्षाएँ

आपको एक GitHub अकाउंट, एक Vercel अकाउंट और एक Upstash अकाउंट की आवश्यकता है।

क्योंकि हम NPM का उपयोग करते हैं, आपको Node.js का वर्तमान इंस्टॉलेशन भी चाहिए।

Next.js प्रोजेक्ट आरंभ करना

हमारा पहला कदम एक नया Next.js प्रोजेक्ट बनाना है। आप इसे निम्न कमांड से करते हैं:

$ npx create-next-app upstash-next-feature-flags

Upstash Redis® कनेक्शन बनाना

अगला, हमें अपने Next.js ऐप को Upstash Redis® डेटाबेस से जोड़ना होगा। इसके लिए, हमें @upstash/redis पैकेज इंस्टॉल करना होगा और इसके चारों ओर एक छोटा रैपर बनाना होगा।

$ npm i @upstash/redis

upstash-next-feature-flags/lib/featureFlags.js पर एक फ़ाइल बनाएं जिसमें यह कोड हो:

import { Redis } from "@upstash/redis";
const { UPSTASH_TOKEN, UPSTASH_URL } = process.env;
const redis = new Redis({
    token: UPSTASH_TOKEN,
    url: UPSTASH_URL,
});
export async function flagIsActive(flagName) {
    const flag = await redis.get(flagName);
    return Boolean(flag);
}

हम एनवायरनमेंट वेरिएबल से API क्रेडेंशियल प्राप्त करेंगे जिन्हें हम इस ट्यूटोरियल में बाद में सेट करेंगे। flagIsActive फ़ंक्शन Redis® को क्वेरी करेगा और लौटाए गए मान को बूलियन में बदल देगा। यह रूपांतरण आवश्यक है क्योंकि हम फ्लैग को Redis में एक नंबर के रूप में सेव करेंगे।

API रूट बनाना

हमें दो अलग-अलग कार्यान्वयन के साथ API रूट बनाना होगा। हम उनके बीच स्विच करने के लिए फीचर फ्लैग का उपयोग करेंगे।

इसके लिए, upstash-next-feature-flags/pages/api/sort-numbers.js पर एक फ़ाइल बनाएं।

इसमें यह कोड होना चाहिए:

import { flagIsActive } from "../../lib/featureFlags";
export default async function handler(request, response) {
    let sort = bucketSort;
    const newSortingAlgorithm = await flagIsActive("newSortingAlgorithm");
    if (newSortingAlgorithm) sort = selectionSort;
    const { numbers } = request.body;
    const sorted = sort(numbers);
    response.status(200).json({ numbers: sorted, newSortingAlgorithm, });
}
// पुराना सॉर्टिंग एल्गोरिदम
const bucketSort = (arr, size = 5) => {
    const min = Math.min(...arr);
    const max = Math.max(...arr);
    const buckets = Array.from(
        { length: Math.floor((max - min) / size) + 1 },
        () => [],
    );
    arr.forEach((val) => {
        buckets[Math.floor((val - min) / size)].push(val);
    });
    return buckets.reduce((acc, b) => [...acc, ...b.sort((a, b) => a - b)], []);
};
// नया सॉर्टिंग एल्गोरिदम
const selectionSort = (arr) => {
    const a = [...arr];
    for (let i = 0; i < a.length; i++) {
        const min = a
            .slice(i + 1)
            .reduce((acc, val, j) => (val < a[acc] ? j + i + 1 : acc), i);
        if (min !== i) [a[i], a[min]] = [a[min], a[i]];
    }
    return a;
};

यह API रूट एक साधारण नंबर सॉर्टर है। यह अनसॉर्टेड नंबरों की एक सरणी लेता है और उन्हें सॉर्ट करने के लिए दो सॉर्टिंग एल्गोरिदम में से एक का उपयोग करेगा।

ये सॉर्टिंग एल्गोरिदम आपके एप्लिकेशन में किसी भी परिवर्तन को दर्शाते हैं जिसे आप "टॉगल" करना चाहते हैं। उन दोनों को अपने कोड में रखें और Redis में मान बदलकर flagIsActive फ़ंक्शन के माध्यम से उनके बीच स्विच करें।

हम flagIsActive फ़ंक्शन को कॉल करते हैं और उसे उस फ्लैग का नाम देते हैं जिसे हम जांचना चाहते हैं। यदि Redis में फ्लैग 1 पर सेट है, तो यह फ़ंक्शन true लौटाता है; अन्यथा, यह false लौटाएगा।

सॉर्ट करने के बाद, API रूट सॉर्ट की गई सरणी के साथ प्रतिक्रिया देता है।

प्रोजेक्ट को GitHub पर पुश करना

सब कुछ लागू करने के बाद, हमें Vercel की डिप्लॉयमेंट सर्विस के लिए इसे सुलभ बनाने के लिए प्रोजेक्ट को GitHub पर एक रिपॉजिटरी में पुश करना होगा। GitHub अपने डॉक्स में रिपॉजिटरी बनाने का तरीका बताता है।

एक खाली रिपॉजिटरी बनाने से स्वचालित रूप से आपको दिखाया जाएगा कि आप इसे हमारे द्वारा बनाए गए प्रोजेक्ट से कैसे लिंक कर सकते हैं।

Upstash Redis® डेटाबेस बनाना

आप Upstash कंसोल में एक नया डेटाबेस बना सकते हैं। चित्र 1 इस ट्यूटोरियल के लिए एक अच्छा कॉन्फिगरेशन दिखाता है।

जैसा कि चित्र 1 कहता है, एक डेटाबेस मुफ़्त है, इसलिए इस ट्यूटोरियल के लिए आपको कुछ भी भुगतान नहीं करना पड़ेगा।

Upstash कंसोल वाले ब्राउज़र टैब को खुला रखें क्योंकि हमें बाद में डेटाबेस क्रेडेंशियल इकट्ठा करने के लिए इसकी आवश्यकता होगी।

GitHub रिपॉजिटरी को Vercel से लिंक करना

यदि आप अपने GitHub अकाउंट से Vercel में लॉग इन करते हैं, तो GitHub रिपॉजिटरी जोड़ने में केवल कुछ क्लिक लगते हैं। चित्र 2 में, आप Vercel डैशबोर्ड के ऊपरी बाएं भाग को देखते हैं; "Add New…" पर क्लिक करें और "Project" चुनें।

"Continue with GitHub" चुनें और पिछले चरण में बनाए गए रिपॉजिटरी से संबंधित "import" बटनों में से एक।

अंत में, प्रोजेक्ट कॉन्फिगरेशन चरण सामने आएगा, जहां आपको अपने एनवायरनमेंट वेरिएबल जोड़ने होंगे। उस कॉन्फिगरेशन के बाकी हिस्से के लिए, आप डिफ़ॉल्ट रख सकते हैं। चित्र 4 वह जगह दिखाता है जहां आपको ये वेरिएबल दर्ज करने हैं।

उन्हें UPSTASH_TOKEN और UPSTASH_URL कहा जाता है, और आप उन्हें अपने Upstash कंसोल में पाते हैं, जहां हमने पहले डेटाबेस बनाया था। चित्र 5 दिखाता है कि हमारे वेरिएबल के लिए आवश्यक मान कॉपी करने के लिए आपको किन बटनों की आवश्यकता है।

जब आप बड़े "Deploy" बटन को दबाते हैं, तो Vercel आपके GitHub रिपॉजिटरी को क्लोन करेगा और इसे अपने इंफ्रास्ट्रक्चर पर डिप्लॉय करेगा।

Redis के साथ कार्यान्वयन के बीच स्विच करना

अब, हमें अपने API एंडपॉइंट को कॉल करने में सक्षम होना चाहिए, और हम Redis में एक मान सेट करके कार्यान्वयन के बीच स्विच कर सकते हैं। Upstash कंसोल में Redis CLI इसे प्राप्त करने का सबसे सरल तरीका है।

चित्र 6 दर्शाता है कि CLI कहां मिलेगा और हमें कौन सी कमांड निष्पादित करनी है मान सेट करने के लिए।

set newSortingAlgorithm 1

यदि हम newSortingAlgorithm को डिलीट कर दें या इसे 0 पर सेट कर दें, तो यह फ्लैग को वापस false पर स्विच कर देगा, और हमारा API रूट पुराने एल्गोरिदम का उपयोग करेगा।

API रूट का उपयोग करना

आखिरी चीज़ जो बाकी है वह है API रूट का वास्तविक उपयोग। हमें रूट पर POST रिक्वेस्ट के माध्यम से एक JSON ऑब्जेक्ट भेजना होगा। ऐसा करने का एक आसान तरीका cURL के साथ है।

निम्न कमांड ऐसा ऑब्जेक्ट भेजती है:

$ curl --header "Content-Type: application/json" \
     --request POST \
     --data '{"numbers":[1, 100, 10, 1000, 100000, 10000]}' \
     API_ROUTE_URL

आपको Vercel में सही API_ROUTE_URL ढूंढना होगा। आपको Vercel डैशबोर्ड पर अपने प्रोजेक्ट में "Domains" श्रेणी देखनी चाहिए, जैसे चित्र 7 में।

प्रतिक्रिया एक JSON ऑब्जेक्ट होनी चाहिए जिसमें सॉर्ट किए गए numbers और एक newSortingAlgorithm फ़ील्ड शामिल हो जो इंगित करता है कि इस सॉर्टिंग के लिए किस एल्गोरिदम का उपयोग किया गया था।

सारांश

फीचर फ्लैग डिप्लॉयमेंट को फीचर रिलीज़ से अलग करने का एक उत्कृष्ट तरीका है। वे एक हार्ड-कोडेड परिवर्तन को डेटाबेस में एक साधारण मान सेट करने में बदल देते हैं, जो आपकी टीमों को अधिक लचीलापन देता है और गैर-तकनीकी लोगों को अधिक शक्ति देता है।

Upstash Redis जैसे तेज़ डेटाबेस के साथ, अपने एप्लिकेशन के लिए फीचर फ्लैग पैटर्न लागू करना आसान है बिना अपने प्रदर्शन का बहुत त्याग किए। Upstash Redis में सब-सेकंड एक्सेस टाइम हैं, और यदि आवश्यक हो तो आप इसे अपने FaaS के पास डिप्लॉय कर सकते हैं। वह सब ऑन-डिमांड प्राइसिंग के साथ, इसलिए आप कभी भी उन संसाधनों के लिए भुगतान नहीं करते जिनका आप उपयोग नहीं करते।