Upstash Redis를 사용하여 Next.js에서 보안 세션 관리

이 가이드에서는 웹 애플리케이션에서 "세션"이 무엇을 의미하는지, 왜 Redis가 세션 관리를 위해 선택되는지, Upstash Redis 데이터베이스를 설정하는 방법, 마지막으로 이를 Next.js 애플리케이션에 통합하는 방법을 학습하여 Upstash Redis를 사용하는 Next.js 앱의 세션 관리를 안내합니다.

'세션'이란 무엇인가요?

웹 애플리케이션에서 '세션'은 특정 시간 간격으로 여러 HTTP 요청에 걸쳐 사용자와 애플리케이션의 상호 작용 상태를 유지하는 데 사용되는 임시 서버측 저장 메커니즘입니다.

HTTP는 상태 비저장 프로토콜, 즉 각 요청이 독립적이고 이전 상호 작용을 "기억"하지 않는다는 의미이므로 세션을 통해 서버는 인증 상태, 기본 설정 또는 사용자가 웹사이트에 있는 동안의 모든 종류의 활동과 같은 사용자별 데이터를 추적하고 저장할 수 있습니다.

세션은 일반적으로 클라이언트 측에 쿠키에 고유한 세션 ID를 저장하여 작동합니다. 서버는 이 ID를 사용하여 사용자가 사이트와 상호 작용할 때마다 이 블로그의 Redis와 같은 세션 저장소에서 사용자 세션과 관련된 데이터를 검색합니다.

웹 애플리케이션의 세션은 다음과 같은 사용자 상호 작용 및 상태 관리를 처리하는 좋은 방법입니다.

• 사용자 인증 :세션은 사용자를 인증하고 여러 페이지에서 또는 새로 고친 후에도 로그인 상태를 기억하는 데 도움이 됩니다.
• 개인화 :세션을 통해 서버는 사용자 기본 설정, 인증 상태 등과 같은 데이터를 저장하고 검색할 수 있습니다.
• 보안 :적절한 세션 관리는 CSRF로부터 보호하고 승인되지 않은 사용자가 제한 구역에 접근하지 못하도록 하는 등 앱 보안을 강화할 수 있습니다.

세션 관리에 Redis를 사용해야 하는 이유

왜 안되나요 :)

세션 관리를 위한 세션 저장소로 Redis를 사용하는 데는 여러 가지 이유가 있습니다. Redis의 구조에서 발생하는 몇 가지 이점은 다음과 같습니다.

• 데이터 아키텍처 :Redis는 메모리 내 키-값 저장소입니다. 키-값 쌍은 해시에 저장될 수 있습니다. 여기서 해시는 필드-값 쌍의 모음으로 구성된 레코드 유형입니다. 이 구조는 사용자 이름, 사용자 기본 설정 등과 같은 모든 세션 데이터를 사용자 세션당 해시의 키-값 형식으로 유지하는 세션 관리 데이터 유형에 완벽하게 들어맞습니다.

• 데이터 만료 :Redis에는 만료된 데이터를 삭제하는 기능이 내장되어 있습니다. 이는 웹 애플리케이션이 사용자 세션을 시간 제한적으로 유지하는 데 도움이 됩니다.

• 낮은 지연 시간 :Redis는 "인메모리" 특성으로 인해 매우 빠릅니다. 이것이 바로 사용자 세션 및 캐시 데이터에 일반적으로 사용되는 이유입니다.

• 확장성 :Redis는 대용량 데이터와 높은 처리량의 트래픽을 처리하도록 구축되었습니다.

또한 Redis를 사용자 세션 데이터를 저장하는 가장 일반적인 방법 중 하나인 클라이언트 측 쿠키와 간단히 비교하여 웹 애플리케이션에서 어떤 방식을 따를지 결정할 수 있습니다. 클라이언트 측 쿠키에 비해 세션 저장소로서 Redis의 몇 가지 장점:

