การจำกัดอัตราการใช้งานใน Next.js ด้วย Vercel Edge และ Upstash Redis

ขั้นตอนที่ 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: "/",
};

อย่าลืมแทนที่ URL และโทเค็น Redis ของคุณ รหัสใช้ 24 อัลกอริธึมและอนุญาต 5 คำขอจาก IP เดียวกันใน 10 วินาที หากคุณมีพร็อพเพอร์ตี้เฉพาะสำหรับผู้ใช้ (รหัสผู้ใช้ อีเมล ฯลฯ) คุณสามารถใช้คุณสมบัตินั้นแทน IP ได้ หากคำขอมีอัตราจำกัด มิดเดิลแวร์จะเปลี่ยนเส้นทางไปที่ 30 หน้า.

มาสร้าง 40 กันเถอะ :

import styles from "@/styles/Home.module.css";
 
export default function Blocked() {
 return (
 <div>
 <main className={styles.main}>
 <h3>Access blocked.</h3>
 </main>
 </div>
 );
}

นั่นคือทั้งหมด! ตอนนี้คุณสามารถปรับใช้แอปกับ Vercel:58

รีเฟรชเพจ คุณควรถูกเปลี่ยนเส้นทางไปยังเพจที่ถูกบล็อกหลังจากผ่านไป 3 ครั้ง

โทรระยะไกลน้อยลงพร้อมแคช

การโทรระยะไกลกับคำขอแต่ละรายการไม่มีประสิทธิภาพ คุณสมบัติที่มีประโยชน์ของแพ็คเกจ @uptash/ratelimit ก็คือมันจะแคชข้อมูลตราบใดที่ฟังก์ชัน edge นั้น "ร้อน" ซึ่งหมายความว่าข้อมูลจะถูกดึงมาจาก Redis เมื่อฟังก์ชันเป็น "เย็น" เท่านั้น ซึ่งจะช่วยลดจำนวนการโทรระยะไกล การแคชสามารถทำได้โดยการประกาศ 65 วัตถุภายนอกตัวจัดการ 70 .

อัลกอริทึมการจำกัดอัตรา

ในตัวอย่างข้างต้น เราได้ใช้อัลกอริธึมหน้าต่างบานเลื่อน คุณสามารถใช้หน้าต่างคงที่และอัลกอริธึมบัคเก็ตรั่วไหลได้ ทั้งนี้ขึ้นอยู่กับความต้องการของคุณ ตรวจสอบที่นี่

Redis หลายภูมิภาค

ควรมีฐานข้อมูล Redis หลายฐานข้อมูลในภูมิภาคต่างๆ เพื่อปรับปรุงประสิทธิภาพจากฟังก์ชัน Edge คุณสามารถกำหนดค่า Redis ได้หลายภูมิภาคตามที่อธิบายไว้ที่นี่

ลิงก์

การจำกัดอัตราด้วย Next.js (ไม่ใช่ Edge)

มิดเดิลแวร์ Vercel Edge

SDK การจำกัดอัตรา