Upstash Redis দিয়ে Remix সেশন বাড়ান: সিকিউর, স্কেলেবল সেশন স্টোর

একজন ফুল-স্ট্যাক ওয়েব ফ্রেমওয়ার্ক হিসেবে Remix সাধারণ ওয়েব সার্ভার ইউজ কেসের সাথে ডিল করার জন্য API প্রদান করে। এই পোস্ট সেশনে ফোকাস করবে এবং কেন এবং কীভাবে আপনি সেগুলো স্টোর করতে Upstash ব্যবহার করতে পারেন।

সেশন কী?

Remix ডক্স-এ সেশনের খুব ভালো পরিচিতি আছে https://remix.run/docs/en/v1/api/remix#sessions

কয়েকটি শব্দে - সেশন হল একটি মেকানিজম যা সার্ভার এবং ক্লায়েন্টকে ইউজার ডেটা / স্টেট শেয়ার করতে দেয়। সেশন ব্যবহারের উদাহরণ হল ইউজার অথেনটিকেশন স্টেট ট্র্যাক করা, শপিং কার্ট স্ট্যাটাস, ফ্ল্যাশ মেসেজ ইত্যাদি।

কেন Upstash Redis ব্যবহার করবেন?

সেশন ডেটা সার্ভারে স্টোর হয়। সার্ভারলেস ইনফ্রাস্ট্রাকচার বা কিছু PASS ইনফ্রাস্ট্রাকচার (যেমন Heroku)-এ ডিপ্লয় করার সময় আপনি সার্ভারের ফাইল সিস্টেমে ডেটা পারসিস্ট করতে পারবেন না কারণ এটি প্রতিটি রিকোয়েস্টে (সার্ভারলেস) বা ডিপ্লয়মেন্টে (PASS) পরিবর্তন হতে পারে। ডেটা পারসিস্ট করার জন্য আপনাকে ইউজার ডেটা একটি এক্সটার্নাল ডেটাবেসে স্টোর করা উচিত। Upstash রেডিস ডেটাবেস সেশন ডেটা স্টোর করার জন্য একটি চমৎকার সমাধান নিচের কারণগুলোর জন্য:

রেডিস সেশনস, প্রাকৃতিকভাবে, একটি key:value ডেটা স্ট্রাকচার থাকে যেখানে কি হল সেশনের আইডি এবং ভ্যালু হল এর সিরিয়ালাইজড ডেটা।
রেডিসে একটি বিল্ট-ইন এক্সপায়ারি মেকানিজম আছে যা এক্সপায়ার্ড সেশন ক্লিন আপ করার প্রয়োজন কমিয়ে দেয়।
সেশন সেনসিটিভ ইউজার ডেটা ধারণ করতে পারে এবং Upstash রেডিস এর সব স্টোরেজ ডেটা এনক্রিপ্ট করে।
Upstash একটি সিম্পল HTTP REST API ব্যবহার করে। HTTP সার্ভারলেস ইনফ্রাস্ট্রাকচার থেকে কমিউনিকেশন করার সবচেয়ে সহজ উপায়।

রেডিসে Upstash কে সেশন প্রোভাইডার হিসেবে কীভাবে ব্যবহার করবেন

এই পোস্ট Redis Session Storage Using Upstash Example-এর উপর ভিত্তি করে যা আমি লিখেছিলাম। বিনামূল্যে Remix রিপো ক্লোন করুন এবং চেষ্টা করুন।

ধাপ ১ - আপনার Upstash API কি পান

https://upstash.com/-এ যান এবং একটি নতুন অ্যাকাউন্ট তৈরি করুন
একটি নতুন রেডিস ডিবি তৈরি করুন
UPSTASH_REDIS_REST_URL & UPSTASH_REDIS_REST_TOKEN কপি করুন এবং আপনার Remix প্রোজেক্টের রুটে .env নামে একটি ফাইলে সেটো স্টোর করুন
dotenv ইনস্টল করুন - $ npm install --save-dev dotenv - এটি আপনাকে আপনার নতুন তৈরি করা .env ফাইল থেকে এনভায়রনমেন্ট ভেরিয়েবল ইনজেক্ট করতে দেবে
আপনার package.json ফাইলে যান এবং dev স্ক্রিপ্টটি remix dev থেকে dotenv/config node_modules/.bin/remix dev-এ রিপ্লেস করুন

