Yandex.Cloud Object Storage yordamida statik veb-saytni qanday joylashtirish mumkin

Hey Xabr!

Ushbu maqolada men sizga Yandex texnologiyalaridan foydalangan holda statik veb-saytni qanday qilib osongina va sodda tarzda joylashtirishni aytaman Ob'ektni saqlash.

Oxir-oqibat, siz tashqi havola orqali kirish mumkin bo'lgan veb-saytga ega bo'lasiz.

Agar siz ushbu maqola foydali bo'ladi

• Dasturlashni endigina o'rganayotgan boshlang'ich dasturchi;
• Portfel yaratgan va uni do'stlar va ish beruvchilarga ko'rsatish uchun uni jamoat mulkiga qo'ymoqchi bo'lgan ishlab chiquvchi.

Men haqimda

Yaqinda men SaaS xizmatini, odamlar shaxsiy mashg'ulotlar uchun sport murabbiylarini topadigan bozor turini ishlab chiqdim. Amazon Web Services stekidan foydalanilgan (bundan keyin AWS deb yuritiladi). Ammo loyihaga qanchalik chuqurroq sho'ng'isam, startapni tashkil etishning turli jarayonlari haqida shunchalik ko'p nuanslarni bilib oldim.

Men quyidagi muammolarga duch keldim:

• AWS juda ko'p pul iste'mol qilardi. Enterprise kompaniyalarida 3 yil ishlaganimdan so'ng, men Docker, Kubernetes, CI/CD, ko'k yashil tarqatish kabi quvonchlarga ko'nikib qoldim va intiluvchan startap dasturchisi sifatida men buni amalga oshirishni xohlardim. Natijada, men AWS oyiga 300-400 dollar iste'mol qilgan degan xulosaga keldim. Kubernetes eng qimmat, taxminan 100 dollar bo'lib chiqdi, eng kam ish haqi bitta klaster va bitta tugun.
  PS Boshida buni qilishning hojati yo'q.
• Keyinchalik, huquqiy tomon haqida o'ylab, men 152-FZ qonuni haqida bilib oldim, unda quyidagilar aytilgan: "Rossiya Federatsiyasi fuqarolarining shaxsiy ma'lumotlari Rossiya Federatsiyasi hududida saqlanishi kerak", aks holda jarimalar, men buni xohlamadim. Men bu muammolarni yuqoridan menga kelmasidan oldin hal qilishga qaror qildim :).

Ilhomlangan maqola Amazon Web Services-dan Yandex.Cloud-ga infratuzilmani ko'chirish haqida men Yandex stekini batafsilroq o'rganishga qaror qildim.

Men uchun Yandex.Cloud-ning asosiy xususiyatlari quyidagilar edi:

