Istnieją obecnie 2 najpopularniejsze platformy do hostowania statycznych witryn internetowych: Netlify i Google App Engine (GAE)

Netlify zyskało ostatnio dużą popularność, ponieważ zapewnia zintegrowane doświadczenie w budowaniu i wdrażaniu statycznych stron internetowych – wszystko na tej samej platformie

GAE jest bardziej elastyczny, ponieważ obsługuje również niestatyczne strony internetowe, ale z pewnością brakuje mu poziomu integracji zapewnianego przez Netlify. Dlaczego więc w wielu przypadkach nadal miałbym używać GAE? Odpowiedź jest prosta — często GAE zapewnia lepsze opcje cenowe. Jednocześnie pozwala mieć wszystkie funkcje Netlify i więcej za pomocą kilku prostych narzędzi (GitHub Actions i Reliza Hub), które opiszę w tym artykule

 cennik
Pozwólcie, że najpierw omówię scenariusze cenowe, w których kombinacja GAE + GitHub Actions ma większy sens. Kluczową kwestią są minuty kompilacji. Bezpłatna warstwa Netlify daje tylko 300 minut budowania miesięcznie, co pod żadnym względem nie jest dużo. Jeśli używasz czegoś takiego jak aplikacja node.js, która jest statyczna, a Twoje kompilacje zajmują średnio 2-3 minuty, otrzymujesz tylko około 100+ kompilacji miesięcznie na Netlify, co z łatwością może nie wystarczyć. Zwłaszcza jeśli masz więcej niż jedną stronę internetową

Jeśli potrzebujesz więcej minut kompilacji w Netlify, zapłać 7 USD za 500 dodatkowych minut lub przejdź do następnego poziomu, który obejmuje 1000 minut, ale kosztuje 45 USD miesięcznie. Z drugiej strony, w GitHub Actions otrzymujesz 2000 darmowych minut budowania dla prywatnych repozytoriów i nieograniczoną liczbę minut budowania dla publicznych. Załóżmy, że tworzysz witrynę internetową z dokumentacją i postanawiasz ją upublicznić w serwisie GitHub — otrzymujesz nieograniczoną liczbę minut budowania w usłudze GitHub Actions — a to sprawia, że ogromna różnica

Kolejną kwestią są koszty ruchu. Netlify zapewnia wychodzącą przepustowość 100 GB miesięcznie wliczoną w bezpłatny poziom, co jest hojne. Google oferuje 1 GB ruchu wychodzącego dziennie za darmo, co daje około 30 GB miesięcznie. Więc jeśli Twój ruch wychodzący wynosi od 30 GB do 100 GB, możesz uzyskać lepszą ofertę na Netlify. Jednak gdy przekroczysz 100 GB, Netlify od razu pobiera opłatę w wysokości 20 USD za następne 100 GB w danym miesiącu. Google ma politykę cenową za GB ruchu wychodzącego, która kosztuje 0,12 USD. Oznacza to, że płacisz 12 USD/100 GB âÃÂàw porównaniu z 20 USD/100 GB w Netlify

Więc w zależności od ruchu, możesz być lepszy albo w Netlify, albo w GAE z potencjalnego wyjścia. Ale w wielu przypadkach GAE również zapewniłoby lepszą wartość
Ostatnie słowo na temat cen âÃÂàjeśli używasz czegoś takiego jak GitHub Actions lub CircleCI do swoich kompilacji, nadal możesz wdrożyć na Netlify âÃÂàGitHub Actions bardziej elastyczny system

 Konfigurowanie projektu Google App Engine
Zaczynamy od wejścia na httpsconsole.cloud.google.com/appengine i utworzenia nowego projektu. Jeśli masz już taki, najpierw kliknij nazwę projektu na górze, a następnie kliknij
**NOWY PROJEKT**

Wpisz nazwę projektu, zanotuj tutaj identyfikator projektu, który otrzymujesz (będzie potrzebny później) âÃÂàw moim przypadku jest
*âÃÂÃÂevie-landing-tutorialâÃÂÃÂ* âÃÂài kliknij **UTWÓRZ Następnie przejdź do ten projekt z selektora projektów na górze strony

