Microsoft Azure-da bitta sahifa ilovasini (SPA) joylashtirishning eng yaxshi usuli

Azure Appure Service va boshqalar. Azure Funktsiyalari V2 - Proksi va boshqalar. Azure Storage veb-sayti (Ko'rib chiqish)

Men tez-tez statik veb-saytlarni (masalan, bizning kompaniyamiz veb-sayti https://www.media-lesson.com) yoki Yagona sahifali ilovalarni tarqatishim kerak va men har doim xarajatlarni va vaqtni taqsimlashni yaxshilash usullarini qidiraman.

Yaqinda Microsoft Azure Storage uchun doimiy veb-saytlarning ommaviy ko'rib chiqilishini e'lon qildi va Azure-da bitta sahifa dasturini (SPA) joylashtirish uchun yana bir imkoniyatni qo'shdi.

14 may kuni Microsoft Azure Funktsiyalari Runtime 2.0.11776-alfa-da Proksi-serverlarga Azure Storage-da statik veb-saytni joylashtirishni va Azure Function proksi-serveri orqali trafikni yo'naltirishni qo'llab-quvvatlamasdan oldin.

Ikkala yangi variant ham Azure App Service-da an'anaviy (statik) veb-saytni xosting usuliga qo'shiladi. Azure-da, masalan, veb-saytlarni joylashtirishning ko'proq variantlari mavjud Konteynerlar, Docker, Kubernetes, Virtual Mashinalar va boshqalarni ishlatish bilan, lekin men bitta sahifali ilovalarni oson va iqtisodiy jihatdan samarali joylashtirishga e'tibor beraman.

Va biz xosting imkoniyatlarini baholayapmiz, shuningdek Visual Studio Team Services (VSTS) dan foydalanib, qo'lda va avtomatik joylashtirishni solishtirish kerak.

Shunday qilib, Yagona sahifa dasturini joylashtirishda qaysi xizmatdan foydalanishni tanlashga yordam berish uchun quyidagi savollarga javob beraylik.

  1. Ilovani qo'lda va avtomatik ravishda o'rnatish uchun qancha harakat qilish kerak?
  2. Qancha konfiguratsiya kerak?
  3. Qanday qilib u ko'lamli?
  4. U qanday ishlaydi?
  5. Bu necha pul turadi?

Sinov ilovasi

Shunday qilib, ushbu tajribani 3 ta turli xizmatlarni joylashtirish va sinash uchun sinov ilovasi sifatida Angular asosida CLI yordamida Angularga asoslangan oddiy SPA yaratish orqali boshlaymiz: ng new testapp --routing Iltimos, marshrutlash xususiyatini to'g'ridan-to'g'ri dasturga qo'shaman. -routing parametridan foydalanib. Men hosting variantlarini ko'rib chiqishda sinab ko'rish uchun bu muhim jihatni topdim, chunki marshrutizatsiyalash App Service kabi ba'zi muhitlarda konfiguratsiya muammosi bo'lishi mumkin, chunki biz veb-serverni mijoz tomonidan emas, balki mijoz ilova orqali marshrutni qayta ishlashiga ruxsat berish uchun sozlashimiz kerak.

Yo'nalishni to'liq sinab ko'rish uchun bizda ba'zi namunaviy marshrutlar bo'lishi kerak. Shuning uchun CLI-dan foydalanib, bizning ilovamizga uy va uning tarkibiy qismlarini qo'shishimiz mumkin: ng generate home and ng generating komponent. Keyingi ikki tarkibiy qismlar o'rtasida navigatsiya qilish uchun bizning marshrutlash.module.ts-da ikkita yo'nalish bo'lishi kerak:

Va nihoyat, foydalanuvchi bizning app.component.html-dagi ikkita komponent o'rtasida harakatlanishiga imkon beradigan ba'zi navigatsiya tugmalari:

Qurilish artefaktlari kichkina jildini beradigan ng build --prod-dan foydalanib qo'lda tarqatishga tayyorgarlik ko'rish uchun ilovamizni mahalliy ravishda yarataylik.

Albatta, biz doimiy ravishda tarqatish jarayonining bir qismi sifatida avtomatik joylashtirishni quritishni xohlaymiz. Shuning uchun keling, bizning ilovamizni VSTS omboriga olib boramiz va ushbu uchta vazifani bajarish uchun tushuntirishni o'rnatamiz:

npm o'rnatish

npm qurish

Yo'l-yo'riqdan tortib to ilovagacha bo'lgan artefaktni nashr qiling

Azure App xizmati

Azure App Service - bu PaaS (platforma sifatida xizmat sifatida) va Azure-da veb-tarkibni joylashtirishning klassik usuli. Ilovalar xizmatidan foydalanib, biz xizmatni sozlash va qo'lda miqyosni kengaytirish haqida g'amxo'rlik qilishimiz kerak. Buni sinab ko'rish uchun Azure portalida yangi ilova xizmatini yarating. Men ushbu sinov uchun S1 darajasini tanladim, chunki bu ishlab chiqarish ilovalari uchun kirish darajalari.

Yo'nalishni sozlash

Tabiiyki, PaaS-ni taklif qilishda ishlab chiquvchilar asosiy veb-serverning konfiguratsiyasi haqida g'amxo'rlik qilishlari kerak (Windows bu IIS bo'lsa). Bu bizning Angular dasturimiz ichidagi marshrutlashni yoqish uchun biz Web.config faylini yo'naltirishni boshqarish yoki SpaServices vositasi yordamida ASP.Net Core 2.1 ilovasi ichidagi burchakli dasturni boshqarish bo'yicha ko'rsatmalar bilan ta'minlashimiz kerak. Bu erda SPA marshrutizatsiyasi bilan web.config-ning oddiy namunasi keltirilgan:

Qo'lda joylashtirish

Qo'lda joylashtirish uchun shunchaki FTP-dan bizning dist papkamiz va web.config tarkibini ilova xizmatining wwwroot papkasiga yuklash uchun foydalanaylik. FTP-ning hisob ma'lumotlarini Azure portalida "Xizmatga joylash profilini olish" tugmachasini bosish orqali dastur xizmatining umumiy ko'rinishida yuklab olish mumkin.

Visual Studio Team Services-dan foydalanib doimiy ravishda tarqatish

Ilovani ilova xizmatiga o'rnatish uchun VSTS-da relizlar ta'rifini o'rnatish juda tezdir, chunki bizga bitta vazifani bajarish uchun bo'sh bo'shatish ta'rifi kerak:

FTP xizmatining so'nggi nuqtasini sozlash uchun "Boshqarish" tugmachasini bosamiz va qo'lda o'rnatish uchun ishlatiladigan ma'lumotlarga ega yangi umumiy nuqta qo'shamiz.

Azure funktsiyalari

Ushbu variantda biz Azure Storage-ni statik fayllarimiz uchun arzon do'kon va foydalanuvchiga SPA xizmatini ko'rsatish uchun proksi-serverlari bilan Azure Function App sifatida ishlatamiz. Bu bizga avtomatik ravishda miqyosni (iste'mol rejasidan foydalanganda), SPA-ni boshqa funktsiyalar bilan (masalan, API qo'ng'iroqlari) bitta domen ostida birlashtirishga va ilovamizni serversiz boshqarishga imkon beradi.

Shunday qilib, biz Funktsiya ilovasini va saqlash qayd yozuvini yaratishimiz kerak (Funktsiya ilovasini yaratishda avtomatik ravishda yaratiladi). Keyinchalik saqlash hisobida "veb" deb nomlangan blob konteynerni yaratishimiz kerak, u erda fayllarimizni keyinchalik joylashtiramiz.

Yo'naltiruvchi sehr endi proksi-serverlarni so'rovni funktsional ilovamizdan saqlash hisobiga yuborish uchun sozlashimiz natijasida ro'y beradi. Shuning uchun bizga ikkita ishonchli vakil kerak bo'ladi:

Birinchisi, bizning URL.html manzilimizga bazaviy so'rovni yuboradi

ikkinchisi javascript fayllari yoki uslublar jadvallari kabi boshqa statik aktivlarni saqlash hisobidagi manziliga yo'naltirish uchun.

Qo'lda joylashtirish

Qo'lda ishlatish uchun Azure portalidagi saqlash hisobidagi "Konteynerlar" ni bosing va biz hozirda yaratgan "veb-konteyner" ni tanlang. Endi fayllarni mahalliy tuzishdan yuklaylik.

Visual Studio Team Services-dan foydalanib doimiy ravishda tarqatish

Buni tekshirish uchun VSTS-da bo'sh jarayon shabloni bilan ikkinchi versiya ta'rifini yaratib, AzureBlob File Copy vazifasini qo'shishimiz kerak:

Azure saqlash

Bu yaqinda ommaviy ko'rishga kiritilgan eng yangi variant. O'zingizning fikringizcha, SPA-ni joylashtirish uchun saqlashdan foydalanish, chunki haqiqiy server "serversiz" buzzvoli uchun ushbu variantga mos keladigan statik fayllarga xizmat ko'rsatish uchun kerak emas. Shunday qilib, yangi saqlash hisobini yarataylik (umumiy maqsad v2) va so'ngra veb-saytning turg'un xususiyatini yoqing:

Bu bizga kerak bo'lgan barcha konfiguratsiyalar. Saqlash avtomatik ravishda va marshrutlash o'lchovlari qutidan tashqari ishlaydi. Bizning asosiy SPA manzili url. Ajoyib!

Qo'lda joylashtirish

Qo'lda ishlatish uchun Azure portalidagi saqlash hisobidagi "Konteynerlar" ustiga bosing va "$ web" konteynerini tanlang (bu statik veb-sayt yoqilganda avtomatik ravishda yaratiladi). Endi fayllarni mahalliy tuzishdan yuklaylik:

Va shu!

Visual Studio Team Services-dan foydalanib doimiy ravishda tarqatish

Buni sinab ko'rish uchun VSTS-da bo'sh jarayon shabloniga ega bo'lgan uchinchi versiyani aniqlaymiz va AzureBlob Fayl nusxa ko'chirish vazifasini qo'shamiz:

2-versiyani tanlashga ishonch hosil qiling. * (Oldindan ko'rish), aks holda tarqatish xatosi muvaffaqiyatsiz tugadi, chunki konteyner nomidagi "$" belgisi ilgari taqiqlangan edi.

Ishlash

Spektakl haqida tasavvurga ega bo'lish uchun 3 ta dasturimizda artillery.io yuklash sinovlarini o'tkazaylik. 1,000, 10,000 va 100,000 so'rovlarni yuborishda mening natijalarim:

Azure Storage-dan foydalangan holda va veb-server komponentlarini taqqoslamagan tezlikda ishlaganda juda katta foyda keltiradi. Bu ikkalasi bir xil asosiy infratuzilmani birlashtirganligi ma'qul. Men bir oz hayronman, Funktsiya ilovasi App Service-ning ishlashini sekinlashtiradi.

100,000 so'rovlar sinovini yakunlash uchun umumiy ish vaqtini taqqoslashda men buni hatto notanish deb bilaman. Azure Storage-ni ishga tushirish uchun 46 soniya, App Service-ga esa 14 daqiqa va 27 soniya, Funktsiya ilovasi uchun esa 17 daqiqa va 2 soniya vaqt kerak bo'ldi. Vaqt o'tishi bilan Funktsiya ilovasi tezlikni oshishini kutgan bo'lar edim, chunki u avtomatik ravishda gorizontal ravishda miqyoslanadi. Ushbu stsenariyda ishlamaydiganga o'xshaydi.

Shunday qilib, bizning bu intizomda aniq g'olibimiz bor: Saqlash juda tez!

Xarajatlar

Xarajatlarni to'g'ri aniqlash juda qiyin, chunki barchasida har xil billing modellari mavjud. G'arbiy Evropa mintaqasida kuniga 100.000 so'rov uchun oylik xarajatlarni hisoblashim (bu to'liq va aniqligiga 100% amin emasman):

Ilova xizmati

1x S1 G'arbiy Evropada Windows bilan ishlaydigan (1 yadroli, 1,75 GB RAM, 50 GB saqlash) = oyiga 61,56 €

Funktsiya ilovasi (+ saqlash)

Bizning SPA 5 ta fayldan iborat: * 100,000 so'rovlar / kunlik * 31 = oyiga jami 15.500.000 so'rovlar. Bizning ilovamizning umumiy hajmi taxminan 0,33 Mb ni tashkil qiladi, bu oyiga jami 0,98 TB chiqish trafigini tashkil qiladi. Minimal bajarish vaqti 100 mms (proksi-server maqsadimiz uchun etarli), chunki biz 10 ta so'rovni / ikkinchi soniyani bajarishga qodirmiz.

Proksi-serverlardan o'tadigan so'rovlarni bajarish uchun oyiga 1,5 sekundlik (har biri 128 MB xotiradan kam) 1,550.000 bajarishga ega 1x Funktsiya App.

1x Saqlash Umumiy maqsadi V2 Blok Blob Saqlash hisobi, LRS zaxirasi va issiq kirish darajasi. Sig'imi 1 GB (bizda atigi 300 kb kerak, ammo bu eng kichik hajm), 100 ta yozish operatsiyalari, 100 ta ro'yxat operatsiyalari, 15,500,000 o'qish operatsiyalari va 0,98 TB ma'lumotlarini olish = 5,64 € / oy

Umumiy: oyiga 5.81 €.

Saqlash

Saqlash uchun biz yuqoridagiga qaraganda bir xil hisob-kitobni olamiz:

1x Saqlash Umumiy maqsadi V2 Blok Blob Saqlash hisobi, LRS zaxirasi va issiq kirish darajasi. Sig'imi 1 GB (bizda atigi 300 kb kerak, ammo bu eng kichik hajm), 100 ta yozish operatsiyalari, 100 ta ro'yxat operatsiyalari, 15,500,000 o'qish operatsiyalari va 0,98 TB ma'lumotlarini olish = 5,64 € / oy

Xulosa

  • O'zingizning SPA-ni toza joyda saqlash bu Azure-da eng arzon va eng yaxshi ishlash usulidir
  • SPA-ni funktsiyalar ilovasida proksi-server bilan birga joylashtirish minimal qo'shimcha xarajatlarga, lekin ish unumdorligi katta pasayishiga olib keladi. Bu g'alati, men gorizontal ravishda o'lchashim kerak. Bu erda albatta ko'proq izlanishlar olib boraman ...
  • O'zingizning SPA-ni App Service-da joylashtirish, marshrutlashni qo'llab-quvvatlash uchun qo'shimcha konfiguratsiyani talab qiladi (masalan, Internet-API bilan birlashganda murakkablashadi).

O'zingizning SPA-ni Stendga joylashtirsangiz, ishlab chiqish, sinov va sahna holatlariga yo'l qo'ymaslik kerak, chunki o'rnatish tez va ko'p hollarda bu stsenariylar uchun ham bepul. Men hali biron bir kamchilik topmadim, shuning uchun biroz chuqurroq kirib, uni ishlab chiqarishda ham qo'llashimiz mumkinligini bilib olamiz.

Iltimos, fikringizni bildiring.