Upstash Redis を使用した Next.js での安全なセッション管理

このガイドでは、Web アプリケーションにおける「セッション」の意味、Redis がセッション管理に最適な選択肢である理由、Upstash Redis データベースのセットアップ方法、最後にそれを Next.js アプリケーションに統合する方法を学びながら、Upstash Redis を使用した Next.js アプリでのセッション管理について説明します。

「セッション」とは何ですか?

ウェブ アプリケーションにおける「セッション」は、一定の時間間隔で複数の HTTP リクエストにわたるアプリケーションとのユーザーの対話状態を維持するために使用される一時的なサーバー側のストレージ メカニズムです。

HTTP はステートレス プロトコルであるため、各リクエストは独立しており、以前のインタラクションを「記憶」しないため、サーバーはセッションを使用して、認証ステータス、設定、Web サイト滞在中のユーザーのあらゆる種類のアクティビティなどのユーザー固有のデータを追跡および保存できます。

セッションは通常、一意のセッション ID をクライアント側 (通常は Cookie) に保存することによって機能します。サーバーは、ユーザーがサイトを操作するたびに、この ID を使用してユーザー セッションに関連するデータをセッション ストレージ (このブログの Redis など) から取得します。

Web アプリケーションのセッションは、次のユーザー インタラクションと状態管理を処理する優れた方法です。

• ユーザー認証 :セッションはユーザーを認証し、ページ間や更新後でもログイン状態を記憶するのに役立ちます。
• カスタマイズ :セッションにより、サーバーはユーザー設定、認証ステータスなどのデータを保存および取得できるようになります。
• セキュリティ :適切なセッション管理により、CSRF からの保護や、権限のないユーザーが制限エリアにアクセスできないようにするなど、アプリのセキュリティを強化できます。

セッション管理に Redis を使用する理由

どうでしょうか:)

セッション管理のためのセッション ストアとして Redis を使用する理由は複数あります。 Redis の構造から生じる利点をいくつか示します。

• データ アーキテクチャ :Redis はメモリ内のキーと値のストアです。キーと値のペアはハッシュに格納できます。ハッシュとは、フィールドと値のペアのコレクションとして構造化されたレコード タイプです。この構造はセッション管理データ タイプに完全に適合し、ユーザー名、ユーザー設定などのすべてのセッション データをユーザー セッションごとのハッシュのキーと値の形式で維持します。

• データの有効期限 :Redis には、期限切れのデータを削除する機能が組み込まれています。これは、Web アプリケーションがユーザー セッションの時間制限を維持するのに役立ちます。

• 低遅延 :「メモリ内」という性質により、Redis は非常に高速です。このため、ユーザー セッションやキャッシュ データによく使用されます。

• スケーラビリティ :Redis は、大量のデータと高スループットのトラフィックを処理するように構築されています。

また、Redis とユーザー セッション データを保存する最も一般的な方法の 1 つであるクライアント側 Cookie を単純に比較して、Web アプリケーションでどちらの方法に従うかを決定することもできます。セッション ストレージとしての Redis には、クライアント側の Cookie に比べて次のような利点があります。

• ユーザーの改ざんに対して脆弱ではない :Cookie はユーザーに表示され、ユーザーによる操作が可能です。 Redis を使用すると、ユーザー データをユーザーによる操作から保護できます。

• クライアントとサーバー間で転送されるデータが少なくなります: すべてのセッション情報は Redis に保存されるため、クライアント マシンには何も保存する必要はありません。

• クライアント マシンに「SessionId」のみを保存する: Redis を使用する場合、このリクエストがどのセッションにあるかを知るには、リクエストごとに sessionId を取得するだけで済みます。

Upstash Redis データベースの作成

Upstash Redis のセットアップに入る前に、まず Upstash Redis の利点を理解する必要があります。これから使用するツールを、なぜ使用する必要があるのかを理解せずに使用するのは意味がありません。

Upstash Redis を使用する主な利点を見てみましょう。

• サーバーレス: Upstash Redis はサーバーレス データベースです。インフラストラクチャを保守したり、データベースのスケーリングやその他の低レベルの構成を心配したりする必要はありません。データベースを作成して使用するだけです。

