Yandex.Cloud ऑब्जेक्ट स्टोरेज वापरून स्थिर वेबसाइट कशी होस्ट करावी

अहो हाब्र!

या लेखात, मी तुम्हाला यांडेक्स तंत्रज्ञानाचा वापर करून स्थिर वेबसाइट सहजपणे आणि सहजपणे होस्ट कशी करायची ते सांगेन, म्हणजे ऑब्जेक्ट स्टोरेज.

शेवटी, तुमच्याकडे वेब-होस्ट केलेली वेबसाइट असेल जी बाह्य दुव्याद्वारे प्रवेशयोग्य असेल.

हा लेख तुम्हाला उपयुक्त ठरेल

• एक नवशिक्या विकसक जो फक्त प्रोग्राम शिकत आहे;
• डेव्हलपर ज्याने पोर्टफोलिओ बनवला आहे आणि तो मित्र आणि नियोक्त्यांना दाखवण्यासाठी सार्वजनिक डोमेनमध्ये ठेवू इच्छितो.

माझ्याबद्दल

अलीकडे, मी एक SaaS सेवा विकसित करत होतो, एक प्रकारची बाजारपेठ जिथे लोक वैयक्तिक प्रशिक्षणासाठी क्रीडा प्रशिक्षक शोधतात. Amazon Web Services स्टॅक वापरले (यापुढे AWS म्हणून संदर्भित). पण मी प्रकल्पात जितके खोलवर गेलो, तितकेच मला स्टार्टअप आयोजित करण्याच्या विविध प्रक्रियांबद्दल अधिक बारकावे कळले.

मला खालील समस्या आल्या:

• AWS खूप पैसा वापरत होता. एंटरप्राइझ कंपन्यांमध्ये 3 वर्षे काम केल्यामुळे, मला डॉकर, कुबर्नेट्स, सीआय/सीडी, ब्लू ग्रीन डिप्लॉयमेंट यांसारख्या आनंदाची सवय झाली आणि, एक महत्त्वाकांक्षी स्टार्टअप प्रोग्रामर म्हणून, मला ते लागू करायचे होते. परिणामी, मी निष्कर्षापर्यंत पोहोचलो की AWS मासिक 300-400 रुपये वापरते. कुबर्नेट्स सर्वात महाग, सुमारे 100 रुपये, एक क्लस्टर आणि एक नोडच्या किमान वेतनासह निघाले.
  पुनश्च सुरुवातीला हे करण्याची गरज नाही.
• पुढे, कायदेशीर बाजूचा विचार करून, मी कायदा 152-FZ बद्दल शिकलो, ज्याने खालीलप्रमाणे काहीतरी सांगितले आहे: "रशियन फेडरेशनच्या नागरिकांचा वैयक्तिक डेटा रशियन फेडरेशनच्या प्रदेशावर संग्रहित करणे आवश्यक आहे", अन्यथा दंड, जो मला नको होता. वरून माझ्याकडे येण्यापूर्वीच मी या समस्यांना सामोरे जाण्याचे ठरविले :).

प्रेरित लेख Amazon Web Services वरून Yandex.Cloud वर पायाभूत सुविधा स्थलांतरित करण्याबद्दल, मी Yandex स्टॅकचा अधिक तपशीलवार अभ्यास करण्याचे ठरवले.

माझ्यासाठी, Yandex.Cloud ची मुख्य वैशिष्ट्ये खालीलप्रमाणे होती:

• 2-3 पट स्वस्त (वरील लेख आणि सार्वजनिक किंमत सूचीनुसार)
• रशियन फेडरेशनच्या प्रदेशावरील वापरकर्त्यांच्या वैयक्तिक डेटाचे संचयन, जे महान Amazon अद्याप साध्य करू शकत नाही.

मी या सेवेच्या इतर प्रतिस्पर्ध्यांचा अभ्यास केला, परंतु त्या वेळी यांडेक्स जिंकत होता.

मी तुम्हाला माझ्याबद्दल सांगितले आहे, त्यामुळे आम्ही व्यवसायात उतरू शकतो.

पायरी 0. साइट तयार करा

प्रथम, आम्हाला एक वेबसाइट हवी आहे जी आम्हाला इंटरनेटवर ठेवायची आहे. मी एक अँगुलर डेव्हलपर असल्याने, मी एक साधा SPA ऍप्लिकेशन टेम्पलेट बनवीन, जो मी नंतर इंटरनेटवर पोस्ट करेन.

पीएस ज्याला अँगुलर समजतो किंवा त्याच्या कागदपत्रांबद्दल माहिती आहे 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

अनुप्रयोग तयार केला गेला आहे, परंतु अद्याप होस्टिंगसाठी तयार नाही. सर्व अनावश्यक गोष्टी काढून टाकण्यासाठी आणि फक्त आवश्यक फाईल्स सोडण्यासाठी ऍप्लिकेशनला छोट्या बिल्ड (उत्पादन) मध्ये एकत्र करू या.
Angular मध्ये तुम्ही हे खालील आदेशाने करू शकता:

