Giới thiệu

Nếu bạn đã từng phải xây dựng một ứng dụng theo dõi việc sử dụng ứng dụng, hạn chế sử dụng tài nguyên hoặc tìm nạp dữ liệu từ bộ nhớ đệm để tăng hiệu suất ứng dụng, thì bạn sẽ biết rằng Redis là câu trả lời cho những yêu cầu này! Redis là cơ sở dữ liệu khóa-giá trị trong bộ nhớ. Nó là mã nguồn mở và là viết tắt của Remote Dictionary Server.

Trong bài viết này, chúng tôi sẽ thảo luận về Upstash, cơ sở dữ liệu Redis và bản phát hành beta gần đây của khung Vue SSR, Nuxt 3. Đây là một bài viết thân thiện với người mới bắt đầu khám phá cơ sở dữ liệu Redis, nơi chúng tôi sẽ xây dựng ứng dụng cơ bản theo dõi lượt truy cập trang của một Ứng dụng Nuxt.

Tài nguyên

Đại diện Github:https://github.com/Krutie/upstash-nuxt-demo
Bản trình diễn
- Nhân viên Cloudflare:https://upstash-demo.krutie-patel.workers.dev/contact
- Netlify:https://thirsty-visvesvaraya-a09ab9.netlify.app/

Upstash là gì?

Upstash là một dịch vụ cung cấp quyền truy cập không máy chủ vào cơ sở dữ liệu của Redis. Đó là lý do tại sao chúng ta cần tìm hiểu các nguyên tắc cơ bản của Redis bao gồm các trường hợp sử dụng Redis và các lệnh có sẵn để thao tác với các loại dữ liệu khác nhau.

Redis là gì?

Redis có các trường hợp sử dụng phổ biến như:

Dữ liệu và phiên lưu vào bộ nhớ đệm
Bảng xếp hạng - xếp hạng tên và điểm số trong trò chơi trên máy tính hoặc bất kỳ phần mềm nào được xây dựng với các nguyên tắc trò chơi
Hàng đợi - lên lịch các tác vụ sẽ được xử lý sau trong nền
Đo lường / đếm mức sử dụng - hạn chế sử dụng tài nguyên, kiểm soát phân phối tài nguyên hoặc chỉ đếm theo quy mô để xem và phân tích việc sử dụng, chẳng hạn như các trang web thương mại điện tử, mạng xã hội, ứng dụng dành cho thiết bị di động, v.v.
Lọc nội dung - ví dụ:lọc nội dung theo danh sách các từ bị cấm

Ở cấp độ cơ bản, cơ sở dữ liệu Redis lưu trữ dữ liệu trong các cặp khóa-giá trị. Nhưng nó cũng có thể lưu trữ dữ liệu trong các cấu trúc dữ liệu nâng cao như Danh sách, Tập hợp, Tập hợp đã sắp xếp, v.v. Redis cũng cung cấp tập hợp các lệnh để thao tác với các cấu trúc dữ liệu này. Vì chúng tôi sẽ sử dụng một trong số chúng trong ứng dụng mẫu của mình, nên bạn nên xem qua các định nghĩa cấp cao của chúng.

Danh sách - giống một mảng cơ bản hơn. Danh sách cho phép bạn đẩy và bật các mục từ cả hai đầu của một chuỗi, tìm nạp các mục riêng lẻ và thực hiện nhiều thao tác khác. Các lệnh danh sách có tiền tố là chữ L, tức là LPOP, LPUSH, LSET, v.v.
Hash - cho phép bạn lưu trữ các nhóm cặp khóa-giá trị trong một khóa Redis duy nhất. Các lệnh băm có tiền tố là chữ H, tức là HSET, HGET, HDEL, v.v.
Bộ - giống như danh sách, nhưng Bộ là duy nhất và lưu trữ các mục trong danh sách không có thứ tự. Đó là lý do tại sao Bộ không thể sắp xếp được, nhưng bạn có thể nhanh chóng thêm, bớt và xác định xem một mục có trong Bộ hay không. Các lệnh đặt có tiền tố là chữ S, tức là SADD, SCARD, SISMEMBER, v.v.
Các tập hợp đã sắp xếp - giống như các tập hợp, nhưng các tập hợp Đã sắp xếp cho phép sắp xếp theo điểm số trông rất giống với cặp khóa-giá trị. Chúng tôi cũng có thể thao tác và sắp xếp điểm số này. Các lệnh tập hợp đã sắp xếp có tiền tố là chữ Z, i, e, ZADD, ZINCRBY, ZSCORE, v.v.

