এই আর্টিকেলে, আমি আপনাকে Vercel Edge Middleware এবং @upstash/ratelimit লাইব্রেরি ব্যবহার করে আপনার ওয়েব অ্যাপ্লিকেশনে রেট লিমিটিং বাস্তবায়নের প্রক্রিয়ায় গাইড করব। পরবর্তীটি রেডিসকে ব্যাকএন্ড হিসেবে ব্যবহার করে রেট লিমিট ডেটা স্টোরেজ এবং ম্যানেজমেন্টের জন্য।
Vercel Edge ব্যবহারের সুবিধা
Vercel Edge হলো একটি কম্পিউটিং প্ল্যাটফর্ম যা ব্যবহারকারীর সবচেয়ে কাছের লোকেশনগুলিতে কম্পিউটেশন করে। আমি Vercel Edge Middleware ব্যবহার করব, যা রিকোয়েস্ট ব্যাকএন্ডে পৌঁছানোর আগে ইন্টারসেপ্ট করে। আমি মনে করি এটি রেট লিমিটিং বাস্তবায়নের জন্য একটি আদর্শ ফিট বেশ কিছু কারণেই:
- এটি আপনার ব্যাকএন্ড থেকে ডিকাপলড, যা আপনাকে Edge লোকেশন에서 ট্রাফিক ব্লক করতে দেয় ব্যাকএন্ডে পৌঁছানোর আগে।
- এটি দ্রুত এবং কোল্ড স্টার্ট ইস্যু নেই, ফলে ন্যূনতম ওভারহেড।
- এটি সার্ভারলেস ফাংশনদের চেয়ে বেশি খরচ-প্রভাবনীয়।
কেন @upstash/ratelimit?
@upstash/ratelimitহলো একটি রেট লিমিটিং লাইব্রেরি যা স্পেসিফিক্যালি Edge ফাংশনগুলোর জন্য ডিজাইন এবং টেস্ট করা।- এটি অপ্টিমাল লেটেন্সি Edge লোকেশন থেকে পাওয়ার জন্য মাল্টি-রিজন রেডিস সাপোর্ট করে।
- আপস্ট্যাশ রেডিস একমাত্র ম্যানেজড রেডিস যেটি Edge ফাংশন থেকে অ্যাক্সেস করা যায়, এর REST API-এর জন্য ধন্যবাদ।
এটি কথা বলা হয়ে গেলে, চলুন বাস্তবায়ন শুরু করি:
স্টেপ ১: রেডিস সেটআপ
আপস্ট্যাশ কনসোল বা আপস্ট্যাশ CLI-এ একটি রেডিস ডেটাবেস তৈরি করুন। UPSTASH_REDIS_REST_URL এবং UPSTASH_REDIS_REST_TOKEN পরবর্তী ধাপগুলোর জন্য দরকার হবে।

স্টেপ ২: Next.js সেটআপ
একটি Next.js অ্যাপ্লিকেশন তৈরি করুন। (অন্যান্য ফ্রেমওয়ার্কের জন্য এটি চেক করুন)
npx create-next-app@latest --typescript
@upstash/ratelimit ইনস্টল করুন:
npm i @upstash/ratelimit
প্রজেক্ট ফোল্ডারের টপ লেভেলে middleware.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: "/",
};
আপনার রেডিস URL এবং টোকেন রিপ্লেস করা ভুলবেন না। কোডটি slidingWindow অ্যালগরिदম ব্যবহার করে এবং একই IP থেকে ১০ সেকেন্ডে ৫ রিকোয়েস্ট অনুমতি দেয়। আপনার যদি ব্যবহারকারীর জন্য یونিক কোনো প্রপার্টি থাকে (userid, email ইত্যাদি) আপনি IP-এর পরিবর্তে সেটি ব্যবহার করতে পারেন। যদি রিকোয়েস্ট রেট লিমিটেড হয়, মিডলওয়্যার এটি blocked পেজে রিডাইরেক্ট করবে।
pages/blocked.tsx তৈরি করুন:
import styles from "@/styles/Home.module.css";
export default function Blocked() {
return (
Access blocked.
);
}
এটাই সব! এখন অ্যাপটি Vercel-এ ডিপ্লয় করুন: vercel deploy
পেজটি রিফ্রেশ করুন, ৩বার পর আপনি ব্লক করা পেজে রিডাইরেক্ট হবেন।
ক্যাশিংয়ের মাধ্যমে কম রিমোট কল
প্রতিটি রিকোয়েস্টে একটি রিমোট কল করা দক্ষ নয়। @uptash/ratelimit প্যাকেজের একটি উপযোগী ফিচার হলো এটি ডেটা ক্যাশ করে যতক্ষণ Edge ফাংশন "হট" থাকে। এর মানে ডেটা রেডিস থেকে শুধু তখন ফেচ করা হয় যখন ফাংশন "কোল্ড" থাকে, রিমোট কলের সংখ্যা কমিয়ে দেয়। ক্যাশিং বাস্তবায়ন করা যেতে পারে ratelimit অবজেক্টটি হ্যান্ডলার function middleware-র বাইরে ডিক্লেয়ার করে।
রেট লিমিটিং অ্যালগরিদম
উপরের উদাহরণে আমরা স্লাইডিং উইন্ডো অ্যালগরিদম ব্যবহার করেছি। আপনার প্রয়োজনের উপর ভিত্তি করে, আপনি ফিক্সড উইন্ডো এবং লিকিং বাকেট অ্যালগরিদমও ব্যবহার করতে পারেন। এখানে চেক করুন
মাল্টি রিজন রেডিস
Edge ফাংশন থেকে পারফরম্যান্স উন্নত করার জন্য বিভিন্ন রিজনে একাধিক রেডিস ডেটাবেস রাখা অর্থপূর্ণ। আপনি এখানে বলা অনুযায়ী মাল্টি রিজন রেডিস কনফিগার করতে পারেন
লিংকসমূহ
রেট লিমিটিং Next.js-এ (non-edge)
Vercel Edge middleware
Ratelimiting SDK