हर्कोलू को कोणीय अनुप्रयोग कैसे नियुक्त करें

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

यह लेख आपको अपने कोणीय 2/4 ऐप को आसानी से हरकोको में तैनात करने पर गाइड करेगा, और अधिक महत्वपूर्ण बात यह है कि आम नुकसान से बचा जाए।

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

  • मूल कोणीय परियोजना बनाना
  • गीथहब से हरोकू तक स्वचालित तैनाती की स्थापना
  • हरोकू सर्वर पर कोणीय एप की तैनाती

सेटअप आपका कोणीय अनुप्रयोग

कोणीय सीएलआई का उपयोग करना, चलाकर एक नई परियोजना की स्थापना करना:

एनजी नए डेमो-तैनात

इससे हमारे एप्लिकेशन का नाम डेमो-तैनाती होगा। नई परियोजना को सेटअप करने और npm संकुल स्थापित करने के लिए कुछ मिनटों की अनुमति दें।

एप्लीकेशन प्रारम्भ करें

नई परियोजना में निर्देशिका बदलें और नीचे दिए गए आदेशों का उपयोग करके इसे लॉन्च करें। यह डिफ़ॉल्ट रूप से पोर्ट 4200 पर नए ब्राउज़र में खुलेगा। i.e http: // localhost: 4200।

सीडी डेमो-तैनात
एनजी सेवा

कोणीय ऐप आपका स्वागत करता है

हमारा मूल कोणीय ऐप तैयार है और स्थानीय स्तर पर चल रहा है। जीथब को धक्का देते हैं

इसके GitHub रेपो और पुश बनाएँ

यहां, हम एक ताज़ा गीथब रिपॉजिटरी बना रहे हैं और अपने ऐप को इसमें धकेलेंगे।

  • Github में लॉगिन करें और नया रिपॉजिटरी बनाएं। README के ​​साथ रिपॉजिटरी को शुरू करने की कोई आवश्यकता नहीं है
  • अपने टर्मिनल / CMD में नया टैब खोलें। या चल रहे ऐप को रोकने के लिए Ctrl + C दबाएं। फिर निम्नलिखित कमांड चलाएँ:

git रिमोट ऐड ओरिजिन
जोड़ देना।
जीआईटी कमिट-एम "प्रारंभिक प्रतिबद्ध"
git push -u मूल गुरु

अब हमारा ऐप जीथब पर है।

गिटहब से हरोकू तक स्वचालित तैनाती की स्थापना

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

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

Heroku पर एक नया ऐप बनाएं

एप्लिकेशन बनाएं पर क्लिक करें

परिनियोजन मेनू में, परिनियोजन विधि के तहत, GitHub का चयन करें। यदि आपने पहले से ऐसा नहीं किया है, तो यह आपको अपने github खाते को लॉग इन करने के लिए कहेगा ताकि वह इससे जुड़ सके।

GitHub रिपॉजिटरी का नाम दर्ज करें और खोजें पर क्लिक करें। एक बार रेपो नीचे दिखाए जाने के बाद, कनेक्ट पर क्लिक करें। आहा!

उह, रुको। दो और सरल कदम।

  1. स्वचालित डिप्लॉय के तहत, मास्टर शाखा का चयन करें और स्वचालित डिप्लॉय को सक्षम करें पर क्लिक करें।

2. मैनुअल डिप्लॉयज के तहत, डिप्लॉय ब्रांच पर क्लिक करें। यह हमारे नए कोड को हेरोकू पर धकेलना है।

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

यदि आप दृश्य पर क्लिक करते हैं, तो एक नया टैब खोला जाएगा लेकिन आपका ऐप प्रदर्शित नहीं होगा। चरणों की अगली श्रृंखला आपको अपने कोणीय एप्लिकेशन को कॉन्फ़िगर करने और कताई करने पर मार्गदर्शन करेगी।

Heroku पर उचित रूप से तैनात करने के लिए अपने कोणीय एप्लिकेशन को कॉन्फ़िगर करें

निम्न और आसानी से ठीक से अपने एप्लिकेशन को hitches के बिना परिनियोजित करने के लिए उत्पादन-तैयार चरण हैं।

सुनिश्चित करें कि आपके पास कोणीय क्ली और कोणीय कंपाइलर क्ली का नवीनतम संस्करण है।

इस आदेश को अपने टर्मिनल में चलाकर उन्हें अपने आवेदन में स्थापित करें:

