कोणीय - बैकएंड सर्वर पर प्रॉक्सी कैसे करें

एक उदाहरण के साथ बैकएंड एपीआई कॉल के लिए एक प्रॉक्सी को कॉन्फ़िगर करने का तरीका बताते हुए।

Unsplash पर Jens Herrndorff द्वारा फोटो

कोणीय ऐप में, हम अक्सर विकास के चरण में बैकएंड सर्वर से बात करते हैं, हम इस लेख में सभी परिदृश्यों का पता लगाएंगे। यहां वे विषय हैं जिन्हें हम कवर करते हैं।

  • क्या आसन्न है?
  • उदाहरण परियोजना
  • xy.config.json विकल्प
  • कोणीय सीएलआई के साथ प्रॉक्सी सेटअप
  • कॉन्फ़िगर करने के विभिन्न तरीके
  • पथ URL फिर से लिखें
  • एक एपीआई समापन बिंदु के लिए कई अनुप्रयोग प्रविष्टियों
  • एकाधिक समापन बिंदुओं के साथ कई ऐप प्रविष्टियां
  • सारांश

क्या आसन्न है?

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

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

बाद के वर्गों में, हम देखेंगे कि हम इसे और अन्य विकल्पों को कैसे पूरा कर सकते हैं।

सभी URL को सम्‍मिलित करना / api से शुरू होता है

उदाहरण परियोजना

उदाहरण परियोजना के लिए इन आदेशों का पालन करें और आप कोणीय सीएलआई प्रॉक्सी सेटअप के लिए तैयार हैं।

// परियोजना का क्लोन तैयार किया
git क्लोन https://github.com/bbachi/angular-proxy-example
// नोड सर्वर के लिए निर्भरता स्थापित करें
npm स्थापित करें
// सीडी से ui
सीडी appui
// एप्लिकेशन ui निर्भरता स्थापित करें
एनपी स्थापित करें

एक बार जब आप सभी निर्भरताएं स्थापित करते हैं, तो आप क्रमशः 4200 और 3070 पर दोनों कोणीय ऐप और नोड जेएस सर्वर शुरू कर सकते हैं।

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

कोणीय एप 4200 पर चलता है

आइए इस कमांड npm के साथ सर्वर शुरू करें और 3070 पोर्ट पर इस एपीआई का परीक्षण करें।

पोर्ट 3070 पर एपीआई चल रहा है

xy.config.json विकल्प

लक्ष्य: यह वह जगह है जहाँ हमें बैकएंड URL को परिभाषित करने की आवश्यकता है।

pathRewrite: पथ को संपादित करने या फिर से लिखने के लिए हमें इस विकल्प का उपयोग करने की आवश्यकता है

changeOrigin: यदि आपका बैकएंड API लोकलहोस्ट पर नहीं चल रहा है, तो हमें इस ध्वज को सही बनाने की आवश्यकता है।

logLevel: यदि आप जांचना चाहते हैं कि प्रॉक्सी कॉन्फ़िगरेशन ठीक से काम कर रहा है या नहीं, यह ध्वज डिबग होना चाहिए।

बायपास: कभी-कभी हमें प्रॉक्सी को बायपास करना पड़ता है, हम इसके साथ एक फ़ंक्शन को परिभाषित कर सकते हैं। लेकिन इसे प्रॉक्सी.config.js के बजायxy.config.json में परिभाषित करना चाहिए।

कोणीय सीएलआई के साथ प्रॉक्सी सेटअप

अब ऐप और सर्वर विभिन्न बंदरगाहों पर चल रहे हैं। आइए इन के बीच संचार के लिए एक प्रॉक्सी सेट करें।

पहली चीज जो आपको चाहिए वह है प्रॉक्सी ।config.json। हम सभी URL के लिए लक्ष्य को परिभाषित कर रहे हैं / यहाँ से शुरू होता है।

दूसरी बात यह है कि हमें पता चल गया है कि हमारे पास यह प्रॉक्सी है ।config.json। हम नीचे दिए गए ऐप को शुरू करते समय प्रॉक्सी-कॉन्फिग फ्लैग को जोड़कर ऐसा कर सकते हैं। एक बार शुरू करने के बाद, हम संदेश देख सकते हैं कि सभी URL जो / api से शुरू हो रहे हैं, पोर्ट 3070 पर चल रहे नोडज सर्वर पर पुनर्निर्देशित होंगे।

npm शुरू स्क्रिप्ट

अब हम ऐप का परीक्षण कर सकते हैं और सर्वर से सेटिंग देख सकते हैं

सर्वर से आने वाली सेटिंग्स

