การสร้าง JIRA Clone แบบโอเพ่นซอร์สด้วย Firebase, Upstash และ SvelteKit

type Task = { [key: string]: any } | null;
 
// Get Issue Data
// File: @/lib/issues/get.ts
export async function getTask(id: string) {
 try {
 const redis = (await import("../upstash/setup")).default;
 const task: Task = await redis.hget("issues", id);
 if (!task) {
 return {
 code: 0,
 error: "No such issue found.",
 };
 }
 return { ...task, code: 1 };
 } catch (e: any) {
 const error = e.message || e.toString();
 console.log(error);
 return {
 code: 0,
 error,
 };
 }
}

ในทำนองเดียวกัน การดำเนินการ CRUD ที่เหลือจะเป็นดังนี้:

// Create Issue
// File: @/lib/issues/create.ts
export async function createTask(info: any) {
 try {
 const redis = (await import("../upstash/setup")).default;
 const id =
 Math.random().toString().slice(2) + new Date().getUTCMilliseconds();
 await redis.hset("issues", { [id]: info });
 return { code: 1, id, message: "Issue Created Succesfully ✅" };
 } catch (e: any) {
 const error = e.message || e.toString();
 console.log(error);
 return {
 code: 0,
 error,
 };
 }
}

// Delete Issue
// File: @/lib/issues/delete.ts
export async function deleteTask(id: string) {
 try {
 const redis = (await import("../upstash/setup")).default;
 await redis.hdel("issues", id);
 return { code: 1, message: "Deleted Succesfully!" };
 } catch (e: any) {
 const error = e.message || e.toString();
 console.log(error);
 return {
 code: 0,
 error,
 };
 }
}

// Update Issue Data
// File: @/lib/issues/update.ts
export async function updateTask(info: any, id: string) {
 try {
 const redis = (await import("../upstash/setup")).default;
 if (id) {
 const task = await redis.hget("issues", id);
 if (task) {
 await redis.hset("issues", { [id]: info });
 return { code: 1, message: "Updated Successfully" };
 }
 }
 return {
 code: 0,
 error: "No such issue was found.",
 };
 } catch (e: any) {
 const error = e.message || e.toString();
 console.log(error);
 return {
 code: 0,
 error,
 };
 }
}

การจำกัดอัตรา

หากต้องการใช้การจำกัดอัตราที่ Edge เราใช้ 79 ไคลเอ็นต์ฐานข้อมูลและไลบรารีตัวจำกัดอัตราที่เรียกว่า 89 .

// Reference Function to ratelimiting
// File: @/lib/upstash/ratelimit.ts
import { Ratelimit } from "@upstash/ratelimit";
 
import redis from "./setup";
 
export const ratelimit = {
 upload: new Ratelimit({
 redis,
 limiter: Ratelimit.slidingWindow(2, "60s"),
 }),
 issues: new Ratelimit({
 redis,
 limiter: Ratelimit.slidingWindow(5, "60s"),
 }),
};

การใช้การจำกัดอัตราทำให้ฉันสามารถบรรลุสิ่งต่อไปนี้:

ก. ขีดจำกัดจำนวนการสร้างปัญหาต่อผู้ใช้ต่อนาที

เมื่อใช้การจำกัดอัตรา ฉันสามารถจำกัดการสร้างปัญหาห้ารายการต่อผู้ใช้ที่ได้รับการรับรองความถูกต้องต่อนาที เราสามารถบังคับใช้ขีดจำกัดอัตรานี้ตามอีเมลผู้ใช้ของผู้ใช้ที่ได้รับการตรวจสอบสิทธิ์

// File: @/routes/api/issue/+server.ts
// Issue Creation POST API SvelteKit Handler
import { ratelimit } from "@/lib/upstash/ratelimit";
 
export async function POST(event: RequestEvent) {
 const user = await isAuth(event);
 if (!user) {
 return new Response(undefined, {
 status: 403,
 });
 }
 if (user.session.user?.email) {
 // Look at the user email of authenticated user at edge
 // Rate limit 5 issues creation per minute
 const result = await ratelimit.issues.limit(user.session.user.email);
 if (!result.success) {
 return new Response(
 JSON.stringify({
 code: 0,
 error: `You can't create more than 5 issues per minute.`,
 }),
 {
 status: 403,
 headers: {
 "content-type": "application/json",
 },
 },
 );
 }
 const { info } = await event.request.json();
 const res = await createTask(info);
 return json(res);
 }
 return new Response(undefined, {
 status: 403,
 });
}

