👨🏾 🧘🏿 🐪 क्लाउड में ऑटो-अपडेटेड एसएसएल के साथ Node.js https सर्वर होस्टिंग और मैंने विकास चक्र कैसे सेट किया (+ गिट, प्रतिक्रिया) 🐩 🚂 🆗

प्रस्तावना

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

मैंने यह नहीं बताया कि मैंने जावास्क्रिप्ट, नोड.जेएस, प्रतिक्रिया, एचटीएमएल, सीएसएस आदि का अध्ययन कैसे किया है, हम इस समय आगे बढ़ेंगे कि मैं इस समय क्या कर रहा हूं, मैं आपके साथ क्या साझा करना चाहता हूं और निश्चित रूप से, विशेषज्ञों की रचनात्मक आलोचना सुनें।

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

होस्टिंग विकल्प

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

जेलस्टिक : सुंदर और उपयोगकर्ता के अनुकूल इंटरफेस, सब कुछ सहज, स्केलेबल और समझने योग्य लगता है। फिर भी, मुझे स्थापित करने में कठिनाइयों का सामना करना पड़ा (किसी कारण से nginx vps से काम नहीं करना चाहता था, केवल उनके अलग-अलग मॉड्यूल के साथ) और SSL (और स्वचालित अपडेटिंग) को मानक तरीकों से रूसी-बोलने वाले डोमेन से जोड़ना (वे बग को ठीक करने का वादा किया था, लेकिन इंतजार नहीं करना चाहते)

क्लाउड होस्टिंग REG.RU : मेरे पास भी एक डोमेन है, इसलिए समाधान तर्कसंगत लग रहा था, लेकिन उनके पास PostgreSQL अलग से कॉन्फ़िगर नहीं किया गया था, और जब से मैं डेटाबेस प्रशासन से संपर्क नहीं करना चाहता था, मैंने आगे देखना शुरू कर दिया।

AWS और Google क्लाउड : मैंने इसकी कोशिश की, सब कुछ ठीक लग रहा है, लेकिन मुझे हमारे "अद्भुत" कानूनों और रूसी संघ में सर्वर पर उपयोगकर्ता डेटा डालने की आवश्यकता याद है। दुर्भाग्य से, इन लोगों के पास रूसी संघ में सर्वर नहीं थे। एक वकील नहीं, लेकिन पाप से रूसी संघ में सर्वर के साथ बादलों की तलाश करने का फैसला किया। यदि आपके आवेदन में कानून के साथ समस्याएं होने की संभावना नहीं है, तो एक अच्छा विकल्प।

यद्यपि रूसी संघ में सर्वरों के साथ बादल थे, फिर भी मुझे कुछ ऐसा चाहिए था जो मुझे पोस्टग्रेक्यूएल प्रशासन में गोता लगाने से बचाएगा। आवेग थोड़ी देर पहले आया था यैंडेक्स। जो उपलब्ध हो गया था, मैंने कोशिश की, ऐसा लगता है कि सब कुछ सरल और सुविधाजनक है, इसलिए मैंने उन्हें अभी के लिए रोक दिया। यह ध्यान देने योग्य है कि PostgreSQL होस्टिंग तुरंत 1core और 4GB रैम के साथ आती है, जिसकी लागत प्रति माह लगभग 2k रूबल है, इसलिए विकास और कम भार के लिए, मैं ~ 300r के लिए VPS पर PostgreSQL चलाने की योजना बनाता हूं, और लोड में वृद्धि के साथ डेटाबेस को स्थानांतरित करता हूं। Yandex प्रशासन और अद्यतन करने में लगा हुआ है।

Yandex.Cloud की स्थापना

आभासी निजी बादल

1) अपनी साइट के लिए एक निर्देशिका बनाएँ:

2) एक वर्चुअल प्राइवेट क्लाउड बनाएं:

वर्तमान चरण में वह मुझे जो मुख्य चीज देता है, वह बाहर से निर्मित संसाधन तक पहुंचने के लिए आईपी है। यदि आवश्यक हो, तो मैं सबनेटिक, ज़ोन, आइसोलेशन और फ़ॉल्ट टॉलरेंस से सतही रूप से परिचित हो जाऊंगा।

3) एक सबनेट बनाएं और इसे एक आंतरिक आईपी असाइन करें (जैसा कि मैं इसे समझता हूं, यह एक स्थानीय नेटवर्क की तरह है)

4) आईपी टैब पर जाएं और अपने आप को एक स्थिर आईपी आरक्षित करें।

उस पर हम घर और अन्य स्थानों से जुड़ेंगे। आप शायद गतिशील के साथ काम कर सकते हैं, लेकिन मुझे समझ नहीं आया कि यह किन मामलों में बदलता है।

संगणक मेघ

