소개

애플리케이션 사용을 추적하는 앱을 빌드하거나 리소스 사용을 제한하거나 캐시에서 데이터를 가져와 앱 성능을 향상시켜야 하는 경우 Redis가 이러한 요구 사항에 대한 답이라는 것을 알게 될 것입니다! Redis는 메모리 내 키-값 데이터베이스입니다. 오픈 소스이며 원격 사전 서버를 나타냅니다.

이 기사에서는 Upstash, Redis 데이터베이스 및 Vue SSR 프레임워크 Nuxt 3의 최신 베타 릴리스에 대해 논의할 것입니다. Nuxt 앱.

리소스

Github 리포지토리:https://github.com/Krutie/upstash-nuxt-demo
데모
- Cloudflare 작업자:https://upstash-demo.krutie-patel.workers.dev/contact
- Netlify:https://thirsty-visvesvaraya-a09ab9.netlify.app/

Upstash란 무엇입니까?

Upstash는 Redis 데이터베이스에 대한 서버리스 액세스를 제공하는 서비스입니다. 그렇기 때문에 Redis 사용 사례와 다양한 유형의 데이터를 조작하는 데 사용할 수 있는 명령을 포함하는 Redis 기본 사항을 배우는 것이 필수적입니다.

Redis란 무엇입니까?

Redis에는 다음과 같은 인기 있는 사용 사례가 있습니다.

데이터 및 세션 캐싱
리더보드 - 컴퓨터 게임 또는 게임화 원칙으로 구축된 모든 소프트웨어의 순위 이름 및 점수
대기열 - 나중에 백그라운드에서 처리할 작업 예약
사용 측정/카운팅 - 전자 상거래 사이트, 소셜 미디어, 모바일 앱 등과 같은 사용량을 보고 분석하기 위해 리소스 활용을 제한하거나 리소스 배포를 제어하거나 규모에 맞게 카운팅합니다.
콘텐츠 필터링 - 예를 들어 금지된 단어 목록에 대해 콘텐츠 필터링

기본 수준에서 Redis 데이터베이스는 키-값 쌍으로 데이터를 저장합니다. 그러나 목록, 집합, 정렬된 집합 등과 같은 고급 데이터 구조에 데이터를 저장할 수도 있습니다. Redis는 이러한 데이터 구조를 조작하는 명령 집합도 제공합니다. 예제 앱에서 그 중 하나를 사용할 것이므로 높은 수준의 정의를 살펴보는 것이 좋습니다.

목록 - 기본 배열과 비슷합니다. 목록을 사용하면 시퀀스의 양쪽 끝에서 항목을 푸시 및 팝하고 개별 항목을 가져오고 다양한 기타 작업을 수행할 수 있습니다. 목록 명령은 문자 L로 시작합니다(예:LPOP, LPUSH, LSET 등).
해시 - 단일 Redis 키에 키-값 쌍 그룹을 저장할 수 있습니다. 해시 명령에는 H가 접두사로 붙습니다(예:HSET, HGET, HDEL 등)
집합 - 목록과 비슷하지만 집합은 고유하며 정렬되지 않은 목록에 항목을 저장합니다. 그렇기 때문에 세트는 정렬할 수 없지만 항목이 세트에 있는지 여부를 빠르게 추가, 제거 및 결정할 수 있습니다. 설정 명령은 SADD, SCARD, SISMEMBER 등과 같이 문자 S가 접두사로 붙습니다.
정렬된 집합 - 집합과 비슷하지만 정렬된 집합을 사용하면 키-값 쌍과 매우 유사한 점수별로 정렬할 수 있습니다. 이 숫자 점수를 조작하고 정렬할 수도 있습니다. 정렬된 집합 명령에는 Z, i,e, ZADD, ZINCRBY, ZSCORE 등의 접두사가 붙습니다.

<블록 인용>

https://redis.io/commands

에서 다른 Redis 명령에 대해 자세히 알아볼 수 있습니다.

업스태시 설정

<블록 인용>

지침에 따라 문서 @ https://docs.upstash.com/

에 따라 계정 및 데이터베이스를 설정합니다.

Nuxt 앱을 만들기 전에 Upstash 계정이 준비되었는지 확인하세요. 프리 티어로 하나의 데이터베이스를 생성할 수 있어야 합니다.

