সার্ভারলেস রেডিসের সাথে রেন্ডার ব্যবহার করা

রেন্ডার একটি শক্তিশালী অবকাঠামো প্ল্যাটফর্ম যা অন্যান্য জিনিসগুলির মধ্যে তাত্ক্ষণিক স্থাপনা এবং অটোস্কেলিং অফার করে। আজ আমরা Upstash এর সাথে একটি সাধারণ Next.js অ্যাপ্লিকেশন তৈরি করব এবং তারপর এটি রেন্ডারে স্থাপন করব।

দ্রষ্টব্য:এই টিউটোরিয়ালটি অনুমান করে আপনি ইতিমধ্যেই Upstash-এ একটি Redis ইন্সট্যান্স সেট আপ করেছেন। আপনি যদি তা না করে থাকেন, আপনি Upstash কনসোল ব্যবহার করে তা করতে পারেন।

শুরু করা

প্রথমে, আসুন একটি নতুন Next.js অ্যাপ এবং cd তৈরি করি এটিতে।

npx create-next-app upstash-render && cd upstash-render

আমি ফোল্ডারটিকে upstash-render বলেছি , আপনি আপনার পছন্দমত নাম পরিবর্তন করতে পারেন।

এর পরের Upstash Redis SDK ইনস্টল করা যাক, এটি আমাদের Redis উদাহরণের সাথে যোগাযোগ করা সহজ করে তুলবে। npm বা সুতা দিয়ে ইনস্টল করুন।

সুতা:

yarn add @upstash/redis

npm:

npm i @upstash/redis

পরিবেশ ভেরিয়েবল অনুলিপি করুন

এখন যেহেতু আমরা Upstash এর Redis SDK ইনস্টল করেছি, আসুন সঠিক ভেরিয়েবলগুলিকে .env.local নামে একটি ফাইলে কপি করি। . আপনাকে UPSTASH_REDIS_REST_URL অনুলিপি করতে হবে এবং UPSTASH_REDIS_REST_TOKEN Upstash কনসোল থেকে।

UPSTASH_REDIS_REST_URL=YOUR_REST_URL_HERE
UPSTASH_REDIS_REST_TOKEN=YOUR_REST_TOKEN_HERE

প্রশ্নঃ কেন আমরা .env.local ব্যবহার করছি .env এর পরিবর্তে ?উঃ:আমরা একটি স্থানীয় env ফাইল ব্যবহার করছি কারণ আপনি আপাতত স্থানীয়ভাবে এনভায়রনমেন্ট ভেরিয়েবল সঞ্চয় করতে পারবেন এবং রেন্ডারে স্থাপন করার আগে, আপনি এনভায়রনমেন্ট ভেরিয়েবল কনফিগার করতে পারবেন।

কাউন্টার দেখুন

এর পরে আমাদের অ্যাপ্লিকেশনটিতে একটি সাধারণ ভিউ কাউন্টার প্রয়োগ করা যাক। pages/index.js খুলুন প্রথমে এবং আমরা আগে ইনস্টল করা SDK আমদানি করুন। আপনার ফাইলের উপরের অংশটি এইরকম হওয়া উচিত:

import Head from "next/head";
import Image from "next/image";
import styles from "../styles/Home.module.css";
import { Redis } from "@upstash/redis";
const redis = Redis.fromEnv();

ফাইলের নীচে, আসুন getServerSideProps ব্যবহার করি তাই আমরা সার্ভার সাইডে আমাদের Upstash ডাটাবেসে অনুরোধ করতে পারি।

export async function getServerSideProps(ctx) {
  // get current path
  const key = ctx.req.url;
  // get current views
  const views = await redis.get(key);
  // increment views by one
  await redis.incr(key);
  return {
    props: {
      views: views ? parseInt(views) : 0,
    },
  };
}

দারুণ! যখনই কেউ একটি পৃষ্ঠার অনুরোধ করে, সেই পৃষ্ঠাটির জন্য পৃষ্ঠার ভিউ এক এক করে বেড়ে যায়! আপনি একটি গতিশীল পৃষ্ঠাতেও এই বাস্তবায়ন পুনরায় ব্যবহার করতে পারেন (যেমন [slug].js ) যদিও আমরা ওয়েবপেজে এটি কীভাবে প্রতিফলিত করব?

পৃষ্ঠার শীর্ষে, আপনার আমদানির নীচে, আপনি কোডের নিম্নলিখিত লাইনটি দেখতে পারেন:

export  default  function  Home() {

এই লাইনটি এতে পরিবর্তন করুন:

export  default  function  Home({ views }) {

আমরা views ফেরত দিই প্রপসের মাধ্যমে getServerSideProps এর মাধ্যমে , এবং আমরা কেবল views উল্লেখ করে আমাদের ওয়েবসাইটে এটি ব্যবহার করতে পারি পরিবর্তনশীল এই উদাহরণে, আমি শিরোনামের নীচের বিবরণটি সরিয়ে দিয়েছি এবং এটিকে নিম্নলিখিতগুলিতে পরিবর্তন করেছি:

<p className={styles.description}>This page has {views} views</p>

দারুণ, তাই এখন যতবার আপনি পৃষ্ঠাটি পুনরায় লোড করবেন, ভিউ এক এক করে বাড়তে হবে!

GitHub-এ ঠেলে দেওয়া হচ্ছে

আসুন আমাদের কোডটি GitHub-এ পুশ করি যাতে আমরা আমাদের পরবর্তী ধাপে সহজেই রেন্ডারে স্থাপন করতে পারি। GitHub-এ একটি নতুন সংগ্রহস্থল তৈরি করুন এবং এগিয়ে যাওয়ার জন্য এই কমান্ডগুলি চালান৷

git init
git add .
git commit -m "initial commit"
git remote add origin https://github.com/your_username/repo_you_just_made.git
git push origin main

উপরের কমান্ডগুলি আপনার কোডটি আপনার তৈরি করা GitHub সংগ্রহস্থলে ঠেলে দেবে! এখানে আমার।

রেন্ডারে স্থাপন করা হচ্ছে

ঠিক আছে, তাই আপনি এই অ্যাপটি আপস্ট্যাশ দিয়ে তৈরি করেছেন, এখন আপনার এটি কীভাবে স্থাপন করা উচিত?

রেন্ডার এই প্রশ্নের উত্তর আছে. শুরু করার জন্য রেন্ডারে একটি বিনামূল্যের অ্যাকাউন্ট তৈরি করা যাক।

শুরু করতে রেন্ডার ড্যাশবোর্ডে যান।

আপনি তাদের যেকোনো প্রমাণীকরণ প্রদানকারীর সাথে সাইন ইন করতে পারেন অথবা আপনার ইমেল এবং একটি পাসওয়ার্ড ব্যবহার করতে পারেন৷

একবার সাইন আপ করার পরে আপনাকে আপনার ইমেল যাচাই করতে বলা হবে, তাই যাচাই করতে সাইন আপ করার পরে আপনি আপনার ইমেলে যে লিঙ্কটি পাবেন সেটিতে ক্লিক করুন৷

তারপর আপনাকে এই পৃষ্ঠায় পুনঃনির্দেশিত করা হবে৷ "নতুন ওয়েব পরিষেবা"

"নতুন ওয়েব সার্ভিস"-এ আঘাত করার পরে, আপনি শেষ ধাপে আপনার কোডটি পুশ করা সংগ্রহস্থলের URL পেস্ট করতে পারেন৷

এর পরে, আমরা কীভাবে আমাদের অ্যাপটি স্থাপন করতে চাই তা কনফিগার করব। নিশ্চিত করুন যে আপনার স্টার্ট কমান্ড yarn start সেট করা আছে , বিল্ড কমান্ড হল yarn; yarn build , এবং পরিবেশ হল নোড। অঞ্চলের মত অন্য যে কোন বিষয় আপনার উপর নির্ভর করে।

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

চূড়ান্ত পদক্ষেপের জন্য, আসুন আমাদের পরিবেশের ভেরিয়েবল যোগ করি। আপনি এগুলো .env.local-এ খুঁজে পেতে পারেন আপনি আগে বা Upstash কনসোল তৈরি করেছেন।

এখন, আপনি "ওয়েব পরিষেবা তৈরি করুন" ক্লিক করতে পারেন! বাহ, আসুন আশা করি এটি কাজ করে।

অ্যাপটি স্থাপন করা শেষ হওয়ার জন্য কয়েক মিনিট অপেক্ষা করুন, তারপর উপরের বাম দিকে URL-এ যান৷

আমি যে উদাহরণটি স্থাপন করেছি তা এখানে:https://upstash-example.onrender.com

অভিনন্দন!

আপনি সফলভাবে আপনার Next.js এবং Upstash অ্যাপ্লিকেশন রেন্ডারে স্থাপন করেছেন!

টুইটারে @upstash অনুসরণ করতে ভুলবেন না এবং ডিসকর্ড সার্ভারে যোগ দিন!

প্রকল্প উৎস: https://github.com/upstash/redis-examples/tree/master/using-render

ওয়ার্কিং ডেমো: https://upstash-example.onrender.com/