เพิ่มประสิทธิภาพแอป Deno ด้วย Upstash สำหรับ Redis:การแคชแบบไร้เซิร์ฟเวอร์ที่ลดเวลาตอบสนอง

ในบทความเกี่ยวกับ Upstash สำหรับ Redis และ Performance API นี้ เราจะมาดูกันว่าคุณสามารถใช้ Upstash สำหรับ Redis ในแอป Deno ได้ดีที่สุดได้อย่างไร อัพสเตชสำหรับ Redis เป็นฐานข้อมูลแบบไร้เซิร์ฟเวอร์ที่เหมาะสำหรับการแคชฝั่งเซิร์ฟเวอร์ . เว็บแอปที่ฉันกำลังทำอยู่ได้คะแนนต่ำใน เวลาตอบสนองของเซิร์ฟเวอร์เริ่มต้น . Lighthouse รายงาน 500 ms . ด้วยการเพิ่มแคช Upstash ฉันลดสิ่งนี้ลงเหลือ ต่ำกว่า 150 ms และผ่านการตรวจสอบ ส่วนที่ยากไม่ใช่การเพิ่มแคช เมื่อมันเกิดขึ้น การพิจารณาว่าจะใช้แคชที่ใดถือเป็นสิ่งสำคัญ มีเพียงการวัดประสิทธิภาพเท่านั้นที่ฉันระบุจุดคอขวดได้ เพื่อเพิ่มประสิทธิภาพการทำงานโดยใช้เวลาน้อยที่สุด เราจะมาดูรายละเอียดเกี่ยวกับการวัดประสิทธิภาพในบทความนี้

โครงการของฉันคือเว็บแอป Deno Fresh Deno มีบิลด์และปรับใช้ทันที สิ่งนี้ทำให้สภาพแวดล้อมในฝันในการทำงานเพื่อการเพิ่มประสิทธิภาพ วงจรป้อนกลับสั้น คุณสามารถเขียนโค้ดการเพิ่มประสิทธิภาพภายในเครื่อง พุชไปยังเซิร์ฟเวอร์ และสามารถทดสอบไซต์ระยะไกลได้ทันที

สแต็ค

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

