एस्ट्रो, अपस्टैश और गिटहब के साथ एक निःशुल्क, ओपन-सोर्स लिंकट्री विकल्प बनाएं

हम क्या उपयोग करेंगे

• एस्ट्रो (फ्रंट-एंड और बैक-एंड)
• अपस्टैश (दर सीमित और सीआरयूडी संचालन)
• GitHub समस्या और वेबहुक (उपयोगकर्ता प्रोफ़ाइल प्रबंधित करने के लिए सार्वजनिक सीएमएस)
• टेलविंड सीएसएस (स्टाइलिंग)
• एजियो (तैनाती)

आपको क्या चाहिए

• एक GitHub खाता
• डेटाबेस बनाने के लिए एक अपस्टैश खाता

अपस्टैश रेडिस की स्थापना

प्रोजेक्ट की स्थापना

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

# 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

भंडार संरचना

उच्च-स्तरीय डेटा प्रवाह

• यदि कोई उपयोगकर्ता अपने my.fyi/me/slug पर जाता है और इस पृष्ठ पर प्रतिक्रिया कैश नहीं की जाती है (या पुनः सत्यापित की जा रही है), तो यह getUserInfo फ़ंक्शन को कॉल करता है जो बदले में अपस्टैश DB से उपयोगकर्ता json को पुनः प्राप्त करता है
• यदि कोई उपयोगकर्ता GitHub समस्या बनाता है, अपडेट करता है या हटाता है, तो GitHub एक वेबहुक ट्रिगर करता है जो एंडपॉइंट पर पोस्ट करता है। उस समापन बिंदु में, पहले अपस्टैश रेट लिमिटिंग का उपयोग यह मूल्यांकन करने के लिए किया जाता है कि क्या अनुरोधित परिवर्तन किया जा सकता है, और फिर अपस्टैश का उपयोग करके, उपयोगकर्ता json(ओं) को बनाया, अद्यतन या हटाया जाता है।

अपस्टैश रेडिस के माध्यम से उपयोगकर्ता प्रोफ़ाइल सीआरयूडी संचालन

मैं CRUD संचालन के लिए GitHub से Upstash पर क्यों स्थानांतरित हुआ?

getUserInfo:उपयोगकर्ता प्रोफ़ाइल फ़ंक्शन लाया जा रहा है

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

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,
 };
 }
}

दर सीमित

// 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;
};

ए. सेवा का उपयोग करें - पूर्णतः निःशुल्क एवं असीमित

// 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
 }
}

बी. किसी उपयोगकर्ता द्वारा किए गए संपादनों की संख्या के लिए विस्तृत मॉडरेशन लागू करें

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.",
 }),
 };
 }
}

सभी उपयोगकर्ता प्रोफ़ाइलों के लिए किनारे पर बासी-समय-पुनर्वैधीकरण लागू करना

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

तुरंत गतिशील उपयोगकर्ता प्रोफ़ाइल बनाना

उपयोगकर्ता प्रोफ़ाइल प्राप्त की जा रही है

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");
}

सीएलआई से परिनियोजन

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

yarn run edgio:deploy

निष्कर्ष