एक रिएक्ट एप्लिकेशन को तैनात करने के लिए AWS एम्प्लीफाई का उपयोग कैसे करें

= रिएक्ट एप्लिकेशन को तैनात करने के लिए एडब्ल्यूएस एम्प्लीफाई का उपयोग कैसे करें = == AWS एम्प्लीफाई == के साथ रिएक्ट एप्लिकेशन को तैनात करने के लिए एक गाइड ![ ](httpsmiro.medium.com/max/1400/1*pKiBeVwoxaHc_QlhIpVgSA.gif) चूंकि मैंने एक सॉफ्टवेयर इंजीनियर के रूप में परामर्श करना शुरू किया था, इसलिए मैं एक पोर्टफोलियो वेबसाइट बनाना चाहता था जो मैंने व्यक्तिगत और पेशेवर परियोजनाओं पर काम किया है। इस शीतकालीन अवकाश में, मैंने अपनी पोर्टफोलियो साइट को डिजाइन करने, विकसित करने और तैनात करने में समय बिताया, और इस लेख में, मैं आपको बताऊंगा कि मैंने इसे AWS एम्प्लीफाई के साथ कैसे परिनियोजित किया। आप dan-murphy.com पर वेबसाइट और GitHub पर कोड देख सकते हैं। = एक संक्षिप्त पृष्ठभूमि = मेरे अधिकांश पेशेवर काम डेटा-संचालित अनुप्रयोगों के निर्माण और डेटा पाइपलाइनों को सुव्यवस्थित करने पर जोर देते हैं। इन कार्यों को पूरा करने के लिए, मैं नियमित रूप से पायथन और रूबी का उपयोग करता हूं और किसी भी दृश्य कार्य के लिए जावास्क्रिप्ट को शामिल करता हूं। रिएक्ट के साथ और अधिक सहज होने के प्रयास में, मैंने अपनी पोर्टफोलियो वेबसाइट बनाने के लिए रूपरेखा का उपयोग करने का निर्णय लिया। = एप्लिकेशन सेट करना = मैंने जो पहला कदम उठाया, वह यह तय करना था कि एप्लिकेशन को कैसे तैयार किया जाए। मैंने उपयोग किया create-react-app मेरी निर्देशिकाओं के लिए एक आधार टेम्पलेट के रूप में, और फिर कुछ अतिरिक्त फ़ोल्डरों के साथ एप्लिकेशन को फिर से संरचित किया। अंतिम रूप दिया गया सेटअप इस तरह दिखता है: स्रोत अवयव Ã एक Â ¢ Â Â अभिलेखागार अतिरिक्त डेटा Ã एक Â Â Â Â Â Â Â imgs पृष्ठों सामग्री डेटा शैलियों परीक्षण फिक्स्चर कुछ उल्लेखनीय परिवर्तन हैं **अवयव** , और **पेज** निर्देशिका। **शैलियाँ** , : यह वह जगह है जहां मैं एप्लिकेशन के सभी घटकों को संग्रहीत करता हूं। घटकों को एक केंद्रीकृत फ़ोल्डर में संग्रहीत करके, मेरे कोड का पुन: उपयोग करना और पुन: सक्रिय करना आसान है और दूसरों को समझने के लिए अधिक सहज है। मेरी पोर्टफोलियो वेबसाइट बनाने वाले कुछ घटक हैं अवयव हैडर, पाद, और प्रोजेक्टसाइडबार। : यह वह जगह है जहां मैं एप्लिकेशन के लिए अलग पेज बनाता हूं। मैं से आवश्यक घटकों का आयात करता हूं पृष्ठों फ़ोल्डर और फिर उन्हें पेज डिजाइन करने के लिए एकत्रित करें। यहाँ एक उदाहरण है कि मैंने इसके लिए यह कैसे किया घटक होम पेज: : यह वह जगह है जहां मैं एप्लिकेशन के लिए वैश्विक सीएसएस शैलियों को परिभाषित करता हूं। मुझे उपयोग करना अच्छा लगता है शैलियों Styled-componentsव्यक्तिगत घटकों के लिए, लेकिन मैंने यह भी पाया है कि वैश्विक शैलियों का निर्माण करना उपयोगी है जो प्रत्येक पृष्ठ पर उपलब्ध हैं। अंत में, अनुरोधों को सही पृष्ठों पर मैप करने के लिए, हम उपयोग करते हैं प्रतिक्रिया-राउटर-डोम। मार्गों में परिभाषित किया गया है App.js फ़ाइल जैसा कि नीचे दिखाया गया है: यह मैप करेगा मुखपृष्ठ, /परियोजनाओं के लिए अनुरोध करता है प्रोजेक्ट्सपेज, / अनुरोधों के बारे में पेज के बारे में, और / बुकशेल्फ़ अनुरोध करता है बुकपेज। अब जबकि एप्लिकेशन का विकास पूरा हो गया है, हमें इसे तैनात करने की आवश्यकता है ताकि अन्य इसका उपयोग कर सकें! / अनुरोध करता है = एडब्ल्यूएस प्रवर्धित के साथ परिनियोजन = == सिंहावलोकन == रिएक्ट वेबसाइट को तैनात करने के कई तरीके हैं, लेकिन मैंने पाया है कि इसका उपयोग करना सबसे सरल है **AWS Amplify Amplify को मोबाइल और वेब ऐप बनाने का सबसे तेज़ और आसान तरीका बताया गया है। इसे पूरा करने के लिए, AWS एक सर्वर स्थापित करने, निर्भरताएँ स्थापित करने और अपनी वेबसाइट का उत्पादन निर्माण करने की सभी जटिलताओं को एक्सट्रपलेशन करता है, जिससे आप केवल एक सहज UX बनाने पर ध्यान केंद्रित कर सकते हैं। AWS एम्प्लीफाई डेटा-संचालित अनुप्रयोगों के लिए क्या प्रदान करता है, इसके बारे में अधिक जानने के लिए (विशेष रूप से, **फ्रंटएंड** और **बैकएंड वाली वेबसाइटें उनके दस्तावेज़ देखें। == अपने रिपॉजिटरी को जोड़ना == एडब्ल्यूएस एम्प्लीफाई पर अपने वेब ऐप को होस्ट करने के लिए, आपको सबसे पहले अपने सोर्स कोड वाले रिपॉजिटरी को कनेक्ट करना होगा। ऐसा करने के लिए, आप पर नेविगेट कर सकते हैं *AWS एम्प्लिफाई* *प्रारंभ करना* **माय वेब ऐप को होस्ट करें और **कनेक्ट ऐप रेपो *पेज पर क्लिक करें,*पेज पर स्क्रॉल करें![ ](httpsmiro.medium.com/max/1400/1*2OLIf9dDvf2ZDqjhXUXuGw.png ) फिर, आपको एक अलग पृष्ठ पर पुनर्निर्देशित किया जाएगा जहां आप अपने स्रोत कोड वाले रिपॉजिटरी को कनेक्ट कर सकते हैं। इस उदाहरण के लिए, मैं GitHub को चुनूंगा, लेकिन AWS Amplify भी BitBucket, GitLab, AWS CodeCommit और यहां तक कि Git प्रदाता के बिना तैनाती का भी समर्थन करता है। ![ ](httpsmiro.medium.com/max/1400/1*Dq8nN8mntiNegYIXarbtAw.png) सफल प्राधिकरण के बाद, आप चुन सकते हैं कि आप किस रिपॉजिटरी को परिनियोजित करना चाहते हैं और उस शाखा का चयन कर सकते हैं जिसका उपयोग AWS Amplify को उत्पादन बिल्ड के लिए करना चाहिए। ![ ](httpsmiro.medium.com/max/1400/1*OOlYA6q2eCplw4hW2IQP8Q.png) उसके बाद, क्लिक करें **Next** और AWS आपको अपनी *बिल्ड* और *टेस्ट* सेटिंग कॉन्फ़िगर करने के लिए कहेगा। AWS द्वारा प्रदान किया जाने वाला आधार टेम्प्लेट नीचे दिखाया गया है। संस्करण 1 फ़्रंट एंड: चरण: प्रीबिल्ड: आदेश: - एनपीएम इंस्टॉल बिल्ड: आदेश: - एनपीएम रन बिल्ड कलाकृतियाँ: आधार निर्देशिका: निर्माण फ़ाइलें: - कैश: पथ: - नोड_मॉड्यूल इसके अतिरिक्त, के तहत **उन्नत सेटिंग** टॉगल, आप परिवेश चर और एक कस्टम बिल्ड कंटेनर सेट कर सकते हैं. अंत में, अपने एप्लिकेशन की सेटिंग की समीक्षा करने के बाद, क्लिक करें **सेव एंड डिप्लॉय **और **AWS आपके एप्लिकेशन को कॉन्फ़िगर और तैनात करना शुरू कर देगा। जब AWS की तैनाती पूरी हो जाती है, तो आप एम्प्लिफाई होम पेज पर नेविगेट कर सकते हैं और देख सकते हैं कि आपका नया-तैयार किया गया एप्लिकेशन AWS आपके एप्लिकेशन को कॉन्फ़िगर और तैनात करना शुरू कर देगा। जब एडब्ल्यूएस की तैनाती पूरी हो जाती है, तो आप एम्प्लिफाई होम पेज पर नेविगेट कर सकते हैं और अपने नए तैनात आवेदन को देख सकते हैं। अब, आइए URL का उपयोग करके अनुकूलित करें **एडब्ल्यूएस प्रवर्धित डोमेन प्रबंधन == एक कस्टम डोमेन जोड़ना == कस्टम डोमेन जोड़ना शुरू करने के लिए, बाएँ साइडबार पर नेविगेट करें और चुनें **डोमेन प्रबंधन![ ](httpsmiro.medium.com/max/1400/1*fo8ZsKK7c3QvAwpjzMXcWg.png) **डोमेन प्रबंधन** सेटिंग। फिर, चयन करें **डोमेन जोड़ें **डोमेन कॉन्फ़िगर करें **अपना डोमेन नाम दर्ज करें (जैसा कि नीचे दिखाया गया है), और क्लिक करें**अपना डोमेन नाम दर्ज करें (जैसा कि नीचे दिखाया गया है), और क्लिक करें![ ](httpsmiro.medium.com/max/1400/ 1*e57WryLPTPPC7Ro-_d5XAgQ.png) इसके बाद, आप अपने डोमेन के लिए आवश्यक कोई भी रीडायरेक्ट सेट कर सकते हैं। उदाहरण के लिए, निम्नलिखित उदाहरण में, मैं httpsdan-murphy.com से httpswww.dan-murphy.com पर रीडायरेक्ट बनाता हूं। ![ ](httpsmiro.medium.com/max/1400/1*yvEwLJmVK41H7ZPqDLB9Tg.png) अंत में, आपका कस्टम डोमेन सही तरीके से कॉन्फ़िगर होने के बाद, AWS आपको प्रदान करेगा **सत्यापन प्रमाणपत्र आप इस प्रमाणपत्र को AWS प्रमाणपत्र प्रबंधक कंसोल में भी देख सकते हैं। == CNAME रिकॉर्ड जोड़ना == अपने कस्टम डोमेन को कॉन्फ़िगर करने का अंतिम चरण एक CNAME रिकॉर्ड जोड़ना है। निम्नलिखित उदाहरण में मैं Google Domains का उपयोग करता हूं, लेकिन मौलिक अवधारणाएं विभिन्न डोमेन रजिस्ट्रारों में समान रहती हैं। सबसे पहले नीचे स्क्रॉल करें Google Domains में **कस्टम संसाधन रिकॉर्ड**. एक *CNAME *रिकॉर्ड बनाएं जो सभी सबडोमेन को AWS एम्प्लीफाई डोमेन की ओर इंगित करता है: नाम: सबडोमेन नाम दर्ज करें। यदि उपडोमेन www.domain.com है, तो दर्ज करें। यदि यह www app.domain.com है, तो ऐप दर्ज करें। डेटा: डोमेन प्रबंधन पृष्ठ पर, कार्रवाइयाँ क्लिक करें और फिर DNS रिकॉर्ड्स देखें चुनें. फिर, DNS प्रदाता कॉन्फ़िगर करें के अंतर्गत उपलब्ध AWS एम्प्लीफ़ाय डोमेन दर्ज करें। ![ ](httpsmiro.medium.com/max/1400/1*SSRoAAkYjf5dT2rD-kmEQw.png) **डोमेन प्रबंधन**पेज, **कार्रवाइयां चुनें **डीएनएस रिकॉर्ड देखें** कुल मिलाकर, कस्टम संसाधन रिकॉर्ड निम्न जैसा दिखेगा: ![ ](httpsmiro.medium.com/max/1400/1*bZh8t77JswwonKCFyp7tog.png) अगला, एक और जोड़ें *CNAME* रिकॉर्ड जो AWS सर्टिफिकेट मैनेजर सत्यापन सर्वर की ओर इशारा करता है। मान्य AWS प्रमाणपत्र प्रबंधक आपके एप्लिकेशन के लिए TLS को संभालता है: नाम: सत्यापन सर्वर दर्ज करें एक Â ¢ Â Â Â s उपडोमेन। यदि आपके डोमेन के स्वामित्व को सत्यापित करने के लिए DNS रिकॉर्ड _1234.example.com है, तो केवल _1234 दर्ज करें। डेटा: ACM सत्यापन प्रमाणपत्र दर्ज करें। यदि सत्यापन सर्वर _1234.abcdefg.acm-validations.aws है, तो _1234.abcdefg.acm-validations.aws दर्ज करें। आपके सत्यापन प्रमाणपत्र की सभी जानकारी AWS प्रमाणपत्र प्रबंधक कंसोल में पाई जाती है। दूसरे के बाद *CNAME* जोड़ा गया है, आपके कस्टम रिकॉर्ड इस तरह दिखने चाहिए: ![ ](httpsmiro.medium.com/max/1400/1*79yex2fObLiK0Q0f0X4zeA.png) अंत में, चलो एक जोड़ें **सिंथेटिक रिकॉर्ड** सबडोमेन फ़ॉरवर्ड सेट अप करने के लिए: सबडोमेन: डोमेन URL दर्ज करें: www. ![ ](httpsmiro.medium.com/max/1400/1*xi6ivE7Vsfz9AheFAHxPZQ.png) = लपेटना = कुल मिलाकर, इस लेख में, हमने सीखा कि कैसे रिएक्ट एप्लिकेशन की संरचना की जाए और उन्हें AWS एम्प्लीफाई के साथ तैनात किया जाए। सबसे पहले, हमने चर्चा की कि प्रतिक्रिया एप्लिकेशन को कैसे संशोधित किया जाए *घटक* *पृष्ठ* फ़ोल्डर। फिर, हमने **AWS Amplify** और इसके साथ स्थिर और डेटा-संचालित एप्लिकेशन को कैसे परिनियोजित किया जाए, इसके बारे में सीखा। अंत में, हमने अपने एप्लिकेशन के डोमेन को कस्टमाइज़ करने के लिए **AWS एम्प्लीफाई डोमेन मैनेजमेंट** और **Google Domains ** का उपयोग करने के बारे में जाना। **और और यदि आपके पास इस लेख या मेरी पोर्टफोलियो साइट पर कोई प्रश्न, चिंता या प्रतिक्रिया है, तो बेझिझक टिप्पणी करें या मुझे ईमेल करें *[email protected]*. पढ़ने के लिए धन्यवाद!