এই পোস্টে, আমরা দেখাব কীভাবে আপনার ওয়েব অ্যাপে ট্রাফিক একটি দেশ থেকে ব্লক করতে হয়। আপনি অন্য ফিল্টার (IP ঠিকানা, user-agent ইত্যাদি) দিয়ে ট্রাফিক ম্যানেজ করতে একই লজিক প্রয়োগ করতে পারেন। আমরা একটি ডিকাপলড, লাইটওয়েট এবং ডাইনামিক সমাধান লক্ষ্য করছি:
- দেশ আপডেট করার জন্য কোড আপডেট এবং ডিপ্লয় করতে হবে না।
- এটি আমার অ্যাপ্লিকেশনে ন্যূনতম ওভারহেড এবং খরচ থাকবে।
আমরা Vercel Edge Middleware এবং আপস্ট্যাশ Edge Flags ব্যবহার করব।
Vercel Edge Middleware
Vercel Edge middleware হলো একটি কোড যা ব্যাকএন্ড দ্বারা প্রসেস হওয়ার আগে ওয়েব রিকোয়েস্ট ইন্টারসেপ্ট করে। আমরা এটি দেশ এবং user agent চেক করতে ব্যবহার করব কারণ:
- এটি দ্রুত এবং সস্তা।
- আপনার অ্যাপ্লিকেশন থেকে ডিকাপলড।
আপস্ট্যাশ Edge Flags
বস্তুতঃ আপনি একটি সিম্পল if স্টেটমেন্ট আপনার edge middleware কোডে ব্যবহার করে দেশ চেক করে ট্রাফিক ব্লক করতে পারেন নিচের মতো:
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`);
}তাহলে Edge Flags কেন দরকার? Edge Flags আমাদের কোড আপডেট ছাড়া রুল ম্যানেজ করতে সক্ষম করবে।
চলুন শুরু করি..
স্টেপ ১: রেডিস এবং Edge Flags সেটআপ
আপস্ট্যাশ কনসোলে একটি রেডিস ডেটাবেস তৈরি করুন। সেরা পারফরম্যান্সের জন্য, গ্লোবাল সিলেক্ট করুন এবং সেই রিজনগুলো যেটি ব্যবহারকারীরা সম্ভবত থাকবে।
Edge flags পেজে যান এবং আপনি যা তৈরি করেছেন সেটি ডেটাবেস সিলেক্ট করুন। blockTraffic নামে একটি নতুন ফ্ল্যাগ তৈরি করুন। তারপর ব্লক করা দেশের জন্য একটি রুল যোগ করুন: Country is in array United States -> on
সেভ করুন এবং ফ্ল্যাগটি এনেবল করুন।
উপরের ফ্ল্যাগটি সক্রিয় হবে যদি রিকোয়েস্ট ইউনাইটেড স্টেটস থেকে উৎপন্ন হয়।
স্টেপ ২: Next.js প্রজেক্ট সেটআপ
একটি Next.js অ্যাপ্লিকেশন তৈরি করুন।
npx create-next-app@latest --typescript@upstash প্যাকেজগুলো ইনস্টল করুন:
$ npm install @upstash/edge-flags @upstash/redisপ্রজেক্ট ফোল্ডারের টপ লেভেলে middleware.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 (
Access blocked.
);
}এটাই সব! এখন অ্যাপটি Vercel-এ ডিপ্লয় করুন: vercel deploy
নিশ্চিত করুন এনভায়রনমেন্ট ভেরিয়েবলগুলো Vercel-এ যোগ করা হয়েছে আপস্ট্যাশ কনসোল থেকে কপি করে বা আপস্ট্যাশ ইন্টিগ্রেশন ব্যবহার করে।
পেজটি ভিজিট করুন, আপনি যদি US-এ থাকেন তবে ব্লক করা পেজে রিডাইরেক্ট হবেন। VPN ব্যবহার করে বিভিন্ন দেশ টেস্ট করুন।
ডেভেলপমেন্টে জিওলোকেশন
জিওলোকেশন ডেটা লোকালি উপলব্ধ নয়। অ্যাপটি Vercel-এ ডিপ্লয় করতে হবে টেস্ট করার জন্য।
লিংকসমূহ
Edge flags ডকুমেন্টেশন
Vercel Edge middleware