04 :โมดูล Deno สำหรับการทำงานกับ Upstash สำหรับ Redis


 Deno Fresh:Framework ใหม่ที่พร้อมใช้งานจริงสำหรับการสร้างแอปที่เรนเดอร์ฝั่งเซิร์ฟเวอร์ (SSR) ใน Deno
 การบันทึกแบบไร้เซิร์ฟเวอร์:เราใช้คอนโซลที่นี่ แต่สำหรับแอปที่ใช้งานของคุณ เพื่อเข้าถึงการวัดแบบสด คุณจะต้องมีบริการเช่น Logtail


 ตั้งค่า
 
 ข้อแตกต่างที่สำคัญระหว่าง Node และ Deno คือวิธีที่คุณเข้าถึงโมดูลบุคคลที่สามในโค้ดของคุณ Deno ทำงานร่วมกับ URL และนำเข้าแผนที่แทน 12 ไฟล์. URL แบบเต็มสำหรับ 29 ตัวอย่างเช่น คือ 34 . ในการเริ่มต้นสร้างแอป Deno Fresh ใหม่
 deno run -A -r https://fresh.deno.dev upstash-redis-deno-perf
 
 คุณสามารถตั้งค่า Deno ในระบบของคุณได้โดยใช้คำสั่ง Terminal เพียงไม่กี่คำสั่ง หากคุณลองใช้เป็นครั้งแรก
 
 ตอนนี้คุณสามารถเพิ่ม Upstash เป็น 48 ได้ ในไดเร็กทอรีรากของโปรเจ็กต์:
 {
 "imports": {
 "@/": "./",
 "$fresh/": "https://deno.land/x/fresh@1.1.2/",
 // ...TRUNCATED
 "$std/": "https://deno.land/std@0.177.0/",
 "upstash/": "https://deno.land/x/upstash_redis@v1.20.0/"
 }
}
  51 กำหนดนามแฝงการนำเข้าเพื่อความสะดวก ซึ่งช่วยให้คุณสามารถนำเข้า 64 ได้ (ในไดเรกทอรีรากของโครงการ) โดยใช้ 70 ไม่ว่าไฟล์ต้นฉบับของคุณจะอยู่ในโฟลเดอร์ใดก็ตาม

 83 เป็นนามแฝงของเราสำหรับ Deno Standard Library ซึ่งมีฟังก์ชันอรรถประโยชน์สำหรับการอ่าน 91 ไฟล์ตัวแปรสภาพแวดล้อม

 101 ช่วยให้เราเข้าถึงไลบรารี Upstash สำหรับ Redis จากไฟล์ต้นฉบับ TypeScript หรือ JavaScript ใด ๆ ในโปรเจ็กต์

 

 ข้อมูลอัปเดตสำหรับ Redis และ Performance API:แอป Skeleton
 
 แอปโครงกระดูกจะดึงเข้ามา:
  การดูหน้าเว็บในช่วง 28 วันที่ผ่านมาโดยใช้การวิเคราะห์เว็บจาก Tinybird (Clickhouse แบบไร้เซิร์ฟเวอร์)
 การถูกใจเพจโดยใช้ Webmentions
 
 
 ข้อมูลเหล่านี้มาจากคำขอดึงข้อมูล ทำให้งานเซิร์ฟเวอร์ของเราค่อนข้างเป็นตัวแทนของแอปธุรกิจในโลกแห่งความเป็นจริง 116 และ 124 ตัวแปรเก็บการตอบสนองจาก API ทั้งสองนี้ซึ่งเราแสดงในส่วนหน้า
 
 
 
 เซิร์ฟเวอร์ 134 โค้ดสำหรับหน้านั้นมีลักษณะดังนี้:
 export const handler: Handlers<Data> = {
 async GET(request, context) {
 const { url } = request;
 const { pathname } = new URL(url);
 
 const likes = await getWebmentionLikes(pathname);
 const views = await getTinybirdViews({ days: 28 });
 
 return context.render({ likes, views });
 },
};
 
 เราแยก 142 จาก 156 ที่เข้ามา วัตถุ จากนั้นใช้ 165 ในฟังก์ชันตัวช่วยข้อมูล และสุดท้ายก็ส่งคืนค่าที่มาจากระยะไกล
 
 เพื่อประสิทธิภาพ การเรียกไปยังฟังก์ชันตัวช่วยสามารถปรับโครงสร้างใหม่ได้:
 const [likes, views] = await Promise.all([
 getWebmentionLikes(pathname),
 getTinybirdViews({ days: 28 }),
]);
 เว็บ API ประสิทธิภาพของ JavaScript
 
 โดยทั่วไปการวัดประสิทธิภาพควรเป็นขั้นตอนแรกในการเพิ่มประสิทธิภาพ ขั้นตอนการจำกัดอัตราไม่ใช่ขั้นตอนที่คุณคาดหวังไว้เสมอไป หากไม่มีการวัดผล คุณสามารถใช้เวลาและทรัพยากรไปกับสิ่งที่กลายเป็นวิธีแก้ปัญหาที่ไม่เหมาะสมได้อย่างง่ายดาย Performance API สามารถช่วยได้ไม่สิ้นสุดที่นี่ ในส่วนนี้ เราจะมาดูกันว่าเราจะนำไปใช้เพื่อพิจารณาว่าจุดใดที่เหมาะสมที่สุดที่จะใช้ Upstash สำหรับ Redis ในแอป
 
 170 ช่วยให้คุณเข้าถึง Performance Web API จากเบราว์เซอร์ไคลเอ็นต์ Deno รองรับการใช้ Web API บนเซิร์ฟเวอร์และ 184 มีให้บริการทั่วโลกในโค้ดฝั่งเซิร์ฟเวอร์ Deno ของคุณ ต่อไปนี้เป็นวิธีประสิทธิภาพ 2 วิธีที่คุณต้องการใช้:
  199 :สร้าง 200 วัตถุซึ่งแสดงถึงจุดในเวลา พารามิเตอร์ชื่อจะใช้เมื่อคุณสร้างการวัดด้วยเครื่องหมาย

 219 :สร้าง 221 วัตถุ ซึ่งจะเชื่อมโยงเครื่องหมายเวลาเริ่มต้นและสิ้นสุดเข้ากับป้ายกำกับ ซึ่งมีประโยชน์สำหรับการบันทึกและการคำนวณระยะเวลาที่กิจกรรมจะดำเนิน

 

 232 :ฟังก์ชันตัวช่วยประสิทธิภาพ
 
 ตอนนี้เรารู้พื้นฐานแล้ว มาสร้าง 245 กันดีกว่า ฟังก์ชั่น จะใช้อาร์เรย์ 259 วัตถุและฟังก์ชันที่เราต้องการกำหนดเวลาเป็นอินพุต 269 จะสร้างเครื่องหมายเริ่มต้น เรียกใช้ฟังก์ชันที่ส่งแล้วสร้างเครื่องหมายสิ้นสุดทันที สุดท้าย มันจะกลายพันธุ์อาร์เรย์ของ 271 วัตถุที่ได้รับเป็นอินพุต โดยเพิ่มอันใหม่ นี่คือโค้ดจาก 283 :
 export async function timeEvent<EventReturnType>(
 eventFunction: () => Promise<EventReturnType>,
 {
 description,
 performanceMeasures,
 }: { description: string; performanceMeasures: PerformanceMeasure[] },
): Promise<EventReturnType> {
 // prepare
 const startName = `${description}-started`;
 const finishName = `${description}-finished`;
 
 // time
 performance.mark(startName);
 const result = await eventFunction();
 performance.mark(finishName);
 
 // record
 performanceMeasures.push(
 performance.measure(description, startName, finishName),
 );
 
 return result;
}
 
 ฟังก์ชันนี้เป็นฟังก์ชันทั่วไป แต่สำหรับแอปโครงกระดูก 292 จะเป็นตัวเลขเสมอ
 การอัปเดตโค้ดเซิร์ฟเวอร์ด้วยการวัด
 
 เราสามารถใช้ 308 ใหม่ได้ ในตัวจัดการ จากนั้นเริ่มดำเนินการเปรียบเทียบ นี่คือรหัสตัวจัดการเซิร์ฟเวอร์ที่อัปเดต:
 import type { Handlers, PageProps } from "$fresh/server.ts";
 
