Най-добрият начин да хоствате приложение за една страница (SPA) в Microsoft Azure

Традиционен Azure App Service vs. Azure Functions V2 с прокси сървъри срещу статичен уебсайт за съхранение на Azure (преглед)

Често ми се налага да разгръщам статични уебсайтове (напр. Уебсайта на нашата компания https://www.media-lesson.com) или приложения за единични страници и винаги търся начини за подобряване на разходите и времето за внедряване.

Microsoft наскоро обяви публичен визуализация на статичен хостинг на уебсайтове за Azure Storage, като добави още една опция за хостване на приложение за една страница (SPA) на Azure.

Малко преди Microsoft да добави обратно поддръжка за прокси сървъри във функциите на Azure 2.0.11776-алфа на 14 май, предоставяйки начин да хоствате статичен уебсайт в Azure Storage и да препращате трафик през прокси маршрута на Azure Function.

И двете нови опции добавят към традиционния начин на хостинг на (статичен) уебсайт в Azure App Service. Има още повече опции за хостинг на уебсайтове в Azure, напр. използвайки контейнери, Docker, Kubernetes, виртуални машини и т.н., но ще запазя фокуса върху лесните и рентабилни внедрявания на приложения за една страница.

И тъй като ние оценяваме опциите за хостинг, също така си струва да сравним ръчното и автоматично внедряване, използвайки Visual Studio Team Services (VSTS) за споменатите услуги.

Затова нека отговорим на тези въпроси, за да помогнем да решите коя услуга да използвате, когато хоствате приложение за една страница:

  1. Колко усилия е да ръчно и автоматично да внедрите приложение?
  2. Колко конфигурация е необходима?
  3. Как се мащабира?
  4. Как се изпълнява?
  5. Колко струва?

Тестово приложение

Затова нека започнем този експеримент чрез създаване на прост SPA базиран на Angular, използвайки Angular CLI като тестово приложение за внедряване и тестване на 3 различни услуги: ng new testapp --routing Моля, имайте предвид, че директно добавям функцията за маршрутизиране в приложението използвайки параметъра --routing. Смятам, че това е важен аспект, който трябва да тестваме, когато гледаме на хостинг опциите, тъй като маршрутизирането може да бъде предизвикателство за конфигурация в някои среди, като App Service, защото трябва да конфигурираме уеб сървъра, за да позволим обработката на маршрута от нашето клиентско приложение вместо от страна на сървъра.

За да тестваме напълно маршрутизацията, ние също трябва да имаме някои примерни маршрути. Следователно нека да добавим начален и около компонент към нашето приложение с помощта на CLI: ng генерира компонент home и ng генерира компонент about. На следващо място трябва да имаме два маршрута в нашия app-routing.module.ts, за да позволи навигация между двата компонента:

Накрая някои бутони за навигация, за да позволи на потребителя да се движи между двата компонента в нашия app.component.html:

Нека да изградим нашето приложение локално, като се подготвяме за ръчно внедряване, използвайки ng build --prod, което ни дава тази малка папка от артефакти за изграждане:

Разбира се, ние също така искаме да изсушим автоматичното внедряване като част от непрекъснат процес на внедряване. Ето защо нека да насочим нашето приложение към VSTS хранилище и да настроим дефиниция за сглобяване с тези 3 задачи:

npm инсталиране

npm изграждане

Публикувайте изграждане на артефакт от пътя към приложението

Azure App Service

Azure App Service е PaaS (платформа като услуга), предлагаща и класическият начин за хостинг на уеб съдържание в Azure. Използвайки услугата за приложения, ние трябва да се грижим за конфигурирането и мащабирането на нашата услуга на ръка. За да тествате това, създайте нова услуга за приложения в портала Azure. Избирам ниво S1 за този тест, тъй като това е ниво на входно ниво за производствени приложения.

Конфигуриране на маршрутизация

Поради естеството си да бъде PaaS, разработчиците да се грижат за конфигурацията на основния уеб сървър (в случай на Windows това е IIS). Това означава, че за да активираме маршрутизиране в нашето приложение Angular, трябва да предоставим файл web.config с инструкции за уеб сървъра как да борави с маршрутизация или хост на ъгловото приложение в приложението ASP.Net Core 2.1 с включен междинен софтуер SpaServices. Ето проста извадка от web.config с маршрутизация по SPA:

Ръчно внедряване

За ръчно внедряване нека просто използваме FTP, за да качим съдържанието на нашата папка dist и web.config в папката wwwroot на услугата за приложения. FTP идентификационните данни могат да бъдат изтеглени в портала на Azure в раздела за преглед на услугата за приложение, като кликнете върху „Получете профил за публикуване“.

Непрекъснато внедряване с помощта на Visual Studio Team Services

Настройването на дефиниция на версия в VSTS за разгръщане на приложението към услугата на приложението е доста направо, тъй като просто се нуждаем от дефиниция на празното издание с една задача:

За да конфигурирате крайна точка на FTP услуга, кликнете върху „Управление“ и добавете нова обща крайна точка със същите идентификационни данни, използвани за ръчно внедряване.

Функции на Azure

В този вариант ще използваме Azure Storage като евтин магазин за нашите статични файлове и приложение за функция Azure с прокси сървъри, които да обслужват SPA на потребителя. Това ни позволява автоматично да мащабираме (когато използваме плана за потребление), да комбинираме нашия СПА с други функции (например API обаждания) под един домейн и да управляваме нашето приложение по начин без сървър.

Затова трябва да създадем приложение за функции и акаунт за съхранение (създаден автоматично при създаване на приложение за функции). След това трябва да създадем контейнер за blob, наречен „web“ в акаунта за съхранение, където да разположим файловете си по-късно.

Магията за маршрутизация сега се случва по начина, по който конфигурираме прокси сървъри за изпращане на заявка от нашето функционално приложение към акаунта за съхранение. Следователно ще ни трябват 2 пълномощника:

Първият, който препраща заявки към базовия URL адрес към нашия index.html

и второ за пренасочване на заявки за други статични активи, като javascript файлове или таблици стилове, до тяхното местоположение в акаунта за съхранение.

Ръчно внедряване

За ръчно разгръщане щракнете върху „Контейнери“ в акаунта за съхранение в портала Azure и изберете контейнера „уеб“, който току-що създадохме. Сега нека да качим файловете от локалната версия.

Непрекъснато внедряване с помощта на Visual Studio Team Services

За да тестваме това, трябва да създадем дефиниция за второ издание във VSTS с празния шаблон на процеса и да добавим задачата за копиране на файл AzureBlob:

Съхранение на Azure

Това е най-новата опция, която съвсем наскоро влезе в публичен преглед. Идеята е да се използва съхранение, за да бъде домакин на SPA, тъй като не е необходим истински уеб сървър, който да обслужва само статични файлове, отговарящи на този вариант за ведрото „без сървър“. Затова нека създадем нов акаунт за съхранение (обща цел v2) и след това активираме статичната функция на уебсайта:

Това е цялата конфигурация, от която се нуждаем. Везни за съхранение автоматично и маршрутизиране също работи извън кутията. Основната крайна точка е URL нашият SPA. Nice!

Ръчно внедряване

За ръчно разгръщане щракнете върху „Контейнери“ в акаунта за съхранение в портала Azure и изберете контейнера „$ web“ (който се създава автоматично при активиране на статичен уебсайт). Сега нека качим файловете от локалната версия:

И това е!

Непрекъснато внедряване с помощта на Visual Studio Team Services

За да тестваме това, трябва да създадем дефиниция на трето издание във VSTS с празния шаблон на процеса и да добавим задачата за копиране на файл AzureBlob:

Уверете се, че изберете версия 2. * (предварителен преглед), в противен случай символът на разгръщане се провали, тъй като символът „$“ в името на контейнера не беше разрешен по-рано.

производителност

За да добиете представа за производителността, нека да проведем няколко артилерийски теста за натоварване на нашите 3 внедрения. Ето моите резултати при изстрелване на 1000, 10 000 и 100 000 заявки:

Има драстична полза от производителността, използвайки Azure Storage и избягвайки компонента на уеб сървъра, докато функциите и услугата за приложения работят със съпоставима скорост. Това има смисъл, тъй като и двете споделят една и съща базисна инфраструктура. Малко съм изненадан, че приложението Функция работи още по-бавно, отколкото услугата за приложения.

Намирам това още по-странно, когато сравнявам общите времена на изпълнение на теста за 100 000 заявки. Това отне около 46 секунди, за да завършите до Azure Storage и 14 минути и 27 секунди за App Service и дори 17 минути и 2 секунди за приложението Function. Очаквах приложението Function да набира скорост с течение на времето, тъй като очаквах автоматично да се мащабира хоризонтално. Което изглежда не работи в този сценарий.

Така че имаме ясен победител в тази дисциплина: Съхранението е наистина бързо!

Разходи

Правилното определяне на цената е сложно, тъй като всички имат различни модели за таксуване. Ето моят примерно изчисление на месечните разходи за 100 000 заявки на ден в региона на Западна Европа (което не съм 100% сигурен, че е пълно и точно!):

Приложение за услуги

1x S1 инстанция в Западна Европа с Windows (1 ядро, 1,75 GB RAM, 50 GB съхранение) = 61,56 € / месец

Приложение за функции (+ съхранение)

Нашият СПА се състои от 5 файла * 100 000 заявки на ден * 31 = 15 500 000 заявки на месец общо. Общият размер на нашето приложение е приблизително 0,33 MB, което представлява общо 0,98 TB изходящ трафик на месец. Минималното време за изпълнение е 100ms (което би било достатъчно за нашата прокси цел), тъй като можем да обработим 10 заявки / изпълнение секунди.

1x функционално приложение с 1.550.000 изпълнения с време на изпълнение 1s всеки месец (всяко по-малко от 128 MB памет) за обработка на заявките, преминаващи през прокси сървъри = 0,17 € / месец

1x акаунт за общо предназначение V2 Block Blob Storage акаунт с излишък от LRS и ниво на горещ достъп. Капацитет 1 GB (всъщност имаме нужда от само 300kb, но това е най-малкият наличен размер), 100 операции по записване, 100 операции със списъци, 15 500 000 операции за четене и извличане на данни от 0,98 TB = 5,64 € / месец

Общо: 5,81 € / месец.

съхранение

За съхранението просто вземаме същото изчисление, отколкото по-горе:

1x акаунт за общо предназначение V2 Block Blob Storage акаунт с излишък от LRS и ниво на горещ достъп. Капацитет 1 GB (всъщност имаме нужда от само 300kb, но това е най-малкият наличен размер), 100 операции по записване, 100 операции със списъци, 15 500 000 операции за четене и извличане на данни от 0,98 TB = 5,64 € / месец

заключение

  • Хостингът на SPA в чисто съхранение е най-евтиният и най-ефективен начин за работа в Azure
  • Хостингът на SPA във функционално приложение с прокси сървъри идва с минимални допълнителни разходи, но масивен спад в производителността. Този вид странно, както трябва да мащабирам хоризонтално. Определено ще направя още изследвания тук ...
  • Хостингът на SPA в App Service изисква допълнителни усилия за конфигуриране за поддържане на маршрутизация (става по-сложно, когато се комбинира например с Web API)

Хостингът на SPA в хранилището трябва да е безпроблемен за ситуации на разработка, тестване и поставяне, тъй като е бърз за настройка и в повечето случаи дори безплатен за тези сценарии. Все още не открих никакви недостатъци, така че ще се потопя малко по-дълбоко и ще видим дали можем да го използваме и в производството.

Моля, не се колебайте да изпратите отзиви.