📈 👩🏻‍💼 🧚🏾 हरोकू और प्रतिक्रिया: अपने पहले ऐप को तैनात करें ⚖️ 🥋 ✌🏽

सभी को नमस्कार। वसंत के साथ, ओटीयूएस में नए पाठ्यक्रम आए, जिन्हें हम आज शुरू करने जा रहे हैं। पाठ्यक्रम के लिए पहले से ही खुली भर्ती "React.js डेवलपर । " आप 11 मार्च को आयोजित होने वाले नि: शुल्क वेबिनार में पाठ्यक्रम के बारे में अधिक जान सकते हैं । उसी वेबिनार के भाग के रूप में, ReactJS पर एक छोटा सा वेब एप्लिकेशन विकसित किया जाएगा।

और अब हम आपको अपने पहले आवेदन की तैनाती के बारे में लेख पढ़ने का सुझाव देते हैं, जिसे हमारे स्वतंत्र लेखक ने लिखा था।

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

सामान्य रूप से हरोकू क्या है? मुझे उसकी आवश्यकता क्यों है?

हरोकू एक क्लाउड-आधारित प्लेटफ़ॉर्म-जैसा-एक-सेवा (PaS) प्लेटफ़ॉर्म है जो कई प्रोग्रामिंग भाषाओं का समर्थन करता है (और यह वास्तव में दावा करता है और बाहर खड़ा है)। हेरोकू का इतिहास 2007 में शुरू हुआ, और तब रूबी पहली प्रोग्रामिंग भाषा थी। अब यह Java, Node.js, Scala, Clojure, Python, PHP और Go को सपोर्ट करता है।

मुझे इस क्लाउड की आवश्यकता क्यों है? मैं सस्ती होस्टिंग खरीद सकता हूं

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

अपना स्वयं का प्रतिक्रिया एप्लिकेशन बनाना

यह किस तरह का create-react-app टेम्पलेट है ? प्रतिक्रिया अनुप्रयोगों को विकसित करने में थोड़ा सा भी शामिल होना संभव नहीं है और इसके बारे में पता नहीं है। यह टेम्पलेट रिएक्ट, रिएक्ट-डोम, वेबपैक, ESLint "हूड के तहत प्रदान करता है।" बेशक, आप अपने स्वयं के रिएक्ट एप्लिकेशन का निर्माण कर सकते हैं, लेकिन जब आप तैयार बाइक का उपयोग कर सकते हैं तो अपने आप पर निर्भरता के एक समूह के साथ एक जटिल एप्लिकेशन क्यों बनाएं?

आरंभ करने के लिए, सुनिश्चित करें कि आपके पास Node.js स्थापित है ।

एक नया एप्लिकेशन बनाने के लिए, कंसोल में निम्नलिखित कमांड दर्ज करें:

 npx create-react-app test-app
 cd test-app

उपयोगी नोट

, , create-react-app . npm install -g create-react-app. , ( , ), - , react-scripts 3.4.0. , npm uninstall -g create-react-app.

ठीक है, आपने पैकेज दिया और अब आप इसे तैनात करना चाहते हैं। एक घटक के साथ एक साधारण पैकेज को तैनात नहीं करने के लिए जो बॉक्स से बाहर बनाता है, प्रतिक्रिया-ऐप देता है, मैंने एक छोटा टूडू एप्लिकेशन लिखने का फैसला किया, जिसका स्रोत कोड, यदि आप भी अपने आवेदन में भरने की कोशिश करना चाहते हैं, तो यहां पाया जा सकता है । संक्षेप में, राज्य को एक नई और फैशनेबल प्रविष्टियों के रूप में वहां सहेजा जाता है , जहां मामलों का पाठ और उनकी आईडी बचाई जाती है , जो सीधे से उत्पन्न होती है Date.now()। मैंने सामग्री-यूआई प्रतिक्रिया से घटकों के लेआउट का हिस्सा लिया ।

आप इस एप्लिकेशन को अपने पास रख सकते हैं और इसे इसके साथ तैनात कर सकते हैं:

 npm i -D
 npm start

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

अपना फेविकॉन बनाएं

अगर डेटाबेस के साथ कोई काम नहीं होता है, तो भी हमें Node.js सर्वर की आवश्यकता क्यों है ? सर्वर का उपयोग करते हुए, हम फ़ेविकॉन और बाकी सभी कोड देंगे। हमारे रिएक्ट एप्लिकेशन में, सार्वजनिक फ़ोल्डर पर जाएं और वहां से टेम्पलेट favicon.ico को हटा दें। मैं यहाँ से आइकन ले जाऊँगा और इसे सार्वजनिक फ़ोल्डर में स्थानांतरित करूँगा ।

अपना एक्सप्रेस सर्वर बनाएँ