import "$std/dotenv/load.ts"; /* included for visibility here, typically you
 can import once for project in `dev.ts` */
 
import { timeEvent } from "@/utils/performance.ts";
 
// ...TRUNCATED
 
export const handler: Handlers<Data> = {
 async GET(request, context) {
 // ...TRUNCATED
 
 const performanceMeasures: PerformanceMeasure[] = [];
 
 const [likes, views] = await Promise.all([
 timeEvent<number>(() => getWebmentionLikes(pathname), {
 description: "web-mention-likes",
 performanceMeasures,
 }),
 timeEvent<number>(() => getTinybirdViews({ days: 28 }), {
 description: "analytics-views",
 performanceMeasures,
 }),
 ]);
 
 // Replace with a serverless logging service for production
 console.log({ performanceMeasures });
 
 return context.render({ likes, views });
 },
};
 
 311 function ส่งกลับผลลัพธ์ของฟังก์ชันที่เราส่งเข้าไป คุณสมบัตินี้ช่วยให้เรารวมฟังก์ชันตัวช่วยข้อมูลทั้งสองที่เราเคยมีใน 324 ได้ โทร เรากำลังดำเนินการในพื้นที่ที่นี่ สำหรับแอปที่ใช้งานจริง คุณต้องดำเนินการวัดบนไซต์ที่ใช้งานอยู่ เนื่องจากการเชื่อมต่อแกนหลักบนเซิร์ฟเวอร์ของคุณจะทำงานแตกต่างไปจากการเชื่อมต่อในเครื่อง เมื่อทำงานบนเซิร์ฟเวอร์ ให้ใช้บริการบันทึก เช่น Logtail เพื่อบันทึกการวัด
 
 
 
 ในการจับภาพบันทึกของคอนโซล คุณสามารถดู 338 วัตถุให้ค่าการวัดต่อไปนี้ (ซึ่งเรากล่าวถึงก่อนหน้านี้):
  ชื่อ
 เวลาเริ่มต้น
 ระยะเวลา (เป็นมิลลิวินาที)
 
 
 ตามหลักการแล้ว เราต้องการทั้งค่าข้อมูล (ไลค์และมุมมอง ) เพื่อแสดงผลแอป ในกรณีนี้พวกเขาใช้เวลาใกล้เคียงกัน (2 วินาที) หากฟังก์ชันหนึ่งทำงานช้ากว่าอีกฟังก์ชันมาก เราจะเพิ่ม Upstash สำหรับแคช Redis เพื่อให้ได้ค่าที่ช้าที่สุด แต่ที่นี่เราจะเพิ่มลงในทั้งสองอย่างแทน โปรดทราบว่าในการผลิตจริง เราต้องการจุดข้อมูลอย่างน้อยสองสามร้อยจุด จากนั้นเราสามารถใช้หน่วยวัดรวม เช่น ค่าเฉลี่ยหรือ P90 เพื่อเปรียบเทียบได้
 การเพิ่ม Upstash สำหรับ Redis ให้กับโค้ดตัวช่วย Analytics
 
 มาดูโค้ดสำหรับการเพิ่ม Upstash สำหรับ Redis ให้กับฟังก์ชันตัวช่วยการวิเคราะห์ ฟังก์ชันตัวช่วย Webmentions คล้ายกันและคุณสามารถดูได้ทั้งหมดใน repo GitHub (ลิงก์ด้านล่าง)
 import { Redis } from "upstash/mod.ts";
 
