तैनाती और पुनरावृति - टेक्नोवेशन चैलेंज

सीखने के मकसद

Vercel का उपयोग करके अपने MVP को लाइव प्रोडक्शन URL पर डिप्लॉय करें।
अपने API राउट्स को दुरुपयोग से बचाने के लिए रेट लिमिटिंग जोड़ें।
लॉन्च के बाद अपनी एआई सुविधाओं की निगरानी के लिए संरचित लॉगिंग स्थापित करें।
DevTools का उपयोग करके अपने ऐप की सुरक्षा सत्यापित करें
लॉन्च से पहले की चेकलिस्ट का उपयोग करके अपने ऐप की प्रोडक्शन तत्परता का मूल्यांकन करें।

आप क्या बनाएंगे

लाइव प्रोडक्शन ऐप: आपका MVP एक सार्वजनिक HTTPS URL पर डिप्लॉय किया गया है जिसे कोई भी देख सकता है।

मान्यताओं

GitHub रिपॉजिटरी में एक त्रुटिरहित, परीक्षित MVP उपलब्ध है।
लॉगिन, साइनअप और एपीआई रूट सुरक्षा के साथ उपयोगकर्ता प्रमाणीकरण
स्टोरेज कॉन्फ़िगरेशन के साथ एक सुपबेस प्रोजेक्ट
उपयोगकर्ता परीक्षण प्रतिक्रिया को आपके ऐप में शामिल किया गया है।

गतिविधियाँ

गतिविधि 1: वर्सेल के साथ अपने ऐप को डिप्लॉय करने की तैयारी करें
गतिविधि 2: अपने ऐप को वर्सेल पर डिप्लॉय करें
गतिविधि 3: ऑटो-डिप्लॉयमेंट का परीक्षण करें
गतिविधि 4: दर सीमा निर्धारण और सुरक्षित त्रुटि प्रबंधन जोड़ें
गतिविधि 5: निगरानी, सत्यापन और शुभारंभ
गतिविधि 6: (वैकल्पिक) एक कस्टम डोमेन कनेक्ट करें

एमवीपी से प्रोडक्शन तक

आपका ऐप काम करता है। लोगों ने इसका परीक्षण किया है, आपने बग ठीक कर दिए हैं, और आपने उपयोगकर्ता प्रमाणीकरण भी जोड़ दिया है। लेकिन अभी, केवल आपके कोडस्पेस पूर्वावलोकन लिंक वाले लोग ही इसका उपयोग कर सकते हैं, और जब आपका कोडस्पेस चलना बंद हो जाता है तो वह लिंक गायब हो जाता है।

यह यूनिट आपके एमवीपी ऐप को "मेरे कंप्यूटर पर काम करता है" से "इंटरनेट पर कोई भी इसका उपयोग कर सकता है" में बदल देती है।

इस यूनिट में हम ट्यूटरमैच को मार्गदर्शक उदाहरण के रूप में उपयोग करेंगे, वही ट्यूटरिंग अनुशंसा ऐप जिसका उपयोग हमने अन्य पाठों में किया है। आप देखेंगे कि ट्यूटरमैच कोडस्पेस में चलने से लेकर एक लाइव यूआरएल तक कैसे पहुंचता है जिसे कोई भी एक्सेस कर सकता है, फिर आप प्रत्येक चरण को अपने स्वयं के एमवीपी के लिए अनुकूलित कर सकते हैं।

जब आपका ऐप कोडस्पेस से सार्वजनिक यूआरएल पर स्थानांतरित होता है तो तीन चीजें बदल जाती हैं:

दृश्यता

आपका ऐप एक यूआरएल के माध्यम से सार्वजनिक हो जाता है। यूआरएल को खोजने या प्राप्त करने वाला कोई भी व्यक्ति इसका उपयोग करने का प्रयास कर सकता है, न कि केवल आपकी टीम।

अटलता

आपके ऐप को आपके द्वारा मैन्युअल रूप से शुरू किए बिना लगातार चलते रहना चाहिए। कोडस्पेस में, परीक्षण के दौरान आपने अपने सर्वर को मैन्युअल रूप से शुरू किया था, लेकिन वास्तविक उपयोगकर्ताओं के साथ उत्पादन में, होस्टिंग प्लेटफ़ॉर्म आपके ऐप को स्वचालित रूप से चालू रखता है।

लागत

प्रत्येक एआई एपीआई कॉल के लिए पैसे लगते हैं। कोडस्पेस में, आप नियंत्रित करते थे कि आपके ऐप का उपयोग कौन करेगा (ज्यादातर आप ही)। सार्वजनिक यूआरएल के साथ, उपयोगकर्ता और एपीआई प्रमाणीकरण होने के बावजूद, आपको दुरुपयोग से बचाव के लिए अतिरिक्त सुरक्षा की आवश्यकता होती है।

परिनियोजन प्लेटफ़ॉर्म का चयन करना

आप अपने ऐप को Codespaces में चला रहे हैं—यह एक ऐसा डेवलपमेंट एनवायरनमेंट है जिस तक केवल आपकी ही पहुंच है। इस गतिविधि में, आप इसे Vercel पर डिप्लॉय करेंगे, जो वेब एप्लिकेशन होस्ट करने वाला एक प्लेटफॉर्म है और आपको एक स्थायी सार्वजनिक URL प्रदान करता है।

वेब ऐप को डिप्लॉय करने के कई तरीके हैं। यहां MVP (मिनिमम वायबल प्रोडक्ट) डिप्लॉय करने वाले व्यक्ति के लिए सबसे आम विकल्पों की तुलना दी गई है:

प्लेटफार्म

सेटअप जटिलता

निःशुल्क स्तर

के लिए सर्वश्रेष्ठ

वर्सेल

सरल (गिटहब से कनेक्ट होता है)

100GB बैंडविड्थ, 100 घंटे सर्वरलेस

API राउट्स के साथ React/Next.js ऐप्स

Google AI स्टूडियो परिनियोजन

बहुत ही सरल (एक क्लिक में)

इसके लिए Google Cloud बिलिंग आवश्यक है (नए उपयोगकर्ताओं के लिए $300 का निःशुल्क क्रेडिट)।

एआई स्टूडियो में पूरी तरह से निर्मित ऐप्स

प्यारा / बोल्ट

सरल (अंतर्निहित होस्टिंग)

सीमित, प्लेटफ़ॉर्म के अनुसार भिन्न होता है

GitHub के बिना त्वरित प्रोटोटाइप

नेटलिफ़ाई

सरल (गिटहब से कनेक्ट होता है)

100GB बैंडविड्थ

स्थिर साइटें, सरल बैकएंड

रेलवे / रेंडर

मध्यम

सीमित निःशुल्क स्तर

डेटाबेस के साथ फुल-स्टैक ऐप्स

इस प्रोग्राम के लिए, आप Vercel का उपयोग करेंगे। इसका कारण यह है:

आपमें से अधिकांश के ऐप में एक बैकएंड होता है, और वर्सेल इसे बखूबी संभालता है। आपका एमवीपी (मिनिमम वायबल प्रोडक्ट) केवल कुछ स्टैटिक पेजों का समूह नहीं है—इसमें सर्वर-साइड एपीआई रूट्स हैं जो ग्रोक या अन्य एलएलएम एपीआई को कॉल करते हैं, सुपाबेस से कनेक्ट होते हैं, और संभवतः अन्य एपीआई को भी कॉल करते हैं। वर्सेल के सर्वरलेस फंक्शन बैकएंड कोड को स्वचालित रूप से संभालते हैं। नेटलिफ़ाई जैसे प्लेटफ़ॉर्म सरल ऐप्स के लिए अच्छे हैं, लेकिन सर्वर-साइड लॉजिक के लिए अधिक सेटअप की आवश्यकता होती है।

यह सीधे GitHub से जुड़ता है। आपका कोड पहले से ही GitHub पर मौजूद है। Vercel आपके रिपॉजिटरी को इम्पोर्ट करता है और हर बार जब आप बदलाव पुश करते हैं तो उसे स्वचालित रूप से रीडिप्लॉय कर देता है—ठीक उसी Git वर्कफ़्लो की तरह जिसका उपयोग आप इस पूरे प्रोग्राम में करते आ रहे हैं।

क्रेडिट कार्ड की आवश्यकता नहीं है। वर्सेल के निःशुल्क संस्करण के लिए आपके पास पहले से मौजूद GitHub खाते के अलावा और कुछ भी आवश्यक नहीं है।

Vercel स्वचालित रूप से प्रोडक्शन सेटअप और सुरक्षा का प्रबंधन करता है। परिनियोजन के कई पहलुओं के लिए महत्वपूर्ण सेटअप की आवश्यकता होती है। Vercel इन सेटअप आवश्यकताओं के एक बड़े हिस्से को स्वचालित रूप से संभालता है।

Netlify दूसरे नंबर पर आता है और अगर आप कभी कोई दूसरा प्लेटफॉर्म आजमाना चाहें तो यह एक बढ़िया विकल्प है। Vercel और Netlify दोनों GitHub से कनेक्ट होते हैं, पुश करने पर ऑटो-डिप्लॉय करते हैं और कई तरह के फ्री प्लान उपलब्ध कराते हैं। अंतर यह है कि Vercel बैकएंड API राउट्स को पहले से ही हैंडल करता है, जबकि Netlify में आपको अपने सर्वर कोड को उनके खास "Netlify Functions" फॉर्मेट में बदलना पड़ता है। आपके MVP ऐप के लिए, Vercel ज़्यादा आसान और सबसे व्यापक विकल्प है।

अगर मेरा ऐप अन्य फ्रेमवर्क का उपयोग कर रहा है तो क्या होगा?

Next.js: यदि आपका ऐप Next.js प्रोजेक्ट है, तो Vercel को Next.js के निर्माताओं द्वारा बनाया गया था, इसलिए यह अभी भी एक बढ़िया विकल्प है।

लवेबल या बोल्ट: Lovable or Bolt इन प्लेटफॉर्म्स में होस्टिंग और डिप्लॉयमेंट की सुविधा पहले से ही उपलब्ध है। हो सकता है कि आपका ऐप पहले से ही उनके इंफ्रास्ट्रक्चर पर लाइव हो। अपने कोच से पूछें कि क्या आपको वर्सेल पर माइग्रेट करना चाहिए या प्लेटफॉर्म की इन-बिल्ट होस्टिंग पर ही रहना चाहिए।

पाइथन (फ्लेस्क, स्ट्रीमलिट, फास्टएपीआई): वर्सेल के फ्री टियर में पाइथन बैकएंड सपोर्ट नहीं है। वैकल्पिक प्लेटफॉर्म के तौर पर रेलवे या रेंडर के बारे में अपने कोच से पूछें। रेलवे ( railway.app ) एक फ्री टियर प्रदान करता है जो पाइथन को सपोर्ट करता है — अपने गिटहब रेपो को कनेक्ट करें और रेलवे बाकी का काम संभाल लेगा। इस यूनिट में बताए गए कॉन्सेप्ट्स — एनवायरनमेंट वैरिएबल, मॉनिटरिंग, एरर हैंडलिंग — अभी भी लागू होते हैं, लेकिन प्लेटफॉर्म के अनुसार चरण अलग-अलग होंगे।

वर्सेल क्या संभालता है

वर्सेल बुनियादी ढांचे से संबंधित कई कठिन कार्यों को स्वचालित रूप से संभालता है। जिम्मेदारियों का विभाजन इस प्रकार है:

वर्सेल

HTTPS (एन्क्रिप्टेड कनेक्शन) के साथ अपने ऐप को सुरक्षित रखें।
दुर्भावनापूर्ण ट्रैफ़िक को आपके ऐप तक पहुँचने से पहले ही ब्लॉक करना
दुनिया भर के उपयोगकर्ताओं के लिए अपने ऐप को तेज़ बनाएं
आपके ऐप को मैन्युअल रूप से शुरू किए बिना 24/7 चालू रखना।

आप

उपयोगकर्ताओं द्वारा आपके एआई फ़ीचर के उपयोग की आवृत्ति को सीमित करना। सीमा न होने पर, एक उपयोगकर्ता सैकड़ों महंगे एआई कॉल ट्रिगर कर सकता है।
आसान भाषा में त्रुटि संदेश दिखाना। इसके बिना, कुछ गड़बड़ होने पर उपयोगकर्ताओं को भ्रमित करने वाली तकनीकी त्रुटियाँ दिखाई देती हैं।

कोडस्पेस में, आप अपने फ्रंटएंड और बैकएंड को दो अलग-अलग प्रक्रियाओं के रूप में चला रहे होंगे:

फ्रंटएंड सर्वर , संभवतः रिएक्ट
बैकएंड सर्वर , संभवतः एक्सप्रेस

यह एक सामान्य विकास सेटअप है जो निर्माण और डिबगिंग के लिए अच्छी तरह से काम करता है।

हालांकि, वर्सेल GitHub Codespaces से अलग तरीके से काम करता है। यह एक स्थायी एक्सप्रेस सर्वर नहीं चलाता है। इसके बजाय, यह दो काम करता है:

आपकी फ्रंटएंड फ़ाइलें (npm run build से प्राप्त HTML, CSS, JavaScript) Vercel के वैश्विक CDN द्वारा उपलब्ध कराई जाती हैं। CDN (कंटेंट डिलीवरी नेटवर्क) दुनिया भर में फैले सर्वरों का एक नेटवर्क है जो आपके ऐप की स्थिर फ़ाइलों - HTML, CSS, JavaScript, छवियों - की प्रतियां संग्रहीत करता है।

Vercel इन्हें बिल्ड आउटपुट डायरेक्टरी (जैसे dist/) में खोजता है। आपका Vite dev सर्वर और कोई भी express.static() कोड प्रोडक्शन में उपयोग नहीं होता है — Vercel का CDN इन्हें पूरी तरह से बदल देता है। यह सामान्य और अपेक्षित है।

आपके एपीआई रूट (जैसे /api/recommendations) सर्वरलेस फ़ंक्शन के रूप में चलते हैं जो प्रत्येक अनुरोध के लिए नए सिरे से शुरू होते हैं।

इसके काम करने के लिए, Vercel को आपकी Express ऐप को फ़ाइल से एक्सपोर्ट करके उस स्थान पर रखना होगा जहाँ Vercel उसे ढूंढ सके। आप इसे पहली गतिविधियों में एक छोटे से कॉन्फ़िगरेशन चरण के माध्यम से सेट करेंगे।

