Kiểm soát lưu lượng truy cập theo quốc gia liền mạch cho các ứng dụng Next.js với Vercel Edge &Upstash Edge Flag

Trong bài đăng này, chúng tôi sẽ hướng dẫn cách chặn lưu lượng truy cập vào ứng dụng web của bạn từ một quốc gia. Bạn có thể áp dụng logic tương tự để quản lý lưu lượng truy cập bằng các bộ lọc khác (địa chỉ IP, tác nhân người dùng, v.v.). Chúng tôi hướng đến một giải pháp tách rời, gọn nhẹ và năng động:

• Tôi không cần cập nhật và triển khai mã để cập nhật quốc gia.
• Nó phải có chi phí tối thiểu cho ứng dụng của tôi.

Chúng tôi sẽ sử dụng Vercel Edge Middleware và Upstash Edge Flags.

Phần mềm trung gian Vercel Edge

Phần mềm trung gian Vercel Edge là một mã chặn các yêu cầu web trước khi được chương trình phụ trợ xử lý. Chúng tôi sẽ sử dụng nó để kiểm tra quốc gia và tác nhân người dùng vì:

• Nó nhanh và rẻ.
• Đã tách khỏi ứng dụng của bạn.

Cờ cạnh trên

Thực tế, bạn có thể kiểm tra quốc gia và chặn lưu lượng truy cập bằng một câu lệnh if đơn giản trong mã phần mềm trung gian biên của mình như sau:

const BLOCKED_COUNTRY = "BAD_COUNTRY";
 
export function middleware(req: NextRequest) {
 const country = req.geo.country;
 
 if (country === BLOCKED_COUNTRY) {
 return new Response("Blocked ", { status: 451 });
 }
 return new Response(`Greetings`);
}

Vậy tại sao chúng ta cần cờ cạnh? Cờ biên sẽ cho phép chúng tôi quản lý các quy tắc mà không cần cập nhật mã.

Hãy bắt đầu..

Bước 1:Thiết lập Redis và Edge Flag

Tạo cơ sở dữ liệu Redis trên Upstash Console. Để có hiệu suất tốt nhất, hãy chọn toàn cầu và khu vực mà người dùng có thể sẽ đến.

Đi tới trang Edge flags và chọn cơ sở dữ liệu bạn vừa tạo. Tạo một lá cờ mới với tên blockTraffic . Sau đó thêm quy tắc cho các quốc gia bị chặn:Country is in array United States -> on

Lưu và kích hoạt cờ.

Cờ trên sẽ được bật nếu yêu cầu có nguồn gốc từ Hoa Kỳ.

Bước 2:Thiết lập dự án Next.js

Tạo một ứng dụng Next.js.

npx create-next-app@latest --typescript

Cài đặt gói @upstash:

$ npm install @upstash/edge-flags @upstash/redis

Tạo middleware.ts (cấp cao nhất trong thư mục dự án của bạn):

import { NextRequest, NextResponse } from "next/server";
 
import { Client as EdgeFlags } from "@upstash/edge-flags";
import { Redis } from "@upstash/redis";
 
const edgeFlags = new EdgeFlags({ redis: Redis.fromEnv() });
export default async function middleware(
 req: NextRequest,
): Promise<NextResponse> {
 const enabled = await edgeFlags.getFlag("blockTraffic", req.geo ?? {});
 
 if (!enabled) {
 const url = new URL(req.url);
 url.pathname = "/blocked";
 return NextResponse.rewrite(url);
 }
 
 return NextResponse.next();
}
 
export const config = {
 matcher: "/",
};

Hãy tạo một trang cho người bị chặn:

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

Thế thôi! Bây giờ bạn có thể triển khai ứng dụng lên Vercel:vercel deploy

Đảm bảo thêm các biến môi trường vào Vercel bằng cách sao chép chúng từ bảng điều khiển Upstash hoặc bằng cách sử dụng tích hợp Upstash.

Truy cập trang này, bạn sẽ được chuyển hướng đến trang bị chặn nếu bạn ở Hoa Kỳ. Kiểm tra các quốc gia khác nhau bằng VPN.

Định vị địa lý đang phát triển

Dữ liệu vị trí địa lý không có sẵn tại địa phương. Bạn phải triển khai Vercel để kiểm thử ứng dụng.

Liên kết

Tài liệu về cờ biên

Phần mềm trung gian Vercel Edge