데이터베이스가 생성되면 모든 Redis 클라이언트를 사용하여 Redis 데이터베이스를 생성하고 액세스할 수 있습니다. 또는 Upstash 콘솔에서 제공하는 브라우저 기반 CLI👇를 사용하여 즉시 시작할 수 있습니다.

Nuxt 3 및 서버리스 Redis 시작하기

Upstash 콘솔에서 제공되는 브라우저 기반 CLI

`Redis-cli`

redis-cli를 설정할 수 있습니다. 컴퓨터 터미널에서 명령줄 인터페이스에서 직접 Redis 데이터베이스를 만들고 액세스할 수 있습니다.

Redis npm 패키지

Redis 데이터베이스와 상호 작용할 수 있는 여러 npm 패키지도 있습니다. 1) @upstash/redis를 사용합니다. 및 2) ioredis - Nuxt 프로젝트의 Redis 명령에 액세스합니다.

다음 섹션에서는 Nuxt 프로젝트를 설정합니다. Nuxt는 Vue 위에 빌드된 SSR 프레임워크입니다. Nuxt Labs는 최근 Nuxt 3 베타 릴리스를 발표했습니다. 이제 새로운 Nuxt 3 프로젝트를 설정해 보겠습니다.

<블록 인용>

Nuxt 3는 현재 베타 버전입니다. 아직 프로덕션 준비가 되지 않았습니다. .

⚡Nuxt 3에 대해 이야기합시다

Nuxt 3에는 nuxi라는 새로운 CLI가 도입되었습니다. Nuxt 앱을 만듭니다.

npx nuxi init nuxt3-app

/pages를 생성하겠습니다. 디렉토리를 만들고 아래와 같이 몇 가지 간단한 경로를 추가하세요👇

-pages;
--index.vue;
--about.vue;
app.vue;

app.vue 는 주요 구성 요소 역할을 하는 Nuxt 3에 대한 새로운 소개입니다. app.vue /pages에 정의된 모든 경로에 대해 로드됩니다. 디렉토리.

Nitro 서버 엔진 ⚙️

Nuxt 3에는 Nitro라는 새로운 서버 엔진도 도입되었습니다. Nitro의 기능을 활용하여 서버 API 엔드포인트를 만들 수 있습니다. 및 서버 미들웨어 단순히 server를 생성함으로써 api가 있는 디렉토리 및 middleware 하위 디렉토리로. Github 리포지토리에서 이 미니멀리스트 디렉토리 구조를 검토할 수 있습니다.

-server;
--api;
--middleware;

API와 미들웨어 모두 API 요청을 처리하고 promise/JSON 데이터를 반환하는 기본 함수를 내보내야 합니다. Nuxt 2와 달리 nuxt.config.js에 서버 미들웨어를 정의할 필요가 없습니다. .

다음은 앱을 빌드하기 위해 수행해야 하는 단계의 상위 수준 목록입니다.

먼저 Redis 데이터베이스에 연결합니다.
페이지 방문을 기록하기 위해 서버에 대한 모든 페이지 요청을 가로채서 해당 페이지의 카운터를 1씩 늘리고 해당 값을 Redis 데이터베이스에 저장합니다.
그런 다음 클라이언트 측에서 API를 호출하여 Redis 데이터베이스에서 방문 수를 검색하고 Nuxt 페이지에 표시합니다.

개념적으로 아래 다이어그램은 우리가 구축하려는 것을 보여줍니다👇

Nuxt 3 및 서버리스 Redis 시작하기

<블록 인용>

Nuxt 3에 대해 자세히 알아보기 @ https://v3.nuxtjs.org/getting-started/installation

REST Redis 클라이언트 사용

Upstash는 자체 HTTP/REST 기반 Redis 클라이언트를 제공합니다. - @upstash/redis - Nuxt 프로젝트에 종속성으로 추가할 수 있습니다.

yarn add @upstash/redis

Redis DB 인증

Redis 데이터베이스를 인증하려면 다음 환경 변수를 찾아야 합니다.

REST URL(UPSTASH_REDIS_REST_URL) 및
토큰(UPSTASH_REDIS_REST_TOKEN)

...Upstash 콘솔에서 - 데이터베이스 아래.

개인 런타임 구성

이제 서버 측에서 이러한 환경 변수를 노출하기 위해 Nuxt는 nuxt.config.js에서 정의한 런타임 구성을 제공합니다. 파일.