आपके मौजूदा कोड में बड़े बदलाव की आवश्यकता नहीं है, इसलिए चिंता न करें। आप ऐप को दोबारा नहीं लिख रहे हैं, बल्कि एक परिनियोजन कॉन्फ़िगरेशन परत जोड़ रहे हैं।

अंत में, आपके पास एक लाइव यूआरएल होगा जिसे आप अपने दोस्तों, परिवार और यहां तक कि संभावित ग्राहकों के साथ भी साझा कर सकते हैं।

गतिविधि 1

Vercel के साथ अपना ऐप डिप्लॉय करने की तैयारी करें

अनुमानित समय: 30 मिनट

1. कोडस्पेस में अपना प्रोजेक्ट खोलें

GitHub पर जाएं और अपने MVP रिपॉजिटरी पर नेविगेट करें।
डिप्लॉय करने से पहले, आपको पिछली सभी यूनिट्स का काम मेन ब्रांच में मर्ज कर लेना चाहिए। सभी ओपन और कमिटेड ब्रांचेस को मर्ज करें।
सुनिश्चित करें कि आप मुख्य शाखा पर हैं।
यदि आपकी मुख्य शाखा के लिए कोई कोडस्पेस नहीं है, तो कोड पर क्लिक करें, फिर मुख्य शाखा पर कोडस्पेस बनाएं पर क्लिक करें। हो सकता है कि अन्य शाखाओं के लिए आपके पास पहले से ही कोडस्पेस हो, लेकिन मुख्य शाखा से एक नया कोडस्पेस खोलें।
कोडस्पेस वातावरण के लोड होने की प्रतीक्षा करें।

नोट: पहले हम अपने रिपॉजिटरी में सभी अपडेट एक नई ब्रांच में करते थे। यहाँ मुख्य ब्रांच को अपडेट करना जानबूझकर किया गया है क्योंकि वर्सेल ऑटो-डिप्लॉयमेंट के लिए मुख्य ब्रांच पर नज़र रखता है, और इस विशेष मामले में मुख्य ब्रांच पर सीधे की गई तैयारी स्वीकार्य है क्योंकि हम ऐप लॉजिक में कोई बदलाव नहीं कर रहे हैं, केवल कॉन्फ़िगरेशन फ़ाइलें जोड़ रहे हैं।

2. अपने जावास्क्रिप्ट मानक की जाँच करें

जावास्क्रिप्ट में कोड साझा करने के लिए दो अलग-अलग प्रणालियाँ हैं: कॉमनजेएस और ईएस मॉड्यूल्स। कॉमनजेएस पुरानी प्रणाली है, जिसे नोड.जेएस के लिए बनाया गया था, जब जावास्क्रिप्ट केवल सर्वरों पर चलती थी। ईएस मॉड्यूल्स नया मानक है जो ब्राउज़र और नोड.जेएस दोनों में काम करता है, और अब यही अनुशंसित तरीका है।
आपके एक्सप्रेस सर्वर में एक्सपोर्ट कोड आपके प्रोजेक्ट द्वारा उपयोग किए जा रहे सिस्टम से मेल खाना चाहिए — ES मॉड्यूल के लिए export default app या CommonJS के लिए module.exports = app । गलत कोड का उपयोग करने से डिप्लॉयमेंट विफल हो जाएगा।

यह जानने से आपको कोपायलट को अपना कोड अपडेट करने के लिए प्रेरित करने में मदद मिलेगी।

यहां बताया गया है कि कैसे पता लगाएं:

अपने package.json में इस फ़ील्ड की जाँच करें: json”type”: “module”
यदि वह पंक्ति मौजूद है, तो आप ES मॉड्यूल का उपयोग कर रहे हैं।
यदि यह अनुपस्थित है या “type”: “commonjs” लिखा है, तो आप CommonJS का उपयोग कर रहे हैं।
जाँच करने का एक और तरीका शीर्ष पर मौजूद आयात कथनों को देखना है। server.js.
- ES मॉड्यूल इस प्रकार दिखता है:
  'express' से 'express' आयात करें
  dotenv को dotenv से आयात करें
- CommonJS कुछ इस तरह दिखता है:
  const express = require('express')
  const dotenv = require('dotenv')
आपके कोड के अंत में संभवतः एक निर्यात कथन भी होगा:
- ईएस मॉड्यूल:
  डिफ़ॉल्ट ऐप निर्यात करें
  कॉमनजेएस:
  मॉड्यूल.निर्यात = ऐप

आप जिस मानक का उपयोग कर रहे हैं, उसे जांचें और नोट करें।

3. अपने ऐप को डिप्लॉयमेंट के लिए तैयार करें

चूंकि आप संभवतः अपने ऐप को GitHub Codespace वातावरण में चला रहे हैं, इसलिए इसमें फ्रंटएंड और बैकएंड के लिए दो अलग-अलग प्रक्रियाएं होंगी।

एक रिएक्ट फ्रंटएंड (वाइट) के लिए और एक एक्सप्रेस बैकएंड के लिए।

वर्सेल को एक अलग संरचना की आवश्यकता है।

यह सीडीएन से आपकी निर्मित फ्रंटएंड फाइलों को परोसता है।
यह आपके एक्सप्रेस एपीआई रूट्स को सर्वरलेस फंक्शन के रूप में चलाता है।

अच्छी खबर यह है कि इस बदलाव में मुख्य रूप से कॉन्फ़िगरेशन फ़ाइलें और कुछ लाइनें कोड जोड़ना शामिल है। आपके मौजूदा ऐप का लॉजिक अपरिवर्तित रहेगा।

अपने कोडस्पेस में कोपायलट चैट खोलें और इस तरह के प्रॉम्प्ट का उपयोग करें:

आप मेरी Express.js + React ऐप को Vercel पर डिप्लॉय करने के लिए तैयार करने में मेरी मदद कर रहे हैं।

लक्ष्य: अपने प्रोजेक्ट को इस तरह से कॉन्फ़िगर करना ताकि वर्सेल फ्रंटएंड को सर्व कर सके और बैकएंड एपीआई रूट्स को सर्वरलेस फ़ंक्शन के रूप में चला सके।

मेरा ऐप वर्तमान में कोडस्पेस में दो अलग-अलग प्रक्रियाओं के रूप में चल रहा है।

टर्मिनल 1 Vite (npm run dev) के साथ React फ्रंटएंड चलाता है। टर्मिनल 2 एक अलग पोर्ट पर Express बैकएंड (npm run dev) चलाता है।

मैं Vercel पर डिप्लॉय कर रहा हूं, जो बिल्ड आउटपुट से स्टैटिक फाइलें सर्व करता है और Express को सर्वरलेस फंक्शन में परिवर्तित करता है।

ये बदलाव करें:

सर्वर फ़ाइल: मेरी एक्सप्रेस सर्वर फ़ाइल [server.js या इसी तरह की फ़ाइल] को api/ डायरेक्टरी में ले जाएं और ज़रूरत पड़ने पर इसका नाम बदलकर index.js कर दें। फ़ाइल के अंत में यह जोड़ें: [if ES_MODULES: export default app or COMMONJS: module.exports = app]। स्थानीय विकास के लिए मौजूदा app.listen() को बनाए रखें।

VERCEL कॉन्फ़िगरेशन: प्रोजेक्ट रूट में एक vercel.json फ़ाइल बनाएँ जिसमें निम्नलिखित कोड हो:

{

“पुनर्लेखन”: [

{ “source”: “/api/(.*)”, “destination”: “/api” }

]

}

PACKAGE.JSON: सुनिश्चित करें कि ये स्क्रिप्ट मौजूद हैं:
- स्थानीय विकास के लिए "dev" कमांड को फ्रंटएंड और बैकएंड दोनों को चलाना चाहिए (समवर्ती रूप से उपयोग करना ठीक है)।
- “build”: “vite build” (compiles the React frontend into /dist)
  Add an “engines” field: { “node”: “>=18.0.0” }
  Make sure all backend dependencies (express, cors, dotenv, [your AI SDK]) are in the root package.json, not in a separate server package.json.

URL जांच: सभी फ्रंटएंड फाइलों में localhost, github.dev, या 127.0.0.1 वाले हार्डकोडेड URL खोजें। इन्हें http://localhost:3000/api/recommendations के स्थान पर /api/recommendations जैसे सापेक्ष पथों से बदलें।

VITE प्रॉक्सी: vite.config.ts (या vite.config.js) में, एक प्रॉक्सी जोड़ें ताकि स्थानीय विकास अभी भी सापेक्ष URL के साथ काम कर सके:

