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

नीचे दी गई छवि वास्तुकला घटकों को दर्शाती है:

अस्वीकरण: मैं यहां उल्लिखित किसी भी सेवा द्वारा प्रायोजित नहीं हूं; मैं उन्हें केवल इसलिए उजागर कर रहा हूं क्योंकि मैंने उन्हें उपयोगी पाया है।

प्रोजेक्ट कोडबेस रिपॉजिटरी

GitHub आपके कोडबेस को निःशुल्क होस्ट करने के लिए सबसे लोकप्रिय प्लेटफ़ॉर्म है। मैंने बिटबकेट और गिटलैब जैसे विकल्प भी आज़माए हैं और वे भी ठीक से काम करते हैं। ईमानदारी से कहूँ तो, इनमें से कोई भी विकल्प काम करेगा—बस एक चुनें और उस पर ज़्यादा सोचे बिना आगे बढ़ें।

फ्रंट-एंड वर्कफ़्लो ऑर्केस्ट्रेशन

एक पेशेवर सेटिंग में, आप आम तौर पर सीधे AWS या किसी अन्य क्लाउड सेवा प्रदाता के साथ काम करेंगे, जो आपको तैनाती, सूचनाओं और निगरानी पर पूर्ण नियंत्रण देगा। हालाँकि, इस दृष्टिकोण के लिए अधिक समय और प्रयास की आवश्यकता होती है। सौभाग्य से, Netlify और Vercel जैसी सेवाएँ अधिकांश घर्षण को दूर करके इस प्रक्रिया को सरल बनाती हैं। वे त्वरित तैनाती की अनुमति देते हैं लेकिन अपने पारिस्थितिकी तंत्र पर निर्भरता के साथ आते हैं। एक बार जब आपकी साइट को महत्वपूर्ण ट्रैफ़िक (हज़ारों विज़िट) प्राप्त होने लगे, तो अप्रत्याशित लागतों से बचने के लिए निःशुल्क स्तरीय सीमाओं की जाँच करना एक अच्छा विचार है। व्यक्तिगत परियोजनाओं के लिए, मैंने अब तक बिना किसी समस्या के कई बार इन सेवाओं का उपयोग किया है।

उसने कहा, Netlify बॉक्स से बाहर कई सुविधाएँ प्रदान करता है। आर्किटेक्चर छवि में, तीन घटक Netlify द्वारा स्वचालित रूप से प्रदान किए जाते हैं:

• जीयूआई एकीकरण:

नेटलिफाई का जीयूआई आपको मेरे मामले में, अपने कोडबेस रिपॉजिटरी-गिटहब को एकीकृत करने की अनुमति देता है। Netlify Next.js एप्लिकेशन के लिए डिफ़ॉल्ट सेटिंग्स को समझता है और कोड को निर्बाध रूप से तैनात करने के लिए उनका उपयोग करता है।

• स्टेटिक साइट होस्टिंग:

chicagomusiccompass.com एक स्थिर वेब एप्लिकेशन है, जिसका अर्थ है कि इसमें कोई सर्वर शामिल नहीं है। जब कोई परिनियोजन ट्रिगर होता है, तो ऐप स्थिर संपत्ति (HTML, JS और CSS) उत्पन्न करता है जो S3 बकेट में संग्रहीत होती हैं। Netlify फिर CloudFront के साथ कॉन्फ़िगरेशन को संभालता है, आपको उपयोग के लिए तैयार URL प्रदान करता है।

• लैम्ब्डा फ़ंक्शंस:

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

नेटलिफाई सभी परिनियोजन ऑर्केस्ट्रेशन का प्रबंधन करता है और एक यूआरएल (उपडोमेन) प्रदान करता है जिसे आप उपयोगकर्ता के अनुकूल यूआरएल के लिए अपने डोमेन से लिंक कर सकते हैं।

उदाहरण के लिए, यह मेरे प्रोजेक्ट के लिए नेटलिफाई यूआरएल है:

https://clinquant-chebakia-f64a5b.netlify.app/

