নিরাপদ, কম লেটেন্সি ফিল্টারিংয়ের জন্য Vercel Edge ফাংশন এবং Upstash Redis সহ ডেটা ফাঁস প্রতিরোধ করুন

ইন্টারনেটে ডেটা ফাঁস একটি প্রধান সমস্যা। স্ট্যাটিস্তার মতে, শুধুমাত্র 2022 সালে 400 মিলিয়নেরও বেশি মানুষ ডেটা লিক দ্বারা প্রভাবিত হয়েছিল। কেউ চায় না যে তাদের ডেটা পুরো ইন্টারনেটে ফাঁস হোক, তাই অনেক শিল্পে ব্যবহারকারীর গোপনীয়তাকে সম্মান করে এমন সুরক্ষিত অ্যাপ্লিকেশন তৈরি করা অত্যন্ত গুরুত্বপূর্ণ৷

ফাঁসের বিরুদ্ধে লড়াই করার একটি উপায় হল অন্যান্য পরিষেবা বা ব্যবহারকারীদের কাছে বিতরণ করার আগে সমস্যাযুক্ত ডেটা ফিল্টার করা। ফিল্টারিংয়ের কার্যক্ষমতার প্রভাব যতটা সম্ভব ছোট রাখার জন্য এই পদ্ধতির জন্য আপ-টু-ডেট ফিল্টার প্রয়োজন যাতে ডেটা স্লিপ না হয় এবং কম লেটেন্সি পরিকাঠামো হয়।

Redis® এবং Vercel Edge ফাংশনের জন্য Upstash একটি শক্তিশালী দল গঠন করে যা উভয় প্রয়োজনীয়তা পূরণ করার সময় সমস্যাটি মোকাবেলা করতে পারে। এই উভয় স্বল্প-বিলম্বিত সার্ভারহীন সমাধান আমাদের ব্যবহারকারীদের কাছাকাছি স্থাপন করা যেতে পারে। Vercel এর নতুন ক্রন বৈশিষ্ট্যের সাথে, আমরা ফিল্টার ডেটা নিয়মিত আপডেট করা নিশ্চিত করতে পারি।

এই ধরনের একটি ফিল্টার কীভাবে কাজ করতে পারে তা বোঝাতে, আমরা একটি ফ্রন্টএন্ড এবং ব্যাকএন্ড তৈরি করব যা অশ্লীলতা ফিল্টার করতে এই সার্ভারহীন প্রান্ত প্রযুক্তি ব্যবহার করে।

বৈশিষ্ট্যগুলি

৷

অ্যাপটি একটি দূরবর্তী API থেকে বর্তমান শব্দগুলির সাথে Redis ডাটাবেসের জন্য একটি Upstash আপডেট করতে Vercel-এর ক্রোন বৈশিষ্ট্য ব্যবহার করবে৷

আমাদের কাছে ডেটা পাওয়ার তিনটি উপায় থাকবে:

ফিল্টার করা পাঠ্য সহ একটি ওয়েবসাইট ফেরত দেওয়া।
ডেটা স্টোর থেকে ফিল্টার করা টেক্সট সহ JSON রিটার্ন করা।
টেক্সট গ্রহণ করা এবং ফিল্টার করা টেক্সট সহ JSON ফেরত দেওয়া।

প্রযুক্তি

আমরা Next.js দিয়ে অ্যাপটি তৈরি করব এবং Vercel-এ স্থাপন করব; এইভাবে, প্রান্ত ফাংশন ব্যবহার করার সময় আমাদের একটি বিরামহীন সার্ভারহীন বিকাশের অভিজ্ঞতা থাকবে।

আমরা Redis® এর জন্য Upstash কে ডেটা স্টোরেজ হিসাবে ব্যবহার করব কারণ এর কম লেটেন্সি এবং ব্যবহার সহজ।

উভয় পরিষেবাই বিনামূল্যের স্তর সহ আসে এবং চাহিদা অনুযায়ী মূল্য রয়েছে৷

৷

পূর্বশর্ত

পরিষেবার জন্য আমাদের অ্যাকাউন্ট দরকার:

GitHub আমাদের কোড আপলোড করতে যাতে Vercel এটি ডাউনলোড এবং স্থাপন করতে পারে
ভার্সেল হোম পেজ এবং এজ ফাংশন সহ আমাদের অ্যাপ্লিকেশন হোস্ট করতে
আপস্ট্যাশ শব্দের তালিকা সংরক্ষণ করতে যা আমরা ফিল্টার করতে চাই

বাস্তবায়ন

