রিমিক্সের জন্য একটি সেশন স্টোর হিসাবে Upstash Redis ব্যবহার করা

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

একটি সেশন কি?

রিমিক্স ডক্সে সেশনগুলির একটি খুব ভাল ভূমিকা রয়েছে https://remix.run/docs/en/v1/api/remix#sessions

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

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

সেশন ডেটা সার্ভারে সংরক্ষণ করা হয়। সার্ভারহীন অবকাঠামো বা কিছু PASS পরিকাঠামোতে (যেমন Heroku) স্থাপন করার সময় আপনি সার্ভারের ফাইল সিস্টেমে ডেটা ধরে রাখতে পারবেন না কারণ এটি প্রতিটি অনুরোধে (সার্ভারহীন) বা স্থাপনার (PASS) পরিবর্তন হতে পারে। ডেটা বজায় রাখার জন্য আপনাকে একটি বহিরাগত ডাটাবেসে ব্যবহারকারীর ডেটা সংরক্ষণ করতে হবে। Upstash Redis DB নিম্নলিখিত কারণগুলির জন্য সেশন ডেটা সংরক্ষণ করার একটি দুর্দান্ত সমাধান:

• প্রকৃতিগতভাবে Redis সেশনের অনুরূপ, একটি key:value আছে ডেটা স্ট্রাকচার যেখানে কী হল সেশনের আইডি এবং মান হল তার ক্রমিক ডেটা।
• রেডিসের একটি অন্তর্নির্মিত মেয়াদোত্তীর্ণ পদ্ধতি রয়েছে যা মেয়াদোত্তীর্ণ সেশনগুলি পরিষ্কার করার প্রয়োজনীয়তা হ্রাস করে৷
• সেশনে ব্যবহারকারীর সংবেদনশীল ডেটা থাকতে পারে এবং আপস্ট্যাশ রেডিস এর সমস্ত সঞ্চিত ডেটা এনক্রিপ্ট করতে পারে৷
• Upstash একটি সাধারণ HTTP REST API ব্যবহার করছে। HTTP হল সার্ভারহীন পরিকাঠামো থেকে যোগাযোগের সবচেয়ে সহজ উপায়।

কিভাবে Redis-এ সেশন প্রদানকারী হিসাবে Upstash ব্যবহার করবেন

এই পোস্টটি আমার লেখা Upstash উদাহরণ ব্যবহার করে Redis সেশন স্টোরেজের উপর ভিত্তি করে। নির্দ্বিধায় রিমিক্স রেপো ক্লোন করুন এবং এটিকে যান৷

৷

ধাপ 1 - আপনার Upstash API কীগুলি পান

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

ধাপ 2 - মূলটি প্রয়োগ করুন createSessionStorage Upstash সেশন বাস্তবায়ন তৈরি করতে

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 নেয় (পরবর্তীতে আরও) এবং মূল রিমিক্স createSessionStorage ব্যবহার করে ফ্যাক্টরি ফাংশন একটি নতুন সেশন প্রদানকারী বাস্তবায়ন করতে।

ফাংশনের ভিতরে আমরা createSessionStorage প্রয়োগ করেছি একটি নতুন সেশন তৈরি করার জন্য প্রোটোকল (createData ), সেশন মান পড়ুন (readData ), সেশন মান আপডেট করুন (updateData ) এবং সেশন মুছে দিন (deleteData )।

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

বিষয়গুলি নোট করুন:

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

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

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

উল্লেখ্য যে এখন থেকে Upstash এর জন্য নির্দিষ্ট কিছু নেই। সমস্ত যুক্তি sessions/upstash.server.ts-এ এনক্যাপসুলেট করা আছে ফাইল।

// 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 };

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

আপনার ব্যবসার প্রয়োজন অনুযায়ী মেয়াদ শেষ হওয়ার সময়কাল সেটআপ করুন। আরও তথ্যের জন্য পড়ুন https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies

রিমিক্স রুটে সেশন ব্যবহার করা

রিমিক্স ব্যবহার করে আপনি রুট প্রতি সেশন ব্যবহার সংজ্ঞায়িত করতে পারেন। নিম্নলিখিত উদাহরণে আমরা session ব্যবহার করি routes/index.tsx-এ . এই উদাহরণটি শুধুমাত্র প্রদর্শন করেছে কিভাবে সেশন 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 }) => {
  // 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>;
}

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

ধাপ 4 - স্থাপন করুন

এখন যেহেতু আপনি Upstash ব্যবহার করে সেশনটি বাস্তবায়ন করেছেন, আপনি যে কোনো স্থাপনার কৌশল বেছে নিতে পারবেন।

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

পরিশিষ্ট

createFileSessionStorage ব্যবহার করে স্থানীয় উন্নয়ন এবং createUpstashSessionStorage এর জন্য মঞ্চায়ন/উৎপাদনে

এটি সম্ভবত অফলাইনে থাকাকালীন বিকাশ করতে সক্ষম হতে চাইবে। স্থানীয়ভাবে বিকাশ করার সময় আপনি createUpstashSessionStorage প্রতিস্থাপন করতে পারেন createFileSessionStorage সহ বর্তমান NODE_ENV সনাক্ত করে .

আপনার Upstash বাস্তবায়ন কাজ করে তা পরীক্ষা করার পরে আপনি sessions/upstash.server.ts পরিবর্তন করেন নিম্নরূপ ফাইল:

এই বিভাগটি পরিবর্তন করুন:

// 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 });

এখন যখন আপনি স্থানীয়ভাবে বিকাশ করবেন তখন আপনি Upstash কল করার পরিবর্তে আপনার স্থানীয় ফাইল সিস্টেম ব্যবহার করবেন।

উপসংহার

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

উপভোগ করুন।