Bạn có thể tìm hiểu thêm về các lệnh Redis khác tại https://redis.io/commands

Thiết lập upstash

Làm theo hướng dẫn để thiết lập tài khoản và cơ sở dữ liệu theo docs @ https://docs.upstash.com/

Trước khi bắt đầu tạo ứng dụng Nuxt, hãy đảm bảo rằng tài khoản Upstash của bạn đã sẵn sàng. Bạn sẽ có thể tạo một cơ sở dữ liệu với tầng miễn phí.

Sau khi cơ sở dữ liệu của bạn được tạo, bạn có thể tạo và truy cập cơ sở dữ liệu Redis bằng bất kỳ ứng dụng khách Redis nào. Ngoài ra, bạn có thể sử dụng CLI👇 dựa trên trình duyệt được cung cấp trong bảng điều khiển Upstash để bắt đầu ngay lập tức.

Bắt đầu với Nuxt 3 và Serverless Redis

CLI dựa trên trình duyệt được cung cấp trong bảng điều khiển Upstash

`Redis-cli`

Bạn có thể thiết lập redis-cli trên thiết bị đầu cuối máy của bạn để tạo và truy cập cơ sở dữ liệu Redis trực tiếp từ giao diện dòng lệnh của bạn.

Redis gói npm

Chúng tôi cũng có một số gói npm để tương tác với cơ sở dữ liệu Redis. Chúng tôi sẽ sử dụng 1) @upstash/redis và 2) ioredis - để truy cập các lệnh Redis trong dự án Nuxt của chúng tôi.

Trong phần tiếp theo, chúng tôi sẽ thiết lập dự án Nuxt. Nuxt là một khung công tác SSR được xây dựng trên Vue. Nuxt Labs gần đây đã công bố bản phát hành Nuxt 3 beta. Vì vậy, hãy thiết lập một dự án Nuxt 3 mới.

Nuxt 3 hiện đang ở giai đoạn thử nghiệm, xin lưu ý rằng nó chưa sẵn sàng sản xuất .

⚡Hãy nói về Nuxt 3

Nuxt 3 giới thiệu một CLI hoàn toàn mới có tên là nuxi để tạo ứng dụng Nuxt.

npx nuxi init nuxt3-app

Chúng tôi sẽ tạo /pages thư mục và thêm một số tuyến đường đơn giản như bên dưới👇

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

app.vue là phần giới thiệu mới cho Nuxt 3 hoạt động như một thành phần chính. app.vue sẽ được tải cho mọi tuyến đường được xác định trong /pages thư mục.

Công cụ máy chủ nitro ⚙️

Nuxt 3 cũng giới thiệu một công cụ máy chủ hoàn toàn mới có tên Nitro. Chúng tôi có thể tận dụng sức mạnh của Nitro để tạo điểm cuối API máy chủ và phần mềm trung gian của máy chủ chỉ cần tạo một server thư mục có api và middleware dưới dạng các thư mục con. Bạn có thể xem lại cấu trúc thư mục tối giản này trong repo Github.

-server;
--api;
--middleware;

Cả API và phần mềm trung gian đều phải xuất một hàm mặc định xử lý các yêu cầu api và trả về dữ liệu hứa / JSON. Không giống như Nuxt 2, chúng ta không phải xác định server-middleware trong nuxt.config.js .

Dưới đây là danh sách cấp cao các bước chúng tôi cần thực hiện để xây dựng ứng dụng của mình:

Đầu tiên, chúng tôi kết nối với cơ sở dữ liệu Redis.
Để ghi lại lượt truy cập trang, chúng tôi chặn mọi yêu cầu trang được gửi đến máy chủ, tăng bộ đếm của trang đó lên một và lưu trữ giá trị của trang đó vào cơ sở dữ liệu Redis.
Sau đó, chúng tôi thực hiện lệnh gọi API từ phía máy khách để truy xuất số lượt truy cập từ cơ sở dữ liệu Redis và hiển thị trên trang Nuxt.