यहां हमारे पास गणना होगी :) अर्थात, हम लिनक्स के साथ एक वर्चुअल मशीन बनाएंगे (मैंने ubuntu 18.04 चुना), नोड.जेएस एप्लिकेशन और पोस्टग्रेक्यूएल स्थापित करें।

हम एक वीएम बनाने के लिए क्लिक करते हैं, सभी सेटिंग्स को कम से कम खोल देते हैं, क्योंकि विकास के दौरान कोई लोड नहीं होगा (जब हमारा आवेदन जारी किया जाता है, तो थोड़ा और मोड़ दें, ठीक है, हम रेखांकन द्वारा निगरानी करेंगे)।

SSH

समस्या है कि मैं इस स्तर पर सामना किया है SSH:

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

C: \ Program Files \ PuTTY \ puttygen.exe चलाएँ

हम जेनरेट बटन को दबाते हैं और माउस को जनरेट की की (जैसे मैं इसे समझता हूं) को यादृच्छिकता देता हूं। इसके बाद, टेक्स्ट लाइन में कहीं ssh-rsa से शुरू होने वाली लाइन को कॉपी करें और सेव प्राइवेट की, सेव पब्लिक की। पाठ फ़ाइल में कॉपी की गई कुंजी को Yandex Yandex पृष्ठ की कुंजी के SSH फ़ील्ड में डाला जाता है। हम रूट को लॉगिन के रूप में निर्दिष्ट करते हैं, अन्यथा आपके पास एप्लिकेशन की ग्राफिक फाइल सिस्टम के साथ काम करते समय पहुंच नहीं होगी, जिसके द्वारा आप घर / काम से क्लाउड से कनेक्ट करेंगे (शायद एक रास्ता है, लेकिन मुझे समझ नहीं आया)।
जैसा कि उल्लेख किया गया है, यह रूट का उपयोग न करने के लिए बेहतर है ताकि चीनी बॉट आपके क्लाउड के लिए पासवर्ड न उठाएं, लेकिन चूंकि Yandex.cloud एक्सेस केवल SSH के माध्यम से है, आप इस तरह से रह सकते हैं।

एक होस्टिंग पर एक एप्लिकेशन को विशेष रूप से एक गैर-रूट उपयोगकर्ता द्वारा लॉन्च किया जाना चाहिए, ताकि हमलावरों को आपके आवेदन में संभावित कमजोरियों के माध्यम से दुर्भावनापूर्ण कोड को निष्पादित करने की अनुमति न दें।

हम एक पीसी से क्लाउड से कनेक्ट करते हैं और एक मुफ्त एसएसएच क्लाइंट का चयन करते हैं

मानक पुट्टी आपको केवल कमांड लाइन पर काम करने की अनुमति देता है, और जब से मैं विंडोज़ उपयोगकर्ता से परिचित नहीं हूं, मैंने एक छद्म-अन्वेषक के साथ एक ग्राहक की तलाश शुरू कर दी। सबसे पहले मैंने Mobaxterm की कोशिश की, लेकिन निष्क्रियता के कुछ समय बाद यह बंद हो जाता है, खोजकर्ता पूरी तरह से जमा देता है, इसलिए अब मैं बिटविश ssh के साथ काम कर रहा हूं और अब तक मैं Mobaxterm जैसी समस्याओं को नहीं देखता।

बिटविश ssh को कॉन्फ़िगर करें

यहां सर्वर में> होस्ट फ़ील्ड हमारे बाहरी आईपी क्लाउड को इंगित करता है। पोर्ट 22. क्लाइंट कुंजी प्रबंधक> आयात करें पर क्लिक करें और उसमें पहले से निर्मित निजी कुंजी निर्दिष्ट करें। आपको अभी भी एक महत्वपूर्ण वाक्यांश की आवश्यकता हो सकती है, कुछ ऐसा चुनें जिसे आप भूल नहीं पाएंगे। इस विंडो को बंद करें और प्रमाणीकरण क्षेत्र में उपयोगकर्ता नाम निर्दिष्ट करें: रूट, विधि publick कुंजी, क्लाइंट कुंजी - पहले से आयातित एक का चयन करें। लॉगिन पर क्लिक करें और अगर हमने सब कुछ सही ढंग से किया है, तो क्लाउड से कनेक्ट करें:

Node.js स्थापित करें

यहां मैं digitalocean.com के निर्देशों का उपयोग करने की सलाह देता हूं, वे बहुत विस्तृत हैं और कई रूसी में हैं। आमतौर पर मैं Google “digitalocean ubuntu 18.04 नोड .js” या जो कुछ भी आप वहां स्थापित या कॉन्फ़िगर करना चाहते हैं।

Node.js कैसे स्थापित करें, यहाँ पढ़ा जा सकता है ।

