ভূমিকা

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

এই আর্টিকেলে আমরা আপস্ট্যাশ, রেডিস ডেটাবেস এবং ভিউজ এসএসআর ফ্রেমওয়ার্ক নাক্স ৩-এর সাম্প্রতিক বিটা রিলিজ নিয়ে আলোচনা করব। এটি একটি বiegিনার-ফ্রেন্ডলি আর্টিকেল যা রেডিস ডেটাবেস এক্সপ্লোর করে, যেখানে আমরা একটি বেসিক অ্যাপ তৈরি করব যা নাক্স অ্যাপের পেজ-ভিজিট ট্র্যাক করে।

রিসোর্স

• গিটহাব রিপো: https://github.com/Krutie/upstash-nuxt-demo
• ডেমো
  • ক্লাউডফ্লেয়ার ওয়ার্কার: https://upstash-demo.krutie-patel.workers.dev/contact
  • নেটলিফাই: https://thirsty-visvesvaraya-a09ab9.netlify.app/

আপস্ট্যাশ কী?

আপস্ট্যাশ হলো একটি সার্ভিস যা রেডিস ডেটাবেসে সার্ভারলেস অ্যাক্সেস প্রদান করে। তাই রেডিসের মৌলিক বিষয়গুলো শিখা আমাদের জন্য অপরিহার্য, যাতে রেডিসের ইউজ কেস এবং বিভিন্ন টাইপের ডেটা ম্যানিপুলেট করার জন্য উপলব্ধ কমান্ডগুলো জানা যায়।

রেডিস কী?

রেডিসের জনপ্রিয় ইউজ কেসগুলো হলো:

• ডেটা এবং সেশন ক্যাশিং
• লিডারবোর্ড - কম্পিউটার গেমিং বা গেমিফিকেশন নীতিতে বিল্ট সফটওয়্যারে নাম এবং স্কোর র‍্যাঙ্ক করা
• কিউ - ব্যাকগ্রাউন্ডে পরবর্তীতে প্রসেস করার জন্য টাস্ক শিডিউল করা
• ইউজেজ মিটারিং/কাউন্টিং - রিসোর্স ইউটিলাইজেশন সীমাবদ্ধ করা, রিসোর্স বিতরণ নিয়ন্ত্রণ করা বা বড় স্কেলে কাউন্টিং করে ইউজেজ পর্যবেক্ষণ ও বিশ্লেষণ, যেমন ই-কমার্স সাইট, সোশ্যাল মিডিয়া, মোবাইল অ্যাপস ইত্যাদি
• কন্টেন্ট ফিল্টারিং - উদাহরণস্বরূপ, নিষিদ্ধ শব্দের তালিকা দিয়ে কন্টেন্ট ফিল্টার করা

বেসিক লেভেলে, রেডিস ডেটাবেস কি-ভ্যালু পেয়ারে ডেটা স্টোর করে। কিন্তু এটি এডভান্সড ডেটা স্ট্রাকচারও স্টোর করতে পারে যেমন লিস্ট, সেট, সোর্টেড সেট ইত্যাদি। রেডিস এই ডেটা স্ট্রাকচার ম্যানিপুলেট করার জন্য কমান্ড সেটও প্রদান করে। যেহেতু আমাদের উদাহরণ অ্যাপে আমরা 그중 একটি ব্যবহার করব, তাই তাদের হাই-লেভেল ডেফিনিশন দেখে নেওয়া ভালো।