บี จำกัดจำนวนการอัพโหลดไฟล์ต่อผู้ใช้ต่อฉบับต่อนาที

เมื่อใช้การจำกัดอัตรา ฉันสามารถจำกัดการอัปโหลดไฟล์ได้สูงสุด 2 รายการต่อผู้ใช้ที่ได้รับการรับรองความถูกต้องต่องานต่อนาที เราสามารถบังคับใช้ขีดจำกัดอัตรานี้โดยอิงตามอีเมลผู้ใช้ของผู้ใช้ที่ได้รับการตรวจสอบสิทธิ์และ ID ของงาน เมื่อใดก็ตามที่การอัปโหลดเสร็จสมบูรณ์ เราจะอัปเดตงานใน Upstash DB โดยมี fileURL ต่อท้าย

// File: @/routes/api/content/+server.ts
// File Upload POST API SvelteKit Handler
import { ratelimit } from "@/lib/upstash/ratelimit";
 
export async function POST(event: RequestEvent) {
 // User Authentication Code
 if (user.session.user?.email) {
 // Validate User, Task ID and if a file is uploaded
 // Look at the user email of authenticated user and task's ID at edge
 // Rate limit 2 uploads per minute
 const result = await ratelimit.upload.limit(
 `${user.session.user.email}_${taskID}`,
 );
 if (!result.success) {
 return new Response(
 JSON.stringify({
 code: 0,
 error: `You can't upload more than 2 files per issue per minute.`,
 }),
 {
 status: 403,
 headers: {
 "content-type": "application/json",
 },
 },
 );
 }
 // File upload code
 // Continue reading the blog to see how
 // file uploads are being taken care of
 }
 return new Response(undefined, {
 status: 403,
 });
}

การจัดการการอัปโหลดและการดาวน์โหลดไฟล์ด้วย Firebase Storage

ในส่วนนี้ เราจะเจาะลึกถึงวิธีจัดการการอัพโหลดและการดาวน์โหลดไฟล์ของปัญหาในลักษณะที่ปลอดภัยและได้รับการรับรองความถูกต้องบน Edge ของ SvelteKit เราใช้ประโยชน์จากพื้นที่เก็บข้อมูล Firebase (v9) เพื่อดึงและอัปโหลดไฟล์ไป

โอ้ แต่ทำไมไม่ Cloudflare R2 เป็นพื้นที่จัดเก็บข้อมูลล่ะ

แม้ว่าฉันจะได้เห็นการสนับสนุนของชุมชนมากมายสำหรับแผนพื้นที่จัดเก็บข้อมูลฟรีของ Cloudflare R2 และข้อดีของแผนนี้ สิ่งหนึ่งที่ทำให้ฉันผิดหวังคือต้องนำบัตรเครดิตของฉันไปที่ Cloudflare ก่อนที่จะลองใช้ระบบเสียอีก สิ่งนี้ทำให้ฉันนึกถึงโซลูชันพื้นที่เก็บข้อมูลอื่นๆ และฉันตัดสินใจเลือก Firebase Storage ซึ่งให้พื้นที่เก็บข้อมูลฟรี 5 GB และในกรณีที่เกินนั้น บริการของฉันจะหยุดแทนการเรียกเก็บเงินจากบัตรเครดิตของฉันโดยไม่ได้รับการอนุมัติจากฉัน และรู้ว่าเกิดอะไรขึ้น

ฟังก์ชัน SvelteKit Edge เพื่ออัปโหลดไฟล์ไปยังที่เก็บข้อมูล Firebase

ในฟังก์ชัน Edge ต่อไปนี้ เรากำลังดูเหตุการณ์คำขอ POST ใดๆ และหากผู้ใช้ได้รับการรับรองความถูกต้อง เราก็จะได้รับ 93 และ 107 จาก formData ของเหตุการณ์ เมื่อดำเนินการเสร็จแล้ว เราจะประเมินเพิ่มเติมว่าจะดำเนินการต่อหรือไม่หากขนาดไฟล์ต่ำกว่า 5 MB เมื่อจัดการข้อกำหนดเบื้องต้นทั้งหมดแล้ว เราจะสร้าง ID ที่ไม่ซ้ำกัน จากนั้นสร้างการอ้างอิงของ firebase ไปยังโฟลเดอร์เฉพาะที่จะอัปโหลดไฟล์ไป ทันทีที่ไฟล์ถูกอัพโหลดไปยัง firebase มันจะส่งคืนมาพร้อมกับ URL ที่สามารถใช้เพื่อเข้าถึงไฟล์ที่อัพโหลด เราเพิ่ม URL ที่ไม่ซ้ำกันนี้ต่อท้าย 112 คีย์ข้อมูลของปัญหา