संक्षेप में, हम नोडसोर्स पर जाते हैं (यहां नोड के नवीनतम संस्करण। जेएस इंस्टॉल किए जा सकते हैं), यहां से पत्ती दें:

बारी-बारी से कमांड को कॉपी करें और चलाएं:

curl -sL https://deb.nodesource.com/setup_11.x | sudo -E bash - sudo apt-get install -y nodejs

हम जांच करते हैं कि यह टीम द्वारा कैसे स्थापित किया गया था

 nodejs -v

हम नोड.जेएस का संस्करण देखेंगे

 npm -v

हमें node.js. के लिए पैकेज मैनेजर का संस्करण दिखाया जाएगा

इसके बाद, / opt / mysuperapp फ़ोल्डर पर जाएँ (my_super_app_name - आपको यह फ़ोल्डर बनाना होगा)। ऑप्टॉग डायरेक्टरी को लंबे गोलगप्पे के बाद आवेदन के स्थान के रूप में चुना गया था "जहां उबंटू में एप्लिकेशन की नोड्स.जेएस फाइलें डालने के लिए उपयुक्त है"।

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

 const http = require('http'); const hostname = 'localhost'; const port = 80; const server = http.createServer((req, res) => { res.statusCode = 200; res.setHeader('Content-Type', 'text/plain'); res.end('Hello World!\n'); }); server.listen(port, hostname, () => { console.log(`Server running at http://${hostname}:${port}/`); });

पोर्ट 80 http अनुरोधों के लिए है, 443 https के लिए है। जबकि हमारे पास http पर एक सर्वर है।

हम सब कुछ बचाते हैं और कमांड चलाते हैं:

 node server.js

कंसोल को लाइन प्रदर्शित करना चाहिए 'सर्वर लोकलहोस्ट पर चल रहा है: 80 /'

अब आप एक ब्राउज़र खोल सकते हैं, एक बाहरी आईपी दर्ज कर सकते हैं (आपके ubuntu VM के Yandex क्लाउड में) और हम देखेंगे "हैलो वर्ल्ड!"

हम सब कुछ सुविधा से या विकास चक्र के साथ करते हैं

सब कुछ काम करने लगता है, लेकिन हमने हर समय क्लाउड से कनेक्ट करने का काम नहीं किया है। इसके अलावा, अचानक हम भविष्य में अकेले काम नहीं करेंगे।

Github

गितुब वह जगह है जहां हमारे आवेदन का कोड झूठ होगा। संक्षेप में, एक व्यक्ति के लिए काम का सिद्धांत इस प्रकार है:

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

सब कुछ तेज, सरल और सुविधाजनक है।

वास्तव में जीथब पर रजिस्टर करें और हमारे आवेदन के लिए एक निजी भंडार बनाएं (यह केवल हमारे लिए उपलब्ध होगा):

आवेदन डाउनलोड करने के लिए लाइन github.com/ReTWi/mysuperapp.git पर कॉपी करें।

हम बिटविइस कमांड लाइन पर लौटते हैं, एप्लिकेशन को ctrl + c (यदि यह अभी भी काम करता है) दबाकर बंद कर दें।
/ ऑप्ट निर्देशिका पर जाएं और हमारे द्वारा बनाए गए एप्लिकेशन के साथ फ़ोल्डर को हटा दें

Git वह है जिसका उपयोग हम अपने एप्लिकेशन को github, और वहां से होस्टिंग या अन्य पीसी पर अपलोड करने के लिए करेंगे। चर्चा के लिए Git एक अलग विषय है, इसलिए अभी के लिए इस पर ध्यान दें।
निम्नलिखित कमांड के साथ होस्टिंग पर गिट स्थापित करें:

 sudo apt update sudo apt install git

जांचें कि क्या सब कुछ अच्छी तरह से स्थापित है:

 git --version

गिट संस्करण दिखाई देना चाहिए।

हम गिट डेटा में भरते हैं (मुझे समझ नहीं आया कि क्यों, लेकिन जाहिर है कि कुछ उबाऊ चेतावनी हो सकती है)।

 git config --global user.name "Your Name" git config --global user.email "youremail@domain.com"

अंत में, हम अपने एप्लिकेशन को कमांड के साथ होस्टिंग में अपलोड करते हैं:
(आपके आवेदन का लिंक होना चाहिए)

 git clone https://github.com/ReTWi/mysuperapp.git

एक नया mysuperapp / ऑप्ट निर्देशिका में दिखाई देगा, जहां हमारे एप्लिकेशन फ़ाइल को github से डाउनलोड किया जाएगा।

अब पीसी के लिए समान दोहराने और पीसी श्रृंखला (अलग) -> जीथब -> होस्टिंग को बंद करने का समय है

पीसी पर नोड.जेएस स्थापित करें।

