इस पोस्ट में, मैं बात करता हूं कि कैसे itsmy.fyi (LinkTree का एक ओपन-सोर्स विकल्प) Upstash, Astro, GitHub और Edgio के साथ बनाया गया है। Upstash ने मुझे सभी उपयोगकर्ताओं के डेटा को प्रबंधित (CRUD) करने में मदद की, CRUD ऑपरेशन के लिए GitHub API की तुलना में उदार रेट लिमिटिंग की पेशकश की, और ग्रैन्युलर रेट लिमिटिंग लागू की।
हम क्या उपयोग करेंगे
- Astro (फ्रंट-एंड और बैक-एंड)
- Upstash (रेट लिमिटिंग और CRUD ऑपरेशन)
- GitHub Issue और Webhooks (उपयोगकर्ता प्रोफाइल प्रबंधित करने के लिए पब्लिक CMS)
- Tailwind CSS (स्टाइलिंग)
- Edgio (डिप्लॉयमेंट)
आपको क्या चाहिए
- एक GitHub खाता
- एक डेटाबेस बनाने के लिए एक Upstash खाता
Upstash Redis सेट अप करना
एक बार जब आप एक Upstash खाता बना लेते हैं और लॉग इन हो जाते हैं तो आप Redis टैब पर जाएंगे और एक डेटाबेस बनाएंगे।
अपना डेटाबेस बनाने के बाद, आप Details टैब पर जाएंगे। नीचे स्क्रॉल करें जब तक आपको Connect your database अनुभाग न मिल जाए। सामग्री कॉपी करें और इसे कहीं सुरक्षित सहेजें।
또한, REST API अनुभाग मिलने तक नीचे स्क्रॉल करें और .env बटन चुनें। सामग्री कॉपी करें और इसे कहीं सुरक्षित सहेजें।
प्रोजेक्ट सेट अप करना
सेट अप करने के लिए, बस ऐप रेपो क्लोन करें और इस ट्यूटोरियल का पालन करें ताकि इसमें जो कुछ भी है उसे सीख सकें। प्रोजेक्ट को फोर्क करने के लिए, चलाएं:
git clone https://github.com/rishi-raj-jain/itsmy.fyi cd itsmy.fyi yarn installएक बार जब आप रेपो क्लोन कर लेते हैं, तो आप एक .env फ़ाइल बनाने जा रहे हैं। आप ऊपर के अनुभागों से सहेजे गए आइटम जोड़ने जा रहे हैं।
यह कुछ इस तरह दिखना चाहिए:
# Obtained from your GitHub repo GITHUB_API_TOKEN="to_create_and_update_github_comments" GITHUB_WEBHOOK_SECRET="if_you_are_matching_github_webhooks_sha256" # Obtained from the steps as above UPSTASH_DB="your_upstash_redis_from_above" UPSTASH_REDIS_REST_URL="your_upstash_redis_rest__url_from_above" UPSTASH_REDIS_REST_TOKEN="your_upstash_redis_rest__token_from_above"इन चरणों के बाद, आप निम्न कमांड का उपयोग करके स्थानीय वातावरण शुरू करने में सक्षम होना चाहिए:
yarn run edgio:devरिपॉजिटरी संरचना
यह प्रोजेक्ट के लिए मुख्य फ़ोल्डर संरचना है। मैंने उन फ़ाइलों को लाल रंग में घेरा है जिन पर इस पोस्ट में आगे चर्चा की जाएगी जो CRUD ऑपरेशन, रेट लिमिटिंग और उन फ़ाइलों से संबंधित हैं जिनमें उनका संदर्भ दिया गया है।
उच्च-स्तरीय डेटा प्रवाह
यह डेटा कैसे प्रवाहित हो रहा है इसका एक उच्च-स्तरीय आरेख है।
- यदि कोई उपयोगकर्ता itsmy.fyi/me/slug पर जाता है और इस पेज की प्रतिक्रिया कैश नहीं है (या पुनर्सत्यापित की जा रही है), तो यह getUserInfo फ़ंक्शन को कॉल करता है जो बदले में Upstash DB से उपयोगकर्ता JSON पुनः प्राप्त करता है
- यदि कोई उपयोगकर्ता GitHub Issue बनाता है, अपडेट करता है या हटाता है, तो GitHub एक वेबहुक ट्रिगर करता है जो एक एंडपॉइंट पर POST करता है। उस एंडपॉइंट में, पहले Upstash रेट लिमिटिंग का उपयोग यह मूल्यांकन करने के लिए किया जाता है कि अनुरोधित परिवर्तन किया जा सकता है या नहीं, और फिर Upstash का उपयोग करके, उपयोगकर्ता JSON(s) बनाए, अपडेट या हटाए जाते हैं।
Upstash Redis के माध्यम से उपयोगकर्ता प्रोफाइल CRUD ऑपरेशन
इस अनुभाग में, हम इस बात पर गहराई से जाएंगे कि उपयोगकर्ता प्रोफाइल के लिए डेटा लाना, अपडेट करना और हटाना कैसे किया जाता है। हम डेटा लाने और प्रदर्शित करने के लिए लगातार Upstash (via ioredis) का उपयोग करते हैं।
मैं CRUD ऑपरेशन के लिए GitHub से Upstash पर क्यों गया?
जबकि मैंने GitHub को डेटा प्रबंधन के स्रोत के रूप में शुरू किया था: डेटा फॉर्म के रूप में GitHub Issues से लेकर GitHub Webhooks तक रिपॉजिटरी के भीतर उपयोगकर्ता JSON को CRUD करने के लिए, GitHub REST API पर सीमाएं: 1,000 requests per hour per repository इच्छित उपयोग को प्रतिबंधित और प्रतिगामी लग रही थीं।
Upstash बहुत बेहतर निकला क्योंकि इसने मुझे उनकी मुफ्त योजना में शुरू करने के लिए दैनिक 10K कमांड की पेशकश की, और जैसे-जैसे मेरा उपयोग बढ़ा, बहुत कम दर। इस तरह के दृष्टिकोण ने मुझे उपयोगकर्ता अधिग्रहण को लगभग शून्य लागत पर बढ़ाने और डेटाबेस के स्केलिंग और लागत प्रबंधन की चिंता किए बिना तेजी से पुनरावृति करने की अनुमति दी।
getUserInfo: उपयोगकर्ता प्रोफाइल लाने वाला फ़ंक्शन
getUserInfo फ़ंक्शन ioredis के hget का उपयोग करता है slug को कुंजी के रूप में एक अद्वितीय slug द्वारा पहचाने गए प्रासंगिक उपयोगकर्ता प्रोफाइल पेज के लिए Upstash पर एक API अनुरोध करने के लिए। यदि वह उपयोगकर्ता प्रोफाइल मौजूद नहीं है (या कोई त्रुटि है), तो फ़ंक्शन { code: 0 } वाला एक ऑब्जेक्ट लौटाने के लिए सेट है ताकि उपयोगकर्ता को Astro के डायनामिक रूट में स्वचालित रूप से 404 पर रीडायरेक्ट किया जा सके।
// File: lib/Upstash/users/get.js // Read User Profile Code import redis from "../setup"; export async function getUserInfo(slug) { try { const userData = await redis.hget("profiles", slug); const parsedData = JSON.parse(userData); if (parsedData.slug === slug) { return { ...parsedData, code: 1 }; } return { code: 0, error: `slug doesn't match for the user.`, }; } catch (e) { const error = e.message || e.toString(); console.log(error); return { code: 0, error, }; } }इसी तरह, शेष CRUD ऑपरेशन इस प्रकार हैं:
import redis from "../setup"; // File: @/lib/Upstash/users/delete.js // Delete User Profile Code export async function deleteUserInfo(slug) { try { await redis.hdel("profiles", slug); return { code: 1 }; } catch (e) { console.log(e.message || e.toString()); return { code: 0, }; } } // File: @/lib/Upstash/users/post.js // Create/Update User Profile Code export async function postUserInfo(data) { try { await redis.hset("profiles", data.slug, JSON.stringify(data)); return { code: 1 }; } catch (e) { const error = e.message || e.toString(); console.log(error); return { code: 0, error, }; } }रेट लिमिटिंग
Edgio के साथ सर्वरलेस वातावरण में रेट-लिमिटिंग लागू करने के लिए, हम Upstash Redis डेटाबेस क्लाइंट और @upstash/ratelimit नामक एक रेट लिमिटर लाइब्रेरी का उपयोग करते हैं।
// Reference Function to ratelimiting import { Ratelimit } from "@upstash/ratelimit"; import { Redis } from "@upstash/redis"; import { getENV } from "@/lib/env"; const url = getENV("UPSTASH_REDIS_REST_URL"); const token = getENV("UPSTASH_REDIS_REST_TOKEN"); export const ratelimit = (number, time) => { if (url && token) { return new Ratelimit({ redis: new Redis({ url, token, }), limiter: Ratelimit.fixedWindow(number, time), }); } return; };रेट लिमिटिंग का उपयोग करके, मैं निम्नलिखित प्राप्त करने में सक्षम था:
A. सेवा का उपयोग - पूरी तरह से मुफ़्त और असीमित
रेट लिमिटिंग का उपयोग करके, मैं प्रोफाइल निर्माण API को सार्वजनिक रूप से उजागर करने में सक्षम हूं! इसने मुझे सिस्टम के लाभों को प्रदर्शित करने की अनुमति दी यानी GUI के माध्यम से प्रोफाइल की आसान सेटअप। सचमुच कोई भी वेबसाइट (itsmy.fyi) के माध्यम से एक सप्ताह में 3 प्रोफाइल बना सकता है, और संपादन प्रोफाइल, असीमित प्रोफाइल बनाने जैसी सुविधाओं तक असीमित पहुंच के लिए, उपयोगकर्ताओं को GitHub के तरीके से प्रोफाइल बनाने के लिए स्विच करना होगा। हम IP पते को कुंजी के रूप में उपयोग करके प्रति सप्ताह 3 प्रोफाइल की रेट लिमिट को लागू करने में सक्षम हैं।
// Rate limit 3 profiles in a week via the web for a user const ratelimitUser = ratelimit(3, 7 * 24 * 60 * 60 + " s"); if (rateLimiter) { // Look at the x-0-client-ip set by Edgio in serverless const result = await rateLimiter.limit("x-0-client-ip"); limit = result.limit; remaining = result.remaining; if (!result.success) { // Return a message } }B. उपयोगकर्ता द्वारा संपादन की संख्या पर ग्रैन्युलर मॉडरेशन लागू करें
इसके अलावा, रेट लिमिटिंग के माध्यम से हम एक मिनट में एक उपयोगकर्ता द्वारा किए गए संपादन की संख्या को उनके GitHub उपयोगकर्ता नाम के आधार पर मॉडरेट करने में सक्षम हैं। अभी, हम उन्हें एक मिनट में 3 परिवर्तन तक करने की अनुमति देते हैं। यह किसी भी अनदेखे स्पैम को कम करने में मदद करेगा।
const rateLimiter = ratelimit(3, "60 s"); if (rateLimiter) { const result = await rateLimiter.limit(context.sender.login); limit = result.limit; remaining = result.remaining; if (!result.success) { return { headers: { "X-RateLimit-Limit": limit, "X-RateLimit-Remaining": remaining, }, body: JSON.stringify({ message: "Too many updates in 1 minute. Please try again in a few minutes.", }), }; } }सभी उपयोगकर्ता प्रोफाइल के लिए एज पर stale-while-revalidate लागू करना
निम्न कोड बताता है कि कैश हिट दरों को बेहतर बनाने के लिए Stale While Revalidate की अवधारणा का उपयोग कैसे करें। कोड (में routes.js) में, router.match फ़ंक्शन का उपयोग उन सभी उपयोगकर्ता प्रोफाइल से मेल खाने के लिए किया जाता है जो /me/ से शुरू होते हैं। कैश विधि के अंदर, हम ब्राउज़र में पेज को कैश होने से रोकते हैं और केवल एज कैशिंग को सक्षम करते हैं ताकि उपयोगकर्ताओं को हमेशा तेज़ और नवीनतम सामग्री के साथ परोसा जा सके। एज विकल्प को maxAgeSeconds: 1 पर सेट किया जाता है ताकि यह सुनिश्चित हो सके कि डेटा केवल एक सेकंड के लिए कैश्ड है। staleWhileRevalidateSeconds विकल्प को एक वर्ष पर सेट किया जाता है ताकि डेटा को कैश से सीधे परोसा जा सके जबकि कैश रीफ्रेश हो रहा हो।
// User path(s) router.match("/me/:path", ({ cache, removeUpstreamResponseHeader }) => { // Remove the cache-control header from Astro's standalone server removeUpstreamResponseHeader("cache-control"); // Disable in browser caching, and use Edgio's edge to use SWR cache({ edge: { maxAgeSeconds: 1, staleWhileRevalidateSeconds: 60 * 60 * 24 * 365, }, browser: false, }); });Stale While Revalidate का उपयोग सर्वर पर लोड को कम करके और उपयोगकर्ता को तेज़ प्रतिक्रिया प्रदान करके ऐप के प्रदर्शन को बेहतर बनाने में मदद कर सकता है।
डायनामिक उपयोगकर्ता प्रोफाइल ऑन-द-फ्लाई बनाना
Astro डायनामिक रूट सेट अप करना सुपर आसान बनाता है। ऐप में, आपको src/pages/me/[slug].astro मिलेगा, जो /me/ से शुरू होने वाले पेजों को मैप करता है। उदाहरणों में /me/rishi-raj-jain और /me/some-other-user शामिल हैं।
उपयोगकर्ता प्रोफाइल लाना
हम Astro पैरामीटर से निकाले गए slug क्वेरी पैरामीटर का उपयोग करके वर्तमान उपयोगकर्ता के लिए डेटा लाते हैं, और सभी संबंधित उपयोगकर्ता डेटा प्राप्त करने के लिए getUserInfo फ़ंक्शन (जैसा कि ऊपर वर्णित है) को कॉल करते हैं। नहीं मिलने या त्रुटि के मामले में, हम विज़िटर को 404 पर रीडायरेक्ट करते हैं।
import { getUserInfo } from "@/lib/Upstash/users"; // Extract slug query const { slug } = Astro.params; // Get data from Upstash using the getUserInfo function const { name: userName, image: userImage, links = [], socials = [], about = "", og = {}, background = {}, code = 1, } = await getUserInfo(userSlug); // In case the code: 0 is recevied, redirect to a 404 if (code === 0) { return Astro.redirect("/404"); }CLI से डिप्लॉय करें
आप अपने ऐप का प्रोडक्शन बिल्ड कर सकते हैं और इसे स्थानीय रूप से परीक्षण कर सकते हैं:
yarn run edgio:build && yarn run edgio:productionडिप्लॉय करने के लिए Edgio पर एक खाते की आवश्यकता होती है। यहां मुफ्त में साइन अप करें। एक बार आपके पास खाता हो जाने पर, आप अपने प्रोजेक्ट के रूट फ़ोल्डर में निम्न कमांड चलाकर Edgio पर डिप्लॉय कर सकते हैं:
yarn run edgio:deployअब हम डिप्लॉयमेंट के साथ हो गए हैं! हां, बस इतना ही था।
निष्कर्ष
निष्कर्ष में, इस प्रोजेक्ट ने सर्वरलेस में ग्रैन्युलर रेट लिमिटिंग, CRUD डेटा ऑपरेशन, CMS के रूप में GitHub Issues का उपयोग, और एक ऐसी सेवा का उपयोग करके MVP को शिप करने का बेहतर निर्णय लेने में मूल्यवान अनुभव प्रदान किया है जो आपकी आवश्यकता के साथ स्केल होती है, यानी Upstash।