अगला, हम बिल्ड की सेवा के लिए अपना एक्सप्रेस सर्वर बनाते हैं। सीधे एप्लिकेशन फ़ोल्डर में, एक फ़ाइल बनाएं server.jsजिसमें हमारे बैकएंड का कार्य प्रकट होगा।

हम इसमें निम्नलिखित लिखते हैं:

 const express = require('express');
 const favicon = require('express-favicon');
 const path = require('path');
 const port = process.env.PORT || 8080;
 
 //           
 const app = express();
 app.use(favicon(__dirname + '/build/favicon.png')); 
 
 //    
 app.use(express.static(__dirname));
 app.use(express.static(path.join(__dirname, 'build')));
 
 //  
 app.get('/ping', function (req, res) {
  return res.send('pong');
 });
 
 // html
 app.get('/*', function (req, res) {
 res.sendFile(path.join(__dirname, 'build', 'index.html'));
 });
 app.listen(port);

चूंकि हम एक्सप्रेस , एक्सप्रेस-फ़ेविकॉन और पथ पैकेज का उपयोग करते हैं , इसलिए हमें उन्हें स्थापित करने की आवश्यकता है:

 yarn add express express-favicon path -D

हम आरंभpackage.json कमांड को निम्नलिखित में बदलते हैं :

 "start": "node server.js",

रन बनाएँ

अगला, हमें निम्नलिखित कमांड का उपयोग करके एप्लिकेशन बनाने की आवश्यकता है:

 yarn build

यह परीक्षण करना अच्छा होगा कि हमारा एप्लिकेशन सही तरीके से काम कर रहा है। ऐसा करने के लिए, हम भर्ती करते हैं yarn startऔर मूल्यांकन करते हैं कि यह कैसे सही ढंग से काम करता है।

सोर्समैप छिपाएँ

शायद आप नहीं चाहते कि कोई भी आपके स्रोत कोड तक पहुंच सके। इस मामले में, आपको अपनी पहुंच हटाने की आवश्यकता है sourcemap। ऐसा करने के लिए, रिपॉजिटरी में एक फाइल बनाएं .envऔर उसमें मैप जनरेशन को प्रतिबंधित करें:

 GENERATE_SOURCEMAP=false

उपयोगी नोट

Source map ( , , , , - ). — source map, , .

सीधे तौर पर तैनात

यदि आपके पास पहले से ही हरोकू पर खाता नहीं है , तो आपको यहां पंजीकरण करना चाहिए । तैनाती के लिए, आपको यहां से हरोकू सीएलआई भी स्थापित करना होगा । कमांड लाइन पर हरोकू लॉगिन लिखकर इसके संचालन का परीक्षण करें । आगे आपको हरोकू वेबसाइट पर एक रीडायरेक्ट मिलेगा, जहाँ आपको लॉग इन करना होगा।

फिर अपने आवेदन का नाम दर्ज करें। मेरे मामले में, यह todoisakura313 होगा , क्योंकि आप अनुप्रयोग नाम में विशेष वर्ण और अंडरस्कोर का उपयोग नहीं कर सकते हैं:

 heroku create todoisakura313

तब हम निम्नलिखित आदेशों का उपयोग करके अपना निर्माण भेजेंगे:

 npm install
 git add --all
 git commit -m "first commit"
 git push heroku master

ये कमांड आपको निर्भरता जोड़ने, आरंभ gitकरने और एप्लिकेशन डाउनलोड करने की अनुमति देंगे ।

ठीक! सामान्य तौर पर, सब कुछ तैयार है, अब आवेदन पहले से ही पते पर दिखाई देना चाहिए https://< >.herokuapp.com/। आप कंसोल में निम्नलिखित कमांड टाइप करके एप्लिकेशन खोल सकते हैं:

heroku open

अगर कुछ गलत हुआ है, तो पता करें कि टीम के साथ क्या गलत है heroku logs --tail। हालांकि, सामान्य तौर पर, यदि आप इस लेख में दिए गए निर्देशों से विचलित नहीं हुए हैं, तो आपको सफल होना चाहिए।

बस इतना ही! ध्यान देने के लिए आपको धन्यवाद। एक कार्यशील आवेदन यहां पाया जा सकता है , और इसके समाप्त कोड के साथ - यहां ।

और जिन लोगों ने अंत तक पढ़ा है, हम आपको एक और मुफ्त वेबिनार में आमंत्रित करते हैं , जिसके ढांचे में आप फ्रंटेंड के विकास के लिए सबसे लोकप्रिय जेएस फ्रेमवर्क की ताकत और कमजोरियों को जानेंगे, समझें कि कौन से कार्य सबसे उपयुक्त हैं और कौन सा बेहतर है पढ़ने के लिए।

हरोकू और प्रतिक्रिया: अपने पहले ऐप को तैनात करें