สร้างทางเลือก LinkTree แบบโอเพ่นซอร์สฟรีด้วย Astro, Upstash และ GitHub

// 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 และไลบรารีตัวจำกัดอัตราที่เรียกว่า 70 .

// 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 แท้จริงแล้วใครก็ตามสามารถสร้าง 3 โปรไฟล์ในหนึ่งสัปดาห์ผ่านทางเว็บไซต์ (itsmy.fyi) เอง และสำหรับการเข้าถึงคุณสมบัติอย่างไม่จำกัด เช่น แก้ไขโปรไฟล์ สร้างโปรไฟล์ไม่จำกัด ผู้ใช้จะต้องเปลี่ยนไปใช้วิธีสร้างโปรไฟล์ของ GitHub เราสามารถบังคับใช้ขีดจำกัดอัตรา 3 โปรไฟล์ในหนึ่งสัปดาห์ตาม IP ที่อยู่เป็นคีย์

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

การใช้งานเก่าขณะตรวจสอบใหม่บน Edge สำหรับโปรไฟล์ผู้ใช้ทั้งหมด

รหัสต่อไปนี้อธิบายวิธีการใช้แนวคิด Stale While Revalidate เพื่อปรับปรุงอัตราการเข้าชมแคช ในรหัส (ใน 88 ) 97 ใช้เพื่อจับคู่โปรไฟล์ผู้ใช้ทั้งหมด (ที่ขึ้นต้นด้วย 106 ).ภายในวิธีการแคช เราป้องกันการแคชเพจในเบราว์เซอร์ และเปิดใช้งานเฉพาะการแคช Edge เท่านั้นเพื่อให้ให้บริการผู้ใช้อย่างรวดเร็วและด้วยเนื้อหาล่าสุดเสมอ ตัวเลือก Edge ถูกตั้งค่าเป็น 119 เพื่อให้แน่ใจว่าข้อมูลถูกแคชไว้เพียงวินาทีเดียว 129 ตัวเลือกถูกตั้งค่าเป็นปีเพื่อให้ข้อมูลสามารถให้บริการได้โดยตรงจากแคชในขณะที่แคชกำลังรีเฟรช

// 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 ทำให้การตั้งค่าเส้นทางแบบไดนามิกเป็นเรื่องง่ายมาก ในแอป คุณจะพบ 133 ซึ่งจับคู่หน้าที่ขึ้นต้นด้วย 147 .ตัวอย่างได้แก่ 152 และ 163 .

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