विजुअल स्टूडियो कोड

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

मेरे द्वारा उपयोग किए जाने वाले प्लगइन्स इस प्रकार हैं:

पीसी के लिए गिट स्थापित करें ।
वीटीकोड में सीटीएल + शिफ्ट + `या टर्मिनल> नए टर्मिनल का उपयोग करके एक कंसोल खोलें

विषयांतर:

विंडोज़ कंसोल में, यह रूसी वर्णों के साथ खराब है, ताकि फ़ाइल को खोलने के लिए आपको कोई दरार न पड़े> वरीयताएँ> सेटिंग्स, टर्मिनल.integrated.shellArgs.windows दर्ज करें, क्लिक करें

और "टर्मिनल.integrated.shellArgs.windows": ["-NoExit", "/ c", "chcp 65001"], लाइन जोड़ें

Github से फ़ाइलें डाउनलोड करने के लिए कमांड दोहराएं:

 git clone https://github.com/ReTWi/mysuperapp.git

वीएसकोड में, फ़ाइल> फ़ोल्डर खोलें पर क्लिक करें और हमारे एप्लिकेशन का फ़ोल्डर खोलें।

एक ही सरल सर्वर कोड के साथ server.js फ़ाइल बनाएँ:

 const http = require('http'); const hostname = 'localhost'; const port = 80; const server = http.createServer((req, res) => { res.statusCode = 200; res.setHeader('Content-Type', 'text/plain'); res.end('Hello World!\n'); }); server.listen(port, hostname, () => { console.log(`Server running at http://${hostname}:${port}/`); });

कोड में परिवर्तन किए जाने पर सर्वर को स्वचालित रूप से पुनरारंभ करने के लिए नोडेम स्थापित करें:

 npm i nodemon -g

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

कमांड चलाएँ:

 nodemon server.js

ब्राउज़र में लोकलहोस्ट खोलें: 80 / या लोकलहोस्ट: 80 और हैलो वर्ल्ड देखें।

अब हमारी पीसी श्रृंखला> जीथब> होस्टिंग की जाँच करने का समय आ गया है।

अधिक सुविधा के लिए Github डेस्कटॉप डाउनलोड करें, अपना github खाता कनेक्ट करें, फिर स्थानीय रिपॉजिटरी फ़ाइल जोड़ें पर क्लिक करें और हमारे एप्लिकेशन की निर्देशिका निर्दिष्ट करें।

एप्लिकेशन में, हम Github से डाउनलोड किए गए संस्करण की तुलना में किए गए बदलावों को देखते हैं (हमने server.js जोड़ा):

"कमिट टू मास्टर"> "पुश ओरिजिन" पर क्लिक करें, इस प्रकार पीसी से गीथूब में फाइल डाउनलोड करें।

हम ब्राउज़र में अपने गितुब खाते में जाते हैं और डाउनलोड किए गए सर्वर को देखते हैं। जेएस फाइल:

आइए थोड़ा और अभ्यास करें, वीएसकोड में हम "res.end ('हैलो वर्ल्ड! \ N') की जगह लेते हैं;" "res.end ('OmNomNom');"। हम देखेंगे कि सर्वर ने स्वयं रिबूट किया:

हम ब्राउज़र में जाँच करेंगे और हमारे द्वारा "OmNomNom" में किए गए परिवर्तनों को देखेंगे।

डेस्कटॉप जीथुब हमें यह भी दिखाएगा कि हमने लाइन बदल दी है:

फिर से, मास्टर करने के लिए प्रतिबद्ध क्लिक करें> उत्पत्ति को फ़ाइलों को गीथूब पर भेजने के लिए पुश करें।

होस्टिंग कमांड लाइन पर जाएँ।

हम अपना एप्लिकेशन बंद कर देते हैं अगर यह अभी भी चल रहा है (ctrl + c)।

निम्नलिखित कमांड के साथ हमारे अद्यतन किए गए एप्लिकेशन डाउनलोड करें:

 git config credential.helper store git pull

पहला हमारा डेटा बचाएगा ताकि आपको लगातार अपना उपयोगकर्ता नाम और पासवर्ड दर्ज न करना पड़े। भविष्य में, हमारे लिए गिट पुल पर्याप्त होगा।

Pm2 स्थापित करें - केवल होस्टिंग के लिए कुछ समान,

 npm i pm2 -g

चलिए pm2 का उपयोग करते हुए आवेदन शुरू करते हैं, जो होस्टिंग पर अगले git पुल द्वारा हमारे सर्वर को पुनः आरंभ करेगा:

 pm2 start server.js --watch

हमारे बाहरी आईपी क्लाउड पर ब्राउज़र खोलें और हमारे "ओमनोमनॉम" को देखें।