Về mặt khái niệm, các sơ đồ dưới đây cho thấy những gì chúng tôi đang cố gắng xây dựng👇

Bắt đầu với Nuxt 3 và Serverless Redis

Tìm hiểu thêm về Nuxt 3 @ https://v3.nuxtjs.org/getting-started/installation

Sử dụng REST Redis Client

Upstash cung cấp ứng dụng Redis dựa trên HTTP / REST của riêng mình - @upstash/redis - mà chúng tôi có thể thêm vào như một phần phụ thuộc trong dự án Nuxt của chúng tôi.

yarn add @upstash/redis

Xác thực Redis DB

Để xác thực cơ sở dữ liệu Redis, chúng ta cần xác định các biến môi trường sau:

REST URL (UPSTASH_REDIS_REST_URL) và
Mã thông báo (UPSTASH_REDIS_REST_TOKEN)

... từ bảng điều khiển Upstash - trong cơ sở dữ liệu.

Cấu hình thời gian chạy riêng

Bây giờ, để hiển thị các biến môi trường này ở phía máy chủ, Nuxt cung cấp cấu hình thời gian chạy mà chúng tôi xác định trong nuxt.config.js tệp.

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

Tiếp theo, chúng ta có thể truy cập trực tiếp các biến môi trường này bằng cách nhập #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,
});

Thay thế, không cấu hình cách tiếp cận sẽ là thêm UPSTASH_REDIS_REST_URL và UPSTASH_REDIS_REST_TOKEN trực tiếp vào .env tệp và tạo một phiên bản redis const redis = Redis.fromEnv() mà không cần chuyển các biến này tới Redis . Lưu ý rằng phép thuật này chỉ áp dụng được khi sử dụng @upstash/redis Khách hàng Redis.

Yêu cầu chặn bằng Nuxt server-middleware

Kể từ đây, chúng tôi có thể tự do sử dụng bất kỳ lệnh Redis nào được yêu cầu. Đối với ví dụ này, chúng tôi sẽ sử dụng tập hợp được sắp xếp, vì tập hợp được sắp xếp là duy nhất và cũng cho phép sắp xếp và thao tác với SCORE.

Ví dụ:chúng ta có thể sử dụng zincrby để tăng ĐIỂM của trang mỗi khi có yêu cầu đối với trang.

// 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();
}

Tạo không gian tên

Redis là cơ sở dữ liệu NoSql lưu trữ dữ liệu trong các cặp khóa-giá trị. Nó không có khái niệm về khóa tự động tăng hoặc có bất kỳ cách động nào để tạo UUID duy nhất thuộc bất kỳ loại nào. Đây là nơi chúng tôi giới thiệu getRedisKey() chức năng tiện ích.

Chức năng tiện ích này xử lý URL yêu cầu và tạo khóa duy nhất - mà chúng tôi sẽ sử dụng để lưu trữ số lượt truy cập trên mỗi trang. Bằng cách này, chúng tôi có thể ngăn việc tăng bộ đếm của mình so với cùng một khóa.

Trong ví dụ của chúng tôi, chúng tôi chọn URL yêu cầu và thay thế tất cả các bản sao của '/' với '.' để tạo các khóa có khoảng cách tên duy nhất.

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

Điều này sẽ giúp chúng tôi chuyển đổi, ví dụ:/about trang thành một khóa có khoảng cách tên sẽ đọc là page.about

Truy cập Redis DB bằng REST API Endpoints

Hãy tạo một điểm cuối API sẽ lấy số lượng hoặc ĐIỂM hiện tại cho các trang tương ứng.

Trong Nuxt 3, có hai cách để tìm nạp dữ liệu. 1) useAsyncData và 2) useFetch . Trong app.vue , chúng tôi sẽ sử dụng useAsyncData cùng với $fetch do thư viện ohmyfetch cung cấp.

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

Như bạn có thể thấy, cùng với lệnh gọi API, chúng tôi đã chuyển đường dẫn bộ định tuyến dưới dạng tham số truy vấn để xác định trang đang được truy cập👇

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