• グローバルなデータ分散: Upstash を使用すると、ユーザーに近いリージョンに Redis インスタンスをデプロイできるため、レイテンシがさらに短縮されます。これは、グローバルに分散されたアプリケーションにとって特に有益であり、ユーザーの場所に関係なく、セッション ストレージの高速性と応答性が確保されます。

• 従量課金制: 入場料はありません。使用した分だけお支払いいただきます。料金の詳細を確認できます。

セッション管理に Upstash Redis を使用する理由についてこれ以上質問がなければ、Upstash Redis データベースを作成できます。

Upstash コンソールを使用して Redis データベースを作成します。

「データベースの作成」ボタンをクリックして、Redis データベースを作成しましょう。このチュートリアルでは、Upstash Redis データベースを作成することがいかに簡単かつ迅速であるかをもう一度示します。

表示されるモーダルで、データベースの名前を選択し、そのリージョンを選択します。サービスと同じリージョンを選択した方がよい場合があります。

次へボタンをクリックした後、料金プランを選択します。最大予算制限のある従量課金制が私のお気に入りです!

これで、Redis データベースの準備が整いました。 Redis ダッシュボードで、データベース エンドポイント、データベースに接続するためのパスワード、およびそのポートを確認できます。この情報は、Web アプリケーションからデータベースに接続するときに必要になります。

以上です！

Nextjs アプリで Upstash Redis を使用する

Redis が Web アプリケーション インフラストラクチャ内でどのように機能するかを見てみましょう。

• まず、セッション ID なしでクライアント ブラウザからリクエストを取得します。

• リクエストには sessionId がないため、1 つの sessionId を作成し、Redis でハッシュを作成します。

• sessionId をクライアント マシンへの応答内の Cookie として返します。

• sessionId を持つ新しい HTTP リクエストを受信すると、Redis から必要なセッション データを取得し、クライアントに応答するときにそれを使用します。

以下は、プロセスをよりわかりやすく視覚化するために、サービスと Redis との接続のシーケンス図です。

すべて問題なければ、Nextjs アプリをお持ちでない限り、ターミナルで次のコマンドを実行して Nextjs アプリを作成できます。

npx create-next-app@latest <project-name>

次に、Upstash Redis Typescript SDK をインストールする必要があります。

cd <project-name>
npm install @upstash/redis

必要な依存関係をインストールした後、ユーザーのブラウザの Cookie でセッション ID を管理し、アプリのセッション ストレージである Upstash Redis と対話するためのインターフェースを作成できるようになります。

このインターフェースは /app/lib/sessionManager.tsx で実装します。 ファイル。

import { Redis } from '@upstash/redis'
import { cookies } from 'next/headers'
 
export const redis = new Redis({
 url: '<UPSTASH-REDIS-URL>',
 token: 'UPSTASH-REDIS-TOKEN',
})
 
type SessionId = string;
type Key = 'userName' | 'sessionStatus'; // other keys of the session data can be added.
 
export async function getSessionId(): SessionId | undefined {
 const cookieStore = await cookies();
 return cookieStore.get("session-id")?.value;
}
 
async function setSessionId(sessionId: SessionId): void {
 const cookieStore = await cookies();
 cookieStore.set("session-id", sessionId);
}
 
export async function getSessionIdAndCreateIfMissing() {
 const sessionId = await getSessionId();
 if (!sessionId) {
 const newSessionId = crypto.randomUUID();
 await setSessionId(newSessionId);
 
 return newSessionId;
 }
 
 return sessionId;
}
 
export async function get(key: Key, username: string = "") {
 const sessionId = await getSessionId();
 if (!sessionId) {
 return null;
 }
 return await redis.hget(`session-${username}-${sessionId}`, key);
}
 
export async function getAll(username: string = "") {
 const sessionId = await getSessionId();
 if (!sessionId) {
 return null;
 }
 return await redis.hgetall(`session-${username}-${sessionId}`);
}
 
export async function set(key: Key, value: string, username: string = "") {
 const sessionId = await getSessionIdAndCreateIfMissing();
 await redis.hset(`session-${username}-${sessionId}`, { [key]: value });
 return redis.expire(`session-${username}-${sessionId}`, 900);
}