इस प्रकार, हमने एप्लिकेशन के साथ काम की श्रृंखला और होस्टिंग पर इसकी तेजी से तैनाती को बंद कर दिया।

हम स्थानीय होस्ट और होस्टिंग पर HTTPS के लिए अस्थायी SSL प्रमाणपत्र बनाते हैं

हम साइट zerossl.com पर जाते हैं

डोमेन में, आईपी ... फ़ील्ड, पहले लोकलहोस्ट में प्रवेश करें, जनरेट करें पर क्लिक करें और बटन द्वारा 2 फाइलें डाउनलोड करें:

हम उन्हें अपने प्रोजेक्ट में ssl / localhost फोल्डर में सेव करते हैं।

बाहरी IP क्लाउड के लिए प्रक्रिया दोहराएं और इसे ssl / myapp में सहेजें।

एक अधिक जटिल https सर्वर node.js लॉन्च करें

आवेदन संरचना:

ग्राहक - यहाँ हमारा फ्रंट-एंड झूठ होगा। मेरी प्रतिक्रिया है।
लॉग - होस्टिंग पर लॉग यहाँ छोड़ देंगे
नोड_मॉड्यूल्स - नोड.जेएस मॉड्यूल
निजी - आपकी निजी फाइलें, मैं एसएसएच एक्सेस को वहां क्लाउड पर संग्रहीत करता हूं
सर्वर आपका बैकएंड है
ssl - लोकलहोस्ट और होस्टिंग पर https काम करने के लिए ssl सर्टिफिकेट
.babelrc - webpack'om एप्लिकेशन रिएक्ट बिल्ड सेटिंग्स (आपको फ्रंटएंड विकसित करते समय अधिक आधुनिक जेएस का उपयोग करने की अनुमति देता है)
.गरिग्नोर - वे फाइलें जिन्हें गिटहब में स्थानांतरित नहीं किया जाएगा (जीआईटी उन्हें देखती नहीं है)
client.js - प्रतिक्रिया विधानसभा उत्पन्न करने के लिए प्रवेश बिंदु
package.json - आप उपयोग कर रहे हैं और विभिन्न कमांड स्निपेट्स नोड_मॉडल।
package-lock.json - मॉड्यूल में परिवर्तन (जैसा कि मैं इसे समझता हूं, फ़ाइल की जांच करेगा कि क्या वही मॉड्यूल आपके होस्टिंग और आपके पीसी पर स्थापित हैं)।
pm2-watch.json - होस्टिंग के लिए pm2 स्टार्टअप सेटिंग्स
README.md - जीथब के लिए कवर
server.js - हमारे बैकएंड Node.js सर्वर का शुरुआती बिंदु
webpack.config.js - प्रतिक्रिया का निर्माण विन्यास है

.gitignore

