Сьогодні є 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 як тип ключа та натисніть
**CREATE Це завантажить файл .json на вашу машину. Останнє, що нам потрібно зробити тут, це закодувати цей файл у форматі base64 âÃÂàце нам знадобиться пізніше під час переходу до GitHub Actions

Це можна зробити за допомогою командного рядка наступним чином:
base64 your_json_file.json >key.base64
Тоді файл key.base64 матиме ключ, закодований base64

**Примітка безпеки. Ці файли ключів json і base64 дозволяють контролювати ваш проект GAE, тому після того, як ви додасте їх до GitHub Actions (як я покажу нижче), рекомендується подрібнити видалити ці файли. Це можна зробити з cli наступним чином:
shred key_file_name&& ключ_ім'я_файлу rm
Отримавши ключ, нам потрібно ввімкнути 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 у вмісті сховища Evie RelizaâÃÂôs створить зображення на основі nginx, що обслуговує тему Evie без документації на порт 80

Настав час підготувати сценарій GitHub Actions. Ми будемо використовувати action-hub/gcloud@master action, що спрощує весь процес

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

- GOOGLE_APPLICATION_CREDENTIALS âÃÂàвстановлює вміст файлу json-ключа в кодуванні 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 Actions âÃÂàRELIZA_API_PROJECT_ID і RELIZA_API_PROJECT_KEY з відповідними значеннямиЗараз , настав час оновити наш сценарій gae_build.yml, щоб передавати деталі збірки в Reliza, а також перейти в режим без реклами.Це означає, що під час кожного натискання git розгортання створюватиметься на GAE, але Google буде не перемикайте трафік на це нове розгортання до певного ручного кроку пізніше rОновлений сценарій містить звіти про відстеження часу збірки в Reliza Hub, а також матиме URI кожного нерозширеного розгортання на GAE.Ви можете знайти опис різних прапорів, які ми використовуємо, у сховищі GitHub Reliza Go ClientПісля виконання дій GitHub після завершення push-увімкнення ви можете перейти на сторінку ваш випуск у Reliza Hub і перегляньте таке зображення:Зауважте, що натисканняпосилання **Тестувати кінцеву точку** переведе вас до фактичної версії розгортання на GAE, що відповідає цей запис вихідного коду âÃÂÃÂ, але ще не призначено для обслуговування трафікуВи також можете додати слабку інтеграцію, дотримуючись посібника тут, щоб отримувати сповіщення про кожен новий випуск на Reliza Hub2 âÃÂàДодавання схваленьПерейдіть на сторінку налаштувань Reliza Hub і внизу налаштуйте свою матрицю схвалень для виробничого середовища.У моєму випадку мені потрібен лише дозвіл від MARKETING для того, щоб випуск був просунутий у виробництво.Так:Натисніть**Зберегти матрицю**Далі я встановлюю програму Reliza GitHub ÃВ ¢ÃÂàhttpsgithub.com/apps/reliza-hub âÃÂàта дотримуйтеся посібника, який я написав раніше зареєструйте його для проектуНарешті, Ia новий робочий процес GitHub Actions, який запускатиметься після схвалень від Reliza Hub âÃÂàви можете побачити його тут.По суті, цей робочий процес запитує в Reliza Hub найновішу схвалену версію, а потім просить Google App Engine переключити трафік на цю версіюЄдине, що вимагає налаштування в цьому сценарієм є змінна середовища RELIZA_PROJECT_ID âÃÂÃÂ, яку потрібно налаштувати на UUID проекту, отриманий на сторінці проекту в Reliza Hub:Тепер останній випуск проекту з схвалення від MARKETING автоматично просуватиметься на стороні Google App EngineЩоб отримати докладніші відомості про те, як можна додати осіб, які схвалюють, до організації, перегляньте мій навчальний відеоролик про схвалення3 âÃÂàДодати видимість того, що розгортається, колиНасамкінець ми хочемо додати на Reliza Hub видимість того, який випуск фактично розгорнуто та колиДля цього спочатку перейдіть до екземплярів у Reliza Hub і натисніть піктограму з кружком, щоб створити новий екземплярПотім я вводжу URI свого екземпляра та вибираю середовище як ПРОДУКЦІЙНЕ Ã¢ÃÂÃÂ, оскільки я маю лише робоче середовище на цьому статичному веб-сайті.Натискання**Надіслати** створює мій новий екземплярДалі я вибираю цей щойно створений екземпляр і натискаю значок замка, щоб створити його ключ 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 у GAE та схваленнями та видимістю керується Reliza Hub.Ми також можемо отримувати сповіщення Slack, а наш менеджер з маркетингу переглядає зміни та натискає кнопки, щоб просувати їх у виробництво, не запитуючи технічного персоналу.Як це круто?
Якщо ви бажаєте поговорити зі мною й обговорити цей чи інший робочий процес далі, замовте 30-хвилинний демонстраційний дзвінок у Reliza Hub без жодних зобов’язань зі мною. ÃÂ, і я постараюся допомогти.