सर्वर रहित रेडिस के साथ रेंडर का उपयोग करना

रेंडर एक शक्तिशाली बुनियादी ढांचा मंच है जो अन्य चीजों के साथ तत्काल तैनाती और ऑटोस्केलिंग प्रदान करता है। आज हम Upstash के साथ एक सरल Next.js एप्लिकेशन बना रहे हैं और फिर उसे रेंडर पर परिनियोजित करेंगे।

नोट:यह ट्यूटोरियल मानता है कि आपने Upstash पर पहले से ही एक Redis इंस्टेंस सेट कर लिया है। यदि आपने ऐसा नहीं किया है, तो आप Upstash कंसोल का उपयोग करके ऐसा कर सकते हैं।

आरंभ करना

सबसे पहले, एक नया Next.js ऐप और cd बनाएं इसमें।

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

मैंने फोल्डर को upstash-render . कहा , आप जो चाहें नाम बदल सकते हैं।

आइए आगे अपस्टैश रेडिस एसडीके स्थापित करें, इससे हमारे रेडिस इंस्टेंस के साथ संवाद करना आसान हो जाएगा। एनपीएम या यार्न के साथ स्थापित करें।

सूत:

yarn add @upstash/redis

एनपीएम:

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 . के बजाय ?A:हम एक स्थानीय env फ़ाइल का उपयोग कर रहे हैं क्योंकि आप अभी के लिए स्थानीय रूप से पर्यावरण चर को संग्रहीत करने में सक्षम होंगे, और रेंडर पर परिनियोजित करने से पहले, आप पर्यावरण चर को कॉन्फ़िगर कर सकते हैं।

देखें काउंटर

आइए आगे हमारे आवेदन पर एक साधारण व्यू काउंटर लागू करें। pages/index.js खोलें पहले और एसडीके को आयात करें जिसे हमने पहले स्थापित किया था। आपकी फ़ाइल का शीर्ष कुछ इस तरह दिखना चाहिए:

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 का उपयोग करें इसलिए हम सर्वर साइड पर अपने अपस्टैश डेटाबेस के लिए अनुरोध कर सकते हैं।

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 पर एक नया रिपॉजिटरी बनाएं और आगे बढ़ने के लिए इन कमांड्स को रन करें।

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 रिपॉजिटरी में धकेल देंगे! ये रहा मेरा।

रेंडर के लिए परिनियोजन

ठीक है, तो आपने यह ऐप Upstash के साथ बना लिया है, अब आपको इसे कैसे परिनियोजित करना चाहिए?

रेंडर के पास इस सवाल का जवाब है। आइए आरंभ करने के लिए रेंडर पर एक निःशुल्क खाता बनाएं।

आरंभ करने के लिए रेंडर डैशबोर्ड पर जाएं।

आप उनके किसी भी प्रमाणीकरण प्रदाता के साथ साइन इन कर सकते हैं या बस अपने ईमेल और पासवर्ड का उपयोग कर सकते हैं।

साइन अप करने के बाद आपसे अपना ईमेल सत्यापित करने के लिए कहा जाएगा, इसलिए सत्यापित करने के लिए साइन अप करने के बाद आपको अपने ईमेल में प्राप्त लिंक पर क्लिक करें।

फिर आपको इस पेज पर रीडायरेक्ट कर दिया जाएगा। "नई वेब सेवा" पर क्लिक करना सुनिश्चित करें

"नई वेब सेवा" को हिट करने के बाद, आप उस रिपॉजिटरी का URL पेस्ट कर सकते हैं जिसमें आपने अपना कोड अंतिम चरण में धकेला था।

इसके बाद, हम कॉन्फ़िगर करेंगे कि हम अपने ऐप को कैसे तैनात करना चाहते हैं। सुनिश्चित करें कि आपका स्टार्ट कमांड yarn start पर सेट है , बिल्ड कमांड yarn; yarn build , और यह कि पर्यावरण Node. क्षेत्र जैसी कोई अन्य चीज़ आप पर निर्भर है।

आप इस ऐप के लिए रेंडर की मुफ्त योजना का चयन कर सकते हैं, इसे चलाने के लिए बहुत अधिक संसाधनों की आवश्यकता नहीं होगी।

अंतिम चरण के लिए, आइए हमारे पर्यावरण चर जोड़ें। आप इन्हें .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/