यहां हम उन फ़ाइलों / फ़ोल्डरों को इंगित करते हैं, जिन्हें हम जीथूब पर अपलोड नहीं करना चाहते हैं। वे केवल इस उपकरण पर होंगे और git उनके परिवर्तनों को ट्रैक / शो नहीं करेगा। खोलें और डालें:

 /node_modules/ /logs/* # exception to the rule !logs/.gitkeep /public/react_bundle.js /public/isProd.js

चूँकि गितुब खाली फोल्डर को अनलोड नहीं करता है, तो आप कुछ अंदर रख सकते हैं, उदाहरण के लिए, एक खाली .gitkeep फ़ाइल। फ़ाइल सहेजें और बंद करें।

package.json

निम्नलिखित को खोलें और पेस्ट करें (// जोड़ा टिप्पणियों के बाद)

 { "name": "myapp", //    "version": "1.0.0", "description": "OmNomNom", "main": "server.js", "scripts": { "server": "pm2 start pm2-watch.json", //  npm run server     "client": "webpack -w --mode development", //  npm client    .        ,   . "client-prod": "webpack --mode production", //     production "client-analyze": "webpack --mode production --analyze true" //     production       .    }, "repository": { "type": "git", "url": "git+https://github.com/myapp/knigam.git" //     github }, "author": "rtw", "license": "UNLICENSED", //     ( ) "bugs": { "url": https://github.com/myapp/knigam.git" }, "homepage": "https://github.com/myapp/knigam.git#readme", "dependencies": { "@babel/core": "^7.2.2", //  js  frontend "@babel/plugin-transform-runtime": "^7.2.0", //  js  frontend "@babel/preset-env": "^7.3.1", //  js  frontend "@babel/preset-react": "^7.0.0", //  js  frontend "ajv": "^6.8.1", //    "babel-loader": "^8.0.5", //  js  frontend "babel-plugin-styled-components": "^1.10.0", //   styled-components "css-loader": "^2.1.0", //   webpack'om css "fastify": "^2.0.0-rc.6", //  express,      "fastify-cookie": "^2.1.6", //    "fastify-static": "^2.2.0", //     "moment": "^2.24.0", //    "pg": "^7.8.0", //    "pino": "^5.11.1", //   postgreSQL  node.js "pino-pretty": "^2.5.0", //     "react": "^16.8.1", // Frontend .      Vue.js,    .      ,     "react-dom": "^16.8.1", // React     "style-loader": "^0.23.1", //   webpack'om ,    "styled-components": "^4.1.3", // CSS in JS,           "webpack": "^4.29.3", //    "webpack-bundle-analyzer": "^3.0.3", //       "webpack-cli": "^3.2.3" //    ,     } }

मैं आवेदन के लिए चुने गए दो मुख्य ढांचे / पुस्तकालयों पर ध्यान केंद्रित करूंगा:
Fastify को express.js के विकल्प के रूप में चुना गया था, चूंकि पहले से ही htpp2 के लिए पहले से ही प्रायोगिक समर्थन है, यह सक्रिय रूप से विकसित हो रहा है और मुझे लगता है कि यह express.js की तुलना में अधिक भविष्य है, जो बहुत धीमा हो गया है और किसी तरह विकसित हो रहा है। दूसरी ओर, एक्सप्रेस.जेएस लंबे समय से काम कर रहा है और इस पर जानकारी प्राप्त करना आपके लिए आसान होगा।

रिएक्ट इसलिए चुना गया क्योंकि मेरे लिए इसके साथ काम करना, समझना और अपने हाथों से हर चीज को आजमाना आसान था। Vue - यह अपने नियमों, दिशा के साथ कुछ लग रहा था। यद्यपि Vue में अपने हाथों से कुछ कम लिखना आवश्यक हो सकता है, लेकिन चूंकि प्रशिक्षण पर प्राथमिकता दी जाती है और ऐसे व्यक्ति के लिए जो पहले से प्रोग्राम नहीं किया है, प्रतिक्रिया किसी तरह आसान हो गई।

हम Package.json फ़ाइल को सहेजते हैं और कमांड के साथ निर्भरता में निर्दिष्ट सभी मॉड्यूल स्थापित करते हैं:

 npm i

हमारे पास एक नोड_मॉडल फ़ोल्डर होगा, जिसमें हमारे आवेदन के सभी मॉड्यूल होंगे।

ग्राहक - जबकि खाली फ़ोल्डर
लॉग-इन .गितकी फ़ाइल अंदर होती है, जिससे फ़ोल्डर होस्टिंग में माइग्रेट हो जाता है और लॉग सफलतापूर्वक गिर जाते हैं। विकास के दौरान, हम सब कुछ कंसोल में आउटपुट करेंगे।

सार्वजनिक

यहां हमारी साइट की स्टैटिक फाइल्स झूठ बोलेंगी, वहां की इमेज, फेविकॉन आदि।
आइए हम दो फाइलों पर ध्यान दें:
index.html:

 <!DOCTYPE html> <html> <head> <base href="/" /> <meta charset="UTF-8" /> <title>MyApp</title> </head> <body> <div id="cookies">    react_bundle   </div> <noscript >:       Javscript</noscript > <script src="react_bundle.js"></script> </body> </html>

- यहाँ हम एक प्रतिक्रिया सामने अंत लोड और इसकी आईडी द्वारा एक टैग में प्रदान की है।

isProd.js में एक एकल पंक्ति "मॉड्यूल .exports = false" है
चूँकि यह .gitignore अपवादों में है, इसलिए यह पोर्टेबल नहीं है। तदनुसार, हम इसे पीसी पर गलत पर सेट करते हैं, और होस्टिंग पर सच है। तब हम इस फ़ाइल का उपयोग यह समझने के लिए करते हैं कि हम वर्तमान में (विकास / उत्पादन) किस वातावरण में हैं। यह मुझे सबसे सुविधाजनक लगा, इसके अलावा, आप विकास के दौरान कोड को आंशिक रूप से बदल सकते हैं और उत्पादन में मॉड्यूल के संचालन की जांच कर सकते हैं।

ssl - लोकलहोस्ट और myapp फ़ोल्डर में पहले से सहेजे गए सर्टिफिकेट हैं

.babelrc

 { "presets": [ [ "@babel/preset-env", { "targets": { "browsers": [">0.25%", "not ie 11", "not op_mini all"] } } ], "@babel/preset-react" ], "plugins": [ "babel-plugin-styled-components", "@babel/plugin-transform-runtime" ] } ", { "presets": [ [ "@babel/preset-env", { "targets": { "browsers": [">0.25%", "not ie 11", "not op_mini all"] } } ], "@babel/preset-react" ], "plugins": [ "babel-plugin-styled-components", "@babel/plugin-transform-runtime" ] }

0.25% से अधिक उपयोगकर्ताओं द्वारा उपयोग किए जाने वाले ब्राउज़र समर्थन के साथ हमारी प्रतिक्रिया_बंडली बनाने के लिए सेटिंग्स।

client.js

 import React from 'react' import { render } from 'react-dom' render(<div>!!</div>, document.getElementById('cookies'))

कुकी टैग के साथ एक div में हमारे दृश्य को प्रस्तुत करता है।

pm2-watch.json - आपको कोड में ट्रैकिंग परिवर्तन और स्वचालित रूप से रिबूट करने के साथ होस्टिंग पर "एनपीएम रन सर्वर" कमांड के साथ सर्वर चलाने की अनुमति देता है।

webpack.config.js

रिएक्टर एप्लिकेशन बिल्डर:

 const webpack = require('webpack'), path = require('path'), BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin module.exports = (env, argv) => { let prod = argv.mode == 'production' let config = { entry: './client.js', output: { path: path.resolve('./public'), filename: 'react_bundle.js' }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel-loader' }, { test: /\.css$/, use: ['style-loader', 'css-loader'] } ] }, resolve: { alias: { client: path.resolve('./client/shared'), public: path.resolve('./public') } }, plugins: [ argv.analyze ? new BundleAnalyzerPlugin() : false, prod ? new webpack.optimize.AggressiveMergingPlugin() : false, new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /ru/) ].filter(Boolean), optimization: { minimize: prod ? true : false }, performance: { hints: false } } return config }

संक्षेप में, वह client.js फ़ाइल खोलता है और उसके अंदर मौजूद सब कुछ, react_bundle एकत्र करता है और इसे सार्वजनिक फ़ोल्डर में रखता है, जहां से इसे खुले index.html के माध्यम से लोड किया जाएगा।

server.js

 const isProd = require('./public/isProd'), fs = require('fs'), log = require('./server/logger'), path = require('path') //   node.js,      process.on('unhandledRejection', (reason, promise) => { log.error({ reason, promise }, '  unhandledRejection') }) process.on('uncaughtException', err => { log.error({ err }, '  uncaughtException') }) // Redirect server from http port 80 to https 443 const fastifyHttp = require('fastify')({ logger: log, ignoreTrailingSlash: true }) fastifyHttp.listen(80, '::', (err, address) => { if (err) { log.error({ err, address }, '   HTTP ') } else { log.warn('Http c ') } }) // Let's Encrypt challenge fastifyHttp.get('/.well-known/acme-challenge/:file', (req, res) => { let stream = fs.createReadStream( path.join(__dirname + '/ssl/.well-known/acme-challenge/' + req.params.file) ) res.type('text/html').send(stream) }) fastifyHttp.get('/*', (req, res) => { res.redirect(301, 'https://' + req.headers.host + req.raw.url) }) fastifyHttp.get('/', (req, res) => { res.redirect(301, 'https://' + req.headers.host + req.raw.url) }) //  let fastifyOptions = { logger: log, ignoreTrailingSlash: true, http2: true } fastifyOptions.https = isProd ? { allowHTTP1: true, key: fs.readFileSync('./ssl/myapp/key.txt'), cert: fs.readFileSync('./ssl/myapp/crt.txt') } : { allowHTTP1: true, key: fs.readFileSync('./ssl/localhost/cert.key'), cert: fs.readFileSync('./ssl/localhost/cert.pem') } const fastify = require('fastify')(fastifyOptions) fastify.listen(443, '::', (err, address) => { if (err) { log.error({ err, address }, '   ') } else { log.warn( `   ${ isProd ? '' : ' ' }` ) } }) //  fastify.setSchemaCompiler(schema => { return ajv.compile(schema) }) //  fastify fastify.setErrorHandler((err, req, res) => { log.error({ err, req }, 'fastify errorHandler') //     if (err.validation) { return res.send({ error: '   ' }) } else { return res.send({ error: ' errorHandler' }) } }) //   fastify.register(require('fastify-static'), { root: path.join(__dirname, './public') }) //  fastify.register(require('fastify-cookie'), err => { if (err) log.error({ err }, 'fastify-cookie') }) //       /   //       index.html,     //        api,   GET /api/userdata fastify.setNotFoundHandler((req, res) => { res.sendFile('index.html') }) // Routes fastify.register( async openRoutes => { //    openRoutes.register(require('./server/api/open')) openRoutes.register(async withSession => { //         //    , : ///withSession.addHook('preHandler', async (req, res) => { // if (!(await sessionManagerIsOk(req, res))) return // }) withSession.register(require('./server/api/with_session')) }) }, { prefix: '/api' } //    )

सर्वर फ़ोल्डर

यहाँ बैकएंड और सभी तरीके निहित हैं।
logger.js - पर्यावरण के आधार पर, isProd कंसोल या त्रुटियों के लिए लॉग होता है

 'use strict' const pino = require('pino'), isProd = require('../public/isProd') let logOptions = isProd ? { level: 'warn', //   timestamp: () => { return ',"time":"' + new Date() + '"' } } : { level: 'warn', prettifier: require('pino-pretty'), prettyPrint: { levelFirst: true, translateTime: true } } let dest = isProd ? pino.destination('./logs/errors.log') : pino.destination(1) let log = pino(logOptions, dest) module.exports = log

सर्वर / एपीआई /
open.js - यहां हमारे रास्ते जोड़ें।

 'use strict' module.exports = function(fastify, options, next) { fastify.route({ method: 'GET', url: '/', handler: async (req, res) => { res.send('api / route') } }) fastify.route({ method: 'GET', url: '/hi', handler: async (req, res) => { res.send('api / route hi') } }) next() }

लोकलहोस्ट पर सब कुछ सेट अप और चेक करने के बाद, हम बस सब कुछ जीथूब पर अपलोड करते हैं, और वहाँ से होस्टिंग तक खींचते हैं। होस्टिंग पर जो कुछ भी करने की जरूरत है, वह "npm i" कमांड के साथ नोड.जेएस मॉड्यूल को स्थापित करना है और isProd.js फ़ाइल बनाना है।

एसएसएल स्वचालित रूप से अपडेट किया गया

जब आप एक डोमेन खरीदते हैं और इसे आईपी क्लाउड पर बांध देते हैं , तो REG.RU के निर्देशों का एक उदाहरण, आप उस साइट पर स्थापित कर सकते हैं जो स्वचालित रूप से अपडेट किया गया एसएसएल है जो साइट पर https पर काम करता है।

हमारा सर्वर बिना नगनेक्स के काम करता है। हमें भविष्य में लोड बैलेंसर या स्थिर फ़ाइलों को वितरित करने के लिए एक तेज़ HTTP सर्वर के रूप में इसकी आवश्यकता हो सकती है, लेकिन अभी तक मुझे इसकी आवश्यकता नहीं है। हमें अभी तक लोड संतुलन की आवश्यकता नहीं है, लेकिन मुझे स्टैटिक्स के वितरण की गति के बारे में तुलना नहीं मिली है।

Ssl फ़ोल्डर में स्थापित करने से पहले, .well- ज्ञात फ़ोल्डर बनाएँ, और इसमें acme- चुनौती। यह पता चलता है कि /opt/myapp/ssl/.well-ogn/acme-challenge

Nginx के बिना node.js वाले सर्वर पर स्वचालित रूप से अपडेट किए गए एसएसएल को स्थापित करने के लिए , लिंक पर क्लिक करें । बदले में, होस्टिंग कंसोल में कमांड निष्पादित करें:

 sudo apt-get update sudo apt-get install software-properties-common sudo add-apt-repository universe sudo add-apt-repository ppa:certbot/certbot sudo apt-get update sudo apt-get install certbot sudo certbot certonly

हम दूसरी सत्यापन विधि का चयन करते हैं, जो /opt/myapp/ssl/.well-ogn/acme-challenge फ़ोल्डर में एक विशिष्ट फ़ाइल रखेगा, और सर्वर के मालिक की पुष्टि करने के बाद इसे हटा दिया जाएगा।

हम अनुरोध पर हमारे डोमेन को इंगित करते हैं, उदाहरण के लिए: "example.com" और हमारे एप्लिकेशन के ssl फ़ोल्डर का मार्ग (सर्वर कॉन्फ़िगर किया गया है ताकि यह बॉट द्वारा बनाई गई फ़ाइल को दे देगा) "/ opt / myapp / ssl"।

90 दिनों के भीतर इसकी समाप्ति से पहले प्रमाणपत्र को नवीनीकृत करने के लिए बॉट स्वयं क्रोन कार्य को कॉन्फ़िगर करेगा।

मुझे नहीं लगा कि सब कुछ लिखने में इतना समय लगेगा, सुबह 4 बजे तक मैं कुछ याद कर सकता था:

रोचक हैब्रैचियन और विशेषज्ञों की राय है जिन्होंने इस कैनवास पर महारत हासिल की या कुछ व्यक्तिगत बिंदुओं को पढ़ा। आपके विकास चक्र की व्यवस्था कैसे की जाती है? क्या कोई ऐसा बिंदु है जिसमें मैं गलत हूं या गलत काम कर रहा हूं?

क्लाउड में ऑटो-अपडेटेड एसएसएल के साथ Node.js https सर्वर होस्टिंग और मैंने विकास चक्र कैसे सेट किया (+ गिट, प्रतिक्रिया)