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_REDIS_REST_URL और UPSTASH_REDIS_REST_TOKEN को Upstash Console से कॉपी करना होगा।
UPSTASH_REDIS_REST_URL=YOUR_REST_URL_HERE UPSTASH_REDIS_REST_TOKEN=YOUR_REST_TOKEN_HERE प्रश्न: हम
.envके बजाय.env.localका उपयोग क्यों कर रहे हैं? उत्तर: हम लोकल एनवायरनमेंट फ़ाइल का उपयोग कर रहे हैं क्योंकि आप अभी के लिए एनवायरनमेंट वेरिएबल्स को स्थानीय रूप से स्टोर कर पाएंगे, और 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 है। क्षेत्र जैसी अन्य चीजें आप पर निर्भर हैं।
आप इस ऐप के लिए Render के मुफ्त प्लान का चयन कर सकते हैं, इसे चलाने के लिए बहुत अधिक संसाधनों की आवश्यकता नहीं होगी।
अंतिम चरण के लिए, आइए अपने एनवायरनमेंट वेरिएबल्स जोड़ें। आप इन्हें पहले बनाए गए .env.local या Upstash Console में पा सकते हैं।
अब, आप "Create Web Service" पर क्लिक कर सकते हैं! वाह, आशा करते हैं कि यह काम करेगा।
ऐप के डेप्लॉय होने में कुछ मिनट प्रतीक्षा करें, फिर ऊपरी बाएं कोने पर URL पर जाएं।
यहाँ मेरा डेप्लॉय किया गया उदाहरण है: https://upstash-example.onrender.com
बधाई हो!
आपने अपने Next.js और Upstash एप्लिकेशन को Render पर सफलतापूर्वक डेप्लॉय कर लिया है!
@upstash को Twitter पर फॉलो करना सुनिश्चित करें, और Discord सर्वर से जुड़ें!
प्रोजेक्ट सोर्स: https://github.com/upstash/redis-examples/tree/master/using-render
कार्यशील डेमो: https://upstash-example.onrender.com/