これらの関数を調べてみましょう。

• getSessionId :セッション ID はユーザーのブラウザの Cookie に保存されます。この関数は、HTTP 呼び出し内で API に送信されたブラウザ Cookie からセッション ID を取得します。

• setSessionId :この関数は、セッション ID クッキーを指定されたセッション ID パラメータに設定します。

• getSessionIdAndCreateIfMissing :この関数は getSessionId を呼び出します。 ユーザーのブラウザにセッション ID がすでに存在しない限り、Cookie から既存のセッション ID を取得し、新しいランダムな UUID を新しいセッション ID として設定します。この関数は、新しいセッション ID を Cookie に追加してブラウザに送り返します。

• セッションデータの取得 :この関数を呼び出して、Redis からセッション データを取得します。指定されたキーのセッション データを Upstash Redis から取得して返します。

• すべてのセッションデータを取得 :この関数はすべてのセッション データを取得します。 Upstash Redis からセッション ハッシュのすべてのキーと値のペアを取得します。

• setSessionData :この関数では、指定されたセッションのキーと値のペアを設定します。

このユーティリティは Upstash Redis 経由でセッション ID とセッション ストレージを管理する機能があるため、これらの機能を使用する API を実装できるようになりました。

API は非常にシンプルになります。パスからユーザー名を受け取ります。リクエストを受信すると、まずセッション ID が Cookie に存在するかどうかを確認します。 Cookie にセッション ID がない場合は、新しい ID が生成され、応答の Cookie に設定されます。セッション ID が存在する場合は、Upstash Redis のハッシュにセッションを表すキーがあるかどうかがチェックされます。存在しない場合は、そのハッシュ内にキーと値のペアが作成されます。

コーディングしましょう!

API は Nextjs のアプリ ルーターを使用して作成されます。

app/api/user/ の下にファイルを作成する必要があります。 [ユーザー名]named ルート.tsx`.

 import * as sessionStore from '../../lib/session'
 
 export async function GET(request: Request,{ params }: { params: Promise<{ user: string }> }){
 const userName = (await params).user;
 const sessionId = await sessionStore.getSessionIdAndCreateIfMissing();
 const sessionStatus = await sessionStore.get('sessionStatus', userName);
 if(sessionStatus == null) {
 console.log('There is no active session.');
 await sessionStore.set('sessionStatus', 'ACTIVE', userName);
 }
 return Response.json({ userName: userName, sessionId: sessionId });
}
 

このルート ファイルにより、Nextjs は <URL>:3000/api/user/<username> に送信されたリクエストを解決できるようになります。 内部で定義された HTTP メソッドに接続します。

次に、実際の動作を見てみましょう。ターミナルからルート ディレクトリに移動し、次のコマンドを実行して、Nextjs アプリを実行しましょう。

npm run dev

これで、API エンドポイント http://localhost:3000/api/user/noah を開くことができます。 ブラウザ上で。これを開くと、ユーザー名とセッション ID が返されることがわかります。

{"userName":"noah","sessionId":"804814dc-10fc-4b0a-a4c1-321f4b54d399"}

右クリックして検査すると、「アプリケーション」タブに移動して、Cookie に設定されたセッション ID が表示されます。

また、Upstash Redis がデータベース内にセッションが作成されているかどうかを確認することもできます。これを確認するには、Upstash Redis コンソールに戻り、Redis データベースを開いて、Data Browser を開く必要があります。 タブ。

Data Browser タブには、以下に示すようにセッション データが表示されます。

結論

Upstash Redis を使用して Next.js アプリでセッションを管理すると、スケーラブルで効率的なソリューションが提供されます。このブログ投稿では、Nextjs アプリを作成し、それを Upstash Redis と統合して、セッション管理ストレージとして使用しました。

Redis データベースをセットアップし、Next.js とシームレスに統合することで、従来のサーバー側の複雑さを伴うことなく、セッション ストレージを効果的に処理できます。このアプローチは、セッション管理のパフォーマンスとシンプルさを求める開発者にとって理想的です。

このガイドが、Upstash Redis を Next.js アプリケーションの信頼できるセッション ストアとして実装するための明確な道筋を提供できれば幸いです。