Yandex.Cloud ऑब्जेक्ट स्टोरेज का उपयोग करके एक स्थिर वेबसाइट कैसे होस्ट करें

हे हबर!

इस लेख में, मैं आपको बताऊंगा कि यांडेक्स प्रौद्योगिकियों का उपयोग करके एक स्थिर वेबसाइट को आसानी से और आसानी से कैसे होस्ट किया जाए ऑब्जेक्ट स्टोरेज.

अंत में, आपके पास एक वेब-होस्टेड वेबसाइट होगी जिस तक बाहरी लिंक के माध्यम से पहुंचा जा सकेगा।

यह लेख आपके लिए उपयोगी होगा

• एक नौसिखिया डेवलपर जो अभी प्रोग्राम करना सीख रहा है;
• एक डेवलपर जिसने एक पोर्टफोलियो बनाया है और इसे मित्रों और नियोक्ताओं को दिखाने के लिए सार्वजनिक डोमेन में रखना चाहता है।

मेरे बारे में

हाल ही में, मैं एक SaaS सेवा विकसित कर रहा था, एक प्रकार का बाज़ार जहां लोग व्यक्तिगत प्रशिक्षण के लिए खेल प्रशिक्षक ढूंढते हैं। अमेज़ॅन वेब सर्विसेज स्टैक (इसके बाद इसे AWS के रूप में संदर्भित) का उपयोग किया गया। लेकिन जितना गहराई से मैं इस परियोजना में उतरा, उतनी ही अधिक बारीकियाँ मैंने स्टार्टअप को व्यवस्थित करने की विभिन्न प्रक्रियाओं के बारे में सीखीं।

मुझे निम्नलिखित समस्याओं का सामना करना पड़ा:

• AWS बहुत सारा पैसा खा रहा था। एंटरप्राइज़ कंपनियों में 3 साल तक काम करने के बाद, मुझे डॉकर, कुबेरनेट्स, सीआई/सीडी, ब्लू ग्रीन परिनियोजन जैसी खुशियों की आदत हो गई और, एक महत्वाकांक्षी स्टार्टअप प्रोग्रामर के रूप में, मैं इसे लागू करना चाहता था। परिणामस्वरूप, मैं इस निष्कर्ष पर पहुंचा कि AWS ने मासिक रूप से 300-400 रुपये की खपत की। कुबेरनेट्स सबसे महंगा निकला, लगभग 100 रुपये, एक क्लस्टर और एक नोड की न्यूनतम मजदूरी के साथ।
  पुनश्च प्रारंभ में ऐसा करने की कोई आवश्यकता नहीं है।
• इसके बाद, कानूनी पक्ष के बारे में सोचते हुए, मुझे कानून 152-एफजेड के बारे में पता चला, जिसमें निम्नलिखित कुछ कहा गया था: "रूसी संघ के नागरिकों का व्यक्तिगत डेटा रूसी संघ के क्षेत्र में संग्रहीत किया जाना चाहिए", अन्यथा जुर्माना, जो मैं नहीं चाहता था। ऊपर से मेरे पास आने से पहले मैंने इन मुद्दों से निपटने का फैसला किया :)।

प्रेरित किया लेख अमेज़ॅन वेब सेवाओं से Yandex.Cloud पर बुनियादी ढांचे के स्थानांतरण के बारे में, मैंने Yandex स्टैक का अधिक विस्तार से अध्ययन करने का निर्णय लिया।

मेरे लिए, Yandex.Cloud की प्रमुख विशेषताएं निम्नलिखित थीं:

• 2-3 गुना सस्ता (उपरोक्त लेख और सार्वजनिक मूल्य सूची के अनुसार)
• रूसी संघ के क्षेत्र में उपयोगकर्ताओं के व्यक्तिगत डेटा का भंडारण, जिसे महान अमेज़ॅन अभी तक हासिल नहीं कर सका है।