শুরু করার জন্য, আমরা একটি নতুন GitHub সংগ্রহস্থল তৈরি করি এবং নিশ্চিত করি। আমরা "একটি README ফাইল যোগ করুন" চেক করি, তাই এটি খালি নয়৷ যেহেতু রিপোজিটরি খালি নয়, গিটহাব আমাদের এটির জন্য একটি কোডস্পেস শুরু করার অনুমতি দেয়, যা Node.js এবং একটি Git-to-GitHub সংযোগের সাথে পূর্ব কনফিগার করা হয়।

নিরাপদ, কম লেটেন্সি ফিল্টারিংয়ের জন্য Vercel Edge ফাংশন এবং Upstash Redis সহ ডেটা ফাঁস প্রতিরোধ করুন চিত্র 1:কোডস্পেস শুরু করুন

প্রথমে, আমাদের একটি নতুন Next.js প্রজেক্ট তৈরি করতে হবে এবং নিম্নলিখিত কমান্ডগুলির সাহায্যে Upstash Redis ক্লায়েন্ট ইনস্টল করতে হবে:

$ npx create-next-app@latest --typescript
$ npm i @upstash/redis

রিফ্রেশ ফাংশন বাস্তবায়ন

আমরা প্রথম যে বৈশিষ্ট্যটি প্রয়োগ করব তা হল ফাংশন যা আমাদের খারাপ শব্দের তালিকাকে রিফ্রেশ করবে। এটি করতে, pages/api/refresh-list.ts এ একটি নতুন ফাইল তৈরি করুন নিম্নলিখিত বিষয়বস্তু সহ:

ফাইল pages/api/refresh-list.ts :

import { Redis } from "@upstash/redis";
 
export const config = { runtime: "edge" };
 
const redisClient = new Redis({
 url: process.env.UPSTASH_REDIS_URL,
 token: process.env.UPSTASH_REDIS_TOKEN,
});
 
export default async function handler() {
 const wordResponse = await fetch(
 "https://raw.githubusercontent.com/kay-is/List-of-Dirty-Naughty-Obscene-and-Otherwise-Bad-Words/master/en",
 );
 const words = await wordResponse.text();
 
 const redisCommands = redisClient.pipeline();
 words
 .trim()
 .split("\n")
 .forEach((word) => redisCommands.sadd("words", word));
 await redisCommands.exec();
}

আমরা প্রান্তে চালানোর জন্য ফাংশনটি কনফিগার করে শুরু করি। এটি এখানে অপরিহার্য নয় কারণ এই ফাংশনটি ব্যাকগ্রাউন্ডে চলবে, কিন্তু Vercel এজ ফাংশন ক্লাউডফ্লেয়ার ওয়ার্কার দ্বারা চালিত হয়, যা আমাদের ফেচ পদ্ধতি ব্যবহার করতে দেয়, যা Node.js স্থানীয়ভাবে সমর্থন করে না৷

হ্যান্ডলার Upstash Redis-এ খারাপ শব্দ সম্বলিত একটি টেক্সট ফাইল লোড করবে। পাইপলাইন বৈশিষ্ট্য নিশ্চিত করে যে আমরা সমস্ত Redis কমান্ডের সাথে শুধুমাত্র একটি অনুরোধ পাঠাই৷

আমরা শব্দ সংরক্ষণ করার জন্য একটি সেট ব্যবহার করি, তাই আমরা সদৃশ পাই না। এটি আমাদেরকে পরবর্তীতে একটি কমান্ডের সাথে স্ট্রিংগুলির অ্যারে হিসাবে সমস্ত শব্দ লোড করার অনুমতি দেয়৷

আমরা যদি ব্যক্তিগত ডেটা ফিল্টার করতে চাই, তাহলে ফিল্টারের ভিত্তি হিসাবে আমাদের ব্যবহারকারীদের ইমেল, ফোন নম্বর, নাম এবং ঠিকানাগুলি পেতে আমরা একটি অ্যাকাউন্ট ডাটাবেস ব্যবহার করতে পারি৷

Vercel কে বলতে আমরা এই ফাংশনটিকে একটি ক্রোন ফাংশন হিসাবে চাই, আমাদের নিম্নলিখিত বিষয়বস্তু সহ প্রজেক্ট রুটে একটি vercel.json ফাইল তৈরি করতে হবে:

ফাইল vercel.json :

{
 "crons": [
 {
 "path": "/api/refresh-list",
 "schedule": "0 10 * * *"
 }
 ]
}

এই কনফিগারেশনের ফলে Vercel প্রতিদিন 10:00 UTC-এ রিফ্রেশ-তালিকা ফাংশন কার্যকর করবে।