// nuxt.config.js
export default defineNuxtConfig({
  publicRuntimeConfig: {},

  privateRunimeConfig: {
    UPSTASH_REDIS_REST_URL: process.env.UPSTASH_REDIS_REST_URL,
    UPSTASH_REDIS_REST_TOKEN: process.env.UPSTASH_REDIS_REST_TOKEN,
  },
});

다음으로 #config를 가져와서 이러한 환경 변수에 직접 액세스할 수 있습니다. .

import { Redis } from "@upstash/redis";
import config from "#config";

const redis = new Redis({
  url: config.UPSTASH_REDIS_REST_URL,
  token: config.UPSTASH_REDIS_REST_TOKEN,
});

대안으로 제로 구성 접근 방식은 UPSTASH_REDIS_REST_URL을 추가하는 것입니다. 및 UPSTASH_REDIS_REST_TOKEN .env에 직접 파일 및 redis 인스턴스 생성 const redis = Redis.fromEnv() 이러한 변수를 Redis에 전달할 필요 없이 . 이 마법은 @upstash/redis를 사용할 때만 적용할 수 있습니다. Redis 클라이언트.

Nuxt 서버 미들웨어로 요청 가로채기

이제부터 필요한 Redis 명령을 자유롭게 사용할 수 있습니다. 이 예에서는 sorted-set이 고유하고 SCORE의 정렬 및 조작도 허용하므로 sorted-set을 사용합니다.

예를 들어 zincrby를 사용할 수 있습니다. 페이지에 대한 요청이 있을 때마다 페이지 SCORE를 증가시킵니다.

// server/middleware/pageCount.js
import { Redis } from "@upstash/redis";
import { getRedisKey } from "../utils";

const redis = Redis.fromEnv();

export default async function (req, res, next) {
  const redisKey = getRedisKey(req.url);
  await redis.zincrby("myPageCounts", 1, redisKey);
  next();
}

네임스페이스 생성

Redis는 키-값 쌍으로 데이터를 저장하는 NoSql 데이터베이스입니다. 자동 증가 키의 개념이 없거나 모든 종류의 고유한 UUID를 생성하는 동적 방법이 없습니다. 여기에서 getRedisKey()를 소개합니다. 유틸리티 기능.

이 유틸리티 함수는 요청 URL을 처리하고 각 페이지에 대한 방문 횟수를 저장하는 데 사용할 고유 키를 만듭니다. 이렇게 하면 동일한 키에 대해 카운터가 증가하는 것을 방지할 수 있습니다.

이 예에서는 요청 URL을 선택하고 '/'의 모든 인스턴스를 바꿉니다. '.'로 고유한 이름 간격 키를 생성합니다.

export const getRedisKey = (url: string) => {
  const reqURL = url?.replace("/", ".");
  const redisKey = reqURL === "." ? "page.home" : `page${reqURL}`;
  return redisKey;
};

이렇게 하면 변환하는 데 도움이 됩니다. 예:/about page.about으로 읽히는 이름 간격 키로 페이지

REST API 끝점을 사용하여 Redis DB에 액세스

각 페이지의 현재 개수 또는 SCORE를 가져올 API 끝점을 만들어 보겠습니다.

Nuxt 3에는 데이터를 가져오는 두 가지 방법이 있습니다. 1)useAsyncData 2) useFetch . app.vue에서 , 우리는 useAsyncData를 사용할 것입니다. $fetch와 함께 ohmyfetch 라이브러리에서 제공합니다.

// app.vue
<script setup>
	const router = useRoute();
  const { data: count } = await useAsyncData('Count', () => $fetch('/api/count', { params: { path: router.path}}))
</script>

보시다시피 API 호출과 함께 라우터 경로를 쿼리 매개변수로 전달하여 액세스 중인 페이지를 식별합니다👇

$fetch("/api/count", { params: { path: router.path } });

서버 미들웨어와 달리 /api/count API 엔드포인트를 사용해야 합니다. 방문 수를 가져옵니다. 그것은 우리를 재미있는 부분으로 안내합니다!

server/api/count.ts에 이 API 엔드포인트를 생성해 보겠습니다. . useQuery를 사용하겠습니다. h3에서 제공하는 메소드 클라이언트 측에서 보낸 쿼리 매개변수에 액세스하기 위한 라이브러리입니다.

