Часть 1: Настройка — Azure DevOps и наша безголовая CMS
Часть 2: Создание нашего сайта Angular
Часть 3: Знакомьтесь, Скалли, наш генератор статических сайтов
Часть 4 : Дешевый хостинг — вы здесь
Часть 5. Сборка и развертывание с помощью Azure DevOps
Есть много мест, где вы могли бы разместить статический сайт. У меня уже есть много вещей в Azure, и я слышал, что вы можете обслуживать статический сайт из хранилища BLOB-объектов, и я хотел попробовать. Это дешево и несложно.
Когда я говорю дешево, это почти бесплатно. Я использовал калькулятор цен и настроил его так, чтобы он имел следующие параметры:
- 10 000 операций записи
- 10 000 операций списка и создания контейнеров
- 10 000 000 операций чтения
Ежемесячная цена составляла 4,14 доллара. Если вы уменьшите его до 1 миллиона прочтений, цена упадет до 0,54 доллара. Мы также собираемся помещать все чтения в нашу CDN, поэтому мы, вероятно, будем платить копейки за учетную запись хранения.
Вот как это настроить:
Создайте учетную запись/войдите в Azure
Создать учетную запись хранения
- Нажмите «Создать ресурс».
- Найдите «Учетные записи хранения»
- Нажмите «Создать»
- Убедитесь, что для параметра «Вид учетной записи» установлено значение «StorageV2», и установите другие параметры по своему усмотрению.
- Нажмите «Просмотреть и создать».
- Подождите, это может занять минуту или две.
Настройте статический веб-сайт
- Откройте созданную учетную запись хранения.
- Найдите колонку «Статический веб-сайт».
- Установите переключатель «Статический веб-сайт» в положение «Включено».
- Нажмите «Сохранить»
Настроить CDN
Я предполагаю, что вам нужен домен HTTPS, поскольку сейчас это довольно стандартно. Если вам нужен только Http, это проще и шаги здесь.
Для HTTPS нам нужно сначала настроить сеть доставки контента (CDN). CDN размещает ваш контент на разных серверах по всему миру и доставляет самый близкий к вашему пользователю, когда они запрашивают его с вашего URL-адреса. Это то, что вы можете сделать, когда ваш сайт состоит только из статических файлов. Это удивительно, потому что это сделает наш сайт еще быстрее для конечного пользователя, цена в том, что наши обновления не мгновенны. Мы должны дождаться их распространения через CDN. Мы можем и будем запрашивать очистку CDN при обновлении, но это занимает несколько минут.
Стоимость CDN варьируется в зависимости от того, сколько контента вы обслуживаете и из какого региона он обслуживается. Цены (по состоянию на 26.03.2021) колеблются от 0,08 до 0,23 доллара США/ГБ за первые 10 ТБ. Если у вас есть личный блог без тонны трафика, стоимость должна быть номинальной.
Вот как это настроить:
- Откройте свою учетную запись хранения
- В разделе «Служба BLOB-объектов» выберите «Azure CDN».
- Выберите варианты
- убедитесь, что в поле «исходное имя хоста» указана конечная точка больших двоичных объектов (например, mystorageaccount.z5.web.core.windows.net)
- Нажмите «Создать»
После завершения создания у вас должен быть новый ресурс, называемый «конечной точкой».
Настройте свой собственный домен
- Откройте конечную точку, созданную выше.
- Обратите внимание на значение «Имя хоста конечной точки».
- Перейдите к своему провайдеру DNS и создайте запись CNAME, указывающую на имя хоста. Вы можете установить значение «имя» записи на «cdnverify», если вы измените значение «данные» на «cdnverify.yourendpoint.azureedge.net». Это позволит вам проверить имя, не прерывая текущий DNS вашего сайта.
- Подождите, пока изменение DNS распространится
- Вернитесь к своей конечной точке в Azure.
- Щелкните колонку «Пользовательские домены».
- В левом верхнем углу выберите «+ Пользовательский домен», чтобы добавить собственный домен.
- Добавьте свой домен
- Переключите Https в положение «Вкл.»
- Установите «Тип управления сертификатом» на «Управляемый CDN» **
- Сохранять
- Ждать
* если вы хотите использовать свой корневой домен вместо www.mydomain.com, azure не поддерживает это с их бесплатным сертификатом. Есть два пути, которые я знаю, чтобы обойти это.
Путь 1: Перейдите к своему провайдеру домена и перенаправьте корень на www. Вот инструкции для Google Domains (ваши могут отличаться). Это то, что я сделал. Мой выглядит так:
Путь 2 — пойти и получить настоящий сертификат. НЕ ПЛАТИТЕ СОТНИ, вы можете получить один из Namecheap… дешево. О настройке этого для нашей ситуации есть отличная статья здесь.
Фу!
Если у вас есть какой-либо контент в вашем $web blob, теперь вы сможете просматривать его в своем домене. Если у вас там ничего нет, но вы хотите попробовать, просто используйте Azure Storage Explorer, чтобы поместить туда простой файл index.html.
Мы живы! Последнее, что нам нужно сделать, это создать конвейеры сборки и выпуска. Пойдем.
‹ Часть 3. Познакомьтесь со Скалли, нашим генератором статических сайтов
Часть 5. Создание и развертывание с помощью Azure DevOps ›