• 사용자 조작에 덜 취약함 :쿠키는 이용자에게 공개되며 이용자가 조작할 수 있습니다. Redis를 사용하면 사용자가 사용자 데이터를 조작하지 못하도록 보호할 수 있습니다.

• 클라이언트와 서버 간에 전송되는 데이터 양이 적음: 모든 세션 정보를 Redis에 저장하므로 클라이언트 시스템에 아무 것도 저장할 필요가 없습니다.

• 클라이언트 시스템에 'SessionId'만 저장: Redis를 사용하는 경우 각 요청에 대해 해당 요청이 어느 세션에 있는지 확인하려면 sessionId만 필요합니다.

Upstash Redis 데이터베이스 생성

Upstash Redis 설정을 시작하기 전에 먼저 Upstash Redis의 장점을 이해해야 합니다. 앞으로 사용할 도구를 사용해야 하는 이유를 이해하지 않고 사용하는 것은 의미가 없겠죠?

Upstash Redis 사용의 주요 이점을 살펴보겠습니다:

• 서버리스: Upstash Redis는 서버리스 데이터베이스입니다. 인프라를 유지 관리할 필요가 없으며 데이터베이스 확장 또는 기타 하위 수준 구성에 대해 걱정할 필요가 없습니다. 데이터베이스를 만들어 사용하면 됩니다.

• 글로벌 데이터 배포: Upstash를 사용하면 사용자와 가까운 지역에 Redis 인스턴스를 배포하여 지연 시간을 더욱 줄일 수 있습니다. 이는 전 세계적으로 분산된 애플리케이션에 특히 유용하며, 사용자 위치에 관계없이 세션 저장이 빠르고 반응성이 뛰어나도록 보장합니다.

• 종량제: 입장료는 없습니다. 사용한 만큼만 비용을 지불하면 됩니다. 가격 세부정보를 확인할 수 있습니다.

좋습니다. 세션 관리를 위해 Upstash Redis를 사용하는 이유에 대해 더 이상 질문이 없다면 Upstash Redis 데이터베이스를 생성하면 됩니다.

Upstash 콘솔을 통해 Redis 데이터베이스를 생성하겠습니다.

“Create Database” 버튼을 클릭하여 Redis 데이터베이스를 생성해 보겠습니다. 이 튜토리얼은 Upstash Redis 데이터베이스를 생성하는 것이 얼마나 쉽고 빠른지 다시 한 번 보여줍니다.

나타나는 모달에서 데이터베이스 이름을 선택하고 해당 지역을 선택합니다. 귀하의 서비스와 동일한 지역을 선택하는 것이 더 나을 수 있습니다.

다음 버튼을 클릭한 후 요금제를 선택하겠습니다. 내가 가장 좋아하는 것은 최대 예산 한도로 사용한 만큼 지불하는 것입니다!

이제 Redis 데이터베이스가 준비되었습니다. Redis 대시보드에서 데이터베이스 엔드포인트, 데이터베이스에 연결하기 위한 비밀번호 및 해당 포트를 볼 수 있습니다. 웹 애플리케이션에서 데이터베이스에 연결하려고 할 때 이 정보가 필요합니다.

그게 다야!

Nextjs 앱에서 Upstash Redis 사용

Redis가 웹 애플리케이션 인프라 내에서 어떻게 작동하는지 살펴보겠습니다.

• 먼저 sessionId 없이 클라이언트 브라우저에서 요청을 받습니다.

• 요청에 sessionId가 없으므로 하나의 sessionId를 생성하고 Redis에서 해시를 생성합니다.

• 클라이언트 시스템에 대한 응답으로 sessionId를 쿠키로 반환합니다.

• sessionId가 포함된 새 HTTP 요청을 받으면 Redis에서 필요한 세션 데이터를 검색하여 클라이언트에 응답할 때 사용합니다.