npm स्थापित करें @ कोणीय / cli @ नवीनतम @ कोणीय / संकलक- cli - save-dev

अपने package.json में, कॉपी करें

"@ कोणीय / पंजा": "1.4.9",
"@ कोणीय / संकलक-क्ली": "^ 4.4.6",

निर्भरता से भटकाव तक

Package.json में पोस्ट की स्थापना स्क्रिप्ट बनाएँ

"स्क्रिप्ट्स" के तहत, जैसे पोस्ट स्थापना आदेश जोड़ें:

"बाद की स्थापना": "एनजी बिल्ड-aot -prod"

संपादित करें: आपको पोस्ट स्थापना आदेश चलाने में त्रुटि हो सकती है। इसके बजाय यह काम करता है:

"हेरोकू-पोस्टबिल्ट": "एनजी बिल्ड --प्रोड"

यह हेरोकू को अहेड ऑफ टाइम (एओटी) कंपाइलर का उपयोग करके एप्लिकेशन का निर्माण करने और इसे उत्पादन-तैयार करने के लिए कहता है। यह एक डिस्टर्ब फोल्डर बनाएगा जहां से हमारे ऐप के सभी html और जावास्क्रिप्ट कन्वर्स्ड वर्जन को लॉन्च किया जाएगा।

नोड और एनपीएम इंजन जोड़ें

आपको नोड और एनपीएम इंजन को जोड़ने की आवश्यकता होगी जिसे हरोकू आपके एप्लिकेशन को चलाने के लिए उपयोग करेगा। अधिमानतः, यह वही संस्करण होना चाहिए जो आपके मशीन पर है। तो, नोड -v और npm -v चलाएं ताकि सही संस्करण मिल सके और इसे अपने पैकेज में शामिल करें। इस तरह से फाइल करें:

निर्भरता की प्रतिलिपि टाइप करें।

"टाइपस्क्रिप्ट" की प्रतिलिपि बनाएँ: "निर्भरता" से निर्भरता के लिए "~ 2.3.3" भी हेरोकू का उपयोग करने के लिए टाइपस्क्रिप्ट संस्करण को सूचित करें।

एन्हांस्ड रिज़ॉल्यूशन 3.3.0 स्थापित करें

कमांड एनपीएम इंस्टॉल एन्हांस्ड-resolve@3.3.0 - save-dev चलाएँ

अपने ऐप को चलाने के लिए सर्वर स्थापित करें

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

रन करके एक्सप्रेस सर्वर स्थापित करें:

npm स्थापित एक्सप्रेस पथ - save

एप्लिकेशन के मूल में एक server.js फ़ाइल बनाएं और निम्नलिखित कोड पेस्ट करें।

स्टार्ट कमांड बदलें

Package.json में, "start" कमांड को नोड server.js में बदलें ताकि यह बन जाए:

"स्टार्ट": "नोड server.js"

यहाँ पूरा पैकेज क्या है। जेसन कैसा दिखता है आपके एप्लिकेशन-विशिष्ट पैकेज के आधार पर आपके पास अधिक हो सकते हैं।

GitHub में परिवर्तन पुश करें:

जोड़ देना।
git कमिट-मी "अपडेट्स टू हेरोकू"
जोर का धक्का

इस बिंदु पर, हेरोकू पर आपका एप्लिकेशन स्वतः ही गिटहब से परिवर्तन लेगा और खुद को अपडेट करेगा।

इसके अलावा, यह आपके पैकेज में दिखेगा। पैकेज देखें और इंस्टॉल करें।

यह आपके एप्लिकेशन को स्पिन करने के लिए पोस्टइंस्टॉल और फिर नोड सर्वर.जेएस चलाएगा।

आप गतिविधि टैब की जांच कर सकते हैं और बिल्ड लॉग टी ओ देख सकते हैं कि यह वास्तव में कैसे चलता है।

आपको किसी भी मुद्दे पर नहीं चलना चाहिए। मैंने इस पोस्ट को लिखने के दौरान भी पीछा किया और

वियोला !! हमारा कोणीय ऐप तैयार है और लाइव है!

इस चरण तक का अनुसरण करने के लिए, धन्यवाद।

आप मुझे ट्विटर पर या यहां माध्यम पर अनुसरण कर सकते हैं।

कहो पनीर! ... नीचे टिप्पणी करें, भले ही आप किसी भी मुद्दे का सामना करें या बेहतर तरीके सुझाना चाहते हैं।