Không giống như phần mềm trung gian-máy chủ, chúng tôi sẽ phải sử dụng điểm cuối API này, /api/count để lấy số lượt truy cập. Điều đó đưa chúng ta đến phần thú vị!

Hãy tạo điểm cuối API này tại server/api/count.ts . Chúng tôi sẽ sử dụng useQuery phương pháp được cung cấp bởi h3 thư viện để truy cập tham số truy vấn được gửi từ phía máy khách.

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

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

Ở đây 👆 chúng ta sẽ sử dụng cùng một getRedisKey() tiện ích để đảm bảo khóa này khớp với khóa có khoảng cách bằng tên mà chúng tôi đã sử dụng trong phần mềm trung gian để tăng số lượng trang.

Vì vậy, bây giờ chúng ta có thể chuyển khóa này vào zscore rằng chúng tôi chắc chắn rằng nó tồn tại trong cơ sở dữ liệu để tìm nạp 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 };
};

Sử dụng Redis API trực tiếp với `ioredis`

Chúng ta có thể đạt được điều tương tự bằng cách sử dụng ioredis cả thư viện.

yarn add ioredis

Trong khi sử dụng ioredis , chúng tôi sẽ không có auth phương pháp có sẵn. Tuy nhiên, chúng tôi có một chuỗi kết nối - có sẵn trong bảng điều khiển Upstash - mà chúng tôi có thể sử dụng để kết nối với cơ sở dữ liệu Redis.

Chúng tôi có thể đặt UPSTASH_REDIS_CONN dưới dạng biến cấu hình thời gian chạy tương tự như chúng ta đã làm trước đó cho url và mã thông báo còn lại.

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

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

Tiếp theo, trong phần mềm trung gian, chúng ta sẽ tạo new Redis() ví dụ để tạo kết nối và truy cập tất cả các lệnh Redis từ máy khách client 👇

// server/middleware/pageCount.js

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

const client = new Redis(config.UPSTASH_REDIS_CONN);

Yêu cầu chặn bằng Nuxt server-middleware

Phần mềm trung gian Nuxt của chúng tôi sẽ vẫn giống như trước đây, ngoại trừ cách chúng tôi truy cập vào zincrby sẽ thay đổi👇

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

Truy cập Redis DB bằng REST API Endpoints

Trước đó, chúng tôi tạo điểm cuối API tùy chỉnh server/api/count.ts để đếm. Điểm cuối API đó cũng sẽ giữ nguyên, ngoại trừ cách chúng tôi gọi zscore phương pháp sẽ thay đổi một chút👇

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

Kiểm tra với Upstash CLI

Vì chúng tôi đang lưu trữ tất cả dữ liệu vào tập hợp được sắp xếp, chúng tôi có thể sử dụng zrange để tìm nạp tất cả các mục từ tập hợp đã sắp xếp của chúng tôi.

Bạn có thể truy cập Redis CLI được cung cấp trong bảng điều khiển Upstash và chạy lệnh sau:

zrange myPageCounts 0 -1

Đây👆:

myPageCounts là tên của tập hợp đã sắp xếp của chúng tôi,
0 -1 biểu thị phạm vi, trong đó 0 là giá trị bắt đầu và -1 đại diện cho mục cuối cùng của bộ.

Lệnh trên liệt kê tất cả các phím mà không có ĐIỂM SỐ của chúng. Chúng tôi có thể khắc phục điều đó bằng cách thêm CỬA HÀNG 👇

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

Trong khi bạn kiểm tra các API và phần mềm trung gian của mình, hãy đảm bảo kiểm tra bảng điều khiển Upstash để biết tất cả các hoạt động diễn ra trên trang web của bạn.

Bắt đầu với Nuxt 3 và Serverless Redis

Sử dụng tài nguyên trong bảng điều khiển Upstash

Triển khai ứng dụng Nuxt 3 của bạn

Công cụ máy chủ Nitro đóng một phần quan trọng trong khi triển khai ứng dụng Nuxt 3.

Netlify

Để triển khai trên Netlify, chúng tôi sẽ đẩy repo GitHub của ứng dụng Nuxt của chúng tôi như bình thường. Đảm bảo bạn thực hiện ba mục sau để đảm bảo việc triển khai của bạn diễn ra suôn sẻ.

Trong Netlify, sử dụng npm run build dưới dạng lệnh xây dựng của bạn và dist làm thư mục để xuất bản.
Tạo các biến môi trường của bạn cho url nghỉ ngơi, mã thông báo hoặc kết nối Redis trong Netlify trước khi triển khai.
Cuối cùng nhưng không kém phần quan trọng, hãy đảm bảo rằng bạn đã tạo netlify.toml trong thư mục gốc của dự án Nuxt của bạn. Đối với nội dung của tệp này, hãy truy cập netlify.toml.

Khi chúng tôi yarn build , Nuxt 3 tạo một thư mục có tên là .output mà chúng tôi đã sử dụng trong .toml của chúng tôi để cung cấp đường dẫn cho các chức năng của chúng tôi.

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

Đây là ví dụ Nuxt từ bài viết này chạy trên Netlify:https://thirsty-visvesvaraya-a09ab9.netlify.app/

Cloudflare

Chúng tôi có thể triển khai ứng dụng Nuxt 3 của mình trên Cloudflare worker ngay từ thiết bị đầu cuối! Tài liệu Nuxt 3 khuyến nghị Miniflare kiểm tra ứng dụng của bạn cục bộ, sau đó sử dụng Wrangler để xem trước và xuất bản.

Đảm bảo thêm wrangler.toml tệp trong thư mục gốc của dự án với Cloudflare account_id của bạn và các biến môi trường như được hiển thị trong tệp ví dụ này.

Để triển khai Cloudflare, chúng tôi sẽ cung cấp entry-point và xây dựng lệnh với NITRO_PRESET=cloudflare .

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

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

Đây là ví dụ Nuxt từ bài viết này chạy trên Cloudflare worker:https://upstash-demo.krutie-patel.workers.dev/contact

Kết luận

Chúng tôi đã trình bày về ứng dụng cơ bản nhất của Redis bằng cách sử dụng các dịch vụ Upstash để xem cách chúng tôi có thể tích hợp nó với khung kết xuất phía máy chủ như Nuxt (v3) để:

kết nối với cơ sở dữ liệu Redis,
tạo các khóa duy nhất và ghi các cặp khóa-giá trị vào cơ sở dữ liệu,
đọc dữ liệu từ cơ sở dữ liệu Redis và
triển khai ứng dụng của chúng tôi cho nhân viên Netlify và Cloudflare.

Upstash cũng cung cấp một tùy chọn để mã hóa lưu lượng dữ liệu cho mỗi cơ sở dữ liệu mà chúng tôi tạo, cùng với một tùy chọn để sao chép dữ liệu trong nhiều vùng khả dụng và để lưu vào bộ nhớ cache các phản hồi API REST của chúng tôi trên các vị trí cạnh được phân phối toàn cầu. Bạn có thể tìm thấy các tùy chọn này trong bảng điều khiển Upstash, trong chi tiết tab của cơ sở dữ liệu của bạn.

Đối với bất kỳ người mới bắt đầu nào muốn khám phá Redis DB, Upstash giúp bạn dễ dàng bắt đầu làm việc với các công nghệ front-end sắp ra mắt và hiện có mà chúng tôi đã biết và yêu thích. Tôi hy vọng bài viết này cung cấp cho bạn một điểm khởi đầu tốt để bắt đầu hành trình Redis của bạn.

Bắt đầu với Nuxt 3 và Serverless Redis

Giới thiệu

Tài nguyên

Upstash là gì?

Redis là gì?

Thiết lập upstash

Redis-cli

Redis gói npm

⚡Hãy nói về Nuxt 3

Công cụ máy chủ nitro ⚙️

Sử dụng REST Redis Client

Xác thực Redis DB

Cấu hình thời gian chạy riêng

Yêu cầu chặn bằng Nuxt server-middleware

Tạo không gian tên

Truy cập Redis DB bằng REST API Endpoints

Sử dụng Redis API trực tiếp với ioredis

Yêu cầu chặn bằng Nuxt server-middleware

Truy cập Redis DB bằng REST API Endpoints

Kiểm tra với Upstash CLI

Triển khai ứng dụng Nuxt 3 của bạn

Netlify

Cloudflare

Kết luận

`Redis-cli`

Sử dụng Redis API trực tiếp với `ioredis`