다음은 서비스의 시퀀스 다이어그램과 프로세스를 더 잘 시각화하기 위한 Redis와의 연결입니다.

모든 것이 정상이라면 Nextjs 앱이 없으면 터미널에서 다음 명령을 실행하여 Nextjs 앱을 만들 수 있습니다.

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

이제 Upstash Redis Typescript SDK를 설치해야 합니다.

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

필수 종속성을 설치한 후 이제 사용자 브라우저 쿠키의 세션 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는 사용자 브라우저의 쿠키에 저장됩니다. 이 함수는 HTTP 호출 내에서 API로 전송된 브라우저 쿠키에서 세션 ID를 가져오는 것입니다.

• setSessionId :이 함수는 세션 ID 쿠키를 주어진 세션 ID 매개변수로 설정합니다.

• getSessionIdAndCreateIfMissing :이 함수는 getSessionId을 호출합니다. 쿠키에서 기존 세션 ID를 가져오고 사용자 브라우저에 이미 세션 ID가 없는 한 새 임의의 UUID를 새 세션 ID로 설정합니다. 또한 이 기능은 새 세션 ID를 쿠키에 추가하여 브라우저로 다시 보냅니다.

• getSessionData :Redis에서 세션 데이터를 가져오기 위해 이 함수를 호출하겠습니다. Upstash Redis에서 주어진 키의 세션 데이터를 가져와서 반환합니다.

• getAllSessionData :이 함수는 모든 세션 데이터를 가져옵니다. Upstash Redis에서 세션 해시의 모든 키-값 쌍을 가져옵니다.

• setSessionData :이 함수에서는 해당 세션의 키-값 쌍을 설정합니다.

Upstash Redis를 통해 세션 ID 및 세션 스토리지를 관리하는 유틸리티 기능이 있으므로 이제 이러한 기능을 사용하는 API를 구현할 수 있습니다.

API는 매우 간단합니다. 경로에서 사용자 이름을 받게 됩니다. 요청을 받으면 먼저 세션 ID가 쿠키에 있는지 확인합니다. 쿠키에 세션 ID가 없으면 새 ID를 생성하고 응답의 쿠키에 설정합니다. 세션 ID가 존재하는 경우 세션을 나타내는 해시의 Upstash Redis에 키가 있는지 확인합니다. 없는 경우 해당 해시에 키-값 쌍이 생성됩니다.

코딩해보자!

API는 Nextjs의 앱 라우터를 사용하여 생성됩니다.

app/api/user/ 아래에 파일을 만들어야 합니다 [사용자 이름]named Route.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"}

마우스 오른쪽 버튼을 클릭하고 검사하면 '애플리케이션' 탭으로 이동하여 쿠키에 설정된 세션 ID를 확인할 수 있습니다.

데이터베이스에 세션이 생성되었는지 여부도 Upstash Redis에서 확인할 수 있습니다. 이를 확인하려면 Upstash Redis 콘솔로 돌아가서 Redis 데이터베이스를 열고 Data Browser를 열어야 합니다. 탭.

Data Browser 탭에는 아래와 같이 세션 데이터가 표시됩니다.

결론

Upstash Redis를 사용하여 Next.js 앱에서 세션을 관리하면 확장 가능하고 효율적인 솔루션이 제공됩니다. 이 블로그 게시물에서는 Nextjs 앱을 만들고 이를 Upstash Redis와 통합하여 세션 관리 저장소로 사용했습니다.

Redis 데이터베이스를 설정하고 이를 Next.js와 원활하게 통합하면 기존 서버 측 복잡함 없이 세션 스토리지를 효과적으로 처리할 수 있습니다. 이 접근 방식은 세션 관리에서 성능과 단순성을 원하는 개발자에게 이상적입니다.

이 가이드가 Upstash Redis를 Next.js 애플리케이션의 안정적인 세션 저장소로 구현하기 위한 명확한 경로를 제공하였기를 바랍니다.