const UPSTASH_REDIS_REST_TOKEN = Deno.env.get("UPSTASH_REDIS_REST_TOKEN");
if (typeof UPSTASH_REDIS_REST_TOKEN === "undefined") {
 console.error("env `UPSTASH_REDIS_REST_TOKEN` must be set");
}
const UPSTASH_REDIS_REST_URL = Deno.env.get("UPSTASH_REDIS_REST_URL");
if (typeof UPSTASH_REDIS_REST_URL === "undefined") {
 console.error("env `UPSTASH_REDIS_REST_URL` must be set");
}
 
const redis = new Redis({
 token: UPSTASH_REDIS_REST_TOKEN,
 url: UPSTASH_REDIS_REST_URL,
});
 
 ก่อนอื่น เราต้องเริ่มต้น Upstash สำหรับอ็อบเจ็กต์ Redis คุณต้องมี 342 และ 351 ค่าจากคอนโซล Upstash การตั้งค่าบัญชี Upstash ทำได้รวดเร็วหากคุณยังไม่มี เพิ่มทั้งสองค่า (369 และ 375 ) เป็น 386 ในไดเรกทอรีรากของโครงการ
 
 สังเกตในบรรทัดแรกด้านบน เราใช้ 397 คีย์จากแผนที่นำเข้าที่เราตั้งค่าไว้ก่อนหน้านี้ สะดวกกว่าการเพิ่ม URL การนำเข้าแบบเต็มลงในไฟล์ TypeScript แต่ละไฟล์ เมื่อ 406 ออกรุ่นถัดไป พร้อมใช้งาน คุณจะต้องอัปเดตหมายเลขเวอร์ชันในที่เดียวเท่านั้น
 
 นี่คือ 417 ฟังก์ชัน:
 export async function getTinybirdViews({
 days,
}: {
 days: number;
}): Promise<number> {
 try {
 // ...TRUNCATED
 
 const cachedCount = (await redis.get("view-count")) as number | null;
 
 if (cachedCount != null) {
 return cachedCount;
 }
 
 // ...TRUNCATED
 const response = await fetch(
 `https://api.tinybird.co/v0/pipes/${TINYBIRD_PIPE_NAME}.json?${params.toString()}`,
 {
 headers: {
 Authorization: `Bearer ${TINYBIRD_TOKEN}`,
 },
 },
 );
 
 const {
 data: [{ count_sessions: count = -1 }],
 } = await response.json();
 
 if (typeof count === "number" && count > 0) {
 const CACHE_TTL_SECONDS = 14_400;
 await redis.set("view-count", count);
 await redis.expire("view-count", CACHE_TTL_SECONDS);
 }
 
 return count;
 } catch (error: unknown) {
 // ...TRUNCATED
 }
}
 
 เรา:
  ตรวจสอบว่ามีค่า Upstash สำหรับ Redis ที่แคชไว้สำหรับ 424 อยู่แล้วหรือไม่ พร้อมโทรไปที่ 433 .
 ส่งคืนค่าแคชหากมี มิฉะนั้นให้รับค่าใหม่จาก Tinybird
 จัดเก็บและตั้งค่าการหมดอายุสำหรับค่าใหม่ใน Upstash สำหรับแคช Redis โดยการเรียก 444 จากนั้น 450 . ซึ่งจะตั้งค่าด้วย time to live (TTL ) ซึ่งหลังจากนั้นถือว่าข้อมูลเก่าแล้ว เราตั้งค่า 463 ถึงสี่ชั่วโมงที่นี่ สำหรับการโทรไปที่ 473 หลังจากช่วงเวลานั้น เราจะตี Tinybird เพื่อให้ได้มูลค่าใหม่
 
 
 
 
 การรีเฟรชหน้า (สองสามครั้ง) ด้วย Upstash สำหรับ Redis ที่รวมเข้ากับการสืบค้นข้อมูลทั้งสองแบบที่เราเห็นว่าสิ่งต่าง ๆ เร็วขึ้น เราลดลงจากเพียงมากกว่า 2 วินาทีเหลือประมาณ 0.29 วินาที อย่าอ่านตัวเลขที่นี่มากเกินไป เนื่องจากเรากำลังดำเนินการอยู่ในเครื่อง และเรายังมีจุดข้อมูลไม่มากนัก ลองใช้บริการบนแอปของคุณเองเพื่อดูว่าคุณจะได้รับผลตอบแทนประเภทใด
 Upstash สำหรับ Redis และ Performance API:สรุปแล้ว
 
 ที่นี่ เราได้เห็นว่าคุณสามารถใช้ JavaScript Performance API เพื่อช่วยเป็นแนวทางในการตัดสินใจว่าจะมุ่งเน้นไปที่การเพิ่มประสิทธิภาพของคุณได้ที่ไหน นอกจากนี้เรายังได้เห็นว่าคุณสามารถใช้ Upstash สำหรับ Redis ใน Deno Fresh ได้อย่างไร ในที่สุดเราก็ค้นพบว่า Deno รองรับฝั่งเซิร์ฟเวอร์ Web API ซึ่งทำให้ช่วงการเรียนรู้แบนลง ประโยชน์สำคัญอีกประการหนึ่งของ Deno สำหรับการเพิ่มประสิทธิภาพคือการปรับใช้ทันที ทำให้คุณได้รับฟีดแบ็คสั้นๆ และให้คุณดำเนินการได้รวดเร็วยิ่งขึ้นเมื่อปรับแต่งประสิทธิภาพอย่างละเอียด
 
 ฉันหวังว่าคุณจะพบว่าการอ่านเกี่ยวกับ Upstash สำหรับ Redis และ Performance API นั้นมีคุณค่า หากคุณยังใหม่กับ Deno หรือ Deno Fresh ลองดูเนื้อหาบางส่วนที่ฉันสร้างขึ้นในการเริ่มต้นใช้งาน Deno คุณสามารถเปิดโค้ดแบบเต็มของแอปได้บน GitHub