// File: @/routes/api/content/+server.ts
// File Upload POST API SvelteKit Handler
import { initializeApp } from "firebase/app";
import { getDownloadURL, getStorage, ref, uploadBytes } from "firebase/storage";
 
import fireBaseConfig from "../../../../firebase-adminsdk.json";
 
export async function POST(event: RequestEvent) {
 // User Authentication Code
 if (user.session.user?.email) {
 const app = initializeApp(fireBaseConfig);
 const storage = getStorage(app);
 const data = await event.request.formData();
 const taskID = data.get("taskID");
 const file = data.get("file");
 
 // ...Validate User, Task ID and if a file is uploaded
 // ...Rate Limiting Code
 
 // File Size Restriction(s)
 if (file.size > 5 * 1024 * 1024) {
 return new Response(
 JSON.stringify({
 code: 0,
 error: "File size exceeds the limit of 5 MB.",
 }),
 {
 status: 400,
 headers: {
 "content-type": "application/json",
 },
 },
 );
 }
 
 // Start File Upload Code
 try {
 // Create a unique ID
 const fileId = uuidv4();
 // If uploaded is not a File type
 if (!(file instanceof File)) return;
 // Create a ref to firebase storage
 const storageRef = ref(storage, `uploads/${fileId}/${file.name}`);
 // Obtain the arrayBuffer of the file uploaded
 const fileBuffer = await file.arrayBuffer();
 // Upload file to Firebase Storage in bytes using Uint8Array
 const { metadata } = await uploadBytes(
 storageRef,
 new Uint8Array(fileBuffer),
 );
 const { fullPath } = metadata;
 // No fullPath is received, the API errored out
 if (!fullPath) {
 return new Response(
 JSON.stringify({
 code: 0,
 error: `<span>There was some error while uploading the file.</span> <span class="mt-1 text-xs text-gray-500">Report an issue with the current URL that you are on and with the code XXX.</span>`,
 }),
 {
 status: 403,
 headers: {
 "content-type": "application/json",
 },
 },
 );
 }
 // If a file is uploaded successfully, append the file to list of attachments to the issue's data
 const { code, ...taskValues } = await getTask(taskID);
 if (code === 1) {
 if (taskValues) {
 if (taskValues.hasOwnProperty("files")) {
 taskValues["files"].push(
 `https://storage.googleapis.com/${storageRef.bucket}/${storageRef.fullPath}`,
 );
 } else {
 taskValues["files"] = [
 `https://storage.googleapis.com/${storageRef.bucket}/${storageRef.fullPath}`,
 ];
 }
 }
 // Update the task's data in Upstash
 await updateTask(taskValues, taskID);
 }
 return json({
 code: 1,
 message: "Uploaded Successfully",
 });
 } catch (error) {
 return new Response(
 JSON.stringify({ code: 0, error: error.message || error.toString() }),
 {
 status: 403,
 headers: {
 "content-type": "application/json",
 },
 },
 );
 }
 }
 return new Response(undefined, {
 status: 403,
 });
}

ฟังก์ชัน SvelteKit Edge เพื่อดาวน์โหลด URL สาธารณะของไฟล์จาก Firebase Storage

ดังที่คุณจำได้ เราได้เพิ่ม URL ที่ไม่ซ้ำซึ่งส่งคืนโดย Firebase ต่อท้ายใน 123 ของปัญหา ที่สำคัญ เราได้รับ URL ที่ไม่ซ้ำนั้นเป็นพารามิเตอร์รูปภาพในคำขอ GET ไปยังฟังก์ชัน Edge ของ SvelteKit เพื่อเรียกค้นไฟล์ต้นฉบับ เราใช้ฟังก์ชัน getDownloadURL จากไลบรารีของ firebase เพื่อรับ URL สาธารณะของสื่อต้นฉบับ

// File: @/routes/api/content/+server.ts
// File Upload GET API SvelteKit Handler
import { initializeApp } from "firebase/app";
import { getDownloadURL, getStorage, ref, uploadBytes } from "firebase/storage";
 
