Yandex.Cloud वस्तु भण्डारण प्रयोग गरेर स्थिर वेबसाइट कसरी होस्ट गर्ने

हे हाबर!

यस लेखमा, म तपाईलाई कसरी सजिलै र सजिलैसँग Yandex प्रविधिहरू प्रयोग गरेर स्थिर वेबसाइट होस्ट गर्ने भनेर बताउनेछु, अर्थात्। वस्तु भण्डारण.

अन्तमा, तपाईंसँग वेब-होस्ट गरिएको वेबसाइट हुनेछ जुन बाह्य लिङ्क मार्फत पहुँचयोग्य हुनेछ।

यो लेख उपयोगी हुनेछ यदि तपाईं

• एक शुरुवात विकासकर्ता जसले भर्खर प्रोग्राम गर्न सिक्दैछ;
• एक विकासकर्ता जसले पोर्टफोलियो बनाएको छ र यसलाई साथीहरू र रोजगारदाताहरूलाई देखाउन सार्वजनिक डोमेनमा राख्न चाहन्छ।

मेरो बारेमा

भर्खरै, मैले SaaS सेवा विकास गरिरहेको थिएँ, एक प्रकारको बजार जहाँ मानिसहरूले व्यक्तिगत प्रशिक्षणको लागि खेलकुद प्रशिक्षकहरू भेट्टाउँछन्। Amazon वेब सेवा स्ट्याक प्रयोग गरियो (यसपछि AWS भनिन्छ)। तर मैले परियोजनामा ​​जति गहिरो डुब्न थालेँ, स्टार्टअपलाई व्यवस्थित गर्ने विभिन्न प्रक्रियाहरूको बारेमा मैले त्यति नै धेरै सूक्ष्मताहरू सिकें।

मैले निम्न समस्याहरूको सामना गरें:

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

प्रेरित लेख Amazon Web Services बाट Yandex.Cloud मा पूर्वाधार माइग्रेट गर्ने बारे, मैले Yandex स्ट्याकलाई थप विवरणमा अध्ययन गर्ने निर्णय गरें।

मेरो लागि, Yandex.Cloud का मुख्य विशेषताहरू निम्न थिए:

• २-३ गुणा सस्तो (माथिको लेख र सार्वजनिक मूल्य सूची अनुसार)
• रूसी संघ को क्षेत्र मा प्रयोगकर्ता को व्यक्तिगत डाटा को भण्डारण, जुन ठूलो अमेजनले अझै हासिल गर्न सक्दैन।

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

मैले तपाईलाई मेरो बारेमा भनेको छु, त्यसैले हामी व्यवसायमा जान सक्छौं।

चरण 0. साइट तयार गर्नुहोस्

पहिले, हामीलाई इन्टरनेटमा राख्न चाहेको वेबसाइट चाहिन्छ। म एक Angular विकासकर्ता भएकोले, म एउटा साधारण SPA अनुप्रयोग टेम्प्लेट बनाउनेछु, जसलाई म इन्टरनेटमा पोस्ट गर्नेछु।

PS जसले Angular बुझ्छ वा यसको कागजात बारे जान्दछ https://angular.io/guide/setup-local, जाऊ त्यहाँ चरण 1.

Angular मा SPA साइटहरू सिर्जना गर्न Angular-CLI स्थापना गरौं:

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/ र "Connect" बटनमा क्लिक गर्नुहोस्।

नोट:

• Yandex सेवा प्रयोग गर्न, तपाईंलाई Yandex मेल चाहिन्छ (तर यो निश्चित छैन)
• केही कार्यहरूका लागि तपाईंले आफ्नो खातामा आफ्नो व्यक्तिगत खातामा पैसा जम्मा गर्नुपर्नेछ (न्यूनतम 500 rubles)।

सफल दर्ता र प्राधिकरण पछि, हामी तपाईंको व्यक्तिगत खातामा छौं।

मेनुको बायाँमा अर्को तपाईंले "वस्तु भण्डारण" सेवा फेला पार्न आवश्यक छ, जुन हामीले साइट होस्टिंगको लागि प्रयोग गर्नेछौं।

