Найкращий спосіб розмістити додаток на одній сторінці (SPA) в Microsoft Azure

Традиційний сервіс додатків Azure порівняно з функціями Azure V2 з проксі-серверами та статичним веб-сайтом зберігання Azure (попередній перегляд)

Мені часто потрібно розгортати статичні веб-сайти (наприклад, веб-сайт нашої компанії https://www.media-lesson.com) або програми на одній сторінці, і я завжди шукаю способи покращити вартість та час розгортання.

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

Незадовго до того, як Майкрософт 14 травня додав підтримку проксі-серверів у функціях Azure-функції 2.0.11776-альфа, що забезпечує спосіб розміщення статичного веб-сайту в зберіганні Azure та переадресацію трафіку через проксі-маршрут маршруту Azure Function.

Обидва нові варіанти доповнюють традиційний спосіб розміщення (статичного) веб-сайту в службі додатків Azure. Існує ще більше варіантів розміщення веб-сайтів у Azure, напр. використовуючи контейнери, Docker, Kubernetes, віртуальні машини тощо, але я буду тримати увагу на простому та економічно вигідному розгортанні програм на одній сторінці.

А оскільки ми оцінюємо варіанти хостингу, також варто порівнювати ручне та автоматичне розгортання за допомогою служб Visual Studio Team (VSTS) для згаданих служб.

Тож давайте відповімо на ці запитання, щоб допомогти вирішити, яку послугу використовувати під час розміщення програми на одній сторінці:

  1. Скільки зусиль докладається вручну та автоматично розгортати додаток?
  2. Скільки потрібно конфігурації?
  3. Як він масштабується?
  4. Як це виконується?
  5. Скільки це коштує?

Тестовий додаток

Тож давайте розпочнемо цей експеримент, створивши простий SPA на основі Angular, використовуючи Angular CLI як тестовий додаток для розгортання та тестування на трьох різних службах: новий testapp - маршрутизація. Зверніть увагу, що я безпосередньо додаю функцію маршрутизації у додаток використовуючи параметр --ruuting. Я вважаю це важливим аспектом для перевірки варіантів хостингу, оскільки маршрутизація може бути проблемою конфігурації в деяких середовищах, таких як Служба додатків, тому що нам потрібно налаштувати веб-сервер, щоб дозволити обробку маршруту нашим клієнтським додатком замість серверної сторони.

Для повного тестування маршрутизації нам також потрібно мати кілька зразкових маршрутів. Тому давайте додавати домашній та про компонент до нашого додатку за допомогою CLI: ng generation home home and ng generating компонент about. Далі нам потрібно мати два маршрути в нашому додатку-routing.module.ts, щоб дозволити навігацію між двома компонентами:

Нарешті кілька кнопок навігації, щоб користувач міг переходити між двома компонентами нашого app.component.html:

Давайте створимо наш додаток локально, готуючись до ручного розгортання за допомогою ng build --prod, який дає нам цю маленьку папку з артефактами збірки:

Звичайно, ми також хочемо сушити автоматичне розгортання як частину безперервного процесу розгортання. Тому давайте піднімемо наш додаток до сховища VSTS і налаштуємо визначення збірки за допомогою цих трьох завдань:

npm встановити

npm збірка

Опублікувати побудову артефакту від шляху до програми

Служба додатків Azure

Служба додатків Azure - це 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 Function з проксі-сервісами, щоб обслуговувати SPA для користувача. Це дозволяє нам автоматично масштабувати (при використанні плану споживання), поєднувати наш SPA з іншими функціями (наприклад, дзвінками API) під одним доменом і керувати нашим додатком без сервера.

Тому нам потрібно створити функціональну програму та обліковий запис сховища (автоматично створюється під час створення додатка функцій). Далі нам потрібно створити контейнер для блоків під назвою “web” у обліковому записі пам’яті, куди ми згодом розгорнемо наші файли.

Магія маршрутизації тепер відбувається в тому, як ми налаштовуємо проксі-сервери для переадресації запиту від нашого додатка функції до облікового запису пам’яті. Тому нам знадобляться 2 проксі

Перший, який пересилає запити до базового URL-адреси до нашого index.html

а другий - для переадресації запитів на інші статичні об’єкти, наприклад файли javascript або таблиці стилів, до їх розташування в обліковому записі пам’яті.

Ручне розгортання

Щоб вручну розгорнути, натисніть на "Контейнери" в обліковому записі на порталі Azure та виберіть контейнер "Веб", який ми тільки що створили. Тепер завантажимо файли з локальної збірки.

Постійне розгортання за допомогою команд Visual Studio Team Services

Щоб перевірити це, нам потрібно створити визначення другого випуску у VSTS із порожнім шаблоном процесу та додати завдання копіювання файлу AzureBlob:

Зберігання Azure

Це найновіший варіант, який нещодавно перейшов у загальнодоступний попередній перегляд. Ідея полягає у тому, щоб використовувати сховище для розміщення SPA, оскільки справжній веб-сервер не потрібен для обслуговування лише статичних файлів, які кваліфікують цей варіант для мовлення "без сервера". Тож створимо новий обліковий запис пам’яті (загальна мета v2), а потім увімкніть статичну функцію веб-сайту:

Це вся необхідна нам конфігурація. Ваги зберігання автоматично і маршрутизація також працює поза коробкою. Основною кінцевою точкою є URL-адреса нашого SPA. Приємно!

Ручне розгортання

Для ручного розгортання натисніть на "Контейнери" в обліковому записі на порталі Azure та виберіть контейнер "$ web" (який створюється автоматично при включенні статичного веб-сайту). Тепер завантажимо файли з локальної збірки:

І це все!

Постійне розгортання за допомогою команд Visual Studio Team Services

Щоб перевірити це, нам потрібно створити визначення третього випуску у VSTS із порожнім шаблоном процесу та додати завдання копіювання файлу AzureBlob:

Переконайтесь, що виберіть версію 2. * (попередній перегляд), інакше завивка розгортання не вдасться, оскільки символ "$" у назві контейнера раніше не був дозволений

Продуктивність

Щоб отримати уявлення про продуктивність, давайте проведемо кілька тестів навантаження artillery.io на наших 3-х розгортаннях. Ось мої результати при запуску 1000, 10000 та 100 000 запитів:

Існує різка перевага для продуктивності використання Azure Storage та уникнення компонента веб-сервера, тоді як функції та сервіс додатків працюють із порівнянною швидкістю. Це має сенс, оскільки обидва мають однакову базову інфраструктуру. Я трохи здивований, що додаток Function працює ще повільніше, ніж Служба додатків.

Я вважаю це ще більш дивним, коли порівнюю загальний час виконання для тестування 100 000 запитів. На завершення до служби зберігання Azure пішло близько 46 секунд, 14 хвилин і 27 секунд для служби App і навіть 17 хвилин і 2 секунди для додатка Function. Я б очікував, що додаток «Функція» з часом набере швидкість, оскільки я очікував, що він автоматично масштабується горизонтально. Що, здається, не працює в цьому сценарії.

Тож у нас є чіткий переможець у цій дисципліні: Зберігання дійсно швидке!

Витрати

Правильно визначити вартість складно, оскільки у всіх є різні моделі виставлення рахунків. Ось мій приклад розрахунку щомісячних витрат на 100 000 запитів на день у регіоні Західної Європи (я не впевнений на 100%, що це повний і точний!):

Служба додатків

1x екземпляр S1 у Західній Європі з ОС Windows (1 ядро, 1,75 ГБ оперативної пам’яті, 50 Гб пам’яті) = 61,56 € / місяць

Додаток для функцій (+ сховище)

Наш SPA складається з 5 файлів * 100 000 запитів на день * 31 = 15 500 000 запитів на місяць. Загальний розмір нашої програми становить приблизно 0,33 Мб, що складає 0,98 ТБ вихідного трафіку на місяць. Мінімальний час виконання - 100 мс (що було б достатньо для нашої цілі проксі), оскільки ми можемо обробляти 10 запитів / виконання секунди.

1x функціональний додаток з 1.550.000 виконань із часом виконання 1 секунди щомісяця (кожен менше 128 Мб пам'яті) для обробки запитів через проксі-сервіси = 0,17 € / місяць

1x Обліковий запис загального призначення V2 Блоковий блок зберігання даних з надмірністю LRS та гарячим рівнем доступу. Ємність 1 Гб (насправді нам потрібно всього 300 кбіт, але це найменший розмір), 100 операцій запису, 100 операцій зі списком, 15 500 000 операцій зчитування та пошуку 0,98 ТБ даних = 5,64 € / місяць

Разом: 5,81 € / місяць.

Зберігання

Для зберігання ми беремо той самий розрахунок, що і вище:

1x Обліковий запис загального призначення V2 Блоковий блок зберігання даних з надмірністю LRS та гарячим рівнем доступу. Ємність 1 Гб (насправді нам потрібно всього 300 кбіт, але це найменший розмір), 100 операцій запису, 100 операцій зі списком, 15 500 000 операцій зчитування та пошуку 0,98 ТБ даних = 5,64 € / місяць

Висновок

  • Хостинг SPA в чистому сховищі - це найдешевший і найефективніший спосіб роботи в Azure
  • Хостинг SPA у функціональній програмі з проксі-серверами отримує мінімальні додаткові витрати, але значне падіння продуктивності. Цей вид дивний, як я повинен масштабувати горизонтально. Я обов'язково проведу більше досліджень тут…
  • Розміщення SPA в службі додатків вимагає додаткових зусиль конфігурації для підтримки маршрутизації (стає складнішим у поєднанні, наприклад, з веб-API)

Хостинг SPA в Storage повинен бути непродуманим для розробок, тестів та постановок, оскільки це швидко налаштовується, а в більшості випадків навіть є безкоштовним для цих сценаріїв. Я не знайшов жодних недоліків, тому занурююсь трохи глибше і побачу, чи зможемо ми також використати це у виробництві.

Будь ласка, не соромтеся надати відгук.