Vercel Edge এবং Upstash Edge ফ্ল্যাগ সহ Next.js অ্যাপের জন্য বিরামহীন দেশ-ভিত্তিক ট্রাফিক নিয়ন্ত্রণ

এই পোস্টে, আমরা দেখাব কিভাবে একটি দেশ থেকে আপনার ওয়েব অ্যাপে ট্রাফিক ব্লক করতে হয়। আপনি অন্যান্য ফিল্টার (আইপি ঠিকানা, ব্যবহারকারী-এজেন্ট ইত্যাদি) দিয়ে ট্রাফিক পরিচালনা করতে একই যুক্তি প্রয়োগ করতে পারেন। আমরা একটি দ্বৈত, হালকা এবং গতিশীল সমাধান লক্ষ্য করি:

• দেশ আপডেট করার জন্য আমার কোড আপডেট এবং স্থাপন করার দরকার নেই।
• আমার আবেদনে এটির ন্যূনতম ওভারহেড এবং খরচ থাকা উচিত।

আমরা Vercel Edge Middleware এবং Upstash Edge Flags ব্যবহার করব।

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

ভার্সেল এজ মিডলওয়্যার হল একটি কোড যা ব্যাকএন্ড দ্বারা প্রক্রিয়া করার আগে ওয়েব অনুরোধগুলিকে বাধা দেয়। আমরা দেশ এবং ব্যবহারকারী এজেন্ট পরীক্ষা করার জন্য এটি ব্যবহার করব কারণ:

• এটি দ্রুত এবং সস্তা।
• আপনার আবেদন থেকে ডিকপলড।

আপস্ট্যাশ এজ ফ্ল্যাগ

প্রকৃতপক্ষে আপনি নীচের মত আপনার প্রান্ত মিডলওয়্যার কোডে একটি সাধারণ ইফ স্টেটমেন্ট দিয়ে দেশ এবং ট্রাফিক ব্লক করতে পারেন:

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:রেডিস এবং এজ ফ্ল্যাগ সেটআপ

Upstash কনসোলে একটি Redis ডাটাবেস তৈরি করুন। সেরা পারফরম্যান্সের জন্য, বিশ্বব্যাপী এবং ব্যবহারকারীদের হতে পারে এমন অঞ্চলগুলি নির্বাচন করুন৷

এজ পতাকা পৃষ্ঠায় যান এবং আপনার তৈরি করা ডাটাবেস নির্বাচন করুন। 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

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

অবরুদ্ধদের জন্য একটি পৃষ্ঠা তৈরি করা যাক:

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

Upstash কনসোল থেকে অনুলিপি করে অথবা Upstash ইন্টিগ্রেশন ব্যবহার করে Vercel-এ এনভায়রনমেন্ট ভেরিয়েবল যোগ করা নিশ্চিত করুন।

পৃষ্ঠাটি দেখুন, আপনি যদি মার্কিন যুক্তরাষ্ট্রে থাকেন তবে আপনাকে অবরুদ্ধ পৃষ্ঠায় পুনঃনির্দেশিত করা উচিত। VPN ব্যবহার করে বিভিন্ন দেশ পরীক্ষা করুন৷

উন্নয়নে ভৌগলিক অবস্থান

ভূ-অবস্থান ডেটা স্থানীয়ভাবে উপলব্ধ নয়। আপনাকে ভার্সেল-এ স্থাপন করতে হবে অ্যাপটি পরীক্ষা করে দেখতে।

লিঙ্কগুলি

এজ পতাকা ডকুমেন্টেশন

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