संक्षेपमा सर्तहरूमा:

• वस्तु भण्डारण Amazon को समान AWS S3 प्रविधिसँग मिल्दो फाइल भण्डारण हो, जसको कोडबाट भण्डारण व्यवस्थापन गर्नको लागि आफ्नै API पनि छ र AWS S3 जस्तै, स्थिर साइट होस्ट गर्न प्रयोग गर्न सकिन्छ।
• वस्तु भण्डारणमा हामी "बाल्टी" (बाल्टी) सिर्जना गर्छौं, जुन हाम्रा फाइलहरूको लागि छुट्टै भण्डारण क्षेत्रहरू हुन्।

ती मध्ये एउटा सिर्जना गरौं। यो गर्नको लागि, सेवा कन्सोलमा, "बकेट सिर्जना गर्नुहोस्" बटनमा क्लिक गर्नुहोस्।

बाल्टी बनाउनको लागि फारममा निम्न क्षेत्रहरू छन्, तिनीहरूलाई मार्फत जाऔं:

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

"एक बाल्टिन सिर्जना गर्नुहोस्" मा क्लिक गर्नुहोस् र बाल्टिन सिर्जना भयो।

अब हामीले हाम्रो साइटलाई बाल्टिनमा अपलोड गर्न आवश्यक छ। सबैभन्दा सजिलो तरिका नजिकैको फोल्डर खोल्न हो dist हाम्रो साइट र ह्यान्डलहरू प्रयोग गरेर यसलाई सीधा पृष्ठमा तान्नुहोस्। यो "लोड वस्तुहरू" बटनमा क्लिक गर्नु भन्दा बढी सुविधाजनक छ, किनभने यस अवस्थामा फोल्डरहरू स्थानान्तरण गरिएका छैनन् र तपाईंले तिनीहरूलाई सही अनुक्रममा म्यानुअल रूपमा सिर्जना गर्नुपर्नेछ।

त्यसोभए, साइट भण्डारणमा लोड गरिएको छ, त्यसैले हामी प्रयोगकर्ताहरूलाई वेबसाइटको रूपमा भण्डारण पहुँच गर्ने अवसर प्रदान गर्न सक्छौं।
यो गर्नको लागि, मेनुको बायाँ छेउमा, "वेबसाइट" ट्याबमा क्लिक गर्नुहोस्।

साइटको रूपमा बाल्टी सेटअप गर्नको लागि पृष्ठमा, "होस्टिङ" ट्याब चयन गर्नुहोस्। यहाँ हामी साइटको मुख्य पृष्ठलाई संकेत गर्छौं, सामान्यतया index.html। यदि तपाईंसँग SPA अनुप्रयोग छ भने, सम्भवतः सबै त्रुटिहरू पनि मुख्य पृष्ठमा प्रशोधन गरिएका छन्, त्यसैले हामी त्रुटि पृष्ठमा index.html पनि संकेत गर्नेछौं।

हामी तुरुन्तै हाम्रो साइट कुन लिङ्क मार्फत पहुँचयोग्य हुनेछ देख्छौं। बचत क्लिक गर्नुहोस्।

लगभग 5 मिनेट पछि, लिङ्कमा क्लिक गर्दा, हामीले देख्छौं कि हाम्रो साइट अब सबैको लागि उपलब्ध छ।

अन्त्यसम्म पढ्ने सबैलाई धन्यवाद! यो मेरो पहिलो लेख हो; म अन्य Yandex सेवाहरू र तिनीहरूको फ्रन्टएन्ड र ब्याकएन्ड टेक्नोलोजीहरूसँगको एकीकरणलाई थप वर्णन गर्ने योजना गर्छु।

अन्य Yandex सेवाहरू वा आधुनिक विकासमा Angular को प्रयोग बारे जान्न तपाईं कत्तिको इच्छुक हुनुहुन्छ भनी टिप्पणीहरूमा लेख्नुहोस्।

स्रोत: www.habr.com