कॉन्फ़िगर करने के विभिन्न तरीके

कोणीय प्रोजेक्ट में प्रॉक्सी कॉन्फिगर को कॉन्फ़िगर करने का एक अन्य तरीका कोणीय.जॉन में परिभाषित है।

प्रॉक्सीकोनफिग एंगुलर.जसन में

आइए यहाँ पर संक्षेप में बताएं

  • पैकेज में इस स्क्रिप्ट को एनजी सर्व - प्रॉक्सी-कॉन्फिग प्रॉक्सी.कॉन्फ़.जॉन जोड़ें। पैकेज में आरंभ करें
  • ऊपर की तरह सेक्शन सेक्शन के तहत angular.json में परिभाषित करें।

पथ URL फिर से लिखें

जब भी URL में कोई परिवर्तन होता है, हम अक्सर बैकएंड सर्वर के समापन बिंदु के पथ को फिर से लिखते हैं। हम पाथराइट के साथ ऐसा कर सकते हैं।

PathRewrite विकल्प को समझने दें। उदाहरण के लिए, हमारे बैकएंड URL / एपीआई / सेटिंग्स को / एपीआई / ऐप / सेटिंग्स में बदल दिया जाता है और हम उत्पादन में जाने से पहले विकास में परीक्षण करना चाहते हैं। हम नीचे दिए गए विकल्प pathRewrite के साथ इसे प्राप्त कर सकते हैं।

इसलिए, हम / एपी / एप / सेटिंग्स / सेटिंग्स और / एपी / यूजर्स / यूजर्स को रीराइट / एपि / सेटिंग कर रहे हैं।

ऐप को शुरू करते समय यहां कंसोल आउटपुट है।

कोणीय प्रॉक्सी पुनर्लेखन URL पथ

एक एपीआई समापन बिंदु के लिए कई अनुप्रयोग प्रविष्टियों

कभी-कभी हमारे ऐप में सेवाओं के साथ कई मॉड्यूल होते हैं। हमारे पास एक ऐसा परिदृश्य हो सकता है जहां कई प्रविष्टियाँ या सेवाएँ समान API समापन बिंदु कहेंगे।

उस स्थिति में, हमेंxy.config.json के बजाय प्रॉक्सी.config.js को परिभाषित करने की आवश्यकता है। इसे कोणीय.जसन में जोड़ना न भूलें।

angular.json

एकाधिक समापन बिंदुओं के साथ कई ऐप प्रविष्टियां

हमने देखा है कि एक ही समापन बिंदु पर कई प्रविष्टियों को कैसे परिभाषित किया जाए। आइए कई प्रविष्टियों को एकाधिक समापन बिंदु परिदृश्य पर देखें।

कई एपीआई के लिए प्रॉक्सी

उदाहरण के लिए, हमारे पास 3700, 3800 और 3900 बंदरगाहों पर चलने वाले तीन एपीआई हैं और आपके एपीपी को इन एपीआई से बात करनी चाहिए।

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

सारांश

  • कोणीय में, प्रॉक्सी का उपयोग ज्यादातर विकास के वातावरण में सर्वर और UI के बीच संचार को सुविधाजनक बनाने के लिए किया जाता है।
  • हमें विभिन्न बंदरगाहों पर बैकएंड सर्वर और यूआई चलाने की आवश्यकता है।
  • Proxy.config.json वह फाइल है जो बैकएंड एपीआई यूआरएल के संबंध में सभी जानकारी रखती है।
  • हमें यह सुनिश्चित करने की आवश्यकता है कि सफल संचार के लिए कोणीय ऐप और बैकएंड विभिन्न बंदरगाहों पर चल रहे हैं।
  • कॉन्फ़िगर करने के दो तरीके हैं एक कोणीय में जोड़ना है। Json और दूसरा शुरू स्क्रिप्ट में एक प्रॉक्सी-कॉन्फिगर ध्वज जोड़ रहा है।
  • हम विकल्प pathRewrite के साथ पथ को फिर से लिख सकते हैं।
  • हम प्रॉक्सी के साथ एक बैकएंड एपीआई के लिए कई प्रविष्टियों को प्रॉक्सी कर सकते हैं।
  • हम एक से अधिक बैकएंड में कई प्रविष्टियों को प्रॉक्सी कर सकते हैं।

कोणीय में संचार पैटर्न की जाँच करें और पता करें कि आप कोणीय में कितने तरीके से संवाद कर सकते हैं।

आप यूनिट टेस्टिंग एंगुलर में कस्टम मैचर्स जोड़ सकते हैं। यहां जानिए कैसे

पढ़ने के लिए धन्यवाद।