Redis

Redisはメモリ（RAM）上にデータを保存・管理する専用のデータベースソフト
Redisはメモリにデータを保存するので、読み書きが高速
一方、PostgreSQLなどのデータベースはディスク（SSD/HDD）にデータを保存する
Redisはシングルスレッドで高速で順番に処理がされていく
メモリにデータを保存するので、永続的なデータの保存を念頭に置くような使いかたはしない
Vercelにデプロイしている場合は、外部のRedisサービス（例：Upstash、Redis Cloud）を使ってRedisに接続する

インストール

sudo apt install redis-server

Redisの操作（CLI）

Redisの起動：

redis-server      # Redisサーバー起動 ポート6379で起動

redis-cli         # Redisクライアント（CLI）で接続

redis-server でRedisを起動し、 redis-cli と打つと、Redisが 6379ポートで動いているのがわかる

127.0.0.1:6379>

基本的な操作：

SET mykey "Hello" 
GET mykey 
DEL mykey

key / value を扱うだけなのでシンプル

Redis Insight（GUI）

（Ubuntu）アプリセンターにあった redis insight をインストールした

「Add Redis Database / Add Database を選択」
接続URLは自動入力されている

接続URL： redis://default@127.0.0.1:6379

redis://	Redisプロトコル（httpsやftpと同じようなもの）
default@	ユーザー名（Redis 6以降のACLでサポートされる。default は最初からあるデフォルトユーザー）
127.0.0.1	接続先（ローカルホスト＝自分のPC）
:6379	ポート番号（Redisのデフォルト

Nextjs：Redisを使ったレートリミットの例

npm install ioredis

lib/redis.ts：

import Redis from "ioredis";

const redis = new Redis({
  host: "127.0.0.1",
  port: 6379,
  // username: "default", // 通常省略可能
  // password: "your_password", // 設定している場合のみ
});
export default redis;

api/redis/route.ts：

import redis from "@/lib/redis";
import { NextResponse } from "next/server";

export async function GET(req: Request) {
  const ip = req.headers.get("x-forwarded-for") || "unknown";

  const key = `rate-limit:${ip}`;
  const limit = 10;
  const windowSec = 60;

  const current = await redis.incr(key);

  if (current === 1) {
    await redis.expire(key, windowSec);
  }

  if (current > limit) {
    return NextResponse.json(
      { message: "Too many requests", success: false },
      { status: 429 }
    );
  }

  return NextResponse.json({ message: "Hello from API!", success: true });
}

Ip取得：req.headers.get("x-forwarded-for")
redis.incr(key) は、指定したキーの値を1 増やすRedisコマンド
上記は、[ key / value ] = [ rate-limit:127.0.0.1 / 3 ] のように保存される

サーバーPageで使用

import React from "react";
import RedisTestButton from "./RedisTestButton";

const RedisTestPage = async () => {
  const result = await fetch("http://localhost:3000/api/redis").then((res) =>
    res.json()
  );

  return (
    <div>
      RedisTestPage: {result && result.success ? "OK" : "Rate limit exceeded"}

      <RedisTestButton />
    </div>
  );
};

export default RedisTestPage;

クライアントコンポーネントで使用

"use client";
import { Button } from "@/components/ui/button";
import React, { useState } from "react";

const RedisTestButton = () => {
  const [limited, setLimited] = useState(false);
  return (
    <>
      {limited ? (
        <div>Rate limited</div>
      ) : (
        <Button
          onClick={async () => {
            const res = await fetch("/api/redis");
            const data = await res.json();
            console.log(data);
            if (!data.success) {
              setLimited(true);
            }
          }}
        >
          RedisTestButton
        </Button>
      )}
    </>
  );
};

export default RedisTestButton;

middleware.ts

middleware.tsは「Edge Runtime」といってNodejsではないので、Nodejsで動くようなPrismaやRedisが使えない

*実験的機能でNodejsが使えるようになってはいる

Redis：ローカルで使う

Redis：ローカルで使う