Представим, что вы хотите разместить простой веб сайт в Microsoft Azure и не собираетесь потратить на это много денег. Что нам для этого надо? Azure WebApp? Но у нас же обычная статика. Отдавать почти 50$ в месяц? Или может запустить в контейнере? Собирать контейнер? Или поднять kubernetes и там создавать свои поды? Поднять свою виртуальную машину и настроить nginx или apache? Серьезно? Нам же нужно просто запулить свой лендинг и наслаждаться.

На самом деле, есть простой выход. В прошлом году, в Azure появилась возможность строить веб сайты на обычном хранилище — Azure Storage. В этом посте мы поговорим только про статику, про запуск более сложных вещей, аля с бэком под flask и vuejs будет в следующем посте. Там тоже есть интересные вариант. ;)

Идея в том, что в свойствах вашего Storage Account есть настройка — Static Website, который создает в блоб хранилище каталог $web, куда будут переправляться все запросы, которые приходят на url вашего Storage Account.

Наша задача просто прописать индекс файл, всё. Затем мы можем открыть в вебе Storage Explorer (preview) или скачать Microsoft Azure Storage Explorer и залить наш веб сайт. Для примера, наш прямой адрес на Storage Account — https://telegramwebsites.z6.web.core.windows.net

Но, мы можем хостить много сайтов на одном Storage Account и при этом платить за это ооооочень не много. Для этого мы будем использовать CDN, которые тарифицируется по потребленному трафику. Я выбрал самый простой вариант — Standard Microsoft CDN.

Внутри Storage Account создадим нужное количество каталогов для наших будущих сайтов. В моём случае это site1, site2, site3.
Для примера я взял шаблоны bootstrap и загрузил их в эти каталоги.

Да, как вы правильно понимаете, если теперь зайти на https://telegramwebsites.z6.web.core.windows.net/site1 или https://telegramwebsites.z6.web.core.windows.net/site2 или https://telegramwebsites.z6.web.core.windows.net/site3, то что-то там откроется, но нас это пока не устраивает. Мы ведь серьезная компания и такой адрес нам не совсем подходит. Кроме этого видно, что из-за путей есть проблемы с загрузкой js и css, но сейчас это не важно.

Вернёмся к CDN. Он нам нужен, чтобы спрятать за своими доменами вот эти созданные каталоги.

Откроем CDN и создадим Endpoints.
В Name будет url нашего входа в CDN, в Origin Hostname — url нашего Storage Account, Origin path — каталог на Storage Account.

Получились вот такие 3 эндпоинта: http://site1.azureedge.net/, https://site2.azureedge.net/, https://site3.azureedge.net/
Если вы перейдёте по ним, то вам уже откроются полноценные веб сайты, которые были выше по урлу storage account. И js, и css успешно подгружаются, где включен https — работает https, все прекрасно. Но еще нет. Теперь мы прикрутим свои домены. ;)) Вы же помните, что мы серьезная организация.

В свойствах каждого Endpoints есть настройка — Custom domains (она, кстати, есть и в Storage Account и если вам нужен только один веб сайт, то там же можно сделать что-то подобное).
Но кроме того, что мы можем туда добавить свой домен, мы можем заказать сертификат от самого DigiCert и всё в одной консоли. ;) Как вам? Есть нюансы.

Перед тем, как добавить домен, нам необходимо объяснять Microsoft Azure, что он наш. Для этого нам необходимо создать cname запись.
Более подробно есть в документации, но конкретно в моём случае, у моего регистратора в панели это выглядит так:
cdnverify.contoso.com CNAME cdnverify.contoso.azureedge.net

Ждём несколько часов, возвращаемся в настройки нашего эндпоинта и добавляем домен. Но и это еще не всё. ;) Теперь мы можем включить https для нашего домена. Тут есть нюанс. Валидация от DigiCert CA происходит через cname на www: www.contoso.com CNAME сontoso.azureedge.net Но вы же прекрасно понимаете, что contoso.com и www.contoso.com это так-то разные вещи, а мы хотим, чтобы работало и на корень, и на www. После того, как DigiCert не найдет cname запись, они отправят вам на почту письмо с подтверждением. Там просто кликнуть ссылку, поставить галку и всё. В моём случае мне пришлось закинуть mx записи на Яндекс и просто форвардить всю почту на один мой аккаунт.
DigiCert будет отправлять на эти ящики:
admin@your-domain-name.com
administrator@your-domain-name.com
webmaster@your-domain-name.com
hostmaster@your-domain-name.com
postmaster@your-domain-name.com
Вот так это выглядит. ;) Они отправили на все.

Кстати, на www можно прописать cname и добавить в Custom Domains. Картинка примерно такая.

А теперь вещи, которые не стоит делать на боевых сайтах. Смотрите, какая ситуация. На www.kodeks12.ru у нас есть cname, который отправляет на https://site3.azureedge.net, но для корня домена нам же требуется прописать А-запись. Вот тут мы сделаем небольшую хитрость, которая показала то, что в принципе все может работать месяцами и никаких проблем пока не было. Мы возьмём nslookup site3.azureedge.net и пропишем IP адрес, которые отдаст нам CDN. Да, это неправильно, да, если что-то пойдёт не так, нам придется менять адреса на DNS, но, как показывает практика — это работает.

Вот наш IP и вот наша А запись.

С www таких проблем не будет, но мне вот глаз режет это www в начале имени домена. Для вариантов аля blog.domain.com таких проблем не будет.
Для примера, на эндпоинт https://site2.azureedge.net я прописал http://azure.aibootcamp.ru/ и http://az.aibootcamp.ru/ И да, туда тоже можно подвязать https. ;)

Подведем итог? Что мы получили?
Мы создали Storage Account — https://telegramwebsites.z6.web.core.windows.net/
Создали каталог — https://telegramwebsites.z6.web.core.windows.net/site3
Прокинули в этот каталог все запросы через CDN — https://site3.azureedge.net/
Привязали домен с https — https://kodeks12.ru

Из https://telegramwebsites.z6.web.core.windows.net/site3 в https://kodeks12.ru

И самое главное. Бабки! Стоит то сколько? Давайте считать. За Custom domains дополнительной оплаты нет, мы платим только за Storage Account. Плюс, мы платим за траффик через CDN. Но стоит это, как бы вам сказать, очень мало.
1,14$ — вот столько стоит storage 1 GB данных и по 100 000 операций чтение/запись в месяц. В МЕСЯЦ, Карл! Один доллар и четырнадцать центов.
А это CDN — First 10 TB /Month — 5.07РУБ per GB. Пять рублей, П Я Т Ь. Да, да, пять рублей. ;) Сами посмотрите — https://azure.microsoft.com/en-us/pricing/details/cdn/
Я открыл расходы по подписке и там как бы вот так:

На этом пока хватит. У нас есть какой-то статичный сайт, все работает. В следующем посте разберемся, как сделать что-то более сложное, в стиле SPA (single page application), но тоже за сущие копейки.