• লিস্ট - এটি বেসিক অ্যারেকൂടে। লিস্ট আপনাকে একটি সিকোয়েন্সের দুটি এন্ড থেকে আইটেম পুশ এবং পপ করতে, ইনডিভিজুয়াল আইটেম ফেচ করতে এবং অন্যান্য অপারেশন করতে দেয়। লিস্ট কমান্ডগুলো 'L' অক্ষর দিয়ে শুরু হয়, যেমন LPOP, LPUSH, LSET ইত্যাদি
• হ্যাশ - এটি আপনাকে একটি সিঙ্গল রেডিস কি-তে কি-ভ্যালু পেয়ারের গ্রুপ স্টোর করতে দেয়। হ্যাশ কমান্ডগুলো 'H' অক্ষর দিয়ে শুরু হয়, যেমন HSET, HGET, HDEL ইত্যাদি
• সেট - এটি লিস্টের মত, কিন্তু সেটগুলো ইউনিক এবং আনঅর্ডার্ড লিস্টে আইটেম স্টোর করে। তাই সেট সোর্ট করা যায় না, কিন্তু আপনি দ্রুত আইটেম যোগ, মুছে ফেলা এবং একটি আইটেম সেটে আছে কিনা তা নির্ণয় করতে পারেন। সেট কমান্ডগুলো 'S' অক্ষর দিয়ে শুরু হয়, যেমন SADD, SCARD, SISMEMBER ইত্যাদি
• সোর্টেড সেট - এটি সেটের মত, কিন্তু সোর্টেড সেট স্কোর দিয়ে সোর্টিং অনুমতি দেয় যা খুব হদ কি-ভ্যালু পেয়ারের মত দেখায়। আমরা এই নামারিক স্কোর ম্যানিপুলেট ও সোর্ট করতে পারি। সোর্টেড সেট কমান্ডগুলো 'Z' অক্ষর দিয়ে শুরু হয়, যেমন ZADD, ZINCRBY, ZSCORE ইত্যাদি

অন্যান্য রেডিস কমান্ড সম্পর্কে জানতে https://redis.io/commands দেখুন।

আপস্ট্যাশ সেটআপ

ডক্স অনুযায়ী অ্যাকাউন্ট এবং ডেটাবেস সেটআপ করার নির্দেশনা ফলো করুন: https://docs.upstash.com/

নাক্স অ্যাপ তৈরি করার আগে নিশ্চিত করুন আপনার আপস্ট্যাশ অ্যাকাউন্ট রেডি। ফ্রি-টিয়ারে একটা ডেটাবেস তৈরি করতে পারবেন।

ডেটাবেস তৈরি হলে, যেকোনো রেডিস ক্লায়েন্ট ব্যবহার করে রেডিস ডেটাবেস তৈরি ও অ্যাক্সেস করতে পারবেন। অথবা আপস্ট্যাশ কনসোলে প্রদত্ত ব্রাউজার-বেসড সিএলআই ব্যবহার করে সাথে সাথে শুরু করতে পারেন।

আপস্ট্যাশ কনসোলে প্রদত্ত ব্রাউজার-বেসড সিএলআই

Redis-cli

আপনার মেশিন টার্মিনালে redis-cli সেটআপ করে সরাসরি কমান্ড লাইন ইন্টারফেস থেকে রেডিস ডেটাবেস তৈরি ও অ্যাক্সেস করতে পারেন।

Redis npm packages

রেডিস ডেটাবেসের সাথে ইন্টারঅ্যাক্ট করার জন্য আমাদের বেশ কিছু npm প্যাকেজ আছে। আমরা আমাদের নাক্স প্রজেক্টে ১) @upstash/redis এবং ২) ioredis ব্যবহার করব রেডিস কমান্ড অ্যাক্সেস করতে।

পরবর্তী সেকশনে আমরা নাক্স প্রজেক্ট সেটআপ করব। নাক্স হলো ভিউজের ওপর তৈরি একটি এসএসআর ফ্রেমওয়ার্ক। নাক্স ল্যাবস সম্প্রতি নাক্স ৩ বিটা রিলিজ ঘোষণা করেছে। তাই চলুন একটি নতুন নাক্স ৩ প্রজেক্ট সেটআপ করি।

নাক্স ৩ বর্তমানে বিটায় আছে, মনে রাখবেন এটি এখনো প্রোডাকশন-রেডি নয়।

⚡নাক্স ৩ নিয়ে কথা বলি

নাক্স ৩ একটি নতুন সিএলআই পরিচয় করিয়েছে যেটি nuxi নামে পরিচিত, নাক্স অ্যাপ তৈরি করার জন্য।

npx nuxi init nuxt3-app

আমরা /pages ডিরেক্টরি তৈরি করব এবং নিচের মত সিম্পল রুট যোগ করব:

-pages
--index.vue
--about.vue
app.vue

app.vue নাক্স ৩-এ নতুন পরিচয়, যা মেইন কম্পোনেন্ট হিসেবে কাজ করে। /pages ডিরেক্টরিতে ডিফাইন করা সব রুটের জন্য app.vue লোড হবে।

নাইট্রো সার্ভার ইঞ্জিন ⚙️

নাক্স ৩ একটি নতুন সার্ভার ইঞ্জিনও পরিচয় করিয়েছে যেটি নাইট্রো। আমরা নাইট্রোর শক্তি ব্যবহার করে সার্ভার এপিআই এন্ডপয়েন্ট এবং সার্ভার মিডলওয়্যার তৈরি করতে পারি সিম্পলি server ডিরেক্টরি তৈরি করে api এবং middleware সাব-ডিরেক্টরি হিসেবে। এই মিনিমাল ডিরেক্টরি স্ট্রাকচার গিটহাব রিপোতে দেখতে পারেন।

-server
--api
--middleware

এপিআই এবং মিডলওয়্যারের দুটোই একটি ডিফল্ট ফাংশন এক্সপোর্ট করতে হবে যা এপিআই রিকোয়েস্ট হ্যান্ডেল করে এবং প্রমিস/জেসন ডেটা রিটার্ন করে। নাক্স ২-র মত, আমাদের nuxt.config.js-এ সার্ভার-মিডলওয়্যার ডিফাইন করতে হবে না।

আমাদের অ্যাপ বিল্ড করার জন্য যা যা স্টেপ নিতে হবে তার হাই-লেভেল তালিকা:

• প্রথমে, রেডিস ডেটাবেসের সাথে কানেক্ট করুন।
• পেজ ভিজিট রেকর্ড করতে, সার্ভারে কिये गये প্রতিটি পেজ রিকোয়েস্ট ইন্টারসেপ্ট করুন, সেই পেজের কাউন্টার এক বেড়িয়ে রেডিস ডেটাবেসে স্টোর করুন।
• তারপর, ক্লায়েন্ট-সাইড থেকে এপিআই কল করে রেডিস ডেটাবেস থেকে ভিজিট-কাউন্ট রিট্রিভ করুন এবং নাক্স পেজে প্রদর্শন করুন।

কনসেপচুয়ালি, নিচের ডায়াগ্রামগুলো দেখাচ্ছে আমরা কী বানাতে চাই:

নাক্স ৩ সম্পর্কে আরও জানতে https://v3.nuxtjs.org/getting-started/installation

রেস্ট রেডিস ক্লায়েন্ট ব্যবহার করুন

আপস্ট্যাশ নিজস্ব HTTP/রেস্ট-বেসড রেডিস ক্লায়েন্ট প্রদান করে - @upstash/redis - যা আমরা আমাদের নাক্স প্রজেক্টে ডিপেন্ডেন্সি হিসেবে যোগ করতে পারি।

yarn add @upstash/redis

রেডিস ডিবি অথেনটিকেট করুন

রেডিস ডেটাবেস অথেনটিকেট করতে নিচের এনভায়রনমেন্ট ভেরিয়েবলগুলো লোকেট করতে হবে:

• রেস্ট ইউআরএল (UPSTASH_REDIS_REST_URL), এবং
• টোকেন (UPSTASH_REDIS_REST_TOKEN)

...আপস্ট্যাশ কনসোল থেকে - ডেটাবেসের অধীনে।

প্রাইভেট রানটাইম কনফিগ

এখন, এই এনভায়রনমেন্ট ভেরিয়েবলগুলো সার্ভার-সাইডে এক্সপোজ করতে, নাক্স রানটাইম কনফিগারেশন প্রদান করে যা আমরা nuxt.config.js ফাইলে ডিফাইন করি।

// nuxt.config.js
export default defineNuxtConfig({
  publicRuntimeConfig: {},
  privateRunimeConfig: {
    UPSTASH_REDIS_REST_URL: process.env.UPSTASH_REDIS_REST_URL,
    UPSTASH_REDIS_REST_TOKEN: process.env.UPSTASH_REDIS_REST_TOKEN,
  },
});

এরপর, আমরা সরাসরি এই এনভায়রনমেন্ট ভেরিয়েবলগুলো অ্যাক্সেস করতে পারি #config ইমপোর্ট করে।

import { Redis } from "@upstash/redis";
import config from "#config";

const redis = new Redis({
  url: config.UPSTASH_REDIS_REST_URL,
  token: config.UPSTASH_REDIS_REST_TOKEN,
});

বিকল্পভাবে, একটি জিরো-কনফিগ পদ্ধতি হলে UPSTASH_REDIS_REST_URL এবং UPSTASH_REDIS_REST_TOKEN সরাসরি .env ফাইলে যোগ করে const redis = Redis.fromEnv() ব্যবহার করে রেডিস ইনস্ট্যান্স তৈরি করা যায়, Redis-এ ভেরিয়েবলগুলো পাস করার প্রয়োজন ছাড়া। নোট করুন এই ম্যাজিক শুধু @upstash/redis রেডিস ক্লায়েন্ট ব্যবহার করার সময় কাজ করে।

নাক্স সার্ভার-মিডলওয়্যার দিয়ে রিকোয়েস্ট ইন্টারসেপ্ট করুন

এখান থেকে আমরা যেকোনো প্রয়োজনীয় রেডিস কমান্ড ব্যবহার করতে পারি। এই উদাহরণে আমরা সোর্টেড-সেট ব্যবহার করব, কারণ সোর্টেড-সেটগুলো ইউনিক এবং স্কোর সোর্টিং ও ম্যানিপুলেশন অনুমতি দেয়।

উদাহরণস্বরূপ, প্রতিবার পেজে রিকোয়েস্ট হলে পেজের স্কোর এক বেড়াতে zincrby ব্যবহার করতে পারি।

// server/middleware/pageCount.js
import { Redis } from "@upstash/redis";
import { getRedisKey } from "../utils";

const redis = Redis.fromEnv();

export default async function (req, res, next) {
  const redisKey = getRedisKey(req.url);
  await redis.zincrby("myPageCounts", 1, redisKey);
  next();
}

নেমস্পেস জেনারেট করা

রেডিস হলো একটি NoSQL ডেটাবেস যা কি-ভ্যালু পেয়ারে ডেটা স্টোর করে। এর অটো-ইনক্রিমেন্টিং কি বা যেকোনো ডাইনামিক UUID জেনারেট করার কনসেপ্ট নেই। এখানেই আমরা getRedisKey() ইউটিলিটি ফাংশন ব্যবহার করি।

এই ইউটিলিটি ফাংশন রিকোয়েস্ট ইউআরএল প্রসেস করে ইউনিক কি তৈরি করে - যা আমরা প্রতিটি পেজের ভিজিট-কাউন্ট স্টোর করার জন্য ব্যবহার করব। এইভাবে আমরা একই কি-এর বিপরীতে কাউন্টার বেড়াতে থেকে বাঁচতে পারি।

আমাদের উদাহরণে, আমরা রিকোয়েস্ট ইউআরএল নেয়া এবং সকল '/' কে '.' দিয়ে রিপ্লেস করে ইউনিক নেমস্পেসড কি জেনারেট করি।

export const getRedisKey = (url: string) => {
  const reqURL = url?.replace("/", ".");
  const redisKey = reqURL === "." ? "page.home" : `page${reqURL}`;
  return redisKey;
};

এটি আমাদের কনভার্ট করতে সাহায্য করবে, উদাহরণস্বরূপ: /about পেজ কে একটি নেমস্পেসড কি-তে যেটি পড়া যাবে page.about-তে।

রেস্ট এপিআই এন্ডপয়েন্ট দিয়ে রেডিস ডিবি অ্যাক্সেস করুন

চলুন একটি এপিআই এন্ডপয়েন্ট তৈরি করি যা প্রতিটি পেজের জন্য করেন্ট কাউন্ট বা স্কোর ফেচ করবে।

নাক্স ৩-এ ডেটা ফেচ করার দুটি উপায় আছে। ১) useAsyncData এবং ২) useFetch। app.vue-এ আমরা useAsyncData ব্যবহার করব $fetch দিয়ে যা ohmyfetch লাইব্রেরি প্রদান করে।

// app.vue

আপনি দেখছেন, এপিআই কলের সাথে সাথে, আমরা রাউটার পাথ কোয়েরি প্যারামিটার হিসেবে পাস করেছি যাতে যে পেজ অ্যাক্সেস করা হচ্ছে সেটি আইডেন্টিফাই করা যায়:

$fetch("/api/count", {
  params: {
    path: router.path
  }
});

সার্ভার-মিডলওয়্যারের বিপরীতে, আমাদের এই এপিআই এন্ডপয়েন্ট /api/count কনসিউম করতে হবে ভিজিট কাউন্ট ফেচ করতে। এটাই হলো মজার অংশ!

চলুন এই এপিআই এন্ডপয়েন্টটি server/api/count.ts-এ তৈরি করি। আমরা h3 লাইব্রেরি প্রদত্ত useQuery মেথড ব্যবহার করব ক্লায়েন্ট-সাইড থেকে পাঠানো কোয়েরি প্যারামিটার অ্যাক্সেস করতে।

// server/api/count.ts
import { useQuery } from "h3";

export default async (req, res) => {
  let query = await useQuery(req);
  const redisKey = getRedisKey(query.path);
};

এখানে 👆 আমরা একই getRedisKey() ইউটিলিটি ব্যবহার করছি যাতে এই কি মিডলওয়্যারে পেজের কাউন্ট বেড়াতে ব্যবহৃত নেমস্পেসড কির সাথে ম্যাচ করে।

তাহলে, এখন আমরা এই কি zscore-এ পাস করতে পারি যেটি নিশ্চিতভাবে ডেটাবেসে আছে স্কোর/কাউন্ট ফেচ করতে। 👇

// server/api/count.ts
// ...
import { Redis } from "@upstash/redis";

const redis = Redis.fromEnv();

export default async () => {
  // ...
  const count = await redis.zscore("myPageCounts", redisKey);
  return { count };
};

ioredis দিয়ে সরাসরি রেডিস এপিআই ব্যবহার করুন

আমরা একই কাজ ioredis লাইব্রেরি দিয়েও করতে পারি।

yarn add ioredis

ioredis ব্যবহার করার সময়, আমাদের auth মেথড থাকবে না। কিন্তু আপস্ট্যাশ কনসোলে একটি কানেকশন স্ট্রিং থাকে যা ব্যবহার করে রেডিস ডেটাবেসের সাথে কানেক্ট করা যায়।

আমরা UPSTASH_REDIS_CONN রানটাইম কনফিগারেশন ভেরিয়েবল হিসেবে সেট করতে পারি ঠিক আগের মত রেস্ট-ইউআরএল এবং টোকেনের জন্য করা ছিল।

// nuxt.config.js
export default defineNuxtConfig({
  publicRuntimeConfig: {},
  privateRunimeConfig: {
    UPSTASH_REDIS_CONN: process.env.UPSTASH_REDIS_CONN,
  },
});

এরপর, মিডলওয়্যারে, আমরা new Redis() ইনস্ট্যান্স তৈরি করব কানেকশন তৈরি করতে এবং client থেকে সকল রেডিস কমান্ড অ্যাক্সেস করতে।

// server/middleware/pageCount.js
import config from "#config";
import Redis from "ioredis";

const client = new Redis(config.UPSTASH_REDIS_CONN);

নাক্স সার্ভার-মিডলওয়্যার দিয়ে রিকোয়েস্ট ইন্টারসেপ্ট করুন

আমাদের নাক্স মিডলওয়্যার আগের মতোই থাকবে, ছাড়া zincrby অ্যাক্সেস করার পদ্ধতি বাদে।

// server/middleware/pageCount.js
// ...
export default async function (req, res, next) {
  // ...
  await client.zincrby("myPageCounts", 1, redisKey);
  next();
}

রেস্ট এপিআই এন্ডপয়েন্ট দিয়ে রেডিস ডিবি অ্যাক্সেস করুন

আগে, আমরা কাস্টম এপিআই এন্ডপয়েন্ট server/api/count.ts তৈরি করেছিলাম কাউন্ট পেতে। সেই এপিআই এন্ডপয়েন্টটিও আগের মতোই থাকবে, ছাড়া zscore মেথড কল করার পদ্ধতি একটু চেঞ্জ হবে।

// server/api/count.ts
import config from "#config";
import Redis from "ioredis";

const client = new Redis(config.UPSTASH_REDIS_CONN);

export default async (req: IncomingMessage, res: ServerResponse) => {
  // ...
  const count = await client.zscore("myPageCounts", redisKey);
  return { count };
};

আপস্ট্যাশ সিএলআই দিয়ে টেস্ট করুন

যেহেতু আমরা সকল ডেটা সোর্টেড-সেটে স্টোর করছি, আমরা zrange` ব্যবহার করে আমাদের সোর্টেড-সেট থেকে সব আইটেম ফেচ করতে পারি।

zrange myPageCounts 0 -1

// lowest SCORE first
zrange myPageCounts 0 -1 WITHSCORES
// highest SCORE first
zrevrange myPageCounts 0 -1 WITHSCORES
// get SCORE for page.home hits
zscore myPageCounts page.home

// netlify.toml
//...
[build]
// ...
functions = ".output/server";

// wrangler.toml
//..
[site]
bucket = ".output/public"
entry-point = ".output"
[build]
command = "NITRO_PRESET=cloudflare yarn nuxt build"
upload.format = "service-worker"