मैंने इस सेवा के अन्य प्रतिस्पर्धियों का अध्ययन किया, लेकिन उस समय यांडेक्स जीत रहा था।

मैंने आपको अपने बारे में बता दिया है, ताकि हम काम पर लग सकें।

चरण 0. साइट तैयार करें

सबसे पहले, हमें एक वेबसाइट की आवश्यकता है जिसे हम इंटरनेट पर रखना चाहते हैं। चूँकि मैं एक एंगुलर डेवलपर हूं, इसलिए मैं एक सरल एसपीए एप्लिकेशन टेम्पलेट बनाऊंगा, जिसे मैं इंटरनेट पर पोस्ट करूंगा।

PS जो एंगुलर को समझता है या उसके दस्तावेज़ीकरण के बारे में जानता है https://angular.io/guide/setup-local, जाओ स्टेप 1.

आइए एंगुलर में एसपीए साइट बनाने के लिए एंगुलर-सीएलआई स्थापित करें:

npm install -g @angular/cli

आइए निम्नलिखित कमांड का उपयोग करके एक एंगुलर एप्लिकेशन बनाएं:

ng new angular-habr-object-storage

इसके बाद, एप्लिकेशन फ़ोल्डर में जाएं और इसकी कार्यक्षमता जांचने के लिए इसे लॉन्च करें:

cd angular-habr-object-storage
ng serve --open

एप्लिकेशन बना दिया गया है, लेकिन अभी तक होस्टिंग के लिए तैयार नहीं है। आइए सभी अनावश्यक चीजों को हटाने और केवल आवश्यक फाइलों को छोड़ने के लिए एप्लिकेशन को एक छोटे बिल्ड (प्रोडक्शन) में इकट्ठा करें।
एंगुलर में आप इसे निम्नलिखित कमांड से कर सकते हैं:

ng build --prod

इस आदेश के परिणामस्वरूप, एप्लिकेशन के रूट में एक फ़ोल्डर दिखाई दिया dist हमारी वेबसाइट के साथ.

काम करता है. अब चलिए होस्टिंग की ओर बढ़ते हैं।

1 कदम.

चलिए साइट पर चलते हैं https://console.cloud.yandex.ru/ और "कनेक्ट" बटन पर क्लिक करें।

नोट:

• यांडेक्स सेवा का उपयोग करने के लिए, आपको यांडेक्स मेल की आवश्यकता हो सकती है (लेकिन यह निश्चित नहीं है)
• कुछ कार्यों के लिए आपको अपने व्यक्तिगत खाते (न्यूनतम 500 रूबल) में पैसे जमा करने होंगे।

सफल पंजीकरण और प्राधिकरण के बाद, हम आपके व्यक्तिगत खाते में हैं।

आगे बाईं ओर मेनू में आपको "ऑब्जेक्ट स्टोरेज" सेवा ढूंढनी होगी, जिसका उपयोग हम साइट को होस्ट करने के लिए करेंगे।

संक्षेप में शब्दों में:

• ऑब्जेक्ट स्टोरेज अमेज़ॅन की समान AWS S3 तकनीक के साथ संगत एक फ़ाइल स्टोरेज है, जिसमें कोड से स्टोरेज को प्रबंधित करने के लिए अपना स्वयं का एपीआई भी है और AWS S3 की तरह, एक स्थिर साइट को होस्ट करने के लिए उपयोग किया जा सकता है।
• ऑब्जेक्ट स्टोरेज में हम "बाल्टी" (बाल्टी) बनाते हैं, जो हमारी फ़ाइलों के लिए अलग भंडारण क्षेत्र हैं।

आइए उनमें से एक बनाएं. ऐसा करने के लिए, सर्विस कंसोल में, "बकेट बनाएं" बटन पर क्लिक करें।

बकेट बनाने के फॉर्म में निम्नलिखित फ़ील्ड हैं, आइए उनके बारे में जानें:

