Vercel Edge এবং Upstash Redis-এর সাথে Next.js-এ রেট লিমিটিং প্রয়োগ করুন

এই নিবন্ধে, আমি Vercel এজ মিডলওয়্যার এবং @upstash/ratelimit লাইব্রেরি ব্যবহার করে আপনার ওয়েব অ্যাপ্লিকেশনে রেট লিমিটিং বাস্তবায়নের প্রক্রিয়ার মাধ্যমে আপনাকে গাইড করব। পরেরটি ব্যাকএন্ডে রেডিস ব্যবহার করে রেট লিমিট ডেটার স্টোরেজ এবং ব্যবস্থাপনার জন্য।

ভার্সেল এজ ব্যবহারের সুবিধা

Vercel Edge হল একটি কম্পিউটিং প্ল্যাটফর্ম যা ব্যবহারকারীর নিকটতম অবস্থানে গণনা করে। আমি ভার্সেল এজ মিডলওয়্যার ব্যবহার করব, যা অনুরোধগুলি ব্যাকএন্ডে পৌঁছানোর আগে বাধা দেয়। আমি বিশ্বাস করি এটি বিভিন্ন কারণে রেট সীমিত বাস্তবায়নের জন্য একটি আদর্শ উপযুক্ত:

• এটি আপনার ব্যাকএন্ড থেকে ডিকপল করা হয়েছে, এটি ব্যাকএন্ডে পৌঁছানোর আগে আপনাকে প্রান্তের অবস্থানে ট্র্যাফিক ব্লক করতে দেয়৷
• এটি দ্রুত এবং এতে কোল্ড স্টার্টের সমস্যা নেই, যার ফলে ওভারহেড কম হয়।
• সার্ভারবিহীন ফাংশনের তুলনায় এটি আরও সাশ্রয়ী।

কেন @upstash/ratelimit?

• @upstash/ratelimit হল একটি হার সীমিত লাইব্রেরি যা বিশেষভাবে ডিজাইন করা হয়েছে এবং এজ ফাংশনের জন্য পরীক্ষা করা হয়েছে।
• এটি প্রান্তের অবস্থান থেকে সর্বোত্তম লেটেন্সির জন্য বহু-অঞ্চল রেডিস সমর্থন করে।
• Upstash Redis হল একমাত্র পরিচালিত Redis যা প্রান্ত ফাংশন থেকে অ্যাক্সেস করা যায়, এর REST API-কে ধন্যবাদ।

এটি বলে, আসুন বাস্তবায়ন শুরু করি:

ধাপ 1:পুনরায় সেটআপ করুন

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

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: "/",
};

আপনার redis url এবং টোকেন প্রতিস্থাপন করতে ভুলবেন না. কোডটি slidingWindow ব্যবহার করে অ্যালগরিদম এবং 10 সেকেন্ডের মধ্যে একই আইপি থেকে 5টি অনুরোধের অনুমতি দেয়। আপনার যদি ব্যবহারকারীর জন্য অনন্য একটি সম্পত্তি থাকে (ইউজারআইড, ইমেল ইত্যাদি) আপনি আইপির পরিবর্তে এটি ব্যবহার করতে পারেন। যদি অনুরোধের হার সীমিত হয় তাহলে মিডলওয়্যার এটিকে 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 কনফিগার করতে পারেন

লিঙ্কগুলি

Next.js (নন-এজ)

ভার্সেল এজ মিডলওয়্যার

SDK রেটলিমিটিং