ng build --prod

या आदेशाच्या परिणामी, अनुप्रयोगाच्या रूटमध्ये एक फोल्डर दिसू लागले dist आमच्या वेबसाइटसह.

कार्य करते. आता होस्टिंगकडे वळू.

चरण 1.

चला साइटवर जाऊया https://console.cloud.yandex.ru/ आणि "कनेक्ट" बटणावर क्लिक करा.

टीप:

• Yandex सेवा वापरण्यासाठी, तुम्हाला Yandex मेलची आवश्यकता असू शकते (परंतु हे निश्चित नाही)
• काही कार्यांसाठी तुम्हाला तुमच्या वैयक्तिक खात्यात (किमान 500 रूबल) तुमच्या खात्यात पैसे जमा करावे लागतील.

यशस्वी नोंदणी आणि अधिकृततेनंतर, आम्ही तुमच्या वैयक्तिक खात्यात आहोत.

मेनूमध्ये डावीकडे पुढे तुम्हाला “ऑब्जेक्ट स्टोरेज” सेवा शोधण्याची आवश्यकता आहे, जी आम्ही साइट होस्ट करण्यासाठी वापरू.

थोडक्यात:

• ऑब्जेक्ट स्टोरेज हे Amazon च्या समान AWS S3 तंत्रज्ञानाशी सुसंगत फाइल स्टोरेज आहे, ज्यामध्ये कोडमधून स्टोरेज व्यवस्थापित करण्यासाठी स्वतःचे API देखील आहे आणि AWS S3 प्रमाणे, स्थिर साइट होस्ट करण्यासाठी वापरले जाऊ शकते.
• ऑब्जेक्ट स्टोरेजमध्ये आम्ही "बकेट्स" (बकेट्स) तयार करतो, जे आमच्या फाइल्ससाठी वेगळे स्टोरेज क्षेत्र आहेत.

चला त्यापैकी एक तयार करूया. हे करण्यासाठी, सेवा कन्सोलमध्ये, "बकेट तयार करा" बटणावर क्लिक करा.

बादली तयार करण्याच्या फॉर्ममध्ये खालील फील्ड आहेत, चला त्या पाहू:

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

"बकेट तयार करा" वर क्लिक करा आणि बादली तयार होईल.

आता आम्हाला आमची साइट बकेटवर अपलोड करायची आहे. जवळचे फोल्डर उघडणे हा सर्वात सोपा मार्ग आहे dist आमची साइट आणि हँडल वापरून थेट पृष्ठावर ड्रॅग करा. "लोड ऑब्जेक्ट्स" बटणावर क्लिक करण्यापेक्षा हे अधिक सोयीस्कर आहे, कारण या प्रकरणात फोल्डर हस्तांतरित केले जात नाहीत आणि आपल्याला ते योग्य क्रमाने व्यक्तिचलितपणे तयार करावे लागतील.

त्यामुळे, साइट स्टोरेजमध्ये लोड केली आहे, त्यामुळे आम्ही वापरकर्त्यांना वेबसाइट म्हणून स्टोरेजमध्ये प्रवेश करण्याची संधी देऊ शकतो.
हे करण्यासाठी, मेनूच्या डाव्या बाजूला, “वेबसाइट” टॅबवर क्लिक करा.

साइट म्हणून बकेट सेट करण्यासाठी पृष्ठावर, “होस्टिंग” टॅब निवडा. येथे आम्ही साइटचे मुख्य पृष्ठ सूचित करतो, सहसा index.html. जर तुमच्याकडे SPA ऍप्लिकेशन असेल, तर कदाचित सर्व त्रुटींवर मुख्य पृष्ठावर प्रक्रिया केली जाईल, म्हणून आम्ही त्रुटी पृष्ठावर index.html देखील सूचित करू.

आमच्या साइटवर कोणत्या लिंकद्वारे प्रवेश करता येईल हे आम्ही लगेच पाहतो. जतन करा क्लिक करा.

5 मिनिटांनंतर, लिंकवर क्लिक केल्यावर, आम्ही पाहतो की आमची साइट आता प्रत्येकासाठी उपलब्ध आहे.

शेवटपर्यंत वाचलेल्या प्रत्येकाचे आभार! हा माझा पहिला लेख आहे; मी इतर Yandex सेवा आणि त्यांच्या फ्रंटएंड आणि बॅकएंड तंत्रज्ञानासह एकत्रीकरणाचे वर्णन करण्याची योजना आखत आहे.

इतर यॅन्डेक्स सेवांबद्दल किंवा आधुनिक विकासामध्ये अँगुलरच्या वापराबद्दल जाणून घेण्यात तुम्हाला किती रस आहे ते टिप्पण्यांमध्ये लिहा.

स्त्रोत: www.habr.com