// server/api/count.ts
import { useQuery } from "h3";

export default async (req, res) => {
  let query = await useQuery(req);
  const redisKey = getRedisKey(query.path);
};

여기 👆 동일한 getRedisKey()를 사용합니다. 이 키가 페이지 수를 늘리기 위해 미들웨어에서 사용한 이름 간격 키와 일치하는지 확인하는 유틸리티입니다.

이제 이 키를 zscore에 전달할 수 있습니다. SCORE/count를 가져오기 위해 데이터베이스에 존재한다고 확신합니다. 👇

// server/api/count.ts
// ...
import { Redis } from "@upstash/redis";

const redis = Redis.fromEnv();

export default async () => {
  // ...
  const count = await redis.zscore("myPageCounts", redisKey);
  return { count };
};

`ioredis`와 함께 Redis API를 직접 사용

ioredis를 사용하여 동일한 결과를 얻을 수 있습니다. 라이브러리도 마찬가지입니다.

yarn add ioredis

ioredis를 사용하는 동안 , auth가 없습니다. 사용 가능한 방법. 그러나 Upstash 콘솔에서 사용할 수 있는 연결 문자열이 있어 Redis 데이터베이스에 연결하는 데 사용할 수 있습니다.

UPSTASH_REDIS_CONN을(를) 설정할 수 있습니다. rest-url 및 토큰에 대해 이전에 했던 것과 유사하게 런타임 구성 변수로 사용합니다.

// nuxt.config.js
export default defineNuxtConfig({
  publicRuntimeConfig: {},

  privateRunimeConfig: {
    UPSTASH_REDIS_CONN: process.env.UPSTASH_REDIS_CONN,
  },
});

다음으로 미들웨어에서 new Redis()를 생성합니다. 연결을 생성하고 client에서 모든 Redis 명령에 액세스하기 위한 인스턴스 👇

// server/middleware/pageCount.js

import config from "#config";
import Redis from "ioredis";

const client = new Redis(config.UPSTASH_REDIS_CONN);

Nuxt 서버 미들웨어로 요청 가로채기

Nuxt 미들웨어는 zincrby에 액세스하는 방법을 제외하고는 이전과 동일하게 유지됩니다. 변경됩니다👇

// server/middleware/pageCount.js
// ...
export default async function (req, res, next) {
  // ...
  await client.zincrby("myPageCounts", 1, redisKey);
  next();
}

REST API 끝점을 사용하여 Redis DB에 액세스

앞서 사용자 지정 API 엔드포인트 server/api/count.ts를 생성합니다. 카운트를 얻으려면. 해당 API 엔드포인트도 zscore를 호출하는 방법을 제외하고는 동일하게 유지됩니다. 방법이 조금 변경됩니다👇

// server/api/count.ts
import config from "#config";
import Redis from "ioredis";

const client = new Redis(config.UPSTASH_REDIS_CONN);

export default async (req: IncomingMessage, res: ServerResponse) => {
  // ...
  const count = await client.zscore("myPageCounts", redisKey);
  return { count };
};

Upstash CLI로 테스트

모든 데이터를 sorted-set에 저장하기 때문에 zrange를 사용할 수 있습니다. 정렬된 집합에서 모든 항목을 가져옵니다.

Upstash 콘솔에서 제공되는 Redis CLI에 액세스하고 다음 명령을 실행할 수 있습니다.

zrange myPageCounts 0 -1

여기👆:

myPageCounts 정렬된 집합의 이름입니다.
0 -1 범위를 나타냅니다. 여기서 0 시작 값이고 -1 세트의 마지막 항목을 나타냅니다.

위의 명령은 SCORES가 없는 모든 키를 나열합니다. WITHSCORES 👇

를 추가하여 이 문제를 해결할 수 있습니다.

// lowest SCORE first
zrange myPageCounts 0 -1 WITHSCORES

// highest SCORE first
zrevrange myPageCounts 0 -1 WITHSCORES

// get SCORE for page.home hits
zscore myPageCounts page.home

API와 미들웨어를 테스트하는 동안 웹사이트에서 일어나는 모든 활동에 대해 Upstash 콘솔을 확인하십시오.

Nuxt 3 및 서버리스 Redis 시작하기

Upstash 콘솔의 리소스 사용량

Nuxt 3 앱 배포