• बाल्टी का नाम. सरलता के लिए, आइए प्रोजेक्ट को एंगुलर जैसा ही कहें - angular-habr-object-storage
• अधिकतम. आकार। हम उतना ही दांव लगाते हैं जितना हमारी साइट का वजन होता है, क्योंकि साइट मुफ्त में संग्रहीत नहीं होती है और प्रत्येक आवंटित गीगाबाइट के लिए, हम यांडेक्स को एक अच्छा पैसा देंगे।
• पढ़ने योग्य वस्तुओं तक पहुंच। हमने इसे "सार्वजनिक" पर सेट किया है, क्योंकि उपयोगकर्ता को हमारी स्थिर साइट की प्रत्येक फ़ाइल प्राप्त करनी होगी ताकि उस पर लेआउट सही ढंग से खींचा जा सके, स्क्रिप्ट संसाधित की जा सके, आदि।
• वस्तुओं की सूची तक पहुंच और पढ़ने की सेटिंग्स तक पहुंच। इसे "सीमित" के रूप में छोड़ दें। अनुप्रयोगों के लिए आंतरिक फ़ाइल भंडारण के रूप में बकेट का उपयोग करने के लिए यह आवश्यक है।
• भंडारण वर्ग. इसे "मानक" के रूप में छोड़ दें। इसका मतलब है कि हमारी साइट पर बार-बार विजिट किया जाएगा, और इसलिए साइट बनाने वाली फ़ाइलें अक्सर डाउनलोड की जाएंगी। साथ ही आइटम प्रदर्शन और भुगतान को प्रभावित करता है (लिंक डालें)।

"एक बाल्टी बनाएँ" पर क्लिक करें और बाल्टी बन जाती है।

अब हमें अपनी साइट को बकेट में अपलोड करना होगा। सबसे आसान तरीका है पास में मौजूद किसी फोल्डर को खोलना dist हमारी साइट और हैंडल का उपयोग करके इसे सीधे पृष्ठ पर खींचें। यह "ऑब्जेक्ट लोड करें" बटन पर क्लिक करने से अधिक सुविधाजनक है, क्योंकि इस मामले में फ़ोल्डर स्थानांतरित नहीं होते हैं और आपको उन्हें सही क्रम में मैन्युअल रूप से बनाना होगा।

इसलिए, साइट को स्टोरेज में लोड किया गया है, ताकि हम उपयोगकर्ताओं को एक वेबसाइट के रूप में स्टोरेज तक पहुंचने का अवसर प्रदान कर सकें।
ऐसा करने के लिए, मेनू के बाईं ओर, "वेबसाइट" टैब पर क्लिक करें।

बकेट को साइट के रूप में स्थापित करने के लिए पृष्ठ पर, "होस्टिंग" टैब चुनें। यहां हम साइट का मुख्य पृष्ठ, आमतौर पर Index.html दर्शाते हैं। यदि आपके पास एसपीए एप्लिकेशन है, तो संभवतः सभी त्रुटियां मुख्य पृष्ठ पर भी संसाधित की जाती हैं, इसलिए हम त्रुटि पृष्ठ पर Index.html भी इंगित करेंगे।

हम तुरंत देखते हैं कि हमारी साइट किस लिंक के माध्यम से पहुंच योग्य होगी। सहेजें पर क्लिक करें.

लगभग 5 मिनट बाद लिंक पर क्लिक करने पर हम देखते हैं कि हमारी साइट अब सभी के लिए उपलब्ध है।

अंत तक पढ़ने वाले सभी को धन्यवाद! यह मेरा पहला लेख है; मैं अन्य यांडेक्स सेवाओं और फ्रंटएंड और बैकएंड प्रौद्योगिकियों के साथ उनके एकीकरण का और वर्णन करने की योजना बना रहा हूं।

टिप्पणियों में लिखें कि आप अन्य यांडेक्स सेवाओं के बारे में या आधुनिक विकास में एंगुलर के उपयोग के बारे में जानने में कितनी रुचि रखते हैं।

स्रोत: www.habr.com