इस लेख में, मैं आपको Vercel Edge मिडलवेयर और @upstash/ratelimit लाइब्रेरी का उपयोग करके अपने वेब एप्लिकेशन में रेट लिमिटिंग लागू करने की प्रक्रिया के माध्यम से मार्गदर्शन करूंगा। बाद वाला स्टोरेज और रेट लिमिट डेटा के प्रबंधन के लिए बैकएंड में Redis का उपयोग करता है।
Vercel Edge का उपयोग करने के लाभ
Vercel Edge एक कंप्यूटिंग प्लेटफॉर्म है जो यूजर के निकटतम स्थानों पर गणना करता है। मैं Vercel Edge मिडलवेयर का उपयोग करूंगा, जो बैकएंड तक पहुंचने से पहले अनुरोधों को इंटरसेप्ट करता है। मेरा मानना है कि यह रेट लिमिटिंग कार्यान्वयन के लिए कई कारणों से एक आदर्श फिट है:
- यह आपके बैकएंड से डिकॉपल्ड है, जिससे आप बैकएंड तक पहुंचने से पहले एज स्थान पर ट्रैफिक को ब्लॉक कर सकते हैं।
- यह तेज़ है और इसमें कोल्ड स्टार्ट समस्याएं नहीं हैं, जिसके परिणामस्वरूप न्यूनतम ओवरहेड होता है।
- यह सर्वरलेस फंक्शन की तुलना में अधिक लागत-प्रभावी है।
@upstash/ratelimit क्यों?
@upstash/ratelimitएक रेट लिमिटिंग लाइब्रेरी है जिसे विशेष रूप से एज फंक्शन के लिए डिज़ाइन और परीक्षण किया गया है।- यह इष्टतम विलंबता के लिए एज स्थानों से मल्टी-रीजन Redis का समर्थन करता है।
- Upstash Redis एकमात्र प्रबंधित Redis है जिसे इसके REST API के लिए धन्यवाद एज फंक्शन से एक्सेस किया जा सकता है।
इसके साथ कहा, आइए कार्यान्वयन शुरू करें:
चरण 1: Redis सेटअप
Upstash Console या Upstash CLI पर एक Redis डेटाबेस बनाएं। अगले चरणों के लिए UPSTASH_REDIS_REST_URL और UPSTASH_REDIS_REST_TOKEN की आवश्यकता होगी।
चरण 2: Next.js सेटअप
एक Next.js एप्लिकेशन बनाएं। (अन्य फ्रेमवर्क के लिए इसे देखें)
npx create-next-app@latest --typescript@upstash/ratelimit इंस्टॉल करें:
npm i @upstash/ratelimitमिडलवेयर.ts बनाएं (आपके प्रोजेक्ट फोल्डर में शीर्ष स्तर पर):
import { NextFetchEvent, NextRequest, NextResponse } from "next/server";
import { Ratelimit } from "@upstash/ratelimit";
import { Redis } from "@upstash/redis";
const redis = new Redis({
url: "https://us1-merry-snake-32728.upstash.io",
token: "AX_sAdsdfsgODM5ZjExZGEtMmmVjNmE345445kGVmZTk5MzQ=",
});
const ratelimit = new Ratelimit({
redis: redis,
limiter: Ratelimit.slidingWindow(5, "10 s"),
});
export default async function middleware(
request: NextRequest,
event: NextFetchEvent,
): Promise<Response | undefined> {
const ip = request.ip ?? "127.0.0.1";
const { success, pending, limit, reset, remaining } = await ratelimit.limit(ip);
return success ? NextResponse.next() : NextResponse.redirect(new URL("/blocked", request.url));
}
export const config = { matcher: "/", };अपने redis url और टोकन को बदलना न भूलें। कोड slidingWindow एल्गोरिदम का उपयोग करता है और 10 सेकंड में एक ही IP से 5 अनुरोध की अनुमति देता है। यदि आपके पास यूजर के लिए अद्वितीय एक प्रॉपर्टी है (userid, ईमेल आदि) तो आप IP के बजाय इसका उपयोग कर सकते हैं। यदि अनुरोध रेट लिमिटेड है तो मिडलवेयर इसे blocked पेज पर रीडायरेक्ट करता है।
आइए pages/blocked.tsx बनाएं:
import styles from "@/styles/Home.module.css";
export default function Blocked() {
return (
<div>
<main className={styles.main}>
<h3>Access blocked.</h3>
</main>
</div>
);
}बस इतना ही! अब आप ऐप को Vercel पर डेप्लॉय कर सकते हैं: vercel deploy
पेज रिफ्रेश करें, आपको 3 बार के बाद ब्लॉक पेज पर रीडायरेक्ट किया जाना चाहिए।
कैशिंग के साथ कम रिमोट कॉल
प्रत्येक अनुरोध के साथ रिमोट कॉल करना कुशल नहीं है। @uptash/ratelimit पैकेज की एक उपयोगी विशेषता यह है कि यह डेटा को तब तक कैश करता है जब तक एज फंक्शन "हॉट" है। इसका मतलब है कि डेटा केवल तभी Redis से प्राप्त किया जाता है जब फंक्शन "कोल्ड" होता है, जिससे रिमोट कॉल की संख्या कम हो जाती है। कैशिंग को ratelimit ऑब्जेक्ट को हैंडलर function middleware के बाहर घोषित करके लागू किया जा सकता है।
रेट लिमिटिंग एल्गोरिदम
ऊपर दिए गए उदाहरण में हमने स्लाइडिंग विंडो एल्गोरिदम का उपयोग किया है। आपकी आवश्यकताओं के आधार पर, आप फिक्स्ड विंडो और लीकिंग बकेट एल्गोरिदम का उपयोग कर सकते हैं। यहां देखें
मल्टी रीजन Redis
एज फंक्शन से प्रदर्शन में सुधार के लिए अलग-अलग क्षेत्रों में कई Redis डेटाबेस रखना समझ में आता है। आप यहां बताए अनुसार मल्टी रीजन Redis को कॉन्फिगर कर सकते हैं
लिंक
Next.js के साथ रेट लिमिटिंग (नॉन-एज)
Vercel Edge मिडलवेयर
Ratelimiting SDK