फिर मैंने www को Netlify URL पर इंगित करने के लिए अपने डोमेन को CNAME रिकॉर्ड के साथ कॉन्फ़िगर किया:

जब कोई उपयोगकर्ता https://www.chicagomusiccompass.com/ पर जाता है, तो DNS डोमेन को उसके अंतिम गंतव्य-नेटलाइज़ यूआरएल तक हल करता है?

हालाँकि यहाँ बहुत कुछ हो रहा है, इसका अधिकांश भाग डैशबोर्ड (जीयूआई) के माध्यम से कॉन्फ़िगर किया गया है। मुख्य बात यह समझना है कि सब कुछ कैसे जुड़ा हुआ है; बाकी सिर्फ यूआई को नेविगेट कर रहा है।

स्वचालित अनुसूचित कार्य (क्रॉन जॉब्स)

cron-job.org एक ऐसी सेवा है जो आपको मुफ्त में क्रॉन जॉब चलाने की अनुमति देती है। इस सेटअप में यह इस प्रकार काम करता है:

a) नेटलिफाई डिप्लॉय हुक:
Netlify एक कॉन्फ़िगर करने योग्य वेबहुक (एक यूआरएल एंडपॉइंट) प्रदान करता है, जो ट्रिगर होने पर साइट को फिर से तैनात करता है। यह सुनिश्चित करता है कि जब भी जरूरत हो,chicagomusiccompass.com को स्वचालित रूप से अपडेट किया जा सकता है।

बी) cron-job.org एकीकरण:
cron-job.org के साथ, आप एक क्रॉन जॉब शेड्यूल कर सकते हैं - इस मामले में, इसे दैनिक रूप से चलाने के लिए सेट करें। यह कार्य बस Netlify परिनियोजन हुक को ट्रिगर करता है, जिससे Netlify को हर दिन साइट को फिर से तैनात (अपडेट) करने के लिए प्रेरित किया जाता है।

नोट: जबकि Chicagomusiccompass.com में बैक-एंड घटक भी हैं, यह पोस्ट पूरी तरह से फ्रंट-एंड आर्किटेक्चर पर केंद्रित है।

सारांश

chicagomusiccompass.com एक Next.js एप्लिकेशन है, जो निर्मित होने पर कुछ लैम्ब्डा फ़ंक्शन के साथ एक स्थिर साइट (कोई सर्वर नहीं) उत्पन्न करता है। GitHub रिपॉजिटरी को Netlify के साथ एकीकृत किया गया है, इसलिए रिपॉजिटरी पर प्रत्येक पुश एक नई तैनाती को ट्रिगर करता है। यह प्रक्रिया स्थैतिक साइट का एक नया संस्करण तैयार करती है और लैम्ब्डा फ़ंक्शंस को अपडेट करती है। Netlify इन फ़ाइलों की तैनाती को संभालता है और स्वचालित रूप से आवश्यक नेटवर्क बुनियादी ढांचे का प्रावधान करता है, जिससे एक उपडोमेन के माध्यम से वेब एप्लिकेशन तक पहुंच की अनुमति मिलती है। इसके अतिरिक्त, मैंने Netlify को इंगित करने के लिए कस्टम डोमेन,chicagomusiccompass.com को कॉन्फ़िगर किया है। साइट को दैनिक क्रॉन जॉब द्वारा अद्यतन रखा जाता है जो नेटलिफ़ाइ परिनियोजन हुक को ट्रिगर करता है।

साइट कुछ महीनों से चल रही है और वर्तमान में इसे ज्यादा ट्रैफ़िक नहीं मिल रहा है, लेकिन बुनियादी ढांचे की लागत के मामले में, मैं एक प्रतिशत भी नहीं चुका रहा हूं।

एक पेशेवर सेटिंग में, परियोजना की आवश्यकताओं के आधार पर, मैं एक समान समाधान चुन सकता हूं, खासकर शुरुआती चरणों में। बाद में, जैसे-जैसे व्यवसाय बढ़ता है और जरूरतें विकसित होती हैं, मैं कुछ घटकों को स्थानांतरित कर सकता हूं।

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