পরিচয়

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

এই নিবন্ধে, আমরা Upstash, Redis ডাটাবেস এবং Vue SSR ফ্রেমওয়ার্ক, Nuxt 3-এর সাম্প্রতিক বিটা রিলিজ নিয়ে আলোচনা করতে যাচ্ছি। এটি একটি শিক্ষানবিস বান্ধব নিবন্ধ যা রেডিস ডাটাবেস অন্বেষণ করে, যেখানে আমরা মৌলিক অ্যাপ তৈরি করব যা একটি পৃষ্ঠা-ভিজিট ট্র্যাক করে। Nuxt অ্যাপ।

সম্পদ

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

Upstash কি?

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

Redis কি?

রেডিসের জনপ্রিয় ব্যবহারের ক্ষেত্রে রয়েছে যেমন:

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

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

• তালিকা - অনেকটা মৌলিক অ্যারের মতো। তালিকা আপনাকে একটি সিকোয়েন্সের উভয় প্রান্ত থেকে আইটেমগুলিকে পুশ এবং পপ করতে, পৃথক আইটেমগুলি আনতে এবং বিভিন্ন ধরণের অন্যান্য ক্রিয়াকলাপ সম্পাদন করতে দেয়৷ তালিকা কমান্ডগুলি L অক্ষরের সাথে উপসর্গযুক্ত, যেমন LPOP, LPUSH, LSET, ইত্যাদি
• হ্যাশ - আপনাকে একটি একক Redis কী-তে কী-মানের জোড়ার গোষ্ঠী সংরক্ষণ করতে দেয়। হ্যাশ কমান্ডগুলি H অক্ষর দ্বারা উপসর্গযুক্ত, যেমন HSET, HGET, HDEL, ইত্যাদি
• সেটগুলি - তালিকার মতো, কিন্তু সেটগুলি অনন্য এবং একটি ক্রমবিহীন তালিকায় আইটেমগুলি সঞ্চয় করে৷ এই কারণেই সেটগুলি বাছাই করা যায় না, তবে আপনি সেটে একটি আইটেম আছে কিনা তা দ্রুত যোগ করতে, সরাতে এবং নির্ধারণ করতে পারেন। সেট কমান্ডগুলি S অক্ষর দ্বারা উপসর্গযুক্ত, যেমন SADD, SCARD, SISMEMBER, ইত্যাদি
• বাছাই করা সেটগুলি - সেটের মতো, কিন্তু সাজানো সেটগুলি স্কোর অনুসারে বাছাই করার অনুমতি দেয় যা দেখতে অনেকটা কী-মান জোড়ার মতো। আমরা এই সংখ্যাসূচক স্কোরগুলিকে ম্যানিপুলেট এবং বাছাই করতে পারি। সাজানো সেট কমান্ডগুলি Z, i,e, ZADD, ZINCRBY, ZSCORE, ইত্যাদি অক্ষরের সাথে প্রিফিক্স করা হয়

আপনি https://redis.io/commands

-এ অন্যান্য Redis কমান্ড সম্পর্কে আরও জানতে পারেন

Upstash সেটআপ

ডক্স @ https://docs.upstash.com/

অনুযায়ী একটি অ্যাকাউন্ট এবং ডাটাবেস সেটআপ করতে নির্দেশাবলী অনুসরণ করুন

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

একবার আপনার ডাটাবেস তৈরি হয়ে গেলে, আপনি যেকোনো Redis ক্লায়েন্ট ব্যবহার করে Redis ডাটাবেস তৈরি করতে এবং অ্যাক্সেস করতে পারেন। বিকল্পভাবে, আপনি অবিলম্বে শুরু করতে Upstash কনসোলে দেওয়া ব্রাউজার-ভিত্তিক CLI👇 ব্যবহার করতে পারেন।

Upstash কনসোলে ব্রাউজার-ভিত্তিক CLI প্রদান করা হয়েছে

Redis-cli

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

Redis npm প্যাকেজ

রেডিস ডাটাবেসের সাথে ইন্টারঅ্যাক্ট করার জন্য আমাদের বেশ কয়েকটি এনপিএম প্যাকেজ রয়েছে। আমরা 1) @upstash/redis ব্যবহার করব এবং 2) ioredis - আমাদের Nuxt প্রকল্পে Redis কমান্ড অ্যাক্সেস করতে।

পরবর্তী বিভাগে, আমরা Nuxt প্রকল্প সেটআপ করব। Nuxt হল একটি SSR ফ্রেমওয়ার্ক Vue-এর উপরে। Nuxt Labs সম্প্রতি Nuxt 3 বিটা রিলিজ ঘোষণা করেছে। সুতরাং, আসুন একটি নতুন Nuxt 3 প্রকল্প সেটআপ করি৷

Nuxt 3 বর্তমানে বিটাতে রয়েছে, মনে রাখবেন যে এটি এখনও উৎপাদনের জন্য প্রস্তুত নয় .

⚡আসুন Nuxt 3 নিয়ে কথা বলি

Nuxt 3 nuxi নামে একটি একেবারে নতুন CLI প্রবর্তন করেছে Nuxt অ্যাপ তৈরি করতে।

npx nuxi init nuxt3-app

আমরা /pages তৈরি করব ডিরেক্টরি এবং নিচের মত কয়েকটি সহজ রুট যোগ করুন👇

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

app.vue Nuxt 3 এর একটি নতুন ভূমিকা যা একটি প্রধান উপাদান হিসাবে কাজ করে৷ app.vue /pages-এ সংজ্ঞায়িত প্রতিটি রুটের জন্য লোড করা হবে ডিরেক্টরি।

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

Nuxt 3 নাইট্রো নামে একটি নতুন সার্ভার ইঞ্জিনও প্রবর্তন করেছে। আমরা সার্ভার API এন্ডপয়েন্ট তৈরি করতে নাইট্রোর শক্তি ব্যবহার করতে পারি এবং সার্ভার মিডলওয়্যার শুধুমাত্র একটি server তৈরি করে api সহ ডিরেক্টরি এবং middleware সাব-ডিরেক্টরি হিসাবে। আপনি Github রেপোতে এই ন্যূনতম ডিরেক্টরি কাঠামো পর্যালোচনা করতে পারেন।

-server;
--api;
--middleware;

API এবং মিডলওয়্যার উভয়েরই একটি ডিফল্ট ফাংশন রপ্তানি করা উচিত যা api অনুরোধগুলি পরিচালনা করে এবং একটি প্রতিশ্রুতি/JSON ডেটা প্রদান করে। Nuxt 2 এর বিপরীতে, আমাদেরকে nuxt.config.js-এ সার্ভার-মিডলওয়্যার সংজ্ঞায়িত করতে হবে না .

আমাদের অ্যাপ তৈরি করার জন্য আমাদের যে পদক্ষেপগুলি নিতে হবে তার উচ্চ-স্তরের তালিকা এখানে রয়েছে:

• প্রথমে, আমরা Redis ডাটাবেসের সাথে সংযোগ করি।
• পৃষ্ঠার ভিজিট রেকর্ড করতে, আমরা সার্ভারে করা প্রতিটি পৃষ্ঠার অনুরোধ আটকাই, সেই পৃষ্ঠার কাউন্টার এক করে বাড়িয়ে দেই এবং এর মান রেডিস ডাটাবেসে সংরক্ষণ করি।
• তারপর, আমরা Redis ডাটাবেস থেকে পরিদর্শন-গণনা পুনরুদ্ধার করার জন্য ক্লায়েন্ট-সাইড থেকে একটি API কল করি এবং এটি Nuxt পৃষ্ঠায় প্রদর্শন করি।

ধারণাগতভাবে, নীচের চিত্রগুলি দেখায় যে আমরা কী তৈরি করার চেষ্টা করছি👇

Nuxt 3 সম্পর্কে আরও জানুন @ https://v3.nuxtjs.org/getting-started/installation

REST Redis ক্লায়েন্ট ব্যবহার করুন

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

yarn add @upstash/redis

Redis DB প্রমাণীকরণ করুন

Redis ডাটাবেস প্রমাণীকরণ করতে, আমাদের নিম্নলিখিত পরিবেশের ভেরিয়েবলগুলি সনাক্ত করতে হবে:

• REST URL (UPSTASH_REDIS_REST_URL), এবং
• টোকেন (UPSTASH_REDIS_REST_TOKEN)

...Upstash কনসোল থেকে - ডাটাবেসের অধীনে।

ব্যক্তিগত রানটাইম কনফিগারেশন

এখন, সার্ভার-সাইডে এই পরিবেশের ভেরিয়েবলগুলি প্রকাশ করতে, Nuxt রানটাইম কনফিগারেশন প্রদান করে যা আমরা 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-এ ফাইল এবং একটি redis উদাহরণ তৈরি করা const redis = Redis.fromEnv() এই ভেরিয়েবলগুলিকে Redis-এ পাস করার প্রয়োজন ছাড়াই . মনে রাখবেন যে এই জাদুটি শুধুমাত্র @upstash/redis ব্যবহার করার সময় প্রযোজ্য রিডিস ক্লায়েন্ট।

Nuxt সার্ভার-মিডলওয়্যারের সাথে ইন্টারসেপ্ট অনুরোধ

আমরা এখান থেকে যেকোনো প্রয়োজনীয় 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();
}

নেমস্পেস তৈরি করা হচ্ছে

Redis হল NoSql ডাটাবেস যা কী-মান জোড়ায় ডেটা সঞ্চয় করে। এটিতে স্বয়ংক্রিয়-বৃদ্ধিকরণ কীগুলির একটি ধারণা নেই বা কোনও ধরণের অনন্য UUID তৈরি করার কোনও গতিশীল উপায় নেই৷ এখানেই আমরা getRedisKey() এর সাথে পরিচয় করিয়ে দিই ইউটিলিটি ফাংশন।

এই ইউটিলিটি ফাংশন অনুরোধের URL প্রক্রিয়া করে এবং অনন্য কী তৈরি করে - যা আমরা প্রতিটি পৃষ্ঠার জন্য ভিজিট-কাউন্ট সংরক্ষণ করতে ব্যবহার করব। এইভাবে আমরা একই কী এর বিরুদ্ধে আমাদের কাউন্টার বৃদ্ধি রোধ করতে পারি।

আমাদের উদাহরণে, আমরা অনুরোধের URL তুলে নিই এবং '/'-এর সমস্ত উদাহরণ প্রতিস্থাপন করি '.' এর সাথে অনন্য নাম-স্পেসড কী তৈরি করতে।

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

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

REST API এন্ডপয়েন্ট ব্যবহার করে Redis DB অ্যাক্সেস করুন

আসুন একটি API এন্ডপয়েন্ট তৈরি করি যা সংশ্লিষ্ট পৃষ্ঠাগুলির জন্য বর্তমান গণনা বা স্কোর আনবে৷

Nuxt 3 এ, ডেটা আনার দুটি উপায় রয়েছে। 1)useAsyncData এবং 2) useFetch . app.vue-এ , আমরা useAsyncData ব্যবহার করব সাথে $fetch ohmyfetch লাইব্রেরি দ্বারা প্রদত্ত৷

// app.vue
<script setup>
	const router = useRoute();
  const { data: count } = await useAsyncData('Count', () => $fetch('/api/count', { params: { path: router.path}}))
</script>

আপনি দেখতে পাচ্ছেন, API কলের সাথে, যে পৃষ্ঠাটি অ্যাক্সেস করা হচ্ছে তা শনাক্ত করার জন্য আমরা একটি ক্যোয়ারী প্যারামিটার হিসাবে রাউটার পাথ পাস করেছি👇

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

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

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

// 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 এর সাথে সরাসরি Redis API ব্যবহার করুন

আমরা ioredis ব্যবহার করে একই অর্জন করতে পারি পাশাপাশি লাইব্রেরি।

yarn add ioredis

ioredis ব্যবহার করার সময় , আমাদের কোনো auth থাকবে না পদ্ধতি উপলব্ধ। যাইহোক, আমাদের একটি সংযোগ স্ট্রিং আছে - Upstash কনসোলে উপলব্ধ - যা আমরা Redis ডাটাবেসের সাথে সংযোগ করতে ব্যবহার করতে পারি।

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

// nuxt.config.js
export default defineNuxtConfig({
  publicRuntimeConfig: {},

  privateRunimeConfig: {
    UPSTASH_REDIS_CONN: process.env.UPSTASH_REDIS_CONN,
  },
});

এরপর, মিডলওয়্যারে, আমরা new Redis() তৈরি করব একটি সংযোগ তৈরি করার এবং client থেকে সমস্ত Redis কমান্ড অ্যাক্সেস করার উদাহরণ 👇

// server/middleware/pageCount.js

import config from "#config";
import Redis from "ioredis";

const client = new Redis(config.UPSTASH_REDIS_CONN);

Nuxt সার্ভার-মিডলওয়্যারের সাথে ইন্টারসেপ্ট অনুরোধ

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

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

REST API এন্ডপয়েন্ট ব্যবহার করে Redis DB অ্যাক্সেস করুন

এর আগে, আমরা কাস্টম API এন্ডপয়েন্ট server/api/count.ts তৈরি করি গণনা পেতে সেই API এন্ডপয়েন্টও একই থাকবে, আমরা যেভাবে 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 };
};

Upstash CLI দিয়ে পরীক্ষা করুন

যেহেতু আমরা সমস্ত ডেটা সাজানো-সেটে সংরক্ষণ করছি, তাই আমরা zrange ব্যবহার করতে পারি আমাদের সাজানো-সেট থেকে সমস্ত আইটেম আনতে।

আপনি Upstash কনসোলে প্রদত্ত Redis CLI অ্যাক্সেস করতে পারেন এবং নিম্নলিখিত কমান্ডটি চালাতে পারেন:

zrange myPageCounts 0 -1

এখানে👆:

• myPageCounts আমাদের সাজানো-সেটের নাম,
• 0 -1 পরিসর বোঝায়, যেখানে 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

আপনি আপনার API এবং মিডলওয়্যার পরীক্ষা করার সময়, আপনার ওয়েবসাইটে সংঘটিত সমস্ত ক্রিয়াকলাপের জন্য Upstash কনসোল চেক করতে ভুলবেন না৷

Upstash কনসোলে সম্পদের ব্যবহার

আপনার Nuxt 3 অ্যাপ স্থাপন করা হচ্ছে

Nuxt 3 অ্যাপ স্থাপন করার সময় নাইট্রো সার্ভার ইঞ্জিন একটি গুরুত্বপূর্ণ ভূমিকা পালন করে।

Netlify

Netlify-এ স্থাপন করার জন্য, আমরা আমাদের Nuxt অ্যাপের GitHub রেপো পুশ করব যেমনটা আমরা সাধারণত করি। নিশ্চিত করুন যে আপনি নিম্নলিখিত তিনটি আইটেমের যত্ন নিচ্ছেন যাতে আপনার স্থাপনা সুচারুভাবে হয়।

• Netlify-এ, npm run build ব্যবহার করুন আপনার বিল্ড কমান্ড হিসাবে, এবং dist প্রকাশ করার ডিরেক্টরি হিসাবে।
• নিয়োগ করার আগে Netlify-এ rest-url, টোকেন বা Redis সংযোগের জন্য আপনার পরিবেশের ভেরিয়েবল তৈরি করুন।
• শেষ কিন্তু অন্তত নয়, নিশ্চিত করুন যে আপনি netlify.toml তৈরি করেছেন আপনার Nuxt প্রকল্পের মূলে। এই ফাইলের বিষয়বস্তুগুলির জন্য, netlify.toml এ যান৷
৷

যখন আমরা yarn build , Nuxt 3 .output নামে একটি ডিরেক্টরি তৈরি করে যা আমরা আমাদের .toml এ ব্যবহার করেছি আমাদের ফাংশনগুলির জন্য পাথ প্রদান করার জন্য ফাইল।

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

Netlify-এ চলমান এই নিবন্ধের Nuxt উদাহরণ এখানে:https://thirsty-visvesvaraya-a09ab9.netlify.app/

ক্লাউডফ্লেয়ার

আমরা টার্মিনাল থেকে ক্লাউডফ্লেয়ার কর্মীতে আমাদের Nuxt 3 অ্যাপটি স্থাপন করতে পারি! Nuxt 3 ডক্স আপনার অ্যাপটি স্থানীয়ভাবে পরীক্ষা করার জন্য মিনিফ্লেয়ারকে সুপারিশ করে এবং তারপর এটির পূর্বরূপ দেখতে এবং প্রকাশ করতে র্যাংলার ব্যবহার করে৷

wrangler.toml যোগ করা নিশ্চিত করুন আপনার Cloudflare account_id দিয়ে প্রজেক্ট রুটে ফাইল করুন এবং পরিবেশ ভেরিয়েবল যেমন এই উদাহরণ ফাইলে দেখানো হয়েছে।

Cloudflare স্থাপনার জন্য, আমরা entry-point প্রদান করব এবং NITRO_PRESET=cloudflare দিয়ে কমান্ড তৈরি করুন .

// wrangler.toml
//..
[site]
bucket = ".output/public"
entry-point = ".output"

[build]
command = "NITRO_PRESET=cloudflare yarn nuxt build"
upload.format = "service-worker"

ক্লাউডফ্লেয়ার ওয়ার্কারে চলমান এই নিবন্ধের নক্সট উদাহরণ এখানে:https://upstash-demo.krutie-patel.workers.dev/contact

উপসংহার

আমরা কীভাবে এটিকে Nuxt (v3) এর মতো সার্ভার-সাইড রেন্ডারিং ফ্রেমওয়ার্কের সাথে একীভূত করতে পারি তা দেখতে Upstash পরিষেবাগুলি ব্যবহার করে Redis-এর সবচেয়ে মৌলিক অ্যাপ্লিকেশনটি কভার করেছি:

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

Upstash আমাদের তৈরি করা প্রতিটি ডাটাবেসের জন্য ডেটা ট্র্যাফিক এনক্রিপ্ট করার একটি বিকল্প প্রদান করে, সাথে একাধিক প্রাপ্যতা অঞ্চলে ডেটা প্রতিলিপি করার বিকল্প এবং বিশ্বব্যাপী বিতরণ করা প্রান্তের অবস্থানগুলিতে আমাদের REST API প্রতিক্রিয়াগুলি ক্যাশে করার বিকল্প রয়েছে৷ আপনি বিশদ বিবরণ এর অধীনে Upstash কনসোলে এই বিকল্পগুলি খুঁজে পেতে পারেন৷ আপনার ডাটাবেসের ট্যাব।

Redis DB অন্বেষণ করতে ইচ্ছুক যে কোনও নতুনদের জন্য, Upstash আসন্ন এবং বিদ্যমান ফ্রন্ট-এন্ড প্রযুক্তিগুলির সাথে কাজ করার পরিপ্রেক্ষিতে শুরু করা বেশ সহজ করে তোলে যা আমরা ইতিমধ্যে জানি এবং ভালোবাসি। আমি আশা করি এই নিবন্ধটি আপনাকে আপনার রেডিস যাত্রা শুরু করার জন্য একটি ভাল সূচনা পয়েন্ট দেবে৷