इस पोस्ट में, हम दिखाएंगे कि अपने वेब ऐप पर किसी देश से ट्रैफिक को कैसे ब्लॉक करें। आप अन्य फ़िल्टर (IP एड्रेस, यूजर-एजेंट आदि) के साथ ट्रैफिक प्रबंधित करने के लिए उसी तर्क को लागू कर सकते हैं। हम एक डिकॉपल्ड, लाइटवेट और डायनामिक समाधान का लक्ष्य रखते हैं:
- मुझे देश को अपडेट करने के लिए कोड को अपडेट और डेप्लॉय नहीं करना चाहिए।
- इसका मेरे एप्लिकेशन पर न्यूनतम ओवरहेड और लागत होनी चाहिए।
हम Vercel Edge Middleware और Upstash Edge Flags का उपयोग करेंगे।
Vercel Edge Middleware
Vercel Edge मिडलवेयर एक कोड है जो बैकएंड द्वारा प्रोसेस किए जाने से पहले वेब अनुरोधों को इंटरसेप्ट करता है। हम इसका उपयोग देश और यूजर एजेंट की जांच के लिए करेंगे क्योंकि:
- यह तेज़ और सस्ता है।
- आपके एप्लिकेशन से डिकॉपल्ड है।
Upstash Edge Flags
वास्तव में आप एज मिडलवेयर कोड में एक साधारण if स्टेटमेंट के साथ देश की जांच कर सकते हैं और ट्रैफिक ब्लॉक कर सकते हैं जैसा कि नीचे दिखाया गया है:
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`);
}तो हमें एज फ्लैग की आवश्यकता क्यों है? एज फ्लैग हमें कोड को अपडेट किए बिना नियमों को प्रबंधित करने में सक्षम बनाएंगे।
आइए शुरू करें..
चरण 1: Redis और एज फ्लैग सेटअप
Upstash Console पर एक Redis डेटाबेस बनाएं। सर्वोत्तम प्रदर्शन के लिए, ग्लोबल और उन क्षेत्रों का चयन करें जहां यूजर्स के होने की संभावना है।
Edge flags पेज पर जाएं और आपके द्वारा अभी बनाए गए डेटाबेस का चयन करें। blockTraffic नाम से एक नया फ्लैग बनाएं। फिर ब्लॉक किए गए देशों के लिए एक नियम जोड़ें: Country is in array United States -> on
सेव करें और फ्लैग को सक्षम करें।
उपरोक्त फ्लैग सक्षम हो जाएगा यदि अनुरोध संयुक्त राज्य अमेरिका से आ रहा है।
चरण 2: Next.js प्रोजेक्ट सेटअप
एक Next.js एप्लिकेशन बनाएं।
npx create-next-app@latest --typescript@upstash पैकेज इंस्टॉल करें:
$ npm install @upstash/edge-flags @upstash/redisमिडलवेयर.ts बनाएं (आपके प्रोजेक्ट फोल्डर में शीर्ष स्तर पर):
/middleware.ts
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: "/", };ब्लॉक किए गए के लिए एक पेज बनाएं:
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
सुनिश्चित करें कि एनवायरनमेंट वेरिएबल को Vercel में या तो Upstash कंसोल से कॉपी करके या Upstash इंटीग्रेशन का उपयोग करके जोड़ा गया है।
पेज पर जाएं, यदि आप US में हैं तो आपको ब्लॉक पेज पर रीडायरेक्ट किया जाना चाहिए। VPN का उपयोग करके विभिन्न देशों का परीक्षण करें।
विकास में जियोलोकेशन
जियोलोकेशन डेटा स्थानीय रूप से उपलब्ध नहीं है। ऐप का परीक्षण करने के लिए आपको Vercel पर डेप्लॉय करना होगा।
लिंक
Edge flags डॉक्यूमेंटेशन
Vercel Edge मिडलवेयर
