На сегодняшний день существует 2 самые популярные платформы для размещения статических веб-сайтов: Netlify и Google App Engine (GAE).

В последнее время Netlify приобрела большую популярность, потому что она обеспечивает интегрированный опыт создания и развертывания статических веб-сайтов на одной платформе.

GAE является более гибким с точки зрения поддержки нестатических веб-сайтов, но ему определенно не хватает уровня интеграции, который обеспечивает Netlify. Так зачем же мне во многих случаях использовать GAE? Ответ прост âÃÂàчасто GAE предлагает лучшие цены. В то же время он позволяет использовать все функции Netlify и многое другое с помощью нескольких простых инструментов (GitHub Actions и Reliza Hub), которые я опишу в этой статье.

 Цены
Позвольте мне сначала рассмотреть сценарии ценообразования, когда комбинация GAE + GitHub Actions имеет больше смысла. Ключевым моментом являются минуты сборки. Бесплатный уровень Netlify дает только 300 минут сборки в месяц, что не так уж и много с любой точки зрения. Если вы используете что-то вроде статического приложения node.js, и ваши сборки занимают в среднем 2-3 минуты, вы получаете только около 100+ сборок в месяц на Netlify, чего может быть недостаточно. Особенно, если у вас больше одного сайта.

Если вам нужно больше минут сборки на Netlify âÃÂÃÂ, либо заплатите 7 долларов за каждые 500 дополнительных минут, либо перейдите на следующий уровень, который включает 1000 минут, но стоит 45 долларов в месяц. С другой стороны, в GitHub Actions вы получаете 2000 минут сборки бесплатно для частных репозиториев и неограниченное количество минут сборки для общедоступных. Допустим, вы создаете веб-сайт с документацией и решили опубликовать его на GitHub âÃÂàвы получаете неограниченные минуты сборки на GitHub Actions âÃÂÃÂ, и это делает огромная разница

Следующее соображение — стоимость трафика. Netlify предоставляет пропускную способность 100 ГБ в месяц, включенную в бесплатный уровень, что является щедрым. Google предлагает 1 ГБ исходящего трафика в день бесплатно, что составляет около 30 ГБ в месяц. Поэтому, если ваш исходящий объем составляет от 30 ГБ до 100 ГБ, вы можете получить более выгодную сделку с Netlify. Однако, как только вы превысите 100 ГБ, Netlify сразу же взимает с вас 20 долларов за следующие 100 ГБ в этом месяце. У Google есть ценовая политика за исходящий ГБ, которая стоит 0,12 доллара США. Это означает, что вы платите 12 долларов за 100 ГБ âÃÂàпротив 20 долларов за 100 ГБ на Netlify.

Таким образом, в зависимости от трафика, вы можете быть лучше либо на Netlify, либо на GAE с точки зрения выхода. Но во многих случаях GAE и здесь будет лучше.
Заключительное слово о ценах âÃÂÃÂ, если вы используете что-то вроде GitHub Actions или CircleCI для своих сборок, вы все равно можете выполнить развертывание на Netlify ‒ что делает GitHub Actions более гибкая система

 Настройка проекта Google App Engine
Мы начинаем с перехода на httpsconsole.cloud.google.com/appengine и создаем новый проект. Если он у вас уже был âÃÂÃÂ, сначала щелкните имя своего проекта вверху, а затем нажмите
**НОВЫЙ ПРОЕКТ**

Введите имя проекта, отметьте здесь идентификатор проекта, который вы получаете (он понадобится вам позже) âÃÂàв моем случае это
* âÃÂÃÂevie-landing-tutorialâÃÂÃÂ* âÃÂàи нажмите **СОЗДАТЬ Затем переключитесь на этот проект из селектора проектов в верхней части страницы

Нажмите на
**Создайте приложение** и выберите нужный регион. Затем для статического приложения выберите Python и стандартную среду (бесплатный уровень применяется только к стандартной среде). На этом этапе ваше приложение готово к следующим шагам.

Чтобы указать свое доменное имя для этого приложения, перейдите по ссылке httpsconsole.cloud.google.com/appengine/settings/domains.

и нажмите
**Добавить собственный домен. Следуйте инструкциям и направьте DNS из вашего домена на предоставленные Google записи. Когда это будет сделано, Google автоматически направит ваш домен на это приложение, а также будет управлять SSL-сертификатом.