• 2-3 baravar arzon (yuqoridagi maqola va davlat narxlari ro'yxatiga muvofiq)
• Rossiya Federatsiyasi hududida foydalanuvchilarning shaxsiy ma'lumotlarini saqlash, buyuk Amazon hali erisha olmaydi.

Men ushbu xizmatning boshqa raqobatchilarini o'rganib chiqdim, lekin o'sha paytda Yandex g'alaba qozondi.

Men sizga o'zim haqimda gapirib berdim, shuning uchun biz ishga kirishamiz.

Qadam 0. Saytni tayyorlang

Birinchidan, biz Internetga joylashtirmoqchi bo'lgan veb-saytga muhtojmiz. Men Angular dasturchisi bo'lganim uchun men oddiy SPA ilovasi shablonini yarataman, keyin uni Internetda joylashtiraman.

PS Angular-ni tushunadigan yoki uning hujjatlarini biladigan https://angular.io/guide/setup-local, ga boring qadam 1.

Angular-da SPA saytlarini yaratish uchun Angular-CLI-ni o'rnatamiz:

npm install -g @angular/cli

Quyidagi buyruq yordamida Angular ilovasini yaratamiz:

ng new angular-habr-object-storage

Keyin, dastur papkasiga o'ting va uning funksionalligini tekshirish uchun uni ishga tushiring:

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

Ilova yaratilgan, lekin hostingga hali tayyor emas. Barcha keraksiz narsalarni olib tashlash va faqat kerakli fayllarni qoldirish uchun dasturni kichik tuzilishga (ishlab chiqarish) yig'amiz.
Angular-da buni quyidagi buyruq bilan qilishingiz mumkin:

ng build --prod

Ushbu buyruq natijasida dasturning ildizida papka paydo bo'ldi dist bizning veb-saytimiz bilan.

Ishlar. Endi xostingga o'tamiz.

1 qadam.

Keling, saytga boramiz https://console.cloud.yandex.ru/ va "Ulanish" tugmasini bosing.

Eslatma:

• Yandex xizmatidan foydalanish uchun sizga Yandex pochtasi kerak bo'lishi mumkin (lekin bu aniq emas)
• Ba'zi funktsiyalar uchun siz shaxsiy hisobingizdagi hisobingizga pul kiritishingiz kerak bo'ladi (kamida 500 rubl).

Muvaffaqiyatli ro'yxatdan o'tish va avtorizatsiyadan so'ng biz sizning shaxsiy hisobingizdamiz.

Menyuning chap tomonida siz "Ob'ektni saqlash" xizmatini topishingiz kerak, biz undan saytni joylashtirish uchun foydalanamiz.

Qisqacha aytganda:

• Object Storage - bu Amazonning shunga o'xshash AWS S3 texnologiyasiga mos keladigan fayl xotirasi bo'lib, u koddan saqlashni boshqarish uchun o'z API-ga ega va AWS S3 kabi statik saytni joylashtirish uchun ishlatilishi mumkin.
• Object Storage-da biz fayllarimiz uchun alohida saqlash joylari bo'lgan "chelaklar" (chelaklar) yaratamiz.

Keling, ulardan birini yarataylik. Buni amalga oshirish uchun xizmat konsolida "Paqir yaratish" tugmasini bosing.

Paqir yaratish formasida quyidagi maydonlar mavjud, keling, ularni ko'rib chiqamiz:

• Paqir nomi. Oddiylik uchun loyihani Angular bilan bir xil deb ataymiz - angular-habr-object-storage
• Maks. hajmi. Saytimiz qanchalik og'ir bo'lsa, shuncha pul tikamiz, chunki sayt bepul saqlanmaydi va har bir ajratilgan gigabayt uchun biz Yandexga juda yaxshi tiyin to'laymiz.
• O'qish ob'ektlariga kirish. Biz uni "Ommaviy" ga o'rnatdik, chunki foydalanuvchi bizning statik saytimizning har bir faylini olishi kerak, shunda unda tartibni to'g'ri chizish, skriptlarni qayta ishlash va h.k.
• Ob'ektlar ro'yxatiga kirish va o'qish sozlamalariga kirish. Uni "Cheklangan" deb qoldiring. Bu chelakni ilovalar uchun ichki fayl xotirasi sifatida ishlatish uchun kerak.
• Saqlash klassi. Uni "Standart" sifatida qoldiring. Bu bizning saytimizga tez-tez tashrif buyurishini anglatadi va shuning uchun saytni tashkil etuvchi fayllar tez-tez yuklab olinadi. Bundan tashqari, element ishlash va to'lovga ta'sir qiladi (havolani kiriting).

"Paqir yaratish" tugmasini bosing va chelak yaratiladi.

Endi biz saytimizni paqirga yuklashimiz kerak. Eng oson yo'li - yaqin atrofdagi jildni ochish dist saytimizga o'ting va tutqichlar yordamida to'g'ridan-to'g'ri sahifaga torting. Bu "Ob'ektlarni yuklash" tugmasini bosishdan ko'ra qulayroqdir, chunki bu holda papkalar o'tkazilmaydi va ularni to'g'ri ketma-ketlikda qo'lda yaratishingiz kerak bo'ladi.

Shunday qilib, sayt xotiraga yuklangan, shuning uchun biz foydalanuvchilarga xotiraga veb-sayt sifatida kirish imkoniyatini berishimiz mumkin.
Buning uchun menyuning chap tomonidagi "Veb-sayt" yorlig'ini bosing.

Chelakni sayt sifatida o'rnatish sahifasida "Xosting" yorlig'ini tanlang. Bu erda biz saytning asosiy sahifasini ko'rsatamiz, odatda index.html. Agar sizda SPA ilovasi bo'lsa, ehtimol barcha xatolar asosiy sahifada qayta ishlanadi, shuning uchun biz xato sahifasida index.html ni ham ko'rsatamiz.

Saytimizga qaysi havola orqali kirish mumkinligini darhol ko'ramiz. Saqlash tugmasini bosing.

Taxminan 5 daqiqadan so'ng, havolani bosgan holda, saytimiz endi hamma uchun ochiq ekanligini ko'ramiz.

Oxirigacha o'qigan barchaga rahmat! Bu mening birinchi maqolam; men yana boshqa Yandex xizmatlarini va ularning frontend va backend texnologiyalari bilan integratsiyalashuvini tasvirlashni rejalashtirmoqdaman.

Izohlarda Yandeksning boshqa xizmatlari haqida yoki zamonaviy rivojlanishda Angular-dan foydalanish haqida qanchalik qiziqqaningizni yozing.

Manba: www.habr.com