Nitro 서버 엔진은 Nuxt 3 앱을 배포하는 동안 중요한 역할을 합니다.

넷리파이

Netlify에 배포하려면 평소와 같이 Nuxt 앱의 GitHub 리포지토리를 푸시합니다. 배포가 원활하게 진행될 수 있도록 다음 세 가지 항목을 확인하세요.

Netlify에서 npm run build 사용 빌드 명령으로 dist 게시할 디렉토리로.
배포하기 전에 Netlify에서 rest-url, 토큰 또는 Redis 연결을 위한 환경 변수를 생성합니다.
마지막으로 netlify.toml을 생성했는지 확인하십시오. Nuxt 프로젝트의 루트에 있습니다. 이 파일의 내용과 마찬가지로 netlify.toml을 방문하십시오.

yarn build할 때 , Nuxt 3는 .output이라는 디렉토리를 생성합니다. .toml에서 사용한 함수의 경로를 제공하는 파일입니다.

// netlify.toml
//...
[build];
// ...
functions = ".output/server";

다음은 Netlify에서 실행되는 이 기사의 Nuxt 예입니다. https://thirsty-visvesvaraya-a09ab9.netlify.app/

클라우드플레어

터미널에서 바로 Cloudflare 작업자에 Nuxt 3 앱을 배포할 수 있습니다! Nuxt 3 문서에서는 Miniflare가 앱을 로컬에서 테스트한 다음 Wrangler를 사용하여 미리 보고 게시할 것을 권장합니다.

wrangler.toml을 추가해야 합니다. Cloudflare account_id가 있는 프로젝트 루트의 파일 및 이 예제 파일에 표시된 환경 변수.

Cloudflare 배포의 경우 entry-point을 제공합니다. NITRO_PRESET=cloudflare로 명령을 빌드합니다. .

// wrangler.toml
//..
[site]
bucket = ".output/public"
entry-point = ".output"

[build]
command = "NITRO_PRESET=cloudflare yarn nuxt build"
upload.format = "service-worker"

다음은 Cloudflare 작업자에서 실행되는 이 기사의 Nuxt 예입니다. https://upstash-demo.krutie-patel.workers.dev/contact

결론

Upstash 서비스를 사용하는 Redis의 가장 기본적인 응용 프로그램을 살펴보고 Nuxt(v3)와 같은 서버 측 렌더링 프레임워크와 통합하여 다음을 수행하는 방법을 살펴보았습니다.

Redis 데이터베이스에 연결,
고유 키 생성 및 데이터베이스에 키-값 쌍 쓰기
Redis 데이터베이스에서 데이터 읽기 및
Netlify 및 Cloudflare 작업자에게 앱을 배포합니다.

또한 Upstash는 여러 가용 영역에서 데이터를 복제하고 전 세계적으로 분산된 엣지 로케이션에서 REST API 응답을 캐시하는 옵션과 함께 생성하는 각 데이터베이스에 대한 데이터 트래픽을 암호화하는 옵션을 제공합니다. Upstash 콘솔의 세부정보에서 이러한 옵션을 찾을 수 있습니다. 데이터베이스의 탭입니다.

Redis DB를 탐색하려는 초보자의 경우 Upstash를 사용하면 우리가 이미 알고 있고 좋아하는 향후 및 기존 프론트 엔드 기술 작업을 매우 쉽게 시작할 수 있습니다. 이 기사가 Redis 여정을 시작하는 좋은 출발점이 되기를 바랍니다.

Nuxt 3 및 서버리스 Redis 시작하기

소개

리소스

Upstash란 무엇입니까?

Redis란 무엇입니까?

업스태시 설정

Redis-cli

Redis npm 패키지

⚡Nuxt 3에 대해 이야기합시다

Nitro 서버 엔진 ⚙️

REST Redis 클라이언트 사용

Redis DB 인증

개인 런타임 구성

Nuxt 서버 미들웨어로 요청 가로채기

네임스페이스 생성

REST API 끝점을 사용하여 Redis DB에 액세스

ioredis와 함께 Redis API를 직접 사용

Nuxt 서버 미들웨어로 요청 가로채기

REST API 끝점을 사용하여 Redis DB에 액세스

Upstash CLI로 테스트

Nuxt 3 앱 배포

넷리파이

클라우드플레어

결론

`Redis-cli`

`ioredis`와 함께 Redis API를 직접 사용