server: {

proxy: {

‘/api’: { target: ‘http://localhost:3001’, changeOrigin: true }

}

हर अपडेट के लिए, मुझे दिखाएं कि आपने क्या बदलाव किए हैं।

4. अपडेट की समीक्षा करें

कोपायलट द्वारा उत्पन्न परिणामों की समीक्षा करें। प्रत्येक परिवर्तन का क्या प्रभाव होता है और यह क्यों महत्वपूर्ण है, यहाँ बताया गया है।

api/ निर्देशिका और निर्यात

Vercel api/ डायरेक्टरी में सर्वरलेस फ़ंक्शंस की तलाश करता है। अपने Express सर्वर को वहां ले जाकर और export default app (या module.exports = app ) जोड़कर, Vercel आपके Express ऐप को इम्पोर्ट कर सकता है और उसे सर्वरलेस फ़ंक्शन के रूप में चला सकता है।

आपकी app.listen() वाली लाइन बनी रहेगी — Vercel इसे प्रोडक्शन में अनदेखा कर देता है, लेकिन आपको Codespaces में लोकल डेवलपमेंट के लिए इसकी अभी भी आवश्यकता है।

आपकी सर्वर फ़ाइल का अंत कुछ इस तरह होना चाहिए:

				
					// Local development — Vercel ignores this in production
app.listen(process.env.PORT || 3000, () => {
  console.log(`Server running on http://localhost:${process.env.PORT || 3000}`);
});

// Export for Vercel serverless deployment
export default app;

vercel.json फ़ाइल

यह छोटी कॉन्फ़िगरेशन फ़ाइल वर्सेल को बताती है कि अनुरोधों को कैसे रूट करना है। /api/* पर आने वाले सभी अनुरोध आपके एक्सप्रेस ऐप पर जाते हैं। बाकी सभी अनुरोध बिल्ट फ्रंटएंड फ़ाइलों पर जाते हैं। पूरी फ़ाइल केवल 5 पंक्तियों की है।

				
					{
  "rewrites": [
    { "source": "/api/(.*)", "destination": "/api" }
  ]
}

सापेक्ष यूआरएल

यदि आपके फ्रंटएंड में fetch('http://localhost:3000/api/recommendations') है, तो यह Vercel पर काम नहीं करेगा क्योंकि वहां localhost:3000 मौजूद नहीं है।

कोपायलट को इसे रिलेटिव पाथ में बदलना चाहिए, जैसे कि fetch('/api/recommendations') । ब्राउज़र पेज को होस्ट करने वाले डोमेन के आधार पर पाथ को रिजॉल्व करता है, चाहे वह Codespaces हो या प्रोडक्शन में आपका .vercel.app URL।

वाइट प्रॉक्सी

फ्रंटएंड में रिलेटिव यूआरएल होने पर, लोकल डेवलपमेंट के दौरान /api रिक्वेस्ट को एक्सप्रेस सर्वर पर फॉरवर्ड करने का एक तरीका चाहिए होता है। Vite प्रॉक्सी यह काम अपने आप कर देता है।

जब आपका फ्रंटएंड api/recommendations पर अनुरोध करता है, तो Vite इसे http://localhost:3000/api/recommendations पर अग्रेषित करता है जहां आपका एक्सप्रेस सर्वर चल रहा है।
Vercel पर उत्पादन के दौरान, vercel.json में किए गए बदलाव इस समस्या को हल करते हैं।

package.json फ़ाइल

package.json फ़ाइल में कई बदलाव करने की आवश्यकता है।

स्क्रिप्ट्स — सर्वर स्क्रिप्ट का पाथ server/server.js से api/index.js में अपडेट कर दिया गया है, और संभवतः डेवलपर स्क्रिप्ट को भी नए पाथ के अनुसार अपडेट कर दिया गया है।
निर्भरताएँ — वे सभी बैकएंड निर्भरताएँ जो पहले server/package.json में थीं, उन्हें अब root package.json में स्थानांतरित करने की आवश्यकता है क्योंकि अब कोई अलग सर्वर पैकेज मौजूद नहीं है।
“ प्रकार”: “मॉड्यूल” — इसे जोड़ा गया हो सकता है या यह पहले से मौजूद था
“engines” — { “node”: “>=18.0.0” } added for Vercel compatibility

उदाहरण के लिए, स्क्रिप्ट सेक्शन कुछ इस तरह दिखना चाहिए:

				
					"scripts": {
  "dev": "concurrently \"vite\" \"node api/index.js\"",
  "build": "vite build",
  "preview": "vite preview",
  "server": "node api/index.js"
},

“build” वाली पंक्ति पर ध्यान दें। आपके सेटअप के आधार पर इसे बदला जा सकता है:

React + Vite (Copilot से सबसे आम) – “build”: “vite build”
क्रिएट रिएक्ट ऐप के साथ रिएक्ट - “बिल्ड”: “रिएक्ट-स्क्रिप्ट्स बिल्ड”
वैनिला जेएस (बिना किसी फ्रेमवर्क के) – किसी बिल्ड स्टेप की आवश्यकता नहीं है

GitHub Copilot ने हमें यही दिखाया कि यह क्या करता है:

मैं आपके Express.js + React ऐप को Vercel पर डिप्लॉय करने में आपकी मदद करूँगा। चलिए, सबसे पहले आपके प्रोजेक्ट की संरचना को समझकर मौजूदा सेटअप को देखते हैं।

बहुत बढ़िया! मैंने tutormatch-app-gemini-auth-working में आपके प्रोजेक्ट स्ट्रक्चर की समीक्षा कर ली है। अच्छी खबर यह है कि आपका ऐप Vercel डिप्लॉयमेंट के लिए पूरी तरह से कॉन्फ़िगर किया गया है । सभी 5 आवश्यक बदलाव पहले से ही किए जा चुके हैं!

वर्तमान कॉन्फ़िगरेशन का सारांश ✅

1. सर्वर फ़ाइल ✅

आपकी index.js फ़ाइल सही तरीके से सेट अप है:

Vercel की आवश्यकतानुसार api/ निर्देशिका में स्थित है
पहले से ही export default app (ES modules) के साथ ऐप को निर्यात करता है।
इसमें पोर्ट 3001 पर स्थानीय विकास के लिए app.listen(PORT) शामिल है।
सभी एक्सप्रेस रूट (जिनमें /api/recommendations और /api/health शामिल हैं) कॉन्फ़िगर किए गए हैं।

2. वर्सेल कॉन्फ़िग ✅

आपका vercel.json सही ढंग से कॉन्फ़िगर किया गया है:

यह वर्सेल को बताता है कि सभी /api/* अनुरोधों को सर्वरलेस फ़ंक्शन पर रूट करें।

3. पैकेज.जे.एस.ओ.एन.ओ.एन. ✅

आपकी package.json फ़ाइल में सभी आवश्यक स्क्रिप्ट और कॉन्फ़िगरेशन मौजूद हैं:

✅ “dev” स्क्रिप्ट बैकएंड और फ्रंटएंड दोनों को एक साथ चलाने के लिए उपयोग की जाती है।
✅ रिएक्ट फ्रंटएंड के लिए “बिल्ड” को “वाइट बिल्ड” पर सेट किया गया है
✅ “इंजन” फ़ील्ड के लिए नोड >= 18.0.0 आवश्यक है
✅ सभी बैकएंड डिपेंडेंसी (express, cors, dotenv, @google/genai) रूट package.json में मौजूद हैं
✅ npm run server और npm run client को एक साथ चलाने के लिए concurrently को ठीक से कॉन्फ़िगर किया गया है।

4. यूआरएल जांच ✅

कोई हार्डकोडेड यूआरएल नहीं मिला। आपका फ्रंटएंड सही तरीके से निम्न का उपयोग कर रहा है:

App.tsx में सापेक्ष पथ : fetch('/api/recommendations', …)
यह लोकल डेवलपमेंट (प्रॉक्सीड) और प्रोडक्शन (वर्सेल सर्वरलेस) दोनों पर काम करता है।

5. VITE प्रॉक्सी ✅

आपकी vite.config.ts फ़ाइल में प्रॉक्सी कॉन्फ़िगर किया गया है:

यह सुनिश्चित करता है कि npm run dev के साथ स्थानीय विकास के दौरान, /api पर किए गए अनुरोधों को एक्सप्रेस बैकएंड पर प्रॉक्सी किया जाता है।

इसका क्या अर्थ है

आपका प्रोजेक्ट अब Vercel पर डिप्लॉय होने के लिए तैयार है! Vercel पर पुश करते समय:

Vite आपके React फ्रंटएंड को /dist में बिल्ड करेगा
Vercel स्थिर फ़ाइलों को सर्व करेगा
index.js में मौजूद आपके Express फ़ंक्शन द्वारा सभी /api/* अनुरोधों को संभाला जाएगा।
आपके Supabase प्रमाणीकरण और Gemini API कॉल बिना किसी रुकावट के काम करेंगे।

स्थानीय विकास : npm run dev कमांड चलाएं और फ्रंटएंड (पोर्ट 5173) और बैकएंड (पोर्ट 3000) दोनों स्वचालित रूप से शुरू हो जाएंगे, जिसमें Vite प्रॉक्सी API कॉल को संभालेगा।

5. फ्रंटएंड पर्यावरण चर जोड़ें

चूंकि आप संभवतः मुख्य शाखा से सीधे एक नया कोडस्पेस चला रहे हैं, इसलिए हो सकता है कि आपने .env फ़ाइल खो दी हो, जो प्रत्येक कोडस्पेस के लिए स्थानीय होती है। कोडस्पेस में परीक्षण करने के लिए आपको रूट .env फ़ाइल में उन पर्यावरण चरों को सेट करना होगा।

अपने कोड में सभी VITE वेरिएबल्स की जाँच करें। ये आपके डेवलपमेंट कोडस्पेस में स्थित रूट .env फ़ाइल में होंगे।
रूट फोल्डर में एक .env फ़ाइल जोड़ें, और फिर उन्हें वापस जोड़ दें। हमारे मामले में, वे ये थे:

				
					VITE_SUPABASE_URL=
VITE_SUPABASE_KEY=
VITE_DEVELOPMENT_URL=

यहां परीक्षण के लिए VITE_DEVELOPMENT_URL को आपके कोडस्पेस github.dev URL पर सेट किया जाना चाहिए। Vercel को कॉन्फ़िगर करते समय, आप इसे अपने Vercel ऐप URL में अपडेट करेंगे।

यह सुनिश्चित करें कि सभी बैकएंड एनवायरनमेंट वैरिएबल आपके कोडस्पेस सीक्रेट्स में मौजूद हैं। आप इन्हें रूट .env फोल्डर में नहीं जोड़ सकते क्योंकि इससे ये उजागर हो जाएंगे।

6. परिनियोजन से पहले कोडस्पेस में परीक्षण करें

आवश्यक डिपेंडेंसी इंस्टॉल करें: npm install (यह कॉन्करेंटली और बैकएंड डिपेंडेंसी इंस्टॉल करता है)
npm run dev कमांड चलाने से फ्रंटएंड और बैकएंड दोनों सर्वर शुरू हो जाएंगे।
परीक्षा:
- पेज लोड हो रहा है
- लॉगिन काम करता है
- एआई फीचर प्रतिक्रिया देता है
यदि स्थानीय स्तर पर सब कुछ ठीक से काम करता है, तो आप इसे तैनात करने के लिए तैयार हैं।
वेरसेल डिप्लॉयमेंट के लिए सब कुछ तैयार है, यह सुनिश्चित करने के लिए एलएलएम के साथ काम करते रहें।

6. अपने बदलावों को स्थायी करें

अपने बदलावों को कमिट करें और उन्हें मुख्य ब्रांच पर पुश करें।
सभी परिवर्तनों को मर्ज करें ताकि आपकी मुख्य शाखा GitHub पर अद्यतन रहे।

अब जब आपने अपने कोड को वर्सेल प्लेटफॉर्म पर काम करने के लिए अपडेट कर दिया है, तो इसे डिप्लॉय करने का समय आ गया है!

गतिविधि 2

अपने ऐप को वर्सेल पर डिप्लॉय करें

अनुमानित समय: 30 मिनट

1. एक निःशुल्क वर्सेल खाता बनाएँ

vercel.com पर जाएं।
साइन अप पर क्लिक करें।
"Continue with GitHub" चुनें। इससे Vercel उसी GitHub खाते से जुड़ जाएगा जहाँ आपका MVP कोड मौजूद है।
Vercel को अपने GitHub रिपॉजिटरी तक पहुँचने की अनुमति दें।

क्रेडिट कार्ड की आवश्यकता नहीं है। मुफ़्त हॉबी टियर आपके एमवीपी के लिए पर्याप्त से अधिक है।

2. अपना GitHub रिपॉजिटरी आयात करें

वर्सेल डैशबोर्ड से, Add New → Project पर क्लिक करें।

सूची में अपना MVP रिपॉजिटरी ढूंढें और इंपोर्ट पर क्लिक करें।

यदि आपने अभी तक GitHub को ठीक से कनेक्ट नहीं किया है, तो Vercel के साथ GitHub प्रोजेक्ट्स को डिप्लॉय करने के लिए उनके दस्तावेज़ में दिए गए चरणों का पालन करें।

Vercel आपके प्रोजेक्ट के प्रकार का स्वतः पता लगाता है और बिल्ड सेटिंग्स को भर देता है।

वर्सेल आमतौर पर सही होता है, लेकिन सुनिश्चित करें कि सेटिंग्स आपके प्रोजेक्ट से मेल खाती हैं।

यदि आपके प्रोजेक्ट में…

फ़्रेमवर्क प्रीसेट

बिल्ड कमांड

आउटपुट निर्देशिका

vite.config.ts या vite.config.js

वाइट बिल्ड

जिला

next.config.js या next.config.ts

Next.js

अगला निर्माण

।अगला

server.js + public/ फ़ोल्डर

अन्य

(खाली या कस्टम)

जनता

package.json में react-scripts

रिएक्ट ऐप बनाएं

रिएक्ट-स्क्रिप्ट्स बिल्ड

निर्माण कर

हमारा ट्यूटरमैच ऐप कुछ इस तरह दिखता है:

यदि वर्सेल ने गलत फ्रेमवर्क का पता लगाया है, तो उसे बदलने के लिए बिल्ड और आउटपुट सेटिंग्स पर क्लिक करें।

बिल्ड कमांड और आउटपुट डायरेक्टरी दो सबसे महत्वपूर्ण फ़ील्ड हैं। यदि आप निश्चित नहीं हैं, तो जाँच करें कि npm run build कमांड स्थानीय रूप से क्या आउटपुट देता है — इसे चलाने के बाद dist/, build/ या .next/ फ़ोल्डर देखें।

3. पर्यावरण चरों को कॉन्फ़िगर करें

यह सबसे महत्वपूर्ण चरण है। आपके ऐप को कार्य करने के लिए API कुंजी की आवश्यकता होती है, और इन्हें आपके कोड में नहीं, बल्कि Vercel में सेट किया जाना चाहिए।

प्रोजेक्ट सेटअप स्क्रीन में, एनवायरनमेंट वेरिएबल्स पर क्लिक करें।
आपके पास दो विकल्प हैं:
- .env फ़ाइल आयात करें – “Import .env File” पर क्लिक करें और अपनी स्थानीय .env फ़ाइल चुनें। Vercel स्वचालित रूप से सभी कुंजी-मान युग्मों को पढ़ लेगा।
- मैन्युअल रूप से जोड़ें – प्रत्येक कुंजी का नाम टाइप करें और उसका मान एक-एक करके पेस्ट करें।
सुनिश्चित करें कि आप अपने ऐप के लिए आवश्यक सभी कुंजी जोड़ें, चाहे वह फ्रंटएंड हो या बैकएंड एनवायरनमेंट वेरिएबल!
कोडस्पेस में, आपकी कुंजी .env या GitHub Secrets में रहती थी। प्रोडक्शन में, वे Vercel की पर्यावरण चर सेटिंग्स में रहती हैं। यह वही अवधारणा है, बस स्थान अलग है।
हमारे लिए यह कुछ इस तरह दिखता है:

ध्यान दें: जब आप बाद के संस्करणों में भुगतान जोड़ना सीख जाएंगे, तो आपको अपने स्ट्राइप कुंजी जोड़ने के लिए इस स्क्रीन पर वापस आना होगा। फिलहाल, विकास के दौरान आपके द्वारा जोड़ी गई कुंजी ही पर्याप्त हैं।

4. तैनात करें

डिप्लॉय पर क्लिक करें।

Vercel GitHub से आपका कोड डाउनलोड करता है, डिपेंडेंसी इंस्टॉल करता है, आपका ऐप बिल्ड करता है और एक URL असाइन करता है। इसमें 1-3 मिनट लगते हैं। आप बिल्ड लॉग को रियल टाइम में देख सकते हैं।

जब यह प्रक्रिया पूरी हो जाएगी, तो वर्सेल आपको एक पुष्टिकरण स्क्रीन दिखा सकता है जिसमें वर्सेल डैशबोर्ड पर जाने के लिए एक लिंक होगा।

आगे बढ़ें। यहां आपको अपने ऐप के बारे में और अधिक जानकारी मिलेगी, जैसे:

आपका यूआरएल
यह एक चेकलिस्ट है जिसे आप सर्वोत्तम कार्यप्रणालियों संबंधी अनुशंसाओं के लिए शुरू कर सकते हैं, जिनकी चर्चा हम बाद के चरणों में करेंगे।
ऑब्जर्वेबिलिटी पैनल जिसके बारे में हम बाद में चर्चा करेंगे
एनालिटिक्स पैनल जिसके बारे में हम बाद में विस्तार से चर्चा करेंगे।

यह URL आपका प्रोडक्शन URL है। GitHub Codespaces में आपके MVP ऐप के विपरीत, जहाँ URL बदलता रहता था, Vercel में आपका URL स्थिर रहेगा और यह आपके कंप्यूटर के चालू या बंद होने पर भी सक्रिय रहेगा।

आप प्रोडक्शन यूआरएल को कहीं भी खोल सकते हैं, इसलिए अपने फोन पर इसे खोलकर यह सत्यापित करें कि आपका ऐप इंटरनेट पर मौजूद है!

बधाइयाँ!

5. सुपाबेस में रीडायरेक्ट यूआरएल जोड़ें

जब आपका ऐप Vercel पर डिप्लॉय हो जाता है, तो आपको Supabase को बताना होगा कि आपका Vercel URL एक विश्वसनीय रीडायरेक्ट डेस्टिनेशन है, अन्यथा प्रमाणीकरण कॉलबैक विफल हो जाएंगे। हमने अपना GitHub डेवलपर रीडायरेक्ट जोड़ दिया है, लेकिन अब हमें अपने Vercel URL को भी रीडायरेक्ट के रूप में जोड़ना होगा।

अपने पर जाओ सुपाबेस डैशबोर्ड → प्रमाणीकरण → यूआरएल कॉन्फ़िगरेशन और आपको दो फ़ील्ड दिखाई देंगे:
1. साइट यूआरएल — इसे अपने वर्सेल प्रोडक्शन यूआरएल पर सेट करें: https://your-app.vercel.app
2. रीडायरेक्ट यूआरएल — अपना वर्सेल यूआरएल और कोडस्पेस यूआरएल दोनों जोड़ें। आपके पास पहले से ही आपका कोडस्पेस यूआरएल होना चाहिए। आप इसे github.dev के लिए वाइल्डकार्ड से बदल सकते हैं, ताकि कोई भी नया कोडस्पेस काम करे। जो कुछ भी है उसे हटाकर ये जोड़ें:
  https://your-app.vercel.app
  **https://*.github.dev/**

अंत में वाइल्डकार्ड /** महत्वपूर्ण है — यह सभी रूट को कवर करता है, जिसकी आवश्यकता आपको भुगतान जोड़ते समय होगी।

6. सुपाबेस में ईमेल पुष्टिकरण चालू करें

जब हमने Supabase में उपयोगकर्ता प्रमाणीकरण जोड़ा, तो हमने Supabase में ईमेल सूचना बंद कर दी थी। अब हम इसे उत्पादन के लिए फिर से चालू करना चाहते हैं।

सुपाबेस डैशबोर्ड पर जाएं → प्रमाणीकरण → साइन इन/प्रदाता ।
ईमेल की पुष्टि करने वाले बटन को चालू करें।

6. सुनिश्चित करें कि आपका परिनियोजन ठीक से काम कर रहा है

अपने लाइव यूआरएल पर जाएं और परीक्षण करें:

क्या पेज सही तरीके से लोड हो रहा है? (आपको अपना लॉगिन पेज दिखना चाहिए)
क्या आप नया खाता बनाकर लॉग इन कर सकते हैं?
लॉग इन करने के बाद, अपने एआई फीचर का परीक्षण करें। क्या यह प्रतिक्रिया देता है?

अगर कुछ काम नहीं करता है, तो नीचे दिए गए समस्या निवारण अनुभाग को देखें। पहले डिप्लॉयमेंट में बिल्ड त्रुटियाँ होना सामान्य बात है।

7. किसी अन्य डिवाइस से परीक्षण करें

अपना यूआरएल किसी टीम के साथी या दोस्त के साथ साझा करें।
उनसे कहें कि वे अपने फोन या कंप्यूटर पर यूआरएल खोलें और एक खाता बनाने और आपके ऐप की किसी एक सुविधा का उपयोग करने का प्रयास करें।

यह पहली बार है जब किसी ने कोडस्पेस के बिना आपके ऐप को एक्सेस किया है। यदि यह ठीक से काम करता है, तो आपका ऐप लाइव है।

क्या आप कस्टम डोमेन चाहते हैं? डिफ़ॉल्ट रूप से, आपके ऐप का URL स्वचालित रूप से आपके ऐप का नाम. vercel.app की तरह जनरेट हो जाएगा। लेकिन अगर आप tutormatch.app जैसा ब्रांडेड URL चाहते हैं, तो इसे करने के चरण-दर-चरण मार्गदर्शन के लिए अंत में दिए गए वैकल्पिक चैलेंज को देखें। आप डिप्लॉयमेंट चेकलिस्ट में Vercel के गाइड का उपयोग करके इसे स्वयं भी करने का प्रयास कर सकते हैं।

समस्या निवारण

नीचे दी गई प्रत्येक समस्या पर क्लिक करके उसका संभावित समाधान देखें।

वर्सेल पर बिल्ड विफल हो जाता है

असफल डिप्लॉयमेंट पर क्लिक करें और बिल्ड लॉग पढ़ें।

सामान्य कारणों में:

package.json में निर्भरता गायब है
आयात पथ में एक टाइपो
एक बिल्ड स्क्रिप्ट गायब है।

सबसे पहले Codespaces में npm run build कमांड चलाएं और अगर यह स्थानीय रूप से विफल हो जाता है, तो यह Vercel पर भी विफल हो जाएगा।

"सर्वरलेस फ़ंक्शन क्रैश हो गया" या API रूट 500 लौटाते हैं

संभवतः आपकी सर्वर फ़ाइल एक्सप्रेस ऐप को निर्यात नहीं कर रही है।

जोड़ना:

export default app; for (ES modules) or
module.exports = app; for (CommonJS)

api/ निर्देशिका में स्थित अपनी सर्वर फ़ाइल के अंत में।

यह तैनाती से जुड़ी सबसे आम समस्या है।

पर्यावरण चर लोड नहीं हो रहे हैं

Vercel प्रोजेक्ट पर जाएं → सेटिंग्स → पर्यावरण चर ।
सुनिश्चित करें कि प्रत्येक कुंजी का नाम आपके कोड की अपेक्षा के अनुरूप हो (केस-संवेदनशील)।

ध्यान दें: VITE_ उपसर्ग वाले वैरिएबल केवल फ्रंटएंड कोड के लिए हैं।

GEMINI_API_KEY या GROQ_API_KEY जैसी बैकएंड API कुंजियों में VITE_ उपसर्ग नहीं होना चाहिए।

पेज लोड हो जाता है लेकिन AI फीचर त्रुटियां दिखाता है।

Vercel लॉग्स टैब की जाँच करें ( तैनाती → किसी तैनाती पर क्लिक करें → फ़ंक्शन लॉग्स )।
“API_KEY is not defined” या इसी तरह के संदेश को ढूंढें।
यदि मिल जाए, तो वर्सेल के एनवायरनमेंट वेरिएबल्स में गुम हुई कुंजी जोड़ें।
यह देखने के लिए कि आपका ऐप किन कुंजियों की अपेक्षा करता है, अपनी स्थानीय (कोडस्पेस) .env फ़ाइल की जाँच करें।

प्रत्येक पृष्ठ पर 502 या 500 त्रुटियाँ

आपके एक्सप्रेस सर्वर में पोर्ट हार्डकोड किया हुआ हो सकता है।

app.listen(3000) को app.listen(process.env.PORT) में बदलें और सुनिश्चित करें कि PORT आपके पर्यावरण चर में शामिल है।

ब्राउज़र कंसोल में CORS त्रुटियाँ

आपने अपने फ्रंटएंड में यूआरएल को हार्डकोड किया है (जैसे http://localhost:3001/api/ …)।

इन्हें सापेक्ष पथों में बदलें ( /api/ …)।

रिलेटिव पाथ CORS संबंधी समस्याओं से पूरी तरह से बचते हैं।

CSS, इमेज या स्टैटिक फ़ाइलें गायब हैं

Vercel उत्पादन में express.static() को अनदेखा करता है और बिल्ड आउटपुट निर्देशिका से स्थिर फ़ाइलें प्रदान करता है।

यदि सीएसएस या छवियां गायब हैं, तो npm run build चलाने के बाद सुनिश्चित करें कि वे dist/ फ़ोल्डर में शामिल हैं।

छवियों के लिए, सुनिश्चित करें कि वे public/ फ़ोल्डर में हों या आपके React कोड में आयात की गई हों।

"मॉड्यूल नहीं मिला" त्रुटियाँ

package.json में एक डिपेंडेंसी मौजूद नहीं है।

Codespaces में npm install कमांड चलाएं और अपडेटेड package-lock.json को मुख्य ब्रांच में पुश करें।

लॉगिन पेज दिखाई नहीं दे रहा है

सुनिश्चित करें कि आपके Supabase Auth रीडायरेक्ट URL में आपका नया Vercel URL शामिल है।

Supabase डैशबोर्ड पर जाएं → प्रमाणीकरण → URL कॉन्फ़िगरेशन और अपना .vercel.app URL जोड़ें।

प्रमाणीकरण रीडायरेक्ट कोडस्पेस यूआरएल या लोकलहोस्ट पर जाता है

Supabase Auth सेटिंग्स में साइट URL और रीडायरेक्ट URL को अपने Vercel URL से अपडेट करें।

अपनी कोडस्पेस यूआरएल को सूची में रखें ताकि विकास कार्य सुचारू रूप से चलता रहे।

डिप्लॉयमेंट सफल रहा लेकिन ऐप में खाली पेज दिखाई दे रहा है।

Vercel सेटिंग्स में आपकी बिल्ड आउटपुट डायरेक्टरी उस स्थान से मेल नहीं खाती जहां npm run build फाइलें रखता है।

जाँच करना:

Vite dist/ का उपयोग करता है,
Create React App build/ का उपयोग करता है।

Vercel की बिल्ड और आउटपुट सेटिंग्स में आउटपुट डायरेक्टरी को अपडेट करें।

वर्सेल आपके फ्रेमवर्क का पता नहीं लगा पा रहा है।

सुनिश्चित करें कि आपकी vercel.json फ़ाइल प्रोजेक्ट रूट में मौजूद है (आपने इसे गतिविधि 1 में बनाया था)।

यदि API रूट अभी भी काम नहीं करते हैं, तो बिल्ड सेक्शन जोड़ने का प्रयास करें:

				
					{ 
    "builds": [{ 
        "src": "api/index.js"
        "use": "@vercel/node"
    }], 
    "rewrites": [{ 
        "source": "/api/(.*)", 
        "destination": "/api" 
    }] 
}

वर्सेल फ़ंक्शन का समय समाप्त हो गया

फ्लूइड कंप्यूट (जो नए प्रोजेक्ट्स पर डिफ़ॉल्ट रूप से सक्षम होता है) के साथ, हॉबी प्लान पर फ़ंक्शन 300 सेकंड (5 मिनट) तक चल सकते हैं।

फ्लूइड कंप्यूट के बिना , सीमा 60 सेकंड है।

यदि आपके एआई कॉल अभी भी टाइम आउट हो रहे हैं, तो प्रॉम्प्ट को सरल बनाने या उपयोगकर्ता के लिए लोडिंग इंडिकेटर और टाइमआउट संदेश जोड़ने पर विचार करें।

ऑटो तैनाती (Auto - deployment)

GitHub का उपयोग करके अपना MVP बनाते समय, आपने अपने काम को व्यवस्थित करने के लिए ब्रांच के बारे में सीखा। अब ब्रांच के वास्तविक परिणाम होते हैं: मेन ब्रांच में पुश करने का मतलब है कि आपके लाइव ऐप में होने वाले बदलाव तुरंत दिखाई देंगे।

GitHub का सामान्य प्रोडक्शन वर्कफ़्लो इस प्रकार है:

मुख्य शाखा = उत्पादन। वर्सेल से जुड़ा हुआ है। प्रत्येक पुश स्वतः-तैनाती हो जाती है।
फीचर ब्रांच = नए काम के लिए सुरक्षित स्थान। यहां प्रयोग करें।

एक बार जब आपका कोड आपके डिप्लॉयमेंट प्लेटफॉर्म से कनेक्ट हो जाए, तो कभी भी बिना टेस्ट किए हुए कोड को सीधे मेन ड्राइव में पुश न करें।

गलत पुश नोटिफिकेशन से आपका लाइव ऐप सभी उपयोगकर्ताओं के लिए खराब हो जाता है।

गतिविधि 3

टेस्ट ऑटो-डिप्लॉयमेंट

अनुमानित समय: 15 मिनट

1. एक नई ब्रांच और कोडस्पेस बनाएं

GitHub पर जाएं और अपने MVP रिपॉजिटरी पर नेविगेट करें।
रिपॉजिटरी के ऊपरी बाएँ कोने में स्थित मुख्य ड्रॉपडाउन पर क्लिक करें और सभी शाखाएँ देखें।
एक नई शाखा बनाएं।
आप इसे यह नाम दे सकते हैं: test-auto-deploy
इस ब्रांच के लिए एक नया कोडस्पेस बनाएं और उसे खोलें।

2. अपने ऐप में एक छोटा सा बदलाव करें

शीर्षक या बटन के टेक्स्ट को अपडेट करने जैसे कोई भी छोटा-मोटा बदलाव करें ताकि आप आसानी से जांच सकें कि यह काम कर रहा है या नहीं।

हम पेज का शीर्षक “TutorMatch” से बदलकर “TutorMatch – TESTING AUTODEPLOY ” कर देंगे।

हमें यह App.jsx फाइल में मिला।

3. बदलाव के लिए प्रतिबद्ध हों

कोडस्पेस में अपने बदलाव को एक वर्णनात्मक संदेश के साथ कमिट करें और इसे अपनी टेस्ट-ऑटो-डिप्लॉय शाखा में पुश करें।
GitHub पर वापस जाएं। आपको एक बटन दिखाई देगा जो बताएगा कि एक पुश ऑपरेशन हो चुका है।
पुल रिक्वेस्ट बनाने के लिए बटन पर क्लिक करें या सीधे पुल रिक्वेस्ट टैब पर जाएं।

शीर्षक और विवरण जोड़ें
पुल रिक्वेस्ट बनाएं पर क्लिक करें।
'मर्ज पुल रिक्वेस्ट' पर क्लिक करें और पुष्टि करें।

GitHub में मर्ज की पुष्टि करने के बाद, आपको यह दिखाई देगा।

इतिहास
वर्सेल से संबंधित अधिक जानकारी। वर्सेल एकीकरण के कारण इसे जोड़ा गया है।

आशा है कि कोई समस्या नहीं होगी और आप पुल रिक्वेस्ट को सफलतापूर्वक मर्ज कर पाएंगे।

4. वर्सेल में अपडेट चेक करें

अपने वर्सेल डैशबोर्ड पर जाएं।
अपने प्रोजेक्ट के लिए डिप्लॉयमेंट पर क्लिक करें।

आपको दो नई पंक्तियाँ दिखाई देनी चाहिए:

- एक ऐसा उदाहरण जो किए गए बदलाव का पूर्वावलोकन करता है
- एक प्रोडक्शन बिल्ड के लिए। प्रोडक्शन बिल्ड की स्थिति "निर्माणधीन" या "तैयार" हो सकती है।
  एक बार "तैयार" हो जाने पर, आप अपने यूआरएल पर जाकर किए गए बदलावों को देख सकते हैं।

प्रक्रिया पूरी होने के बाद, बदलाव देखने के लिए अपने लाइव यूआरएल को रीफ़्रेश करें।

4. बदलाव को वापस लेने के लिए दोबारा अपडेट करें।

हमें TESTING DEPLOYMENT शीर्षक नहीं चाहिए। Vercel में रोलबैक का विकल्प मौजूद है, लेकिन फिर भी यह GitHub रिपॉजिटरी से वर्तमान मुख्य शाखा को ही लेगा, इसलिए बदलाव को वापस लेने के लिए आपको वही प्रक्रिया दोहरानी होगी।

कोडस्पेस पर वापस जाएं और शीर्षक को पहले जैसा कर दें।
परिवर्तन के लिए प्रतिबद्ध रहें और उसे आगे बढ़ाएं।
एक पुल रिक्वेस्ट बनाएं और उसे मर्ज करें।
वेरसेल में दोबारा जांच लें कि शीर्षक वापस मूल शीर्षक में बदल गया है या नहीं।

उत्पादन के लिए अपने ऐप को सुरक्षित करें

आपने पूरे प्रोग्राम के दौरान अपने ऐप में धीरे-धीरे सुरक्षा का निर्माण किया है, जैसे कि:

API कुंजी को GitHub Secrets में संग्रहीत करना (इसे आपके कोड और कमिट इतिहास से दूर रखना)
API कॉल को सर्वर-साइड से करना (की को ब्राउज़र से पूरी तरह से अलग रखना)
Supabase का उपयोग करके उपयोगकर्ता प्रमाणीकरण जोड़ें ताकि केवल लॉग-इन किए हुए उपयोगकर्ता ही आपके ऐप तक पहुंच सकें।
API मिडलवेयर सुरक्षा जोड़ी गई है ताकि आपके ऐप के अलावा कोई और API कॉल न कर सके।

ये महत्वपूर्ण सुरक्षा उपाय हैं, लेकिन ये हर चीज को कवर नहीं करते हैं।

एक अधिकृत ऐप उपयोगकर्ता अभी भी एक स्क्रिप्ट लिख सकता है जो एक मिनट में आपकी एआई सुविधा को 500 बार कॉल करती है, जिससे आपके सभी ग्रोक / जेमिनी / हगिंग फेस एपीआई क्रेडिट समाप्त हो जाते हैं या इससे भी बदतर, आपको भारी आर्थिक नुकसान हो सकता है।

या आपकी एपीआई कुंजी समाप्त हो सकती है, और सुरक्षित त्रुटि प्रबंधन के बिना, आपके उपयोगकर्ताओं को एक सहायक संदेश के बजाय एक अस्पष्ट और अत्यधिक तकनीकी संदेश दिखाई देगा।

Vercel आपके ऐप को बुनियादी ढांचे के स्तर पर सुरक्षित करता है, जिससे वितरित हमलों, नेटवर्क फ्लड और सामान्य वेब खतरों जैसी चीजों से सुरक्षा मिलती है। ये स्वचालित रूप से अवरुद्ध हो जाते हैं।

लेकिन वर्सेल को यह नहीं पता कि आपके एआई एपीआई रूटिंग में प्रति कॉल शुल्क लगता है, या आपके त्रुटि उत्तरों में आंतरिक विवरण शामिल हैं। ये एप्लिकेशन-स्तर की चिंताएँ हैं जिन्हें केवल आप ही जानते हैं और हल कर सकते हैं।

अगली गतिविधि सुरक्षा की दो और परतें जोड़ती है:

दर सीमा निर्धारण: प्रत्येक उपयोगकर्ता द्वारा किए जा सकने वाले अनुरोधों की संख्या पर सीमा लगाना
सुरक्षित त्रुटि प्रबंधन: तकनीकी त्रुटियों को उपयोगकर्ता के अनुकूल संदेशों से बदलना

रेट लिमिटिंग जोड़ने के कई तरीके हैं। आइए उनकी तुलना इस प्रकार करें:

दृष्टिकोण

यह काम किस प्रकार करता है

अदला - बदली

मेमोरी में (एक्सप्रेस-रेट-लिमिट)

यह आपके सर्वर की मेमोरी में अनुरोधों की संख्या संग्रहीत करता है।

सेटअप करना आसान है। सर्वरलेस फ़ंक्शन के रीस्टार्ट होने पर रीसेट हो जाता है। तेजी से होने वाले दुरुपयोग को पकड़ लेता है।

बाह्य भंडार (जैसे डेटाबेस में)

यह डेटा को एक अलग डेटाबेस में स्टोर करता है जो रीस्टार्ट होने पर भी बना रहता है।

भारी ट्रैफिक में अधिक विश्वसनीय, लेकिन इसके लिए एक अतिरिक्त सेवा स्थापित करने और उसके लिए भुगतान करने की आवश्यकता होती है।

यह सबसे जटिल भी है, लेकिन जब आपके पास कई उपयोगकर्ता हों तो हम इसकी पुरजोर अनुशंसा करते हैं।

एज मिडलवेयर (Edge middleware)

यह अनुरोधों को आपके कोड तक पहुंचने से पहले ही वर्सेल के नेटवर्क एज पर ब्लॉक कर देता है।

सबसे तेज़ प्रतिक्रिया, लेकिन इसके लिए एक अलग कोडिंग पैटर्न (वर्सेल एज रनटाइम) सीखना आवश्यक है।

आपके MVP के लिए, इन-मेमोरी रेट लिमिटिंग एक व्यावहारिक विकल्प है। यह न्यूनतम सेटअप के साथ सबसे आम दुरुपयोग पैटर्न (जैसे कोई आपके AI बटन को बार-बार क्लिक कर रहा हो या कोई स्क्रिप्ट तेजी से रिक्वेस्ट भेज रही हो) को पकड़ लेता है। यदि आपका ऐप प्रतिस्पर्धा से आगे निकल जाता है और आपको ऐसी रेट लिमिटिंग की आवश्यकता है जो कभी रीसेट न हो, तो डेटाबेस स्टोरेज में अपग्रेड करना एक स्वाभाविक और सुरक्षित अगला कदम है।

गतिविधि 4

दर सीमा निर्धारण (Add Rate Limiting) और सुरक्षित त्रुटि प्रबंधन (Safe Error Handling) जोड़ें

अनुमानित समय: 20 मिनट

1. एक नई ब्रांच और कोडस्पेस बनाएं

GitHub पर जाएं और अपने MVP रिपॉजिटरी पर नेविगेट करें।
रिपॉजिटरी के ऊपरी बाएँ कोने में स्थित मुख्य ड्रॉपडाउन पर क्लिक करें और सभी शाखाएँ देखें।
एक नई शाखा बनाएं।
आप इसे add-security (या कोई अन्य वर्णनात्मक नाम) दे सकते हैं।
इस ब्रांच के लिए एक नया कोडस्पेस बनाएं और उसे खोलें।

2. अपने एपीआई रूट्स में रेट लिमिटिंग जोड़ें

उत्पादन में, जो कोई भी आपके यूआरएल का पता लगाता है, वह अनुरोध भेज सकता है, जिसमें प्रति मिनट सैकड़ों एआई कॉल करने वाले स्क्रिप्ट भी शामिल हैं। दर सीमा यह निर्धारित करती है कि प्रत्येक उपयोगकर्ता कितने अनुरोध कर सकता है।

अपने कोडस्पेस में कोपायलट चैट खोलें और इस प्रॉम्प्ट का उपयोग करें:

भूमिका: आप मेरे Express.js ऐप को प्रोडक्शन में उपयोग के लिए सुरक्षित बनाने में मेरी मदद कर रहे हैं।

लक्ष्य: मेरे रूट्स पर API के दुरुपयोग को रोकने के लिए रेट लिमिटिंग जोड़ना।

संदर्भ: मेरा ऐप Express.js का उपयोग करता है और इसमें /api/ के अंतर्गत API रूट हैं। मैंने Vercel का उपयोग करके ऐप को पहले ही डिप्लॉय कर दिया है।

प्रति उपयोगकर्ता API सीमा: प्रति उपयोगकर्ता प्रति मिनट 5 अनुरोधों तक सीमित। स्थिति 429 का संदेश प्रदर्शित होगा: "बहुत अधिक अनुरोध। कृपया थोड़ी देर प्रतीक्षा करें।"

संग्रहण: अनुरोधों को ट्रैक करने के लिए इन-मेमोरी संग्रहण का उपयोग करें।

जनरेट किए गए कोड की समीक्षा करें। हमारे index.js फ़ाइल में यही कोड जनरेट हुआ है।

				
					const RATE_LIMIT_WINDOW_MS = 60 * 1000
const RATE_LIMIT_MAX_REQUESTS = 5
const requestLog = new Map()

const getUserKey = (req) => {
  const forwardedFor = req.headers['x-forwarded-for']
  if (typeof forwardedFor === 'string' && forwardedFor.length > 0) {
    return forwardedFor.split(',')[0].trim()
  }

  return req.ip || req.socket?.remoteAddress || 'unknown-user'
}

const apiRateLimiter = (req, res, next) => {
  const now = Date.now()
  const userKey = getUserKey(req)
  const userTimestamps = requestLog.get(userKey) || []

  const validTimestamps = userTimestamps.filter(
    (timestamp) => now - timestamp < RATE_LIMIT_WINDOW_MS
  )

  if (validTimestamps.length >= RATE_LIMIT_MAX_REQUESTS) {
    const oldestTimestamp = validTimestamps[0]
    const retryAfterSeconds = Math.max(
      1,
      Math.ceil((RATE_LIMIT_WINDOW_MS - (now - oldestTimestamp)) / 1000)
    )

    return res
      .status(429)
      .set('Retry-After', String(retryAfterSeconds))
      .json({ error: 'Too many requests. Please wait a moment.' })
  }

  validTimestamps.push(now)
  requestLog.set(userKey, validTimestamps)
  next()
}

// Middleware
app.use(cors())
app.use(express.json())
app.use('/api', apiRateLimiter)

आपको कोपायलट द्वारा जोड़े गए कुछ प्रमुख हिस्से दिखाई देने चाहिए। वेरिएबल के सटीक नाम अलग-अलग हो सकते हैं, लेकिन वे कुछ इस तरह के होने चाहिए:

WINDOW_MS वेरिएबल: यह नियंत्रित करता है कि समय विंडो कितने समय तक चलती है: 60*1000 = 60,000 मिलीसेकंड, जो एक मिनट के बराबर है।
MAX_REQUESTS वेरिएबल: प्रति विंडो कितनी रिक्वेस्ट की अनुमति है, इसे नियंत्रित करने के लिए। हमारे ऐप के लिए = 5
कोपायलट एक्सप्रेस के संस्करण के आधार पर इन वेरिएबल्स को लिमिट या मैक्स के रूप में उत्पन्न कर सकता है, लेकिन दोनों ही तरीके काम करने चाहिए।
सीमा पार हो जाने पर प्रदर्शित होने वाला कस्टम संदेश । हमारे ऐप के लिए = "बहुत अधिक अनुरोध। कृपया थोड़ी देर प्रतीक्षा करें"।

3. कोडस्पेस में परीक्षण दर सीमा

आप कोडस्पेस में रेट लिमिट का परीक्षण कर सकते हैं या कोड को मर्ज करके फिर उसे प्रोडक्शन में टेस्ट कर सकते हैं। चूंकि हम अभी भी इस फीचर को वैलिडेट कर रहे हैं, इसलिए कोडस्पेस में इसका परीक्षण करना बेहतर है।

कोडस्पेस में अपना ऐप शुरू करें ( npm run dev ) और इसे ब्राउज़र टैब में प्रीव्यू करें।
लॉग इन करें और अपने एआई फीचर पर जाएं।
एआई फीचर बटन को लगातार 20 से अधिक बार क्लिक करें।
सीमा तक पहुँचने के बाद आपको "बहुत अधिक अनुरोध। कृपया थोड़ी देर प्रतीक्षा करें।" दिखाई देगा।
एक मिनट रुकिए और दोबारा कोशिश कीजिए। यह सामान्य रूप से काम करना चाहिए।

यदि संदेश दिखाई नहीं देता है, तो आप इसे कोपायलट में डीबग कर सकते हैं।

नोट: वर्सेल आपके बैकएंड को सर्वरलेस फ़ंक्शन के रूप में चलाता है, इसलिए इंस्टेंस के रीस्टार्ट होने पर इन-मेमोरी रेट लिमिटर रीसेट हो जाता है। यह MVP ट्रैफ़िक के लिए ठीक है। यह तेज़ गति से होने वाले दुरुपयोग को पकड़ सकता है, जैसे कि कोई व्यक्ति किसी बटन को 50 बार क्लिक करता है।

4. सुरक्षित त्रुटि प्रबंधन जोड़ें

कोडस्पेस में, विस्तृत त्रुटि संदेश आपको डीबग करने में मदद करते हैं। उत्पादन में, वही विवरण एक हमलावर को यह बता देते हैं कि आपका कोड कैसे संरचित है।

सुरक्षित त्रुटि प्रबंधन सर्वर पर तकनीकी विवरण लॉग करते समय उपयोगकर्ताओं को एक उपयोगकर्ता-अनुकूल संदेश दिखाता है। आप त्रुटि संदेशों को हटा नहीं रहे हैं, बल्कि उन्हें इस तरह से पुनर्निर्देशित कर रहे हैं ताकि हमलावर उन्हें देख न सकें।

Copilot को try/catch अपवाद हैंडलिंग जोड़ने के लिए प्रेरित करें। यहाँ एक नमूना प्रॉम्प्ट दिया गया है:

कृपया मेरी Express.js API में उत्पादन-योग्य त्रुटि प्रबंधन जोड़ने में मेरी सहायता करें।

त्रुटि संदेशों को सुरक्षित और उपयोगकर्ता के अनुकूल प्रतिक्रियाओं से बदलें।

संदर्भ: मेरा ऐप एक्सप्रेस राउट्स से ग्रोक एपीआई को कॉल करता है। प्रोडक्शन में, मैं नहीं चाहता कि उपयोगकर्ता स्टैक ट्रेस या आंतरिक विवरण देख सकें।

रूट हैंडलर्स को try/catch लूप में रैप करें। सर्वर साइड पर console.error() का उपयोग करके सभी त्रुटियों को लॉग करें। उपयोगकर्ताओं को "कुछ गड़बड़ हो गई। कृपया पुनः प्रयास करें।" संदेश भेजें। किसी भी आंतरिक विवरण को प्रदर्शित किए बिना, Groq API त्रुटियों को उपयोगकर्ता के लिए उपयोगी रखें।

जनरेट किए गए कोड की समीक्षा करें।
आपको एक ट्राई/कैच ब्लॉक दिखाई देगा जहां कैच ब्लॉक पूरी त्रुटि को लॉग करता है:
1. console.error() (केवल सर्वर-साइड)
2. उपयोगकर्ता को भेजा जाने वाला एक सामान्य संदेश।

ग्रोक या जेमिनी एपीआई विफलताओं जैसी ज्ञात त्रुटियों के लिए विशिष्ट, सहायक संदेश प्राप्त होते हैं।

5. परीक्षण त्रुटि प्रबंधन

चूंकि हम अपने सभी एपीआई कुंजी के लिए कोडस्पेस सीक्रेट्स का उपयोग कर रहे हैं, इसलिए हम अपने कोड में सीधा बदलाव करेंगे।

Groq (या अन्य LLM) API को कॉल करने वाले सर्वर कोड का पता लगाएं।
GROQ_API_KEY (या समकक्ष वेरिएबल) को GROQ_APIKEY में बदलें।
अपने एआई फीचर को आजमाएं।
आपको API के विफल होने का त्रुटि संदेश दिखाई देना चाहिए। आपको स्टैक ट्रेस नहीं दिखाई देना चाहिए।
अपना टर्मिनल चेक करें। त्रुटि का पूरा विवरण वहां दर्ज होना चाहिए।
कोड को वापस GROQ_API_KEY में बदलें और यह सुनिश्चित करने के लिए दोबारा प्रयास करें कि यह फिर से काम करता है।

6. परिवर्तनों को स्वीकार करें और लागू करें

अपने कोडस्पेस में, रेट लिमिटिंग और एरर हैंडलिंग से संबंधित परिवर्तनों को एक वर्णनात्मक संदेश के साथ कमिट करें।
इसे अपनी ऐड-सिक्योरिटी ब्रांच में पुश करें।
GitHub पर जाएं। आपको एक बैनर दिखाई देगा जो पुल रिक्वेस्ट बनाने का सुझाव देगा।
कंपेयर और पुल रिक्वेस्ट पर क्लिक करें।
अपने परिवर्तनों का वर्णन करने वाला एक शीर्षक जोड़ें (उदाहरण के लिए, "रेट लिमिटिंग और सुरक्षित त्रुटि प्रबंधन जोड़ें")।
पुल रिक्वेस्ट बनाएं पर क्लिक करें।
परिवर्तनों की समीक्षा करें, फिर 'मर्ज पुल रिक्वेस्ट' पर क्लिक करें और पुष्टि करें।
अपने वर्सेल डैशबोर्ड पर जाएं। आपको स्वचालित रूप से एक नया डिप्लॉयमेंट बनता हुआ दिखाई देगा।

7. अपने ऐप पर सत्यापित करें

तैनाती पूरी होने के बाद, अपने लाइव यूआरएल पर इसकी पुष्टि करें।

लॉग इन करें और अपने एआई फीचर का सामान्य रूप से उपयोग करें। यह काम करना चाहिए।
एआई फीचर पर 20 से अधिक बार तेजी से क्लिक करें। अंत में आपको "बहुत अधिक अनुरोध" दिखाई देगा।
एक मिनट रुकिए, दोबारा कोशिश कीजिए। यह सामान्य रूप से काम करना चाहिए।

समस्या निवारण

नीचे कुछ ऐसी समस्याएं दी गई हैं जिनका सामना आपको अपने ऐप में सुरक्षा जोड़ते समय करना पड़ सकता है। समस्या का समाधान जानने के लिए उस पर क्लिक करें।

दर सीमा लागू नहीं होती

सुनिश्चित करें कि मिडलवेयर केवल स्टैटिक फ़ाइल रूट्स पर ही नहीं, बल्कि आपके API रूट्स पर भी लागू हो। express-rate-limit मिडलवेयर को आपके रूट हैंडलर्स से पहले जोड़ा जाना चाहिए।

एक्सप्रेस-रेट-लिमिट परिभाषित नहीं है

अपने कोडस्पेस टर्मिनल में npm install express-rate-limit कमांड चलाएं और अपडेटेड package.json और package-lock.json फाइलों को पुश करें।

रेट लिमिटिंग स्थानीय स्तर पर काम करती है, लेकिन वर्सेल पर नहीं।

सर्वरलेस फ़ंक्शन अनुरोधों के बीच रीस्टार्ट हो सकते हैं। रेट लिमिटर अभी भी तीव्र गति से होने वाले दुरुपयोग (तेजी से एक के बाद एक कई अनुरोध) के खिलाफ काम करता है। यह MVP के लिए अपेक्षित व्यवहार है।

त्रुटि संदेशों में अभी भी स्टैक ट्रेस दिखाई देते हैं।

सुनिश्चित करें कि आपका कैच ब्लॉक res.json() को एक सामान्य संदेश भेजता है और console.error() का उपयोग करके पूरी त्रुटि को लॉग करता है। यह भी जांच लें कि आपके पास कोई अन्य त्रुटि हैंडलर तो नहीं है जो आपके वाले को ओवरराइड कर रहा हो।

अपने ऐप की निगरानी

आपका ऐप डिप्लॉय और सुरक्षित हो चुका है। दुनिया के साथ अपना URL साझा करने से पहले, आपको दो और काम करने होंगे:

मॉनिटरिंग सेटअप करें ताकि आप लॉन्च के बाद क्या होता है यह देख सकें।
यह सुनिश्चित करें कि आपकी सुरक्षा वास्तव में काम कर रही है। केवल यह मानकर न चलें कि यह काम कर रही है।

AI कॉल सामान्य API अनुरोधों से भिन्न होते हैं क्योंकि इनमें प्रति कॉल शुल्क लगता है, समय की मात्रा भिन्न हो सकती है और अप्रत्याशित परिणाम भी मिल सकते हैं। एक मानक "अनुरोध सफल" लॉग यह नहीं बताता कि AI प्रतिक्रिया उपयोगी थी या नहीं, उपयोगकर्ता ने कितनी देर प्रतीक्षा की या कॉल की लागत कितनी थी। संरचित लॉगिंग इन विवरणों को कैप्चर करती है ताकि आप अपने वर्सेल डैशबोर्ड से इन सवालों के जवाब पा सकें।

वर्सेल डैशबोर्ड

आपका वर्सेल डैशबोर्ड आपको यह जानने का जरिया है कि आपका ऐप प्रोडक्शन में कैसा प्रदर्शन कर रहा है। vercel.com पर अपने प्रोजेक्ट पर जाएं और तीन क्षेत्रों का पता लगाएं।

प्रत्येक डिप्लॉयमेंट को टाइमस्टैम्प और स्टेटस (सफलता या विफलता) के साथ सूचीबद्ध किया जाता है। संपूर्ण बिल्ड लॉग देखने के लिए किसी भी डिप्लॉयमेंट पर क्लिक करें। यहीं पर आप डिप्लॉयमेंट विफलताओं को डीबग कर सकते हैं। यदि कोई बिल्ड विफल हो जाता है, तो लॉग आपको इसका कारण बताते हैं।

सर्वर-साइड लॉग यहां वास्तविक समय में दिखाई देते हैं। इनमें कंसोल आउटपुट और त्रुटियों सहित आपके एपीआई रूट पर किए गए अनुरोध शामिल होते हैं।

किसी भी लॉग एंट्री पर क्लिक करके विवरण देखें: अनुरोध URL, प्रतिक्रिया स्थिति कोड और निष्पादन समय। बाईं ओर दिए गए फ़िल्टरों का उपयोग करके स्थिति कोड (सभी 500 त्रुटियाँ देखें), रूट (केवल AI अनुरोध देखें) या समय सीमा के आधार पर खोज को सीमित करें।

आप लॉग स्ट्रीम को रीयल टाइम में देखने के लिए "लाइव" टॉगल पर भी क्लिक कर सकते हैं। यह तब उपयोगी होता है जब आप अपने ऐप का परीक्षण कर रहे हों और क्लिक करते ही सर्वर पर क्या हो रहा है, यह देखना चाहते हों।

लॉग रिटेंशन: फरवरी 2026 से, हॉबी (मुफ्त) प्लान पर रनटाइम लॉग लगभग 1 घंटे के लिए उपलब्ध रहेंगे। यह परीक्षण और डीबगिंग के लिए पर्याप्त समय है, लेकिन लॉग कल उपलब्ध नहीं होंगे। अपने एआई फीचर का परीक्षण करने के तुरंत बाद लॉग टैब देखें।

ऑब्जर्वेबिलिटी सेक्शन व्यक्तिगत लॉग से आगे बढ़कर आपके सभी अनुरोधों में पैटर्न दिखाता है: कौन से रूट सबसे धीमे हैं, किनमें त्रुटि दर सबसे अधिक है, और समय के साथ आपके फ़ंक्शन का प्रदर्शन कैसे बदलता है।

यह टैब सभी प्लानों में उपलब्ध है, जिसमें मुफ्त हॉबी प्लान भी शामिल है।

ऑब्जर्वेबिलिटी प्रो और प्लस प्लान कस्टम क्वेरी और विसंगति अलर्ट को अनलॉक करते हैं।
आपको अपने एमवीपी के लिए इसकी आवश्यकता नहीं है; डिफ़ॉल्ट दृश्य ही पर्याप्त हैं ।

Vercel ऑब्जर्वेबिलिटी के लिए निम्नलिखित इवेंट प्रकारों को ट्रैक करता है:

एज अनुरोध
वर्सेल फ़ंक्शन आह्वान
बाह्य एपीआई अनुरोध
रूटिंग मिडलवेयर आह्वान
एआई गेटवे अनुरोध

गतिविधि 5

निगरानी करें, सत्यापित करें और लॉन्च करें

अनुमानित समय: 25 मिनट

1. एक नई ब्रांच और कोडस्पेस बनाएं

GitHub पर जाएं और अपने MVP रिपॉजिटरी पर नेविगेट करें।
रिपॉजिटरी के ऊपरी बाएँ कोने में स्थित मुख्य ड्रॉपडाउन पर क्लिक करें और सभी शाखाएँ देखें।
एक नई शाखा बनाएं।
आप इसे add-monitoring (या कोई अन्य वर्णनात्मक नाम) नाम दे सकते हैं।
इस ब्रांच के लिए एक नया कोडस्पेस बनाएं और उसे खोलें।

2. अपने AI रूट में टाइमिंग रैपर जोड़ें

उत्पादन में एआई कॉल के बारे में सबसे पहली बात जो आप जानना चाहेंगे वह यह है कि उनमें कितना समय लगता है। 15 सेकंड तक इंतजार करने वाला उपयोगकर्ता यह मान सकता है कि ऐप में कोई खराबी है।

कोपायलट से टाइमिंग रैपर जोड़ने में मदद करने के लिए कहें।

मैं अपने Express.js AI रूट में मॉनिटरिंग जोड़ना चाहता हूं।

मैं यह ट्रैक करना चाहता हूं कि प्रोडक्शन में प्रत्येक ग्रोक एपीआई कॉल में कितना समय लगता है।

मेरा AI रूट [index.js] में है और Groq API को कॉल करता है। मैं इसे Vercel पर डिप्लॉय कर रहा हूँ।

AI कॉल से पहले और बाद में Date.now() को रिकॉर्ड करें। प्रतिक्रिया समय को मिलीसेकंड में गणना करें। रूट नाम सहित इसे console.log() का उपयोग करके लॉग करें।

3. कोडस्पेस में टेस्ट टाइमिंग लॉगिंग

कोडस्पेस में अपना ऐप शुरू करें और एक एआई कॉल ट्रिगर करें।
प्रतिक्रिया समय लॉग के लिए अपने टर्मिनल आउटपुट की जाँच करें।
अभी इसे डिप्लॉय न करें। अगले चरण में आप इसमें और लॉगिंग जोड़ेंगे और फिर एक बार डिप्लॉय करेंगे।

4. संरचित JSON लॉगिंग में विस्तार करें

अब पूरी जानकारी प्राप्त करने के लिए अपने टाइमिंग कोड का विस्तार करें। संरचित लॉग JSON प्रारूप का उपयोग करते हैं, इसलिए आप उन्हें Vercel के डैशबोर्ड में खोज और फ़िल्टर कर सकते हैं। आवश्यक कोड जनरेट करने के लिए Copilot को निर्देश दें।

बेसिक console.log को संरचित JSON लॉग से बदलें जिसे मैं Vercel के डैशबोर्ड में खोज सकूं।

मेरे पास पहले से ही एक टाइमिंग रैपर है जो मेरे ग्रोक एपीआई कॉल के लिए रिस्पॉन्स टाइम को मापता है।

console.log(JSON.stringify(data)) का उपयोग करके प्रत्येक AI कॉल के लिए एक JSON ऑब्जेक्ट लॉग करें:
टाइमस्टैम्प (आईएसओ),
क्रिया का नाम,
इनपुट लंबाई (अक्षरों की संख्या, सामग्री नहीं),
प्रतिक्रिया समय (मिलीसेकंड में),
सफलता (सही/गलत),
त्रुटि (संदेश या शून्य)

उदाहरण (ट्यूटरमैच के लिए):

जब कोई छात्र ट्यूटर की अनुशंसाओं की खोज करता है, तो लॉग कुछ इस तरह दिख सकता है। आपके ऐप में अलग-अलग एक्शन नाम होंगे। अपने AI फ़ीचर के अनुसार इन्हें अनुकूलित करें।

				
					{
  "timestamp": "2026-02-16T14:32:01Z",
  "action": "get_tutor_recommendations",
  "inputLength": 145,
  "responseTime": 2340,
  "success": true,
  "error": null
}

प्रत्येक क्षेत्र का एक विशिष्ट उद्देश्य होता है:

टाइमस्टैम्प – यह आपको उपयोगकर्ता द्वारा रिपोर्ट की गई समस्याओं ("यह दोपहर 3 बजे खराब हो गया") को लॉग में दर्ज घटनाओं से जोड़ने की सुविधा देता है।
एक्शन – यह दर्शाता है कि किन एआई सुविधाओं का सबसे अधिक उपयोग किया जाता है और किन सुविधाओं को अनदेखा किया जाता है।
इनपुट की लंबाई – असामान्य रूप से बड़े इनपुट दुरुपयोग का संकेत दे सकते हैं। लॉगिंग की लंबाई (सामग्री नहीं) उपयोगकर्ता की गोपनीयता की रक्षा करती है।
responseTime – उपयोगकर्ताओं की शिकायत से पहले ही आपको प्रदर्शन संबंधी समस्याओं का पता लगाने में मदद करता है। यदि लगातार 10 सेकंड से अधिक का समय लग रहा है, तो इस पर ध्यान देने की आवश्यकता हो सकती है।
सफलता – यह आपको एक नज़र में आपकी AI विफलता दर बताता है। 5% सामान्य है, 50% संकट का संकेत है।
त्रुटि – जब कॉल विफल हो जाते हैं, तो त्रुटि संदेश आपको समस्या को दोबारा उत्पन्न किए बिना ही कारण बता देता है।

5. विस्तारित लॉग का परीक्षण करें

कोडस्पेस में अपना ऐप दोबारा चलाएं।
एआई कॉल को ट्रिगर करें।
JSON लॉगिंग के लिए टर्मिनल की जाँच करें।

6. परिवर्तनों को स्वीकार करें और लागू करें

अब अपने टाइमिंग और स्ट्रक्चर्ड लॉगिंग से संबंधित सभी बदलावों को एक साथ कमिट और डिप्लॉय करें:

अपने लॉगिंग परिवर्तनों को एक वर्णनात्मक संदेश के साथ सबमिट करें।
इसे अपनी ऐड-मॉनिटरिंग शाखा में पुश करें।
GitHub पर जाएं। आपको एक बैनर दिखाई देगा जो पुल रिक्वेस्ट बनाने का सुझाव देगा।
कंपेयर और पुल रिक्वेस्ट पर क्लिक करें।
अपने परिवर्तनों का वर्णन करने वाला एक शीर्षक जोड़ें।
पुल रिक्वेस्ट बनाएं पर क्लिक करें।
परिवर्तनों की समीक्षा करें, फिर 'मर्ज पुल रिक्वेस्ट' पर क्लिक करें और पुष्टि करें।
अपने वर्सेल डैशबोर्ड पर जाएं और डिप्लॉयमेंट टैब में नए डिप्लॉयमेंट की शुरुआत की पुष्टि करें।
एक बार डिप्लॉयमेंट पूरा हो जाने के बाद, अपना लाइव ऐप खोलें, लॉग इन करें और 2-3 एआई कॉल ट्रिगर करें।
Vercel → लॉग्स पर जाएं और अपनी संरचित JSON प्रविष्टियों को खोजें।
टाइमस्टैम्प, एक्शन, रिस्पॉन्सटाइम और सक्सेस फ़ील्ड सही ढंग से दिखाई दे रहे हैं या नहीं, इसकी जाँच करें।
प्रत्येक लॉग प्रविष्टि पंक्तियों के रूप में दिखाई देनी चाहिए। JSON फ़ील्ड देखने के लिए तीर पर क्लिक करके उसे विस्तृत करें।
यदि आपको JSON के बजाय [Object object] दिखाई देता है, तो अपने कोड को अपडेट करें और console.log (logData) के बजाय console.log (JSON.stringify(logData)) का उपयोग करें।

ध्यान रखें, फ्री टियर पर लॉग लगभग 1 घंटे के लिए उपलब्ध होते हैं, इसलिए टेस्टिंग के तुरंत बाद उन्हें चेक कर लें।

7. वेब एनालिटिक्स को सक्षम करें

वर्सेल मुफ़्त वेब एनालिटिक्स सेवा प्रदान करता है जो पेज व्यू और विज़िटर डेटा को ट्रैक करती है। सेटअप में कुछ ही मिनट लगते हैं और आपको वास्तविक विज़िटर मेट्रिक्स मिलते हैं जिनका उपयोग आप अपने प्रोजेक्ट प्रेजेंटेशन में कर सकते हैं।

अपने वर्सेल प्रोजेक्ट डैशबोर्ड पर जाएं
एनालिटिक्स टैब पर क्लिक करें।
वेब एनालिटिक्स के लिए सक्षम करें पर क्लिक करें।

7. कोडस्पेस में एनालिटिक्स जोड़ें

यदि आपके पास अभी भी ऐड-मॉनिटरिंग ब्रांच है, तो उससे संबंधित कोडस्पेस खोलें। अन्यथा, अपने रेपो के लिए एक नई ब्रांच बनाएं और एक नया कोडस्पेस खोलें।
अपने कोडस्पेस में, टर्मिनल में npm install @vercel/analytics कमांड चलाकर एनालिटिक्स पैकेज इंस्टॉल करें।
अपने ऐप में एनालिटिक्स कंपोनेंट जोड़ें।
- यदि आप उपयोग कर रहे हैं रिएक्ट या नेक्स्ट.जेएस,
  - App.jsx में import { Analytics } from '@vercel/analytics/react' import जोड़ें
  - Add <Analytics /> as a component inside your App.jsx return, typically just before the closing tag.
- साधारण HTML/JS ऐप्स के लिए, Enable पर क्लिक करने के बाद Vercel द्वारा दिखाए गए निर्देशों का पालन करें।
  प्रतिबद्ध ।
अपने बदलावों को कमिट, पुश और मर्ज करें। अगला डिप्लॉयमेंट डेटा एकत्र करना शुरू कर देगा।

ध्यान दें: डैशबोर्ड में केवल एनालिटिक्स को सक्षम करना पर्याप्त नहीं है। डेटा प्रवाह के लिए आपके कोड में @vercel/analytics पैकेज भी होना आवश्यक है। यदि आप चरण 3 और 4 को छोड़ देते हैं, तो एनालिटिक्स टैब खाली रहेगा।

हॉबी प्लान में प्रति माह 2,500 इवेंट मुफ्त में शामिल हैं (फरवरी 2026 तक), जो एक MVP के लिए पर्याप्त से अधिक हैं। सेटअप के बाद, आप देख पाएंगे कि कितने लोग आपके ऐप पर आते हैं, वे कौन से पेज देखते हैं और वे कहाँ से आते हैं।

8. डेवलपर टूल्स के साथ सुरक्षा सत्यापित करें

अब DevTools का उपयोग करके पुष्टि करें कि आपका प्रोडक्शन ऐप वास्तव में सुरक्षित है। इसे सुरक्षित मानकर न चलें।

अपने ब्राउज़र में डिप्लॉय किए गए ऐप को खोलें (कोडस्पेस नहीं, बल्कि .vercel.app URL का उपयोग करें)।
DevTools खोलने के लिए F12 दबाएं (या राइट-क्लिक करके Inspect करें)।
नेटवर्क टैब पर जाएं।
नेटवर्क लॉग साफ़ करें (क्लियर आइकन पर क्लिक करें)।
अपने ऐप में लॉग इन करें और अपने एआई फीचर का उपयोग करें।
नेटवर्क अनुरोधों को प्रकट होते हुए देखें।

निम्नलिखित में से प्रत्येक का निरीक्षण करें। ये तीन सुरक्षा जांच हैं जिन्हें प्रत्येक तैनात ऐप को पास करना चाहिए।

जांच 1: क्या आपकी एपीआई कुंजी छिपी हुई हैं?

उस अनुरोध पर क्लिक करें जो आपके एआई फीचर को सक्रिय करता है।

अनुरोध URL आपके बैकएंड पर जाना चाहिए: https://your-app.vercel.app/api/ai-query। यह सीधे api.groq.com या किसी अन्य बाहरी API पर नहीं जाना चाहिए। यदि ऐसा होता है, तो आपका फ्रंटएंड सीधे AI API को कॉल कर रहा है और आपकी API कुंजी उजागर हो सकती है।
हेडर टैब पर क्लिक करें और रिक्वेस्ट हेडर्स देखें। आपका ग्रोक एपीआई कुंजी किसी भी हेडर में नहीं दिखना चाहिए। आपका बैकएंड सर्वर-साइड से बाहरी कॉल करता है। ब्राउज़र को यह कुंजी कभी नहीं दिखती।
यूआरएल क्वेरी पैरामीटर की जांच करें। यूआरएल में ?key=AIza… नहीं होना चाहिए।

यदि आपका API key ब्राउज़र रिक्वेस्ट में कहीं भी दिखाई देता है, तो तुरंत रुक जाएं । आपका key सार्वजनिक हो गया है और आपकी साइट की जाँच करने वाला कोई भी व्यक्ति इसे चुरा सकता है। अपने कोड पर वापस जाएं और सुनिश्चित करें कि सभी बाहरी API कॉल सर्वर साइड से ही हों।

जांच 2: क्या प्रमाणीकरण टोकन भेजा जा रहा है?

उसी अनुरोध पर, अनुरोध हेडर को फिर से देखें। आपको निम्नलिखित दिखाई देना चाहिए:

प्राधिकरण: धारक eyJhbGciOiJIUzI1NiIs…

यह वह सुपाबेस सेशन टोकन है जिसे आपका फ्रंटएंड भेजता है। यह प्रमाणित करता है कि अनुरोध लॉग-इन किए हुए उपयोगकर्ता से आया है। अक्षरों की यह लंबी स्ट्रिंग एक JSON वेब टोकन (JWT) है, जो प्रमाणीकरण जानकारी को सुरक्षित रूप से प्रसारित करने का एक मानक प्रारूप है।

यदि ऑथराइजेशन हेडर गायब है, तो अपने ऑथ कोड पर वापस जाएं और सत्यापित करें कि आपका फ्रंटएंड getSession() को कॉल कर रहा है और प्रत्येक API अनुरोध के साथ टोकन शामिल कर रहा है।

जांच 3: क्या उत्पादन में दर सीमा लागू करना काम करता है?

नेटवर्क टैब पर DevTools को खुला रखें।
अपने एआई फीचर बटन पर 10 से अधिक बार तेजी से क्लिक करें।
नेटवर्क टैब पर नज़र रखें: शुरुआती कुछ अनुरोधों का स्टेटस 200 (सफलता) आना चाहिए।
सीमा तक पहुँचने के बाद, अनुरोधों को स्थिति 429 (बहुत अधिक अनुरोध) लौटाना चाहिए।
आपके ऐप में “बहुत अधिक अनुरोध आए हैं। कृपया थोड़ी देर प्रतीक्षा करें।” संदेश प्रदर्शित होना चाहिए।

यदि सभी 20 या उससे अधिक अनुरोध बिना रेट लिमिटिंग के 200 का मान लौटाते हैं, तो संभव है कि सर्वरलेस फ़ंक्शन अनुरोधों के बीच रीस्टार्ट हो गया हो। तेज़ी से क्लिक करने का प्रयास करें। रेट लिमिटर तीव्र गति से होने वाले अनुरोधों के लिए सबसे अच्छा काम करता है। एक प्रारंभिक संस्करण (MVP) के लिए, सुरक्षा का यह स्तर उपयुक्त है।

उत्पादन लागतों की समीक्षा

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

जहां उपलब्ध हो , बिलिंग अलर्ट सेट करें। कुछ निःशुल्क योजनाओं में आपको सशुल्क योजना लेने से पहले अलर्ट सेट करने की अनुमति नहीं होगी।

वर्सेल

फ्री टियर – 100GB बैंडविड्थ, 4 घंटे एक्टिव CPU, प्रति माह 1 मिलियन फंक्शन इन्वोकेशन

लागत – यदि बैंडविड्थ या फ़ंक्शन सीमा से अधिक हो जाए

कहां जांचें – वर्सेल डैशबोर्ड → उपयोग

बिलिंग अलर्ट – प्रोजेक्ट → सेटिंग्स → उपयोग। हॉबी टियर की सीमाएं देखें। वर्सेल आपको सीमा के करीब पहुंचने पर सूचित करेगा।

सुपाबेस (Supabase)

फ्री टियर – 500MB डेटाबेस, 1GB फ़ाइल स्टोरेज, 50,000 मासिक सक्रिय उपयोगकर्ता

लागत – यदि भंडारण या उपयोगकर्ता सीमा से अधिक हो जाए

कहां चेक करें – सुपाबेस डैशबोर्ड → सेटिंग्स → बिलिंग

बिलिंग अलर्ट – सेटिंग्स → बिलिंग पर जाएं। डेटाबेस और स्टोरेज के लिए उपयोग अलर्ट सेट करें।

Groq एपीआई

फ्री टियर – दर सीमा के साथ फ्री टियर (मॉडल के अनुसार भिन्न होता है)

लागत – निःशुल्क स्तर से परे उच्च मात्रा वाले एपीआई कॉल

कहां जांचें – ग्रोक डैशबोर्ड → उपयोग

बिलिंग अलर्ट – अपने ग्रोक कंसोल में सेटिंग्स → बिलिंग → सीमाएं पर जाएं।

लॉन्च से पहले की चेकलिस्ट

अपनी ऐप को दुनिया के साथ साझा करने से पहले, इस चेकलिस्ट को ध्यान से पढ़ें। इसे तीन समूहों में बांटा गया है: क्या आपकी ऐप काम करती है, क्या यह सुरक्षित है, और क्या आप लॉन्च के बाद होने वाली गतिविधियों को देख सकते हैं।

✅ क्या यह काम करता है?

लाइव यूआरएल सही ढंग से लोड हो रहा है
लॉगिन और साइनअप काम करते हैं (खाता बनाएं, लॉगिन करें, लॉग आउट करें)
लॉग इन करने के बाद AI फ़ीचर प्रोडक्शन में काम करता है
यह ऐप किसी अन्य डिवाइस या ब्राउज़र पर काम करता है (पुनः जांच करने के लिए URL को किसी टीम के साथी के साथ साझा करें)

✅ क्या यह सुरक्षित है?

API कुंजी DevTools नेटवर्क टैब में दिखाई नहीं देती हैं।
API अनुरोधों पर प्राधिकरण हेडर मौजूद है
तीव्र अनुरोधों के बाद दर सीमा लागू होती है
Vercel में पर्यावरण चर सेट किए जाते हैं, उन्हें आपके कोड में हार्डकोड नहीं किया जाता है।

✅ क्या आप देख पा रहे हैं कि क्या हो रहा है?

जब आप AI कॉल ट्रिगर करते हैं तो Vercel लॉग्स टैब में संरचित JSON लॉग दिखाई देते हैं।
वेब एनालिटिक्स सक्षम
Vercel, Supabase और Groq के लिए लागत डैशबोर्ड की जाँच की गई।

यदि कोई आइटम काम नहीं करता है, तो अपना यूआरएल साझा करने से पहले उसे ठीक कर लें।

यदि सभी शर्तें पूरी हो जाती हैं, तो आपका ऐप साझा करने के लिए तैयार है।

समस्या निवारण

Vercel में लॉग फ़ाइलें नहीं दिख रही हैं।

सुनिश्चित करें कि आप console.log() का उपयोग सर्वर-साइड API राउट्स में कर रहे हैं, न कि क्लाइंट-साइड कोड में। क्लाइंट-साइड लॉग ब्राउज़र में दिखाई देते हैं, Vercel में नहीं।

संरचित लॉग [Object object] के रूप में दिखाई देते हैं

console.log(logData) के बजाय console.log (JSON.stringify(logData)) का उपयोग करें।

उत्पादन में एआई कॉल धीमी गति से चल रही हैं।

अपने लॉग में रिस्पॉन्स टाइम की जांच करें। यदि यह लगातार 10 सेकंड से अधिक है, तो लोडिंग संदेश जोड़ने और अनुरोध को विभाजित करने पर विचार करें।

वर्सेल फ़ंक्शन का समय समाप्त हो गया

फ्लूइड कंप्यूट (नए प्रोजेक्ट्स में डिफ़ॉल्ट रूप से सक्षम) के साथ, हॉबी प्लान पर फ़ंक्शन 300 सेकंड (5 मिनट) तक चल सकते हैं। फ्लूइड कंप्यूट के बिना, सीमा 60 सेकंड है। यदि आपके AI कॉल अभी भी टाइम आउट हो रहे हैं, तो उपयोगकर्ता के लिए लोडिंग इंडिकेटर और टाइम आउट संदेश जोड़ें।

API कुंजी ब्राउज़र अनुरोधों में दिखाई देती है

आपका फ्रंटएंड बैकएंड के बजाय सीधे बाहरी API को कॉल कर रहा है। अपने फ्रंटएंड को अपडेट करें ताकि वह आपके एक्सप्रेस रूट (जैसे, /api/ai-query) को कॉल करे।

वेब एनालिटिक्स डेटा नहीं दिखा रहा है

अगले डिप्लॉयमेंट और कुछ पेज विज़िट के बाद डेटा दिखाई देगा। साइट को इनेबल करने और विज़िट करने के बाद कुछ मिनट प्रतीक्षा करें।

आपका ऐप your-app-name.vercel.app पर लाइव है। यह प्रतियोगिता, उपयोगकर्ता परीक्षण और आपके प्रेजेंटेशन के लिए ठीक है। लेकिन अगर आप चाहते हैं कि आपका ऐप किसी वास्तविक व्यवसाय की तरह लगे, तो एक कस्टम डोमेन से फर्क पड़ता है। tutormatch.app व्यावसायिकता को उस तरह से दर्शाता है जिस तरह tutormatch-mvp.vercel.app नहीं दर्शाता।

वर्सेल का निःशुल्क संस्करण बिना किसी अतिरिक्त शुल्क के कस्टम डोमेन की सुविधा देता है (प्रति प्रोजेक्ट अधिकतम 50 डोमेन, स्वचालित HTTPS के साथ)। एकमात्र शुल्क डोमेन नाम का ही है।

गतिविधि 6

(वैकल्पिक) - एक कस्टम डोमेन कनेक्ट करें

अनुमानित समय: 15 मिनट

1. एक डोमेन नाम प्राप्त करें

अपना खुद का डोमेन प्राप्त करने के लिए इनमें से कोई एक विकल्प चुनें।

विकल्प

लागत

प्रक्रिया

GitHub स्टूडेंट डेवलपर पैक

डोमेन रजिस्ट्रार

यदि आपके पास स्कूल का ईमेल पता है, तो आप अपने GitHub खाते के माध्यम से साइन अप कर सकते हैं। आवेदन करने के लिए education.github.com/pack पर जाएं। इसमें Namecheap (.me), Name.com (.live, .studio, .app, .dev और 20 से अधिक अन्य) और .tech डोमेन शामिल हैं।

GitHub स्टूडेंट डेवलपर पैक

लगभग 10-15 अमेरिकी डॉलर प्रति वर्ष

Namecheap, Cloudflare या Google Domains से खरीदें। कीमत एक्सटेंशन के अनुसार अलग-अलग होती है। .com की कीमत .site या .tech से अधिक होती है।

लगभग 10-20 अमेरिकी डॉलर प्रति वर्ष

अपने Vercel डैशबोर्ड में सीधे खोजें और खरीदें ( सेटिंग्स → डोमेन )। Vercel DNS को स्वचालित रूप से कॉन्फ़िगर करता है। यदि आप भुगतान करने को तैयार हैं तो यह सबसे सरल विकल्प है।

2. अपने डोमेन को वर्सेल से कनेक्ट करें

अपने Vercel प्रोजेक्ट पर जाएं → सेटिंग्स → डोमेन
ऐड डोमेन पर क्लिक करें और अपना डोमेन नाम टाइप करें (उदाहरण के लिए, tutormatch.app)
Vercel आपको आवश्यक DNS रिकॉर्ड दिखाता है। आपको इनमें से कोई एक दिखाई देगा:
- एक ए रिकॉर्ड जो वर्सेल के आईपी पते की ओर इंगित करता है (ट्यूटरमैच.ऐप जैसे रूट डोमेन के लिए)।
- एक CNAME रिकॉर्ड जो cname.vercel-dns.com की ओर इंगित करता है (जैसे www.tutormatch.app जैसे सबडोमेन के लिए)।
अपने डोमेन रजिस्ट्रार की DNS सेटिंग्स पर जाएं और Vercel द्वारा दिए गए रिकॉर्ड जोड़ें।
DNS के लागू होने का इंतज़ार करें। इसमें आमतौर पर 30 मिनट से कम समय लगता है, लेकिन 48 घंटे तक भी लग सकते हैं।

3. अपनी सुपाबेस प्रमाणीकरण सेटिंग्स को अपडेट करें

इस चरण को न छोड़ें। यदि आप ऐसा करते हैं, तो आपके कस्टम डोमेन पर लॉगिन काम करना बंद कर देगा।

सुपाबेस डैशबोर्ड पर जाएं → प्रमाणीकरण → यूआरएल कॉन्फ़िगरेशन ।
साइट यूआरएल और रीडायरेक्ट यूआरएल दोनों में अपना कस्टम डोमेन यूआरएल (जैसे, https://tutormatch.app) जोड़ें।
अपनी .vercel.app URL को भी सूची में रखें। यह बैकअप के रूप में काम करता है।

4. सुनिश्चित करें कि सब कुछ ठीक से काम कर रहा है

अपने ब्राउज़र में अपना कस्टम डोमेन खोलें। आपका ऐप HTTPS के साथ लोड होना चाहिए (लॉक आइकन देखें)।
लॉग इन करने का प्रयास करें। यदि यह आपको आपके Codespaces URL या आपके .vercel.app URL पर रीडायरेक्ट करता है, तो आपने चरण 3 छोड़ दिया है।
अपनी एआई सुविधा (और अन्य एपीआई एकीकरण) का परीक्षण करें ताकि यह सुनिश्चित हो सके कि सब कुछ सुचारू रूप से काम कर रहा है।

समस्या निवारण

डोमेन में "डीएनएस कॉन्फ़िगर नहीं है" प्रदर्शित हो रहा है।

अपने रजिस्ट्रार की DNS सेटिंग्स में A रिकॉर्ड या CNAME रिकॉर्ड की दोबारा जांच करें। सुनिश्चित करें कि आपने Vercel से मानों को हूबहू कॉपी किया है।

एसएसएल प्रमाणपत्र काम नहीं कर रहा है

प्रतीक्षा करें। DNS के प्रसारित होने के बाद Vercel स्वचालित रूप से SSL प्रदान करता है, लेकिन इसमें एक घंटे तक का समय लग सकता है।

लॉगिन गलत यूआरएल पर रीडायरेक्ट हो रहा है

Supabase Auth रीडायरेक्ट URL को अपडेट करें और उसमें अपना कस्टम डोमेन शामिल करें। सूची में .vercel.app और कस्टम डोमेन URL दोनों को रखें।

प्रतिबिंब

वाह! आपने कर दिखाया! आपका ऐप डिप्लॉय हो गया है और लाइव है! बधाई हो! कुछ पल रुककर इन सवालों पर विचार करें:

01

निगरानी

आपका ऐप लाइव हो जाने से त्रुटियों, प्रदर्शन और लागत के बारे में आपकी सोच में क्या बदलाव आता है? पहले सप्ताह में आप सबसे ज़्यादा किन चीज़ों पर नज़र रखेंगे?

02

यात्रा

आपने एक विचार से शुरुआत की, एक प्रोटोटाइप बनाया, कोडिंग की और उसमें मौजूद कमियों को दूर किया, प्रमाणीकरण के साथ उसे सुरक्षित किया, और अब उसे दुनिया के सामने पेश कर दिया है। इस पूरी यात्रा में आपको सबसे ज्यादा आश्चर्य किस कौशल से हुआ?

03

अगले कदम

आप आगे किस चीज़ को प्राथमिकता देंगे? नई सुविधाओं को, बेहतर एआई प्रतिक्रियाओं को, प्रदर्शन में सुधार को, या उपयोगकर्ताओं के लिए मार्केटिंग को?

महत्वपूर्ण पदों

डिप्लॉयमेंट: अपने ऐप को इंटरनेट पर एक स्थायी यूआरएल पर उपलब्ध कराना। प्रीव्यू लिंक के विपरीत, डिप्लॉय किया गया ऐप आपके कंप्यूटर के बंद होने पर भी चालू रहता है।
प्रोडक्शन एनवायरनमेंट: यह आपके ऐप का लाइव वर्जन है जिसके साथ वास्तविक उपयोगकर्ता इंटरैक्ट करते हैं, जबकि डेवलपमेंट एनवायरनमेंट वह जगह है जहां आप कोड लिखते और टेस्ट करते हैं।
पर्यावरण चर (उत्पादन): API कुंजी और गुप्त कोड जो आपके कोड में नहीं बल्कि आपके होस्टिंग प्लेटफ़ॉर्म की सेटिंग्स में संग्रहीत होते हैं। वर्सेल में, इन्हें प्रोजेक्ट डैशबोर्ड में सेट किया जाता है।
ऑटो-डिप्लॉय: जब भी आप GitHub पर अपनी मुख्य शाखा में कोड पुश करते हैं, तो Vercel स्वचालित रूप से आपके ऐप को रीबिल्ड और रीडिप्लॉय करता है।
दर सीमा निर्धारण: किसी उपयोगकर्ता द्वारा एक निश्चित समयावधि में किए जा सकने वाले अनुरोधों की संख्या को सीमित करना। दुरुपयोग को रोकता है और API लागतों को नियंत्रित करता है।
सुरक्षित त्रुटि प्रबंधन: सर्वर पर संपूर्ण तकनीकी विवरण लॉग करते हुए उपयोगकर्ताओं को सामान्य, उपयोगकर्ता-अनुकूल त्रुटि संदेश लौटाना। इससे आंतरिक विवरणों को संभावित हमलावरों के सामने उजागर होने से बचाया जा सकता है।
स्ट्रक्चर्ड लॉगिंग: आपके ऐप में होने वाली घटनाओं को सादे टेक्स्ट के बजाय व्यवस्थित JSON डेटा के रूप में रिकॉर्ड करना। इससे प्रोडक्शन में होने वाली गतिविधियों को खोजना, फ़िल्टर करना और उनका विश्लेषण करना संभव हो जाता है।
अवलोकनशीलता: लॉग, मेट्रिक्स और मॉनिटरिंग डैशबोर्ड के माध्यम से, बाहर से यह समझने की क्षमता कि आपके चल रहे ऐप के अंदर क्या हो रहा है।
सर्वरलेस फंक्शन्स: बैकएंड कोड जो अनुरोधों के जवाब में आवश्यकतानुसार चलता है, इसके लिए आपको सर्वर प्रबंधित करने की आवश्यकता नहीं होती है। वर्सेल आपके Express.js API राउट्स को स्वचालित रूप से सर्वरलेस फंक्शन्स में परिवर्तित कर देता है।
कस्टम डोमेन: एक व्यक्तिगत वेब पता (जैसे tutormatch.app) जो आपका अपना है और आपके Vercel परिनियोजन को इंगित करता है, डिफ़ॉल्ट .vercel.app URL को प्रतिस्थापित करता है।
DNS (डोमेन नेम सिस्टम): यह वह सिस्टम है जो डोमेन नामों (जैसे tutormatch.app) को IP एड्रेस में बदलता है, जिनका उपयोग कंप्यूटर सर्वर खोजने के लिए करते हैं। जब आप कोई कस्टम डोमेन कनेक्ट करते हैं, तो आप DNS रिकॉर्ड को Vercel की ओर इंगित करने के लिए कॉन्फ़िगर करते हैं।

अतिरिक्त संसाधन

तैनाती

वर्सेल डॉक्यूमेंटेशन : आरंभ करना, पर्यावरण चर और परिनियोजन कॉन्फ़िगरेशन
वर्सेल एनवायरनमेंट वेरिएबल्स गाइड : प्रोडक्शन के लिए सीक्रेट्स को कैसे कॉन्फ़िगर करें
कस्टम डोमेन जोड़ना : अपने वर्सेल प्रोजेक्ट में अपना खुद का डोमेन कनेक्ट करें

सुरक्षा

express-rate-limit : Express.js के लिए रेट लिमिटिंग मिडलवेयर
वर्सेल फायरवॉल दस्तावेज़ीकरण : अंतर्निहित डीडीओएस और डब्ल्यूएएफ सुरक्षा

निगरानी

वर्सेल रनटाइम लॉग्स : फंक्शन लॉग्स और रनटाइम आउटपुट को समझना
वर्सेल ऑब्जर्वेबिलिटी : प्रदर्शन और त्रुटियों की निगरानी के लिए डैशबोर्ड
वर्सेल वेब एनालिटिक्स : पेज व्यू और विज़िटर डेटा ट्रैक करें

लागत प्रबंधन

ग्रोक एपीआई : एपीआई मूल्य निर्धारण
सुपाबेस मूल्य निर्धारण : निःशुल्क टियर के विवरण और सीमाएँ
वर्सेल मूल्य निर्धारण : निःशुल्क टियर के विवरण और सीमाएँ

पाठ सामग्री

पिछली प्रश्नोत्तरी

पाठ्यक्रम पर वापस

अगली प्रश्नोत्तरी

तैनाती और पुनरावृति (Deploying and Iterating)

एमवीपी से प्रोडक्शन तक

दृश्यता

अटलता

लागत

परिनियोजन प्लेटफ़ॉर्म का चयन करना

अगर मेरा ऐप अन्य फ्रेमवर्क का उपयोग कर रहा है तो क्या होगा?

वर्सेल क्या संभालता है

वर्सेल

आप

गतिविधि 1

Vercel के साथ अपना ऐप डिप्लॉय करने की तैयारी करें

वर्तमान कॉन्फ़िगरेशन का सारांश ✅

इसका क्या अर्थ है

गतिविधि 2

अपने ऐप को वर्सेल पर डिप्लॉय करें

बधाइयाँ!

समस्या निवारण

ऑटो तैनाती (Auto - deployment)

गतिविधि 3

टेस्ट ऑटो-डिप्लॉयमेंट

उत्पादन के लिए अपने ऐप को सुरक्षित करें

गतिविधि 4

दर सीमा निर्धारण (Add Rate Limiting) और सुरक्षित त्रुटि प्रबंधन (Safe Error Handling) जोड़ें

समस्या निवारण

अपने ऐप की निगरानी

वर्सेल डैशबोर्ड

गतिविधि 5

निगरानी करें, सत्यापित करें और लॉन्च करें

उत्पादन लागतों की समीक्षा

वर्सेल

सुपाबेस (Supabase)

Groq एपीआई

लॉन्च से पहले की चेकलिस्ट

✅ क्या यह काम करता है?

✅ क्या यह सुरक्षित है?

✅ क्या आप देख पा रहे हैं कि क्या हो रहा है?

यदि कोई आइटम काम नहीं करता है, तो अपना यूआरएल साझा करने से पहले उसे ठीक कर लें।

यदि सभी शर्तें पूरी हो जाती हैं, तो आपका ऐप साझा करने के लिए तैयार है।

समस्या निवारण

गतिविधि 6

(वैकल्पिक) - एक कस्टम डोमेन कनेक्ट करें

समस्या निवारण

प्रतिबिंब

महत्वपूर्ण पदों

अतिरिक्त संसाधन