ধাপ ২ - কোর `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;
};

// আরও ইনফো জন্য চেক করুন https://remix.run/docs/en/v1/api/remix#createsessionstorage
export function createUpstashSessionStorage({ cookie }: any) {
  return createSessionStorage({
    cookie,
    
    async createData(data, expires) {
      // একটি র‍্যাঙ্কডম আইডি তৈরি করুন - Remix কোর `createFileSessionStorage` ফাংশন থেকে নেওয়া
      const randomBytes = crypto.randomBytes(8);
      const id = Buffer.from(randomBytes).toString("hex");
      
      // Upstash রেডিস HTTP API কল করুন। কুকির `expired` প্রোপার্টি অনুযায়ী এক্সপিরেশন সেট করুন।
      // `expiresToSeconds` এর ব্যবহার লক্ষ্য করুন যা ডেটকে সেকেন্ডে কনভার্ট করে।
      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)।

প্রতিটি ফাংশন Upstash রেডিস ডেটাবেসের সাথে ইন্টারঅ্যাক্ট করার জন্য REST Upstash API ব্যবহার করে।

লক্ষ্য করা যাবতীয় বিষয়:

পাস করা কুকি cookie expiration date ধারণ করে js Date ফরম্যাটে। আমরা expiresToSeconds ফাংশন ব্যবহার করি ডেটাকে সেকেন্ডে কনভার্ট করতে কারণ এটি রেডিস যা এক্সপেক্ট করে।
কুকি সেট করার সময়, এর এক্সপিরেশন ডেট সেট করা ভুলবেন না। রেডিস স্বয়ংক্রিয়ভাবে সেই সেশনগুলো ডিলিট করবে যখন তারা এক্সপায়ার হবে।
আমরা crypto ব্যবহার করি একটি ইউনিক সেশন আইডি তৈরি করতে। আপনি ইউনিক আইডি তৈরি করার জন্য অন্যান্য বিকল্প ব্যবহার করতে পারেন। আমি এই অপশনটি বেছে নিলাম কারণ কোর createFileSessionStorage ফাংশনে একইটি ব্যবহার হয়।

ধাপ ৩ - আপনার অ্যাপে `createSessionStorage` ব্যবহার করুন

এখন যেহেতু আমরা আমাদের নিজস্ব সেশন স্টোরেজ ইমপ্লিমেন্টেশন তৈরি করেছি, চলুন দেখি কীভাবে এটি ব্যবহার করতে হয়।

লক্ষ্য করুন যে এখান থেকে Upstash-এ কিছুই স্পেসিফিক নেই। সारा লজিক sessions/upstash.server.ts ফাইলে এনক্যাপসুলেটেড।

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

// এটি সেশন দৈর্ঘ্য সেট করবে।
// উদাহরণের জন্য আমরা খুব ছোট ডুরেশন ব্যবহার করছি সহজে ফাংশনালিটি ডেমো করার জন্য।
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 };

sessions.server.ts নামে একটি ফাইল তৈরি করুন এবং উপরের কোড পেস্ট করুন। এই ফাইল ৩টি ফাংশন এক্সপোর্ট করে getSession, commitSession এবং destroySession। এই ফাংশনগুলো অ্যাপকে সেশন এর সাথে ইন্টারঅ্যাক্ট করতে দেয়। আমরা একটি কুকিও তৈরি করেছি ক্লায়েন্টে সেশন রেফারেন্স স্টোর করার জন্য।

আপনার বিজনেস নিদের অনুযায়ী এক্সপিরেশন ডুরেশন সেটআপ করুন। আরও ইনফো পড়ুন https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies

Remix রুটসে সেশন ব্যবহার

Remix ব্যবহার করে আপনি সেশন ইউজ রুট-প্রতি ডিফাইন করতে পারেন। নিচের উদাহরণে আমরা routes/index.tsx-এ session ব্যবহার করছি। এই উদাহরণ শুধু সেশন API কীভাবে ব্যবহার করতে হয় তা ডেমো করে। সেশনকে নির্দিষ্ট বিজনেস লজিকের সাথে কানেক্ট করা এই পোস্টের স্কোপের বাইরে।

আপনি যদি অথেনটিকেশনের জন্য সেশন কীভাবে ব্যবহার করতে হয় তার উদাহরণ খুঁজেন তবে https://github.com/remix-run/remix/tree/main/examples/remix-auth-form দেখুন

// 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 }) => {
  // কুকি থেকে সেশন পান
  const session = await getSession(request.headers.get("Cookie"));
  const myStoredData = session.get("myStoredData");
  
  // যদি সেশন না পাওয়া যায় (কখনো তৈরি হয়নি বা এক্সপায়ার্ড হয়েছে) তবে একটি নতুন সেশন তৈরি করুন।
  if (!myStoredData) {
    session.set("myStoredData", "Some data");
    return json(
      { message: "Created new session" },
      { headers: { "Set-Cookie": await commitSession(session) } }
    );
  }
  
  // যদি সেশন পাওয়া যায়, সেশন ইনফো প্রেজেন্ট করুন।
  return json({ message: `Showing Session info: ${myStoredData}` });
};

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

এই উদাহরণটি ইউজার সেশনের দুটি সম্ভাব্য স্টেট হ্যান্ডেল করা দেখাচ্ছে (ইউজারের সেশন আছে বা ইউজারের সেশন নেই)। যদি ইউজারের সেশন না থাকে, অ্যাপের ইনডেক্স ফাইলে নেভিগেট করলে একটি নতুন সেশন তৈরি হবে এবং কিছু ডামি ডেটা স্টোর করবে। যদি ইউজারের একটি বৈধ (নন-এক্সপায়ার্ড) সেশন থাকে, রুটটি সেশনের ডেটা দেখাবে।

ধাপ ৪ - ডিপ্লয়

এখন যেহেতু আপনি Upstash ব্যবহার করে সেশন ইমপ্লিমেন্ট করেছেন, আপনি যেকোনো ডিপ্লয়মেন্ট স্ট্র্যাটেজি বেছে নিতে পারেন যা আপনি চান।

আপনার Upstash এনভায়রনমেন্ট ভেরিয়েবল সেট করা ভুলবেন না।

অ্যাপেন্ডিক্স

লোকাল ডেভেলপমেন্টের জন্য createFileSessionStorage এবং স্টেজিং / প্রোডাকশনের জন্য createUpstashSessionStorage ব্যবহার

সম্ভবত আপনি অফলাইন থাকते हुए ডেভেলপ করতে চান। লোকালি ডেভেলপ করার সময় আপনি createUpstashSessionStorage-কে createFileSessionStorage-র সাথে রিপ্লেস করতে পারেন বর্তমান NODE_ENV ডিটেক্ট করে।

আপনার Upstash ইমপ্লিমেন্টেশন কাজ করছে কিনা টেস্ট করার পর sessions/upstash.server.ts ফাইলটি নিচের মতো পরিবর্তন করুন:

এই সেকশনটি পরিবর্তন করুন:

// from sessions/upstash.server.ts
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 });

এখন যখন আপনি লোকালি ডেভেলপ করবেন, আপনি Upstash কল করার বদলে আপনার লোকাল ফাইল সিস্টেম ব্যবহার করবেন।

উপসংহার

এই পোস্টে আমরা দেখেছি কীভাবে Upstash রেডিস ডিবি ব্যবহার করতে হয় আমাদের সেশন স্টোরেজ ডেটা হোস্ট করার জন্য। Remix API স্পেসিফিক সেশন স্টোরেজ ইমপ্লিমেন্টেশন খুব ভালোভাবে এনক্যাপসুলেট করে, যা ইন্টিগ্রেশনকে সহজ করে দেয়। আপনি যদি উদাহরণটি খেলতে চান তবে এটি Remix সোর্স কোডে পাবেন https://github.com/remix-run/remix/tree/main/examples/redis-upstash-session

আনন্দ করুন।