पूर्ण स्टैक जावास्क्रिप्ट के साथ फ्रंट और बैक-एंड को अलग करने के तरीके?


31

मान लीजिए कि मेरे पास एक फ्रंट-एंड है, जो ज्यादातर कोणीय, ग्रन्ट और बोवर का उपयोग करके लिखा गया एकल-पृष्ठ अनुप्रयोग है। और मान लीजिए कि मेरे पास एक बैकएंड है, जो ज्यादातर एक ORM के शीर्ष पर बैठा एक REST API है, जो किसी डेटाबेस से ऑब्जेक्ट्स को संग्रहीत / पुनर्प्राप्त करता है, जो कि ग्रंट, एक्सप्रेस और सीक्वेल जैसी चीजों का उपयोग करता है।

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

स्वतंत्र विकास, संस्करणकरण, निरंतर एकीकरण, विकास को धक्का आदि की अनुमति देने के लिए, इसे दो अलग-अलग कोडबेस में अलग करना वांछनीय होगा।

मेरा सवाल यह है कि इसे साफ-सुथरा करने के लिए क्या तरीके हैं? क्या फुल-स्टैक जावास्क्रिप्ट के लिए सर्वोत्तम प्रथाओं की सिफारिश की गई है?

विकल्प # 1 एक अखंड प्रतीत होता है, अर्थात "उन्हें अलग न करें"। समर्थक यह है कि बिल्ड चेन सरल है, और सब कुछ एक ही स्थान पर है - लेकिन कई विपक्ष लगते हैं; स्वतंत्र रूप से संस्करण के लिए कठिन है, एक टूटे हुए सामने का मतलब एक गैर-तैनाती योग्य पीठ, और इसी तरह है।

विकल्प # 2 एक अर्ध-मोनोलिथ लगता है, जहां फ्रंट-एंड बिल्ड चेन के परिणामस्वरूप बैक-एंड के लिए फाइलों का एक गुच्छा लिखने में परिणाम होता है। distसामने के अंत पर निर्देशिका बैक-एंड पर कुछ निर्देशिका को उल्लेख करता है, तो अनिवार्य रूप से जब सामने के छोर minifies, uglifies, आदि, यह पीछे के अंत है, जो सब कुछ चलाता है पर प्रकाशित करने से समाप्त होता है।

विकल्प # 3 पूर्ण-पृथक्करण लगता है: फ्रंट-एंड और बैक-एंड प्रत्येक अलग पोर्ट पर अपने स्वयं के सर्वर चलाते हैं, और वे पूरी तरह से अलग प्रोजेक्ट हैं। दोष यह लगता है कि उन्हें एक दूसरे के बंदरगाहों के बारे में जानने के लिए कॉन्फ़िगर करने की आवश्यकता है; बैक-एंड को कॉर्स को फ्रंट-एंड से अनुमति देनी चाहिए, और फ्रंट-एंड को यह जानने की आवश्यकता है कि उन सभी एंडपॉइंट्स की उम्मीद कहां है।

विकल्प # 4 पूरी चीज़ को एक साथ रिग करने के लिए डॉकटर-कंपोज़ जैसे कुछ का उपयोग करने के लिए हो सकता है।

मुझे यकीन है कि अन्य विकल्प भी हैं। अनुशंसित सर्वोत्तम अभ्यास क्या है?

जवाबों:


18

यह फ्रंट-एंड, बैक-एंड एप्लिकेशन है, जिसमें बीच में एक REST इंटरफेस है। आपका पहले से ही पूरा अलगाव है।

मेरा वोट विकल्प # 3 के लिए है। आप कॉन्फ़िगरेशन के बारे में चिंतित हैं, लेकिन यह संपूर्ण बिंदु है। कॉन्फ़िगरेशन आपको कसकर-युग्मित कोड बाइंडिंग की आवश्यकता के बिना पूर्ण पृथक्करण की अनुमति देता है। यदि आप CORS के बारे में चिंतित हैं, तो सब कुछ एक डोमेन पर रखें। यदि आपके पास CORS होना चाहिए, तो इसका प्रबंधन करने का सबसे अच्छा तरीका एक कॉन्फ़िगरेशन है।

लेकिन यहां कोई "सर्वश्रेष्ठ अभ्यास" नहीं है। सबसे अच्छा अभ्यास वह है जो आपकी विशिष्ट आवश्यकताओं को पूरा करने वाला है।


2
यदि आप दो अलग-अलग सर्वरों पर एक डोमेन पर सब कुछ कैसे डालेंगे? यहां तक ​​कि अगर वे एक ही मेजबान पर भागते हैं, तो उन्हें अलग-अलग बंदरगाहों पर होना पड़ेगा, जिससे वे अलग-अलग मूल बन जाएंगे।
FrobberOfBits

1
यदि कोई सर्वोत्तम अभ्यास नहीं है, तो क्या इस कॉन्फ़िगरेशन के उपलब्ध होने के उदाहरण उपलब्ध हैं?
FrobberOfBits

7
आप अपने आवेदन के सामने एक रिवर्स प्रॉक्सी (nginx) रख दिया और माउंट कर सकते हैं /करने के लिए स्थान localhost:3000(दृश्यपटल सर्वर) और /api/करने के लिए localhost:3001(एपीआई सर्वर)। nginx डिफ़ॉल्ट http पोर्ट को तब सुनेगा।
nvartolomei

@nvartolomei मैं रिवर्स प्रॉक्सी का उपयोग करने से सहमत हूं। क्या मार्ग की जानकारी की तरह बैकएंड, फ्रंट एंड के बीच कुछ जानकारी को साफ-साफ साझा करने का कोई तरीका है? इसके अलावा, क्या सीडीएन के लिए अपने रिवर्स प्रॉक्सी को इंगित करना आसान है?
एंड्रयू ऑब्राइट

6

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

डॉकटर कंटेनर या किसी अन्य परिनियोजन प्रणाली का उपयोग करना ज्यादातर बैकएंड से संबंधित होता है, क्योंकि आपके ऐप के सामने का छोर सिर्फ स्थिर संपत्ति है जिसे हल करने की आवश्यकता है। आप या तो उन परिसंपत्तियों को अपने सर्वर में या कहीं और सीडीएन जैसे क्लाउडफ्रंट की तरह होस्ट कर सकते हैं।

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

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

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.