বিনামূল্যের ভার্সেল অ্যাকাউন্টগুলি প্রতিদিন শুধুমাত্র একটি স্বয়ংক্রিয় সম্পাদন সমর্থন করে। আমাদের উদাহরণের জন্য, এটি যথেষ্ট, কিন্তু যদি আমাদের কাছে এমন ডেটা থাকে যা প্রায়শই পরিবর্তিত হয়, তাহলে আমাদের আপডেট রেট বাড়াতে হবে।

ফিল্টার ইউটিলিটি বাস্তবায়ন

পরবর্তী বৈশিষ্ট্যটি হল একটি ইউটিলিটি ফাংশন যা আমাদের ডাটাবেসের শব্দগুলির সাথে সঙ্গতিপূর্ণ হলে একটি পাঠ্যে শব্দগুলিকে মুখোশ করে দেবে। utils/word-filter.ts-এ একটি নতুন ফাইল তৈরি করুন এবং নিম্নলিখিত কোড যোগ করুন।

ফাইল utils/word-filter.ts :

import { Redis } from "@upstash/redis";
 
const redisClient = new Redis({
 url: process.env.UPSTASH_REDIS_URL,
 token: process.env.UPSTASH_REDIS_TOKEN,
});
 
export async function filter(text: string) {
 const filteredWords = await redisClient.smembers("words");
 
 let maskedText = text;
 for (let word of filteredWords)
 maskedText = maskedText.replaceAll(new RegExp(word, "gi"), "[REDACTED]");
 
 return maskedText;
}

আবার, ফাংশনটি Upstash Redis ক্লায়েন্ট ব্যবহার করে, কিন্তু এইবার এটি আমাদের আগে সংরক্ষিত ডেটা লোড করে।

যেহেতু আমরা স্ট্রিংগুলির একটি অ্যারে পেয়েছি, আমরা কেবল এটিকে লুপ করতে পারি এবং একটি প্রতিস্থাপন ফাংশন কল করতে পারি যা পাঠ্যের প্রতিটি খারাপ শব্দকে "[REDACTED]" দিয়ে প্রতিস্থাপন করে।

এই ফাংশন এটি ফিল্টার আউট শব্দ ধরনের সম্পর্কে যত্ন না. এই ক্ষেত্রে, শব্দগুলি "কাজের জন্য নিরাপদ নয়", তবে ফিল্টার প্রক্রিয়াটি কেবলমাত্র আমরা আগে সংরক্ষিত ডেটার উপর নির্ভর করে৷

হোম পেজ বাস্তবায়ন

ফিল্টারটি কার্যকর দেখতে, আসুন pages/index.ts এর বিষয়বস্তু প্রতিস্থাপন করি নিম্নলিখিত সহ:

ফাইল pages/index.ts :

import Head from "next/head";
import { filter } from "@/utils/word-filter";
 
export const config = { runtime: "experimental-edge" };
 
interface HomeProps {
 maskedText: string;
}
 
export default function Home(props: HomeProps) {
 return (
 <>
 <Head>
 <title>Text with Filtered Words</title>
 </Head>
 <div>
 <h1>Text with Filtered Words</h1>
 <p>{props.maskedText}</p>
 </div>
 </>
 );
}
 
export async function getServerSideProps(): Promise<{ props: HomeProps }> {
 const maskedText = await filter(
 "He slipped and fell on his butt. Well, that wasn't very sexy."
 );
 return { props: { maskedText } };
}

কনফিগারেশন নিশ্চিত করে যে সবকিছু প্রান্তে কার্যকর করা হয়েছে, এমনকি সার্ভার-সাইড রেন্ডারিংও। এই Vercel বৈশিষ্ট্যটি এখনও পরীক্ষামূলক৷

৷

আকর্ষণীয় অংশ হল getServerSideProps ফাংশন, যা আমাদের filter ব্যবহার করে একটি স্ট্যাটিক টেক্সট আগে থেকে ফাংশন. এটি শুধুমাত্র সার্ভারে কল করা হয়, তাই আনফিল্টার করা ডেটা কখনই ক্লায়েন্টের কাছে যায় না৷

৷

একটি বাস্তব অ্যাপ্লিকেশনে, এই পাঠ্যটি ব্যক্তিগত ডেটা সহ একটি ডাটাবেস থেকে আসতে পারে যা প্রদর্শিত হওয়ার আগে পরিষ্কার করা প্রয়োজন৷

প্রথম API রুট বাস্তবায়ন

প্রথম API রুট হোম পেজের মত কাজ করে; এটি JSON এবং HTML প্রদান করে। pages/api/filtered-data.ts এ একটি ফাইল তৈরি করুন এই কোড সহ:

ফাইল pages/api/filtered-data.ts :

import { filter } from "@/utils/word-filter";
 
export const config = { runtime: "edge" };
 
export default async function handler() {
 const maskedText = await filter(
 "He slipped and fell on his butt. Well, that wasn't very sexy.",
 );
 
 return new Response(JSON.stringify({ text: maskedText }), {
 status: 200,
 headers: { "content-type": "application/json" },
 });
}

আবার, রানটাইম এজ, এবং ঠিক যেমন getServerSideProps ফাংশনের সাথে, আমরা একটি স্ট্যাটিক টেক্সট ব্যবহার করি।

দ্বিতীয় API রুট বাস্তবায়ন করা হচ্ছে

এই রুট অনুরোধের মাধ্যমে পাঠ্য গ্রহণ করে এবং ফিল্টার করা সংস্করণ ফেরত দেয়। pages/api/filter.ts এ একটি নতুন ফাইল তৈরি করুন এবং নিম্নলিখিত কোড যোগ করুন:

ফাইল pages/api/filter.ts :

import type { NextApiRequest } from "next";
 
import { filter } from "@/utils/word-filter";
 
export const config = { runtime: "edge" };
 
export default async function handler(request: NextApiRequest) {
 const { text } = await new Response(request.body).json();
 const maskedText = await filter(text);
 return new Response(JSON.stringify({ text: maskedText }), {
 status: 200,
 headers: { "content-type": "application/json" },
 });
}

এই সময়, আমরা যে পাঠ্যটি ফিল্টার করতে চাই তা পেতে আমাদের অবশ্যই বডি পার্স করতে হবে। Vercel এর এজ ফাংশনে, body একটি ReadableStream; যদি আমরা এটিকে Response এ রূপান্তর করি , আমরা ডেটা বের করতে নেটিভ JSON পার্সার ব্যবহার করতে পারি।

আমরা অনুরোধ থেকে ডেটা পাওয়ার পরে, সবকিছু আগের মতো কাজ করে৷

পুশ কোড পরিবর্তন

এখন সবকিছু বাস্তবায়িত হয়েছে, আমাদের এই কমান্ডগুলির সাথে আমাদের GitHub সংগ্রহস্থলে কোডটি পুশ করতে হবে:

$ git add -A
$ git commit -m "Init"
$ git push

এর পরে, কোডটি ভার্সেলের জন্য ডাউনলোড এবং স্থাপনের জন্য অনলাইনে উপলব্ধ৷

৷

ডিপ্লয়মেন্ট

আমাদের একটি Upstash Redis ডাটাবেস তৈরি করতে হবে, পরিবেশের ভেরিয়েবল এবং একটি Vercel প্রকল্পের জন্য শংসাপত্র পেতে৷

একটি Redis ডেটাবেস তৈরি করা

আমরা "ডেটাবেস তৈরি করুন" বোতামে ক্লিক করে Upstash কনসোলে একটি নতুন রেডিস ডাটাবেস তৈরি করতে পারি। চিত্র 2 কনফিগারেশন দেখায়। এই উদাহরণের জন্য, একটি আঞ্চলিক ডাটাবেসই যথেষ্ট, কিন্তু আপনার যদি বিশ্বব্যাপী বিতরণ করা ব্যবহারকারী থাকে এবং লেটেন্সি কম রাখতে চান, তাহলে আপনি গ্লোবাল টাইপও বেছে নিতে পারেন।

নিরাপদ, কম লেটেন্সি ফিল্টারিংয়ের জন্য Vercel Edge ফাংশন এবং Upstash Redis সহ ডেটা ফাঁস প্রতিরোধ করুন

চিত্র 2:একটি নতুন ডাটাবেস তৈরি করুন

তৈরির পরে, আমরা REST API বিভাগের অধীনে আমাদের পরিবেশ ভেরিয়েবলের জন্য প্রয়োজনীয় URL এবং টোকেন খুঁজে পেতে পারি; এটি চিত্র 3 এর মত কিছু দেখায়।

চিত্র 3:ডেটাবেস শংসাপত্র

একটি Vercel প্রকল্প তৈরি করা হচ্ছে

একটি নতুন Vercel প্রকল্প তৈরি করতে, একটি ব্রাউজারে Vercel ড্যাশবোর্ড খুলুন এবং কেন্দ্রে "একটি নতুন প্রকল্প তৈরি করুন" এ ক্লিক করুন৷ আপনার GitHub অ্যাকাউন্টের সাথে Vercel সংযোগ করার পরে, আপনি আমদানি করার জন্য একটি সংগ্রহস্থল চয়ন করতে পারেন৷

৷

আমরা ডিফল্ট কনফিগারেশন রাখতে পারি এবং উপরে থেকে Upstash Redis শংসাপত্রের সাথে আমাদের পরিবেশ ভেরিয়েবল যোগ করতে পারি। চিত্র 4 রেফারেন্সের জন্য Vercel এর তৈরি UI দেখায়৷

৷

চিত্র 4:Vercel প্রকল্প তৈরি

পরিবেশ ভেরিয়েবলের নাম হল UPSTASH_REDIS_URL এবং UPSTASH_REDIS_TOKEN . আমরা তাদের তৈরি করতে পূর্ববর্তী ধাপের মান ব্যবহার করি।

"Deploy" এ ক্লিক করার পর Vercel আমাদের GitHub রিপোজিটরি থেকে কোড ডাউনলোড ও স্থাপন করবে।

অ্যাপটি পরীক্ষা করা হচ্ছে

মোতায়েন করার পরে, ক্রোন কাজটি এখনও চালানো হয়নি বলে অ্যাপটি এখনও ফিল্টার করা শব্দগুলি দেখাতে থাকবে। কিন্তু আমরা ম্যানুয়ালি প্রথম এক্সিকিউশন করতে পারি। "ড্যাশবোর্ডে চালিয়ে যান" বোতামে ক্লিক করুন এবং "ক্রোন জবস" ট্যাবটি নির্বাচন করুন৷

এখানে আমরা আমাদের /api/refresh-list দেখতে পাচ্ছি ক্লিক করার জন্য একটি "রান" বোতাম সহ ফাংশন৷

ফাংশনটি শেষ হলে, আমরা "প্রকল্প" ট্যাবে নেভিগেট করি এবং "ডোমেন" এর অধীনে একটি ইউআরএলে ক্লিক করি। এটি ব্রাউজারে ফিল্টার করা পাঠ্য সহ ওয়েবসাইট খুলবে; এটি চিত্র 5 এর মত হওয়া উচিত।

নিরাপদ, কম লেটেন্সি ফিল্টারিংয়ের জন্য Vercel Edge ফাংশন এবং Upstash Redis সহ ডেটা ফাঁস প্রতিরোধ করুন চিত্র 5:ফিল্টার করা ওয়েবসাইট

যদি আমরা /api/filtered-data যোগ করি আমাদের URL-এ, আমরা দেখতে পাচ্ছি যে এটি API প্রতিক্রিয়াগুলির জন্যও কাজ করে। সেগুলি নিম্নলিখিত উদাহরণের মতো হওয়া উচিত:

{
 "text": "He slipped and fell on his [REDACTED]. Well, that wasn't very [REDACTED]y."
}

অবশেষে, যদি আমরা /api/filter এ cURL এর মাধ্যমে একটি অনুরোধ পাঠাই এন্ডপয়েন্ট, আমরা আমাদের কাস্টম টেক্সট ফিল্টার করি। <PROJECT> প্রতিস্থাপন করা নিশ্চিত করুন আপনার Vercel প্রকল্পের সাথে।

$ curl -X POST https://<PROJECT>.vercel.app/api/filter \
 -H "Content-Type: application/json" \
 -d '{"text":"He fell on his butt."}'

প্রতিক্রিয়া:

{
 "text": "He fell on his [REDACTED]."
}

পরবর্তী কি

এই টিউটোরিয়ালের পরে, আপনি নিজেকে জিজ্ঞাসা করতে পারেন যে ডেটা আপডেট হলে কি হবে, কিন্তু ক্রন জব ডেটাবেস আপডেট করেনি। ভাল পর্যবেক্ষণ!

একটি ক্রন কাজ আমাদের রিফ্রেশ ফাংশনকে ট্রিগার করে, কিন্তু এটি এখনও একটি নিয়মিত API ফাংশন, তাই আমরা এটিকে আমাদের ইচ্ছামত কল করতে পারি।

একটি বাস্তব ডেটা ফিল্টারের ক্ষেত্রে, আমরা ডেটা পরিবর্তনের প্রতিক্রিয়া হিসাবে ফাংশনটি ট্রিগার করতে চাই, তবে বাস্তবায়নের বিবরণগুলি আমাদের ফিল্টারগুলির জন্য ভিত্তি হিসাবে আমরা যে ডেটা স্টোরেজ ব্যবহার করি তার উপর নির্ভর করে। তাই, নির্মাণ করার সময় এটি মনে রাখবেন!

অতিরিক্ত সম্পদ

আপনি GitHub-এ সম্পূর্ণ প্রকল্পটি খুঁজে পেতে পারেন।