Kliknij
**Utwórz aplikację** i wybierz żądany region. Następnie dla aplikacji statycznej wybierz środowisko Python i Standard (darmowa warstwa dotyczy tylko środowiska Standard). W tym momencie Twoja aplikacja jest gotowa do dalszych kroków

Aby wskazać nazwę swojej domeny na tę aplikację, przejdź do httpsconsole.cloud.google.com/appengine/settings/domains

i kliknij
**Dodaj domenę niestandardową Postępuj zgodnie z instrukcjami i skieruj DNS ze swojej domeny do rekordów dostarczonych przez Google. Po wykonaniu tej czynności Google automatycznie skieruje Twoją domenę do tej aplikacji, a także zarządza certyfikatem SSL

Na koniec musimy przygotować konto usługi, które odpowiadałoby za automatyczne wdrożenia. Przejdź do httpsconsole.cloud.google.com/iam-admin/serviceaccounts?project=your_project_id (zamień
*your_project_id *w tym linku z twoim aktualnym identyfikatorem projektu, w moim przypadku byłoby to *evie-landing-tutorial Przejdziesz do następującej strony menu:
Kliknij ikonę z trzema kropkami w kolumnie Działania obok domyślnego konta usługi App Engine. I wybierz
Opcja **Utwórz klucz** z menu rozwijanego

Wybierz JSON jako typ klucza i kliknij
**UTWÓRZ Spowoduje to pobranie pliku .json na twoją maszynę. Ostatnią rzeczą, którą musimy tutaj zrobić, to zakodować ten plik w formacie base64 âÃÂàbędziemy potrzebować tego później, gdy przejdziemy do GitHub Actions

Można to zrobić za pomocą wiersza poleceń w następujący sposób:
base64 twój_plik_json.json >klucz.base64
Wtedy plik key.base64 miałby zakodowany klucz base64

** Uwaga dotycząca bezpieczeństwa tutaj te pliki kluczy json i base64 pozwalają kontrolować twój projekt GAE, dlatego po dodaniu ich do GitHub Actions (jak pokażę poniżej), zaleca się zniszczenie usuń te pliki. Można to zrobić z cli w następujący sposób:
zniszcz nazwę_pliku_klucza&& rm nazwa_pliku_klucza
Po uzyskaniu klucza musimy włączyć interfejsy API Google App Engine âÃÂÃÂ, aby to zrobić, odwiedź stronę httpsconsole.developers.google.com/apis/api/appengine .googleapis.com/overview i kliknij
**WŁĄCZYĆ**

 Konfigurowanie repozytorium GitHub i akcji GitHub
W końcu nadszedł czas na przygotowanie naszego repozytorium GitHub. Ten samouczek obejmuje konfigurację motywu Evie przez Undraw. (To jest motyw, którego obecnie używam na stronie docelowej Reliza Hub!) Oryginalny motyw Evie jest hostowany tutaj, ale w tym repozytorium będę używać rozwidlenia Relizy

Jak już wspomniałem w innych artykułach, moją filozofią budowania jest obecnie dokeryzacja wszystkiego i używanie
docker jako ujednolicone środowisko kompilacji CI na wielu platformach. Dlatego dodałem plik Dockerfile, konfigurację nginx, a także zaktualizowałem wersje npm w stosunku do oryginalnego motywu Evie, aby mieć działającą kompilację dokowaną

Teraz, jeśli to zrobimy
polecenie docker build na zawartości repozytorium Evie firmy Reliza, zbuduje obraz oparty na nginx obsługujący motyw Evie bez dokumentacji na porcie 80

Nadszedł czas na przygotowanie skryptu GitHub Actions. Będziemy używać akcjiactions-hub/gcloud@master, która upraszcza cały proces

Zaczynamy od ustawienia 2 sekretów GitHub Actions potrzebnych akcji. Przejdź do Ustawienia ->Sekrety w swoim repozytorium GitHub i kliknij
**Nowy sekret** do ustawienia następujących 2 sekretów:
- GCLOUD_PROJECT_ID âÃÂàustaw na identyfikator projektu zanotowany podczas tworzenia projektu: w moim przypadku evie-landing-tutorial

- GOOGLE_APPLICATION_CREDENTIALS âÃÂàustaw na zawartość zakodowanego w base64 pliku json-key uzyskanego dla powyższego konta usługi Google

Teraz w repozytorium tworzę katalog .github, a następnie w nim katalog workflows. A w nim tworzę gae_build.yml. Musimy również dodać plik app.yaml, który zawiera konfigurację GAE i byłby bardzo prosty w statycznym przypadku użycia aplikacji, który mam

Po przesłaniu tego kodu uruchomi się kompilacja GitHub Actions, która wdroży aplikację GAE, a Twoje usługi zostaną uruchomione! Każde kolejne przekazanie do GitHub automatycznie uruchomi nową kompilację GitHub Actions i automatycznie zaktualizuje aplikację w GAE

Teraz masz gotowy podstawowy potok CICD dla swojej statycznej strony internetowej! Możesz zatrzymać się tutaj lub kontynuować czytanie, jak dodać funkcje zatwierdzania i widoczności wdrożenia za pomocą Reliza Hub

 BONUS: Dodawanie zatwierdzeń i widoczności za pomocą Reliza Hub

Załóżmy, że nie chcemy, aby każda nowa kompilacja automatycznie trafiała do produkcji.Zamiast tego chcemy, aby zostały najpierw wdrożone w miejscu, które nie jest produkcyjne, a następnie, jeśli nam się spodobają — Ty lub Twoja osoba zatwierdzająca (powiedzmy Twój kierownik ds. marketingu) potrzebuje aby kliknąć przycisk i awansować do wersji produkcyjnejOto jak można to osiągnąć za pomocą Reliza Hub oprócz konfiguracji, którą opisałem do tej pory1 à ¢ÃÂàPrzesyłanie strumieniowe metadanych wersji do Reliza HubNajpierw przejdź do httpsapp.relizahub.com, uwierzytelnij się w GitHub i utwórz swoją organizację, w moim przypadku użyję*âÃÂÃÂEvie Landing TutorialâÃÂÃÂ* jako nazwa organizacji.Kliknij element menu **VCS**, a następnie ikonę z kółkiem plus, aby dodać repozytorium VCSWklej identyfikator URI repozytorium GitHub w danych wejściowych, a Reliza Hub przeanalizuj go automatycznieKliknij**Wyślij, aby utworzyć twoje repozytorium.Przejdź do menu Projekty i kliknij ikonę plusa, aby utworzyć projekt.Wpisz nazwę swojego projektu (użyję schematu wersji *Evie Landing Set na Single Component (Major) âÃÂÃÂ, ponieważ GAE używa własnej wersji składającej się z jednego komponentu âÃÂÃÂ, którego będziemy używać w Reliza Hub w obecnej postaciWybierz repozytorium VCS, które właśnie utworzyłeś w poprzednim krokuI kliknij**Wyślij Spowoduje to utworzenie nowego projektuNastępnie kliknij nazwę nowo utworzonego projektu i kliknij ikonę kłódki, aby wygenerować klucz api projektuKiedy zobaczysz API ID i API Key wygenerowane dla twojego projektu, utwórz 2 nowe sekrety w GitHub Actions âÃÂàRELIZA_API_PROJECT_ID i RELIZA_API_PROJECT_KEY z odpowiednimi wartościamiTeraz , nadszedł czas, aby zaktualizować nasz skrypt gae_build.yml, aby przesyłać strumieniowo szczegóły kompilacji do Reliza, a także przełączyć się w tryb bez promocji.Oznacza to, że przy każdym wypychaniu git zostanie utworzone wdrożenie w GAE, ale Google nie przełączaj ruchu do tego nowego wdrożenia, dopóki nie nastąpi ręczne opóźnienie rZaktualizowany skrypt obejmuje raportowanie śledzenia czasu kompilacji do Reliza Hub, a także będzie zawierał identyfikator URI każdego niepromowanego wdrożenia w GAE.Opis różnych używanych przez nas flag można znaleźć w repozytorium GitHub klienta Reliza Goswoją wersję w Reliza Hub i zobacz następujący obraz:Pamiętaj, że kliknięcie łącza**Testuj punkt końcowy** spowoduje wyświetlenie rzeczywistej wersji wdrożenia w GAE odpowiadającej ten wpis w kodzie źródłowym âÃÂÃÂ, ale jeszcze nie awansowany do obsługi ruchuMożesz także dodać swobodną integrację zgodnie z przewodnikiem tutaj, aby otrzymywać powiadomienia o każdej nowej wersji w Reliza Hub2 âÃÂàDodawanie zatwierdzeńPrzejdź do strony Ustawienia w Reliza Hub i na dole skonfiguruj swoją matrycę zatwierdzania dla środowiska PRODUKCYJNEGO.W moim przypadku do awansu do produkcji wymagana będzie tylko zgoda MARKETINGU.Jak poniżej:Kliknij**Zapisz macierz**Następnie instaluję aplikację Reliza GitHub à¢ÃÂàhttpsgithub.com/apps/reliza-hub âÃÂài postępuj zgodnie z samouczkiem, który napisałem wcześniej zarejestruj go dla projektuWreszcie, Ia nowy przepływ pracy GitHub Actions, który byłby uruchamiany po zatwierdzeniu przez Reliza Hub âÃÂàmożesz zobaczyć tutaj.Zasadniczo ten przepływ pracy wysyła zapytanie do Reliza Hub o najnowszą wersję zatwierdzoną do produkcji, a następnie żąda od Google App Engine przełączenia ruchu do tej wersjiJedyna rzecz, która wymaga konfiguracji w tym script to zmienna środowiskowa RELIZA_PROJECT_ID âÃÂÃÂ, którą należy ustawić na UUID projektu uzyskany na stronie projektu w Reliza Hub:Teraz najnowsza wersja projektu z zatwierdzenie przez MARKETING zostanie automatycznie promowane po stronie Google App EngineAby uzyskać szczegółowe informacje na temat dodawania osób zatwierdzających do organizacji, obejrzyj mój samouczek wideo dotyczący zatwierdzania3 âÃÂàDodaj widoczność tego, co jest wdrażane, gdyNa koniec chcemy dodać widoczność w Reliza Hub, która wersja jest faktycznie wdrożona i kiedyAby to zrobić, najpierw przejdź do Instancji w Reliza Hub i kliknij ikonę plusa z kółkiem, aby utworzyć nową instancjaNastępnie wpisuję URI mojej instancji i wybieram środowisko PRODUKCYJNE âÃÂÃÂ, ponieważ mam tylko środowisko produkcyjne na tej statycznej stronie internetowej.Kliknięcie**Prześlij** tworzy moją nową instancjęNastępnie wybieram tę nowo utworzoną instancję i klikam ikonę kłódki, aby wygenerować jej klucz apiPo wygenerowaniu identyfikatora API i klucza API utwórz 2 nowe klucze tajne w akcjach GitHub âÃÂàRELIZA_API_INSTANCE_ID i RELIZA_API_INSTANCE_KEY z odpowiednimi wartościamiW tym celu najpierw aktualizuję mój skrypt wdrażania po zatwierdzeniu, aby dodać sekcję do sprawdzania wdrożenia w GAE i przesyłać strumieniowo do Reliza Hub.Dodaję również przepływ pracy Cron GitHub Actions, aby zweryfikować stan mojej aplikacji GAEPo uruchomieniu dowolnego z tych przepływów pracy otrzymamy migawkę wdrożenia naszej aplikacji GAE w Reliza Hub w naszym widoku instancji wygląda następująco:PodsumowanieTo wszystko, teraz mamy pełny potok CI CD z przyciskami z działaniami GitHub wdrażanymi do GAE oraz zatwierdzeniami i widocznością zarządzany przez Reliza Hub.Możemy również mieć powiadomienia Slack, a nasz kierownik ds. marketingu przegląda zmiany i naciska przyciski, aby przenieść je do produkcji bez pytania personelu technicznego.Jakie to fajne?
Jeśli chcesz ze mną porozmawiać i przedyskutować ten lub inny przepływ pracy, umów się ze mną na bezpłatną 30-minutową rozmowę demonstracyjną Reliza Hub. ÃÂ i postaram się jak najlepiej pomóc.