Наконец, нам нужно подготовить учетную запись службы, которая будет отвечать за автоматическое развертывание. Перейдите к httpsconsole.cloud.google.com/iam-admin/serviceaccounts?project=your_project_id (замените
*your_project_id *в этой ссылке с фактическим идентификатором вашего проекта, в моем случае это будет *evie-landing-tutorial Вы попадете на следующую страницу меню:
Щелкните значок с тремя точками в столбце «Действия» рядом с учетной записью службы App Engine по умолчанию. И выберите
**Создать ключ** в раскрывающемся меню.

Выберите JSON в качестве типа ключа и нажмите
**СОЗДАТЬ Это загрузит файл .json на ваш компьютер. Последнее, что нам нужно сделать, это закодировать этот файл в формате base64 âÃÂàнам это понадобится позже при переходе на GitHub Actions

Это можно сделать с помощью командной строки следующим образом:
base64 ваш_json_file.json>ключ.base64
Тогда файл key.base64 будет иметь ключ в кодировке base64.

**Примечание по безопасности здесь: эти ключевые файлы json и base64 позволяют управлять вашим проектом GAE, поэтому после добавления их в GitHub Actions (как я покажу ниже) рекомендуется уничтожить удалите эти файлы. Это можно сделать из cli следующим образом:
уничтожить key_file_name&& rm key_file_name
После получения ключа нам нужно включить API Google App Engine, для этого посетите страницу httpsconsole.developers.google.com/apis/api/appengine. .googleapis.com/overview и нажмите
**ВКЛЮЧИТЬ**

 Настройка репозитория GitHub и действий GitHub
Наконец, пришло время подготовить наш репозиторий GitHub. В этом руководстве рассматривается настройка темы Evie с помощью Undraw. (Это тема, которую я сейчас использую для целевой страницы Reliza Hub!) Оригинальная тема Evie размещена здесь, но я буду использовать форк Reliza в этом репозитории.

Как я уже упоминал в других статьях, моя философия сборки в эти дни заключается в докеризации всего и использовании
docker build как унифицированную среду сборки CI на нескольких платформах. Поэтому я добавил Dockerfile, конфигурацию nginx, а также обновил версии npm по сравнению с оригинальной темой Evie, чтобы получить работающую докеризованную сборку.

Теперь, если мы сделаем
Команда docker build для содержимого репозитория Reliza Evie, она создаст образ на основе nginx, обслуживающий тему Evie, без документации на порту 80.

Пришло время подготовить скрипт GitHub Actions. Мы будем использовать действие action-hub/gcloud@master, которое упрощает весь процесс.

Мы начинаем с установки 2 секретов GitHub Actions, необходимых для действия. Перейдите в «Настройки» ->«Секреты» внутри вашего репозитория GitHub и нажмите
**Новый секрет** для установки следующих 2 секретов:
- GCLOUD_PROJECT_ID âÃÂàустановите идентификатор проекта, указанный при создании проекта: в моем случае evie-landing-tutorial

- GOOGLE_APPLICATION_CREDENTIALS âÃÂàзадайте содержимое файла json-key в кодировке base64, полученного для учетной записи службы Google выше.

Теперь в репозитории я создаю каталог .github, а затем внутри него каталог рабочих процессов. И внутри него я создаю gae_build.yml. Также нам нужно добавить файл app.yaml, который содержит конфигурацию GAE и будет очень простым для случая использования статического приложения, которое у меня есть.

После того, как вы отправите этот код, он запустит сборку GitHub Actions, которая выполнит развертывание вашего приложения GAE, и ваши сервисы будут запущены! Каждое последующее нажатие на GitHub автоматически запускает новую сборку GitHub Actions и автоматически обновляет приложение в GAE.

Теперь у вас есть готовый базовый конвейер CICD для вашего статического веб-сайта! На этом можно остановиться или продолжить чтение о том, как добавить функции утверждения и видимости развертывания с помощью Reliza Hub.

 БОНУС: добавление утверждений и видимости с помощью Reliza Hub

Предположим, что мы не хотим, чтобы каждая новая сборка запускалась в производство автоматически. Вместо этого мы хотим, чтобы они были развернуты сначала где-то, что не является производственным, а затем, если они нам понравятся, вам или вашему утверждающему (скажем, вашему менеджеру по маркетингу) нужно нажать кнопку и способствовать производству  Вот как этого можно добиться с помощью Reliza Hub поверх конфигурации, которую я описал до сих пор.   1 âÃÂàПотоковая передача метаданных релиза в Reliza Hub Сначала перейдите на httpsapp.relizahub.com, выполните аутентификацию с помощью GitHub и создайте свою организацию, в моем случае я буду использовать *âÃÂÃÂEvie Landing TutorialâÃÂÃÂ* в качестве названия организации. Щелкните пункт меню **VCS**, а затем значок с кружком плюса, чтобы добавить репозиторий VCS.  Вставьте URI вашего репозитория GitHub во входные данные, и Reliza Hub автоматически проанализирует его.  Нажмите **Отправьте, и это создаст ваш репозиторий. Перейдите в меню «Проекты» и щелкните значок с кружком плюса, чтобы создать проект. Введите название вашего проекта (я буду использовать схему версии *Evie Landing Set для Single Component (Major) âÃÂÃÂ, потому что GAE использует собственную версию, состоящую из одного компонента âà ÂÃÂ, который мы будем использовать внутри Reliza Hub как есть. Выберите репозиторий VCS, который вы только что создали на предыдущем шаге.  И нажмите **Отправить Это создаст новый проект. Затем щелкните имя этого вновь созданного проекта и щелкните значок замка, чтобы сгенерировать ключ API проекта.  Когда вы увидите идентификатор API и ключ API, сгенерированные для вашего проекта, создайте 2 новых секрета в действиях GitHub âÃÂàRELIZA_API_PROJECT_ID и RELIZA_API_PROJECT_KEY с соответствующими значениями.  Теперь пришло время обновить наш скрипт gae_build.yml, чтобы передавать детали сборки в Reliza, а также переключиться в режим без продвижения. Это означает, что при каждом нажатии git развертывание будет создаваться в GAE, но Google не будет переключать трафик на это новое развертывание до тех пор, пока не будет выполнено какое-либо ручное действие позже.  Обновленный скрипт включает отчеты об отслеживании времени сборки в Reliza Hub, а также будет иметь URI каждого нерекламируемого развертывания в GAE. Вы можете найти описание различных флагов, которые мы используем, в репозитории GitHub клиента Reliza Go.  После выполнения действий GitHub при завершении отправки вы можете перейти на страницу своего релиза в Reliza Hub и увидеть следующее изображение:  Обратите внимание, что нажатие на Ссылка **Проверить конечную точку** приведет вас к фактической версии развертывания в GAE, соответствующей этой записи исходного кода, но еще не повышенной для обслуживания трафика.  Вы также можете добавить слабую интеграцию, следуя приведенному здесь руководству, чтобы получать уведомления о каждом новом выпуске на Reliza Hub.   2 âÃÂàДобавление утверждений Перейдите на страницу настроек Reliza Hub и внизу настройте матрицу утверждения для среды PRODUCTION. В моем случае мне потребуется только одобрение отдела маркетинга для запуска выпуска в производство. Как показано ниже:  Нажмите на **Сохранить матрицу**  Затем я устанавливаю приложение Reliza GitHub âÃÂàhttpsgithub.com/apps/reliza-hub âÃÂàи следую инструкциям IâàÃÂя написал ранее, чтобы зарегистрировать его для проекта  Наконец, новый рабочий процесс GitHub Actions, который будет запускаться при одобрении Reliza Hub, вы можете увидеть здесь. По сути, этот рабочий процесс запрашивает у Reliza Hub самую последнюю версию, одобренную для производства, а затем запрашивает у Google App Engine переключение трафика на эту версию.  Единственное, что требует настройки в этом скрипте, это переменная окружения RELIZA_PROJECT_ID, которую нужно установить в UUID проекта, полученный на странице проекта в Reliza Hub:  Теперь последний выпуск проекта с одобрением отдела маркетинга будет автоматически продвигаться на стороне Google App Engine.Подробнее о том, как добавлять утверждающих в организацию, см. в моем учебном видео об утверждениях3 âÃÂàДобавление видимости для того, что развернуто, когдаНаконец, мы хотим добавить в Reliza Hub видимость того, какой выпуск фактически развернут и когдаДля этого сначала перейдите в раздел «Экземпляры» в Reliza Hub и щелкните значок с кружком плюса, чтобы создать новый instanceЗатем я ввожу URI своего экземпляра и выбираю рабочую среду PRODUCTION âÃÂÃÂ, поскольку у меня есть только рабочая среда на этом статическом веб-сайте.Нажатие**Отправить** создает мой новый экземплярЗатем я выбираю этот вновь созданный экземпляр и нажимаю на значок замка, чтобы сгенерировать его ключ APIПосле создания идентификатора API и ключа API создайте 2 новых секрета в GitHub Actions âÃÂàRELIZA_API_INSTANCE_ID и RELIZA_API_INSTANCE_KEY с соответствующими значениямиПри этом я сначала обновляю свой сценарий развертывания при утверждении, чтобы добавить раздел для проверки развертывания в GAE и передать его в Reliza Hub.И я также добавляю рабочий процесс cron GitHub Actions для проверки состояния моего приложения GAEПосле запуска любого из этих рабочих процессов мы получим моментальный снимок развертывания нашего приложения GAE в Reliza Hub в нашем экземпляре выглядит следующим образом:РезюмеВот и все, теперь у нас есть полноценный конвейер CI CD с кнопками GitHub Actions, развертываемыми в GAE, утверждениями и видимостью. под управлением Reliza Hub.Мы также можем получать уведомления Slack, а наш менеджер по маркетингу просматривает изменения и нажимает кнопки, чтобы продвигать их в производство, не спрашивая технического персонала.Насколько это круто?
Если вы хотите поговорить со мной и обсудить этот или другой рабочий процесс в дальнейшем, закажите со мной 30-минутную демоверсию Reliza Hub без каких-либо условий ÃÂ и я сделаю все возможное, чтобы помочь.