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として読み取られる名前間隔のキーにページを移動します

RESTAPIエンドポイントを使用してRedisDBにアクセスする

それぞれのページの現在のカウントまたはSCOREを取得するAPIエンドポイントを作成しましょう。

Nuxt 3では、データをフェッチする方法が2つあります。 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エンドポイント/api/countを使用する必要があります 訪問数を取得します。それは私たちを楽しい部分に導きます！

このAPIエンドポイントをserver/api/count.tsに作成しましょう 。 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 };
};

RedisAPIをioredisで直接使用する

ioredisを使用して同じことを達成できます ライブラリも同様です。

yarn add ioredis

ioredisを使用している間 、authはありません 利用可能な方法。ただし、Redisデータベースとの接続に使用できる接続文字列（Upstashコンソールで使用可能）があります。

UPSTASH_REDIS_CONNを設定できます 以前にrest-urlとtokenに対して行ったのと同様に、ランタイム構成変数として。

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

RESTAPIエンドポイントを使用してRedisDBにアクセスする

以前に、カスタム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 };
};

UpstashCLIでテスト

すべてのデータをsorted-setに格納しているため、zrangeを使用できます。 ソートされたセットからすべてのアイテムをフェッチします。

Upstashコンソールで提供されるRedisCLIにアクセスして、次のコマンドを実行できます。

zrange myPageCounts 0 -1

ここ👆：

• myPageCounts ソートされたセットの名前です
• 0 -1 範囲を示します。ここで、0 は開始値であり、-1 セットの最後のアイテムを表します。

上記のコマンドは、スコアなしのすべてのキーを一覧表示します。 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とミドルウェアをテストするときは、Webサイトで行われているすべてのアクティビティについてUpstashコンソールを確認してください。

Upstashコンソールでのリソース使用量

Nuxt3アプリのデプロイ

Nuxt 3アプリをデプロイする際、Nitroサーバーエンジンは重要な役割を果たします。

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

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

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