import fireBaseConfig from "../../../../firebase-adminsdk.json";
 
export async function GET(event: RequestEvent) {
 if (!(await isAuth(event))) {
 return new Response(undefined, {
 status: 403,
 });
 }
 const url = event.url;
 const image = url.searchParams.get("image");
 if (image) {
 try {
 const app = initializeApp(fireBaseConfig);
 const storage = getStorage(app);
 const fileRef = ref(storage, image);
 const imagePublicURL = await getDownloadURL(fileRef);
 return json({ code: 1, image: imagePublicURL });
 } catch (error) {
 return new Response(
 JSON.stringify({ code: 0, error: error.message || error.toString() }),
 {
 status: 500,
 headers: {
 "content-type": "application/json",
 },
 },
 );
 }
 }
 return new Response(JSON.stringify({ code: 0, error: "Invalid Request." }), {
 status: 400,
 headers: {
 "content-type": "application/json",
 },
 });
}

อย่างที่คุณคงคิดอยู่แล้ว อาจมีสื่อหลายรายการที่สามารถอัปโหลดได้ ดังนั้นเพื่อจัดการกับกรณีเล็กๆ น้อยๆ ของรูปภาพและวิดีโอ ฉันจึงได้เพิ่มสิ่งต่อไปนี้หากมีอย่างอื่นในส่วนหน้า:

<!-- File: @/routes/issue/[slug]/+page.svelte -->
 
{#each fieldFiles as file}
<div class="mt-8 w-full border border-white/25 p-3">
 {#if /\.(mp4|mov|mkv)/i.test(file)}
 <video class="h-auto w-full" src="{file}" controls>
 <track kind="captions" />
 </video>
 {:else}
 <img alt="{file}" src="{file}" class="h-auto w-full" />
 {/if}
</div>
{/each}

แต่เหตุใดจึงเป็นทางเลือกโอเพ่นซอร์สแทน Jira Kanban Board

มีประโยชน์มากมายที่จะทำให้คุณเลือกใช้ Jira Kanban Board ทางเลือกโอเพ่นซอร์ส แทนที่จะซื้อโซลูชันที่ต้องจ่ายเงินจำนวนมาก:

• ประหยัดต้นทุนได้มาก:ประโยชน์ที่สำคัญที่สุดประการหนึ่งของการใช้ทางเลือกโอเพ่นซอร์สคือการประหยัดต้นทุน ต่างจากโซลูชันบอร์ด Kanban แบบชำระเงินอย่าง Jira ตรงที่ทางเลือกโอเพ่นซอร์สที่สร้างด้วย SvelteKit, TailwindCSS, Firebase Storage, Serverless DB ของ Upstash และการจำกัดอัตราสามารถใช้งานได้โดยไม่มีค่าธรรมเนียมใบอนุญาตใดๆ
• ความสามารถในการปรับแต่งได้ไม่จำกัด:ด้วยทางเลือกโอเพ่นซอร์ส คุณสามารถควบคุมโค้ดเบสได้อย่างเต็มที่ และสามารถปรับแต่งบอร์ด Kanban ได้ตามความต้องการเฉพาะของคุณ ความยืดหยุ่นนี้มักไม่สามารถทำได้กับโซลูชันแบบชำระเงินที่มีตัวเลือกการปรับแต่งที่จำกัด
• ความง่ายในการบูรณาการ:คุณสามารถใช้ประโยชน์จากประสิทธิภาพของ API เพื่อเชื่อมต่อบอร์ด Kanban ของคุณกับระบบการจัดการโครงการ เครื่องมือควบคุมเวอร์ชัน บริการแจ้งเตือน และอื่นๆ นอกจากนี้ ลักษณะโอเพ่นซอร์สของโครงการช่วยให้นักพัฒนาสามารถขยายฟังก์ชันการทำงานและสร้างปลั๊กอินหรือการผสานรวมที่ปรับให้เหมาะกับความต้องการเฉพาะของพวกเขาได้

บทสรุป

โดยสรุป โปรเจ็กต์นี้ได้มอบประสบการณ์อันมีค่าในการใช้งานการจำกัดอัตราแบบละเอียด การดำเนินการข้อมูล CRUD ใช้งาน Firebase Storage API เพื่อรับและอัปโหลดไฟล์ ทั้งหมดนี้ทำที่ Edge ด้วย 133 ของ Upstash ห้องสมุด!