Redis용 Upstash로 Deno 앱 성능 향상:응답 시간을 단축하는 서버리스 캐싱

Redis용 Upstash 및 성능 API에 대한 이 문서에서는 Deno 앱에서 Redis용 Upstash를 가장 잘 사용할 수 있는 방법을 알아봅니다. Redis용 Upstash 서버측 캐싱에 이상적인 서버리스 데이터베이스입니다. . 제가 작업 중이던 웹 앱의 초기 서버 응답 시간 점수가 낮았습니다. . Lighthouse가 500ms를 보고했습니다. . Upstash 캐시를 추가하여 150ms 미만으로 줄였습니다. 그리고 감사를 통과했습니다. 어려운 부분은 캐시를 추가하는 것이 아니었습니다. 공교롭게도 캐시를 사용할 위치를 파악하는 것이 중요했습니다. 성능 측정을 통해서만 병목 지점을 식별할 수 있었습니다. 최소한의 작업으로 성능을 향상시킵니다. 이 기사에서는 성과 측정에 대해 자세히 살펴보겠습니다.

내 프로젝트는 Deno Fresh 웹 앱이었습니다. Deno는 즉각적인 빌드와 배포를 제공합니다. 이는 최적화를 위해 작업하기에 꿈같은 환경이 됩니다. 피드백 루프가 짧습니다. 로컬에서 최적화를 코딩하여 서버에 푸시하고 원격 사이트를 즉시 테스트할 수 있습니다.

스택

여기서는 스켈레톤 앱을 활용하여 성능을 향상시키는 방법에 대해 이야기하겠습니다. 다음 도구를 사용합니다:

upstash_redis :Redis용 Upstash와 작업하기 위한 Deno 모듈
Deno Fresh:Deno에서 서버 측 렌더링(SSR) 앱을 구축하기 위한 새로운 프로덕션 지원 프레임워크
서버리스 로깅:여기서는 콘솔을 사용하지만 배포된 앱의 경우 실시간 측정에 액세스하려면 Logtail과 같은 서비스가 필요합니다.

설정

Node와 Deno의 주요 차이점은 코드에서 타사 모듈에 액세스하는 방법입니다. Deno는 package.json 대신 URL 및 가져오기 맵을 사용하여 작동합니다. 파일. upstash_redis의 전체 URL 예를 들어 https://deno.land/x/upstash_redis@v1.20.0입니다. . 시작하려면 새로운 Deno Fresh 앱을 만드세요.

deno run -A -r https://fresh.deno.dev upstash-redis-deno-perf

Deno를 처음 시도하는 경우 몇 가지 터미널 명령을 사용하여 시스템에 Deno 자체를 설정할 수 있습니다.

이제 import_map.json에 Upstash를 추가할 수 있습니다. 프로젝트 루트 디렉터리:

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

@/ 편의를 위해 가져오기 별칭을 정의합니다. 이렇게 하면 components을 가져올 수 있습니다. (프로젝트 루트 디렉토리에서) @/components 사용 소스 파일이 어느 폴더에 있든 상관없습니다.
$std/ .env를 읽는 유틸리티 기능이 있는 Deno 표준 라이브러리의 별칭입니다. 환경 변수 파일.
upstash/ 프로젝트의 TypeScript 또는 JavaScript 소스 파일에서 Redis용 Upstash 라이브러리에 액세스할 수 있습니다.

Redis용 Upstash 및 성능 API:Skeleton 앱

스켈레톤 앱은 다음을 수행합니다:

Tinybird(서버리스 Clickhouse)의 웹 분석을 사용한 지난 28일 동안의 페이지 조회수
웹멘션을 사용한 페이지 좋아요

이러한 데이터는 가져오기 요청을 사용하여 제공되므로 서버 작업이 실제 비즈니스 앱을 상당히 대표하게 됩니다. likes 및 views 변수는 프런트엔드에 표시되는 두 API의 응답을 보유합니다.

Redis용 Upstash로 Deno 앱 성능 향상:응답 시간을 단축하는 서버리스 캐싱

서버 handler 해당 페이지의 코드는 다음과 같습니다.

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

pathname를 추출합니다. 수신 request에서 개체를 선택한 다음 pathname을 사용하세요. 데이터 도우미 함수에서 마지막으로 원격 소스 값을 반환합니다.

효율성을 위해 도우미 함수에 대한 호출을 재구성할 수 있습니다:

const [likes, views] = await Promise.all([
 getWebmentionLikes(pathname),
 getTinybirdViews({ days: 28 }),
]);

자바스크립트 성능 웹 API

일반적으로 성능 측정은 최적화의 첫 번째 단계입니다. 속도 제한 단계가 항상 예상한 단계는 아닙니다. 측정하지 않으면 차선책으로 판명되는 솔루션에 시간과 리소스를 낭비하게 될 수 있습니다. Performance API는 여기서 끝없이 도움을 줄 수 있습니다. 이 섹션에서는 앱에서 Upstash for Redis를 사용하는 것이 가장 적합한 위치를 결정하기 위해 이를 어떻게 사용할 수 있는지 살펴보겠습니다.

window.performance 클라이언트 브라우저에서 Performance Web API에 액세스할 수 있습니다. Deno는 서버에서 웹 API 사용을 지원하므로 performance Deno 서버 측 코드에서 전역적으로 사용할 수 있습니다. 사용하고 싶은 두 가지 성능 방법은 다음과 같습니다.

performance.mark('your-mark-name') :PerformanceMark를 생성합니다. 특정 시점을 나타내는 객체입니다. 이름 매개변수는 마크가 있는 측정값을 생성할 때 사용됩니다.
performance.measure('your description', startMarkName, finishMarkName) :PerformanceMeasure를 생성합니다. 개체. 이렇게 하면 시작 및 종료 시간 표시를 라벨과 연결하여 이벤트 실행에 걸린 시간을 기록하고 계산하는 데 유용합니다.

`timeEvent` :성능 도우미 기능

이제 기본 사항을 알았으니 timeEvent을 만들어 보겠습니다. 기능. PerformanceMeasure의 배열이 필요합니다. 입력으로 시간을 측정하려는 객체와 함수. timeEvent 시작 표시를 만들고 전달된 함수를 호출한 다음 즉시 종료 표시를 만듭니다. 마지막으로 PerformanceMeasure 배열을 변경합니다. 입력으로 받은 개체를 사용하여 새 개체를 추가합니다. utils/performance.ts의 코드는 다음과 같습니다. :

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

이 함수는 일반적이지만 스켈레톤 앱의 경우 EventReturnType입니다. 항상 숫자입니다.

측정으로 서버 코드 업데이트

새로운 timeEvent을 사용할 수 있습니다 핸들러에서 함수를 실행한 다음 비교 실행을 시작합니다. 업데이트된 서버 핸들러 코드는 다음과 같습니다.

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

timeEvent function은 우리가 전달한 함수의 결과를 반환합니다. 이 속성을 사용하면 이전에 timeEvent에 있었던 두 개의 데이터 도우미 함수를 래핑할 수 있습니다. 전화. 우리는 여기서 로컬로 실행 중입니다. 프로덕션 앱의 경우 서버의 백본 연결이 로컬 연결과 다르게 수행되므로 라이브 사이트에서 측정을 실행해야 합니다. 서버에서 실행할 때 Logtail과 같은 로깅 서비스를 사용하여 측정값을 기록하세요.

Redis용 Upstash로 Deno 앱 성능 향상:응답 시간을 단축하는 서버리스 캐싱

콘솔 로그 캡처에서 PerformanceMeasure을 볼 수 있습니다. 개체는 다음과 같은 측정값을 제공합니다(앞서 언급함):

이름
시작 시간
기간(밀리초)

이상적으로는 앱을 렌더링하려면 데이터 값(likes 및 views )이 모두 필요합니다. 여기서는 서로 거의 같은 시간(2초)이 걸렸습니다. 한 기능이 다른 기능보다 훨씬 느리게 실행된 경우 가장 느린 값을 위해 Redis 캐싱용 Upstash를 추가합니다. 대신 여기서는 두 가지 모두에 추가하겠습니다. 프로덕션 환경에서는 최소한 수백 개의 데이터 포인트가 필요합니다. 그런 다음 비교를 위해 평균이나 P90과 같은 집계 측정값을 사용할 수 있습니다.

분석 도우미 코드에 Upstash for Redis 추가

분석 도우미 기능에 Upstash for Redis를 추가하는 코드를 살펴보겠습니다. Webmentions 도우미 기능은 유사하며 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,
});

먼저 Redis용 Upstash 객체를 초기화해야 합니다. UPSTASH_REDIS_REST_TOKEN가 필요합니다 및 UPSTASH_REDIS_REST_URL Upstash 콘솔의 값. 아직 Upstash 계정이 없다면 Upstash 계정을 빠르게 설정하세요. 두 값을 모두 추가합니다(UPSTASH_REDIS_REST_TOKEN 그리고 UPSTASH_REDIS_REST_URL )을 .env로 파일을 프로젝트 루트 디렉터리에 저장하세요.

위의 첫 번째 줄에서 upstash를 사용하고 있습니다. 이전에 설정한 가져오기 맵의 키입니다. 이는 각 TypeScript 파일에 전체 가져오기 URL을 추가하는 것보다 더 편리합니다. upstash_redis의 다음 릴리스가 출시되면 사용할 수 있게 되면 한 곳에서만 버전 번호를 업데이트하면 됩니다.

여기는 getTinybirdViews입니다 기능:

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

여기에서는:

view-count에 대한 Redis용 Upstash 캐시 값이 이미 있는지 확인하세요. redis.get('view-count')에 전화해서 .
캐시된 값이 있으면 반환하고, 그렇지 않으면 Tinybird에서 새로운 값을 가져옵니다.
redis.set('view-count', value)를 호출하여 Upstash for Redis 캐시에 새로운 값을 저장하고 만료를 설정합니다. 그런 다음 redis.expire(TTL) . 수명으로 값을 설정합니다. (TTL ) 값 이후에는 데이터가 오래된 것으로 간주됩니다. TTL로 설정했습니다. 여기까지 4시간. getTinybirdViews로 전화하려면 그 기간이 지나면 Tinybird를 통해 새로운 가치를 얻을 수 있습니다.

Redis용 Upstash로 Deno 앱 성능 향상:응답 시간을 단축하는 서버리스 캐싱

두 데이터 쿼리에 통합된 Redis용 Upstash를 사용하여 페이지를 몇 번 새로 고치면 속도가 빨라지는 것을 볼 수 있습니다. 여기서는 2초 남짓에서 약 0.29초로 감소했습니다. 우리는 로컬에서 실행 중이고 데이터 포인트도 많지 않으므로 여기 숫자를 너무 많이 읽지 마십시오. 자신의 앱에서 서비스를 시험해보고 어떤 종류의 이익을 얻을 수 있는지 확인해 보세요.

Redis 및 Performance API용 Upstash:마무리

여기에서는 JavaScript Performance API를 사용하여 최적화 노력에 집중할 위치를 결정하는 데 도움을 주는 방법을 살펴보았습니다. 그 외에도 Deno Fresh에서 Redis용 Upstash를 구현하는 방법을 살펴보았습니다. 마지막으로 우리는 Deno가 웹 API 서버 측을 지원하여 학습 곡선을 평탄화한다는 사실을 발견했습니다. 최적화를 위한 Deno의 또 다른 큰 이점은 즉각적인 배포로, 짧은 피드백 루프를 제공하고 성능을 미세 조정할 때 더 빠르게 움직일 수 있다는 것입니다.

Redis용 Upstash와 Performance API에 대해 읽어보셨기를 바랍니다. Deno 또는 Deno Fresh를 처음 사용하신다면 제가 Deno를 시작하면서 만든 콘텐츠 중 일부를 살펴보세요. GitHub에서 앱의 전체 코드를 열 수 있습니다.

Redis용 Upstash로 Deno 앱 성능 향상:응답 시간을 단축하는 서버리스 캐싱

스택

설정

Redis용 Upstash 및 성능 API:Skeleton 앱

자바스크립트 성능 웹 API

timeEvent :성능 도우미 기능

측정으로 서버 코드 업데이트

분석 도우미 코드에 Upstash for Redis 추가

Redis 및 Performance API용 Upstash:마무리

`timeEvent` :성능 도우미 기능