Render-এ Upstash Serverless Redis দিয়ে Next.js ডিপ্লয় করুন

Render একটি শক্তিশালী ইনফ্রাস্ট্রাকচার প্ল্যাটফর্ম যা ইনস্ট্যান্ট ডিপ্লয় এবং অটোস্কেলিং সহ অন্যান্য সুবিধা প্রদান করে। আজ আমরা Upstash-এ একটি সিম্পল Next.js অ্যাপ্লিকেশন তৈরি করব এবং তারপর এটিকে Render-এ ডিপ্লয় করব।

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

শুরু করুন

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

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

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

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

Yarn:

yarn add @upstash/redis

npm:

npm i @upstash/redis

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

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

UPSTASH_REDIS_REST_URL=YOUR_REST_URL_HERE UPSTASH_REDIS_REST_TOKEN=YOUR_REST_TOKEN_HERE

Q: আমরা কেন .env.local ব্যবহার করছি .env-এর বদলে? A: আমরা একটি লোকাল এনভ ফাইল ব্যবহার করছি কারণ আপনি এখন লোকালি এনভায়রনমেন্ট ভেরিয়েবল সংরক্ষণ করতে পারবেন, এবং Render-এ ডিপ্লয় করার আগে, আপনি এনভায়রনমেন্ট ভেরিয়েবল কনফিগার করতে পারবেন।

ভিউ কাউন্টার

আমাদের অ্যাপ্লিকেশনে একটি সিম্পল ভিউ কাউন্টার ইমপ্লিমেন্ট করি। প্রথমে 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) { // বর্তমান পাথ পান const key = ctx.req.url; // বর্তমান ভিউ পান const views = await redis.get(key); // ভিউ এক করে বাড়ান await redis.incr(key); return { props: { views: views ? parseInt(views) : 0, }, }; }

চমৎকার! প্রতিবার কেউ একটি পেজ রিকোয়েস্ট করলে, সেই পেজের পেজ ভিউ এক করে বাড়বে! আপনি এই ইমপ্লিমেন্টেশনটি একটি ডাইনামিক পেজেও পুনরায় ব্যবহার করতে পারেন (যেমন [slug].js)। কিন্তু আমরা এটি ওয়েবপেজে কীভাবে প্রতিফলিত করব?

ফাইলের টপে, আপনার ইম্পোর্টের নিচে, আপনি নিচের লাইনটি দেখতে পাবেন:

export default function Home() {

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

export default function Home({ views }) {

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

This page has {views} views

চমৎকার, এখন প্রতিবার আপনি পেজটি রিলোড করলে, ভিউগুলো এক করে বাড়তে থাকবে!

GitHub-এ পুশ করা

আমাদের কোড GitHub-এ পুশ করি যাতে আমরা সহজে Render-এ ডিপ্লয় করতে পারি পরবর্তী ধাপে। 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 রিপোজিটরিতে পুশ করবে! এখানে আমারটি।

Render-এ ডিপ্লয় করা

ঠিক আছে, আপনি Upstash-এ এই অ্যাপটি বানালেন, এখন আপনি কীভাবে ডিপ্লয় করবেন?

Render এই প্রশ্নের উত্তর দেয়। Render-এ একটি ফ্রি অ্যাকাউন্ট তৈরি করে শুরু করুন।

Render Dashboard-এ যান শুরু করতে।

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

সাইন আপ করার পর আপনাকে আপনার ইমেইল ভেরিফাই করতে বলা হবে, তাই সাইন আপ করার পর আপনার ইমেইলে পাওয়া লিংকে ক্লিক করুন ভেরিফাই করার জন্য।

তারপর আপনাকে এই পেজে রিডাইরেক্ট করা হবে। "New Web Service"-এ ক্লিক করতে ভুলবেন না।

"New Web Service"-এ হিট করার পর, আপনি লাস্ট স্টেপে পুশ করা রিপোজিটরির URL পেস্ট করতে পারেন।

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

এই অ্যাপের জন্য Render-এর ফ্রি প্ল্যান সিলেক্ট করতে পারেন, এটি চালানোর জন্য খুব বেশি রিসোর্স দরকার নেই।

শেষ ধাপের জন্য, আসুন আমাদের এনভায়রনমেন্ট ভেরিয়েবল যোগ করি। এগুলো আপনার আগে বানানো .env.local বা Upstash Console-এ পাওয়া যাবে।

এখন, "Create Web Service"-এ ক্লিক করুন! হ্যাঁ, আসা করি কাজ করে।

কয়েক মিনিট অপেক্ষা করুন অ্যাপটি ডিপ্লয় ফিনিশ করার জন্য, তারপর টপ লেফ্টের URL-এ ভিজিট করুন।

আমার ডিপ্লয় করা উদাহরণ: https://upstash-example.onrender.com

অভিনন্দন!

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

নিশ্চিত করুন @upstash-কে Twitter-এ ফলো করেছেন, এবং Discord server-এ যোগ দিন!

Project Source: https://github.com/upstash/redis-examples/tree/master/using-render

Working Demo: https://upstash-example.onrender.com/