UpstashRedisをRemixのセッションストアとして使用する

• https://upstash.com/にアクセスして新しいアカウントを作成します
• 新しいRedisDBを作成する
• UPSTASH_REDIS_REST_URLをコピーします ＆UPSTASH_REDIS_REST_TOKEN それらを.envというファイルに保存します Remixプロジェクトのルートにあります。
• dotenvをインストールします -$ npm install --save-dev dotenv -これにより、.envから環境変数を挿入できるようになります 作成したファイル。
• Go to you package.json ファイルを作成し、devを置き換えます スクリプトフォームremix dev dotenv/config node_modules/.bin/remix devへ 。

ステップ2-コアのcreateSessionStorageを実装します Upstashセッションの実装を作成するには

Remixは、createSessionStorageを使用して独自のセッション統合を構築するための優れたAPIを提供します 。この関数を実装してUpstashを統合しましょう。

// sessions/upstash.server.ts

import * as crypto from "crypto";

import { createSessionStorage } from "remix";

const upstashRedisRestUrl = process.env.UPSTASH_REDIS_REST_URL;

const headers = {
  Authorization: `Bearer ${process.env.UPSTASH_REDIS_REST_TOKEN}`,
  Accept: "application/json",
  "Content-Type": "application/json",
};

const expiresToSeconds = (expires) => {
  const now = new Date();
  const expiresDate = new Date(expires);
  const secondsDelta = expiresDate.getSeconds() - now.getSeconds();
  return secondsDelta < 0 ? 0 : secondsDelta;
};

// For more info check https://remix.run/docs/en/v1/api/remix#createsessionstorage
export function createUpstashSessionStorage({ cookie }: any) {
  return createSessionStorage({
    cookie,
    async createData(data, expires) {
      // Create a random id - taken from the core `createFileSessionStorage` Remix function.
      const randomBytes = crypto.randomBytes(8);
      const id = Buffer.from(randomBytes).toString("hex");
      // Call Upstash Redis HTTP API. Set expiration according to the cookie `expired property.
      // Note the use of the `expiresToSeconds` that converts date to seconds.
      await fetch(
        `${upstashRedisRestUrl}/set/${id}?EX=${expiresToSeconds(expires)}`,
        {
          method: "post",
          body: JSON.stringify({ data }),
          headers,
        }
      );
      return id;
    },
    async readData(id) {
      const response = await fetch(`${upstashRedisRestUrl}/get/${id}`, {
        headers,
      });
      try {
        const { result } = await response.json();
        return JSON.parse(result).data;
      } catch (error) {
        return null;
      }
    },
    async updateData(id, data, expires) {
      await fetch(
        `${upstashRedisRestUrl}/set/${id}?EX=${expiresToSeconds(expires)}`,
        {
          method: "post",
          body: JSON.stringify({ data }),
          headers,
        }
      );
    },
    async deleteData(id) {
      await fetch(`${upstashRedisRestUrl}/del/${id}`, {
        method: "post",
        headers,
      });
    },
  });
}

今書いたことを説明しましょう：sessions/upstash.server.tsという名前のファイルを作成しました 。このファイルは、createUpstashSessionStorageという名前の関数をエクスポートします 。この関数は、パラメータとしてcookieを取ります。 （これについては後で詳しく説明します）そしてコアRemix createSessionStorageを使用します 新しいセッションプロバイダーを実装するためのファクトリ関数。

関数内にcreateSessionStorageを実装しました 新しいセッションを作成するためのプロトコル（createData ）、セッション値を読み取ります（readData ）、セッション値を更新します（updateData ）そしてセッションを削除します（deleteData 。

各関数はRESTを使用します Redisデータベースと対話するためのUpstashAPI。

// sessions.server.ts

import { createCookie } from "remix";
import { createUpstashSessionStorage } from "~/sessions/upstash.server";

// This will set the length of the session.
// For the example we use a very short duration to easily demonstrate its functionally.
const EXPIRATION_DURATION_IN_SECONDS = 10;

const expires = new Date();
expires.setSeconds(expires.getSeconds() + EXPIRATION_DURATION_IN_SECONDS);

const sessionCookie = createCookie("__session", {
  secrets: ["r3m1xr0ck1"],
  sameSite: true,
  expires,
});

const { getSession, commitSession, destroySession } =
  createUpstashSessionStorage({ cookie: sessionCookie });

export { getSession, commitSession, destroySession };

// routes/index.tsx

import type { LoaderFunction } from "remix";
import { json, useLoaderData } from "remix";
import { commitSession, getSession } from "~/sessions.server";

export const loader: LoaderFunction = async ({ request }) => {
  // Get the session from the cookie
  const session = await getSession(request.headers.get("Cookie"));
  const myStoredData = session.get("myStoredData");
  // If no session found (was never created or was expired) create a new session.
  if (!myStoredData) {
    session.set("myStoredData", "Some data");
    return json(
      {
        message: "Created new session",
      },
      {
        headers: {
          "Set-Cookie": await commitSession(session),
        },
      }
    );
  }
  // If session was found, present the session info.
  return json({
    message: `Showing Session info: ${myStoredData}`,
  });
};

export default function () {
  const data = useLoaderData();
  return <div>{data.message}</div>;
}

// from sessions/upstash.server.t

const { getSession, commitSession, destroySession } =
  createUpstashSessionStorage({ cookie: sessionCookie });

// from sessions/upstash.server.ts

const { getSession, commitSession, destroySession } = (process.env.NODE_ENV === "development") ?
createFileSessionStorage({ cookie: sessionCookie, dir: './sessions' });
:  createUpstashSessionStorage({ cookie: sessionCookie });