Astro, Upstash, এবং GitHub এর সাথে একটি বিনামূল্যে, ওপেন-সোর্স LinkTree বিকল্প তৈরি করুন

এই পোস্টে, আমি কিভাবে itsmy.fyi (LinkTree-এর একটি ওপেন-সোর্স বিকল্প) Upstash, Astro, GitHuband Edgio-এর সাথে তৈরি করা হয়েছে তা নিয়ে কথা বলছি। Upstash আমাকে সমস্ত ব্যবহারকারীর (CRUD) ডেটা পরিচালনা করতে সাহায্য করেছে, CRUD ক্রিয়াকলাপের জন্য GitHub API-এর তুলনায় ওয়েজেনারাস রেট সীমিত করার প্রস্তাব দিয়েছে, এবং গ্রানুলার রেট সীমিতকরণ কার্যকর করেছে৷

আমরা কি ব্যবহার করব

• অ্যাস্ট্রো (ফ্রন্ট-এন্ড এবং ব্যাক-এন্ড)
• Upstash (রেট লিমিটিং এবং CRUD অপারেশন)
• GitHub ইস্যু এবং ওয়েবহুকস (ব্যবহারকারীর প্রোফাইল পরিচালনা করতে পাবলিক সিএমএস)
• টেইলউইন্ড সিএসএস (স্টাইলিং)
• Edgio (ডিপ্লয়মেন্ট)

আপনার যা প্রয়োজন

• একটি GitHub অ্যাকাউন্ট
• ডাটাবেস তৈরি করার জন্য একটি Upstash অ্যাকাউন্ট

Upstash Redis সেট আপ করা হচ্ছে

একবার আপনি একটি Upstash অ্যাকাউন্ট তৈরি করেছেন এবং লগ ইন করলে আপনি Redis ট্যাবে যান এবং একটি ডাটাবেস তৈরি করতে যাচ্ছেন৷

আপনি আপনার ডাটাবেস তৈরি করার পরে, আপনি তারপরে বিশদ ট্যাবে যাচ্ছেন৷ যতক্ষণ না আপনি 05 খুঁজে না পান ততক্ষণ নিচে স্ক্রোল করুন বিভাগ বিষয়বস্তু অনুলিপি করুন এবং এটি নিরাপদ কোথাও সংরক্ষণ করুন৷

এছাড়াও, যতক্ষণ না আপনি REST API বিভাগটি খুঁজে না পান এবং .env বোতামটি নির্বাচন না করেন ততক্ষণ নিচে স্ক্রোল করুন৷ সামগ্রীটি অনুলিপি করুন এবং এটিকে নিরাপদ কোথাও সংরক্ষণ করুন৷

প্রকল্প সেট আপ করা হচ্ছে

সেট আপ করতে, শুধু অ্যাপ রেপো ক্লোন করুন এবং এর মধ্যে যা আছে তা শিখতে এই টিউটোরিয়ালটি অনুসরণ করুন৷ প্রকল্পটি ফর্ক করতে, চালান:

git clone https://github.com/rishi-raj-jain/itsmy.fyi
cd itsmy.fyi
yarn install

একবার আপনি রেপো ক্লোন করার পরে, আপনি একটি .env ফাইল তৈরি করতে যাচ্ছেন। আপনি উপরের বিভাগগুলি থেকে আমরা যে আইটেমগুলি সংরক্ষণ করেছি তা যোগ করতে চলেছেন৷

এটি দেখতে এইরকম কিছু হওয়া উচিত:

# Obtained from your GitHub repo
GITHUB_API_TOKEN="to_create_and_update_github_comments"
GITHUB_WEBHOOK_SECRET="if_you_are_matching_github_webhooks_sha256"
 
# Obtained from the steps as above
UPSTASH_DB="your_upstash_redis_from_above"
UPSTASH_REDIS_REST_URL="your_upstash_redis_rest__url_from_above"
UPSTASH_REDIS_REST_TOKEN="your_upstash_redis_rest__token_from_above"

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

yarn run edgio:dev

রিপোজিটরি স্ট্রাকচার

এই প্রকল্পের জন্য প্রধান ফোল্ডার গঠন. আমি সেই ফাইলগুলিকে লাল রঙে চক্কর দিয়েছি যেগুলি এই পোস্টে আরও আলোচনা করা হবে যা CRUD অপারেশন, রেট লিমিটিং এবং যে ফাইলগুলিতে সেগুলি উল্লেখ করা হয়েছে সেগুলি নিয়ে আলোচনা করা হবে৷

উচ্চ-স্তরের ডেটা ফ্লো

এটি কীভাবে ডেটা প্রবাহিত হয় তার একটি উচ্চ-স্তরের চিত্র।

• যদি কোনো ব্যবহারকারী itsmy.fyi/me/slug পরিদর্শন করে এবং এই পৃষ্ঠার প্রতিক্রিয়া ক্যাশ করা না হয় (বা পুনরায় যাচাই করা হচ্ছে), এটি getUserInfo ফাংশনকে কল করে যা Upstash DB থেকে ব্যবহারকারী json পুনরুদ্ধার করে
• যদি কোনো ব্যবহারকারী একটি গিটহাব ইস্যু তৈরি করে, আপডেট করে বা মুছে দেয়, গিটহাব একটি ওয়েবহুক ট্রিগার করে যা একটি এন্ডপয়েন্টে পোস্ট করে। সেই এন্ডপয়েন্টে, অনুরোধকৃত পরিবর্তন করা যায় কিনা তা মূল্যায়ন করতে প্রথমে Upstash রেট লিমিটিং ব্যবহার করা হয় এবং তারপর Upstash ব্যবহার করে ব্যবহারকারী json(গুলি) তৈরি, আপডেট বা মুছে ফেলা হয়।

Upstash Redis এর মাধ্যমে ব্যবহারকারীর প্রোফাইল(গুলি) CRUD অপারেশনগুলি

এই বিভাগে, আমরা কীভাবে ব্যবহারকারীর প্রোফাইল(গুলি) এর জন্য ডেটা আনা, আপডেট করা এবং মুছে ফেলা হয় তা গভীরভাবে আলোচনা করব। আমরা Upstash এর ক্রমাগত ব্যবহার করি (17 এর মাধ্যমে ) ডেটা আনতে এবং প্রদর্শন করতে।

কেন আমি CRUD অপারেশনের জন্য GitHub থেকে Upstash এ চলে গেলাম?

যখন আমি ডাটা ম্যানেজমেন্টের উৎস হিসেবে GitHub দিয়ে শুরু করেছি:GitHub Issuesas ডেটা ফর্ম থেকে GitHub Webhuoks থেকে CRUD ব্যবহারকারী jsons থেকে রিপোজিটরির মধ্যে, GitHub REST API-এর সীমাবদ্ধতা:20 প্ল্যাটফর্মের উদ্দিষ্ট ব্যবহারকে সীমাবদ্ধ এবং প্রত্যাহার করে বলে মনে হচ্ছে।

Upstash আরও ভালভাবে দাঁড়িয়েছে কারণ এটি আমাকে তাদের ফ্রিপ্ল্যানে শুরু করার জন্য প্রতিদিন 10K কমান্ড অফার করে এবং তারপরে আমার ব্যবহার স্কেল করার সাথে সাথে খুব কম হার। এই ধরনের পন্থা আমাকে প্রায় বিনা খরচে একটি বৃহত্তর ব্যবহারকারী অধিগ্রহণ করার অনুমতি দেয় এবং ডাটাবেসের স্কেলিং এবং খরচ পরিচালনার বিষয়ে চিন্তা না করে দ্রুত পুনরাবৃত্তি করতে পারে।

getUserInfo:ব্যবহারকারীর প্রোফাইল ফাংশন আনা হচ্ছে

37 ফাংশন ioredis এর 40 ব্যবহার করে একটি অনন্য 57 দ্বারা চিহ্নিত প্রাসঙ্গিক ব্যবহারকারী প্রোফাইল পৃষ্ঠার জন্য Upstash-এর কাছে একটি API অনুরোধ করতে কী হিসাবে স্লগের মাধ্যমে .যদি সেই ব্যবহারকারীর প্রোফাইলটি উপস্থিত না থাকে (অথবা একটি ত্রুটি থাকে), ফাংশনটি 68 সহ একটি বস্তুকে ফেরত দেওয়ার জন্য সেট করা হয় যাতে ব্যবহারকারীকে Astro-এর গতিশীল রুটে স্বয়ংক্রিয়ভাবে 404-এ রিডাইরেক্ট করা যায়।

// File: lib/Upstash/users/get.js
// Read User Profile Code
 
import redis from "../setup";
 
export async function getUserInfo(slug) {
 try {
 const userData = await redis.hget("profiles", slug);
 const parsedData = JSON.parse(userData);
 if (parsedData.slug === slug) {
 return { ...parsedData, code: 1 };
 }
 return {
 code: 0,
 error: `slug doesn't match for the user.`,
 };
 } catch (e) {
 const error = e.message || e.toString();
 console.log(error);
 return {
 code: 0,
 error,
 };
 }
}

একইভাবে, অবশিষ্ট CRUD অপারেশনগুলি নিম্নরূপ:

import redis from "../setup";
 
// File: @/lib/Upstash/users/delete.js
// Delete User Profile Code
export async function deleteUserInfo(slug) {
 try {
 await redis.hdel("profiles", slug);
 return { code: 1 };
 } catch (e) {
 console.log(e.message || e.toString());
 return {
 code: 0,
 };
 }
}
 
// File: @/lib/Upstash/users/post.js
// Create/Update User Profile Code
export async function postUserInfo(data) {
 try {
 await redis.hset("profiles", data.slug, JSON.stringify(data));
 return { code: 1 };
 } catch (e) {
 const error = e.message || e.toString();
 console.log(error);
 return {
 code: 0,
 error,
 };
 }
}

দর সীমাবদ্ধতা

Edgio-এর সাথে সার্ভারহীন পরিবেশে রেট-লিমিটিং বাস্তবায়ন করতে, আমরা Upstash Redis ডাটাবেস ক্লায়েন্ট এবং 73 নামে একটি রেট লিমিটার লাইব্রেরি ব্যবহার করি। .

// Reference Function to ratelimiting
 
import { Ratelimit } from "@upstash/ratelimit";
import { Redis } from "@upstash/redis";
 
import { getENV } from "@/lib/env";
 
const url = getENV("UPSTASH_REDIS_REST_URL");
const token = getENV("UPSTASH_REDIS_REST_TOKEN");
 
export const ratelimit = (number, time) => {
 if (url && token) {
 return new Ratelimit({
 redis: new Redis({
 url,
 token,
 }),
 limiter: Ratelimit.fixedWindow(number, time),
 });
 }
 return;
};

রেট লিমিটিং ব্যবহার করে, আমি নিম্নলিখিতগুলি অর্জন করতে সক্ষম হয়েছি:

ক. পরিষেবাটি ব্যবহার করুন - সম্পূর্ণ বিনামূল্যে এবং সীমাহীন

রেট লিমিটিং ব্যবহার করে, আমি প্রোফাইল তৈরি APIকে সর্বজনীনভাবে প্রকাশ করতে সক্ষম হয়েছি! এটি আমাকে সিস্টেমের সুবিধাগুলি প্রদর্শন করতে দেয় যেমন GUI এর মাধ্যমে একটি প্রোফাইল সেটআপ করা সহজ৷ আক্ষরিক অর্থে যে কেউ ওয়েবসাইট (itsmy.fyi) এর মাধ্যমে এক সপ্তাহে 3টি প্রোফাইল তৈরি করতে পারে এবং প্রোফাইলের মতো বৈশিষ্ট্যগুলিতে সীমাহীন অ্যাক্সেসের জন্য, প্রোফাইল সম্পাদনা করার জন্য সীমাহীনভাবে GUI তৈরি করার উপায় রয়েছে৷ প্রোফাইল। আমরা কী হিসাবে IP ঠিকানার উপর ভিত্তি করে সপ্তাহে 3টি প্রোফাইলের হার সীমা কার্যকর করতে সক্ষম।

// Rate limit 3 profiles in a week via the web for a user
const ratelimitUser = ratelimit(3, 7 * 24 * 60 * 60 + " s");
 
if (rateLimiter) {
 // Look at the x-0-client-ip set by Edgio in serverless
 const result = await rateLimiter.limit("x-0-client-ip");
 limit = result.limit;
 remaining = result.remaining;
 if (!result.success) {
 // Return a message
 }
}

বি. একজন ব্যবহারকারীর দ্বারা সম্পাদনার সংখ্যায় দানাদার সংযম প্রয়োগ করুন

এছাড়াও, রেট লিমিটিং এর মাধ্যমে আমরা একজন ব্যবহারকারীর GitHub ব্যবহারকারীর নামের উপর ভিত্তি করে মিনিটে করা সম্পাদনার সংখ্যা নিয়ন্ত্রণ করতে সক্ষম হয়েছি। এখন পর্যন্ত, আমরা তাদের এক মিনিটের মধ্যে 3টি পর্যন্ত পরিবর্তন করার অনুমতি দিই৷ এটি কোনো অদেখা স্প্যাম কমাতে সাহায্য করবে৷

const rateLimiter = ratelimit(3, "60 s");
 
if (rateLimiter) {
 const result = await rateLimiter.limit(context.sender.login);
 limit = result.limit;
 remaining = result.remaining;
 if (!result.success) {
 return {
 headers: {
 "X-RateLimit-Limit": limit,
 "X-RateLimit-Remaining": remaining,
 },
 body: JSON.stringify({
 message:
 "Too many updates in 1 minute. Please try again in a few minutes.",
 }),
 };
 }
}

সকল ব্যবহারকারী প্রোফাইলের জন্য প্রান্তে stale-while-revalidate প্রয়োগ করা

নিচের কোডটি বর্ণনা করে যে কিভাবে ক্যাশে হিট রেট উন্নত করতে Stale while Revalidate এর ধারণাটি ব্যবহার করতে হয়। কোডে ( 81-এ ), 90 ফাংশনটি সমস্ত ব্যবহারকারীর প্রোফাইলের সাথে মেলে (যেটি 109 দিয়ে শুরু হয় । শুধুমাত্র এক সেকেন্ডের জন্য ডেটা ক্যাশ করা হয়েছে তা নিশ্চিত করতে। 122 ক্যাশে রিফ্রেশ করার সময় ক্যাশে থেকে সরাসরি ডেটা পরিবেশন করার জন্য বিকল্পটি একটি বছর হিসাবে সেট করা হয়েছে৷

// User path(s)
router.match("/me/:path", ({ cache, removeUpstreamResponseHeader }) => {
 // Remove the cache-control header from Astro's standalone server
 removeUpstreamResponseHeader("cache-control");
 // Disable in browser caching, and use Edgio's edge to use SWR
 cache({
 edge: {
 maxAgeSeconds: 1,
 staleWhileRevalidateSeconds: 60 * 60 * 24 * 365,
 },
 browser: false,
 });
});

Stale while Revalidate ব্যবহার করা সার্ভারে লোড কমিয়ে এবং ব্যবহারকারীকে দ্রুত প্রতিক্রিয়া প্রদান করে অ্যাপের কর্মক্ষমতা উন্নত করতে সাহায্য করতে পারে।

ফ্লাইতে গতিশীল ব্যবহারকারী প্রোফাইল তৈরি করা

Astro গতিশীল রুট সেট আপ করা খুব সহজ করে তোলে। অ্যাপে, আপনি 136 খুঁজে পাবেন , যা 141 দিয়ে শুরু হওয়া পৃষ্ঠাগুলিকে ম্যাপ করে উদাহরণগুলির মধ্যে রয়েছে 155 এবং 166 .

ব্যবহারকারীর প্রোফাইল আনা হচ্ছে

আমরা 176 ব্যবহার করে বর্তমান ব্যবহারকারীর জন্য ডেটা নিয়ে আসি ক্যোয়ারী প্যারামিটার অ্যাস্ট্রো প্যারাম থেকে বের করা হয়েছে, এবং সমস্ত সম্পর্কিত ব্যবহারকারীর ডেটা পেতে getUserInfo ফাংশন (উপরে বর্ণিত) কল করুন। খুঁজে না পাওয়া বা কোনো ত্রুটির ক্ষেত্রে, আমরা ভিজিটরকে একটি 404 এ রিডাইরেক্ট করি।

import { getUserInfo } from "@/lib/Upstash/users";
 
// Extract slug query
const { slug } = Astro.params;
 
// Get data from Upstash using the getUserInfo function
const {
 name: userName,
 image: userImage,
 links = [],
 socials = [],
 about = "",
 og = {},
 background = {},
 code = 1,
} = await getUserInfo(userSlug);
 
// In case the code: 0 is recevied, redirect to a 404
if (code === 0) {
 return Astro.redirect("/404");
}

CLI থেকে স্থাপন করুন

আপনি আপনার অ্যাপের একটি প্রোডাকশন বিল্ড করতে পারেন এবং এটি ব্যবহার করে স্থানীয়ভাবে পরীক্ষা করতে পারেন:

yarn run edgio:build && yarn run edgio:production

স্থাপনার জন্য Edgio-এ একটি অ্যাকাউন্ট প্রয়োজন৷ এখানে বিনামূল্যে সাইন আপ করুন৷ আপনার একটি অ্যাকাউন্ট হয়ে গেলে, আপনি আপনার প্রকল্পের রুট ফোল্ডারে নিম্নলিখিত কমান্ডটি চালিয়ে এডজিওতে স্থাপন করতে পারেন:

yarn run edgio:deploy

এখন আমরা স্থাপনা সম্পন্ন! হ্যাঁ, এটাই ছিল।

উপসংহার

উপসংহারে, এই প্রকল্পটি দানাদার হার সীমিতকরণ, সার্ভারবিহীন CRUD ডেটা অপারেশন, CMS হিসাবে গিটহাব সমস্যাগুলি ব্যবহার করার এবং আপনার প্রয়োজন অনুসারে পরিমাপ করে এমন একটি পরিষেবা ব্যবহার করে এমভিপি পাঠানোর জন্য আরও ভাল সিদ্ধান্ত নিতে মূল্যবান অভিজ্ঞতা প্রদান করেছে, যেমন Upstash৷