Mayroong 2 pinakasikat na platform ngayon para mag-host ng mga static na website: Netlify at Google App Engine (GAE)

Ang Netlify ay nakakuha ng maraming katanyagan kamakailan dahil nagbibigay ito ng pinagsamang karanasan sa pagbuo at pag-deploy ng mga static na website âÃÂàlahat sa parehong platform

Ang GAE ay mas nababaluktot sa mga tuntunin na sinusuportahan din nito ang mga hindi static na web-site ngunit tiyak na kulang ito sa antas ng pagsasama na ibinibigay ng Netlify. Kaya bakit ko pa rin gagamitin ang GAE sa maraming kaso? Ang sagot ay simple âÃÂàmadalas ang GAE ay nagbibigay ng mas mahusay na mga opsyon sa pagpepresyo. Kasabay nito, pinapayagan nitong magkaroon ng lahat ng feature ng Netlify at higit pa gamit ang ilang simpleng tool (GitHub Actions at Reliza Hub) na ilalarawan ko sa artikulong ito.

 Pagpepresyo
Hayaan mo muna akong sakupin ang mga sitwasyon sa pagpepresyo kapag mas may katuturan ang GAE + GitHub Actions combo. Ang pangunahing punto ay ang pagbuo ng mga minuto. Nagbibigay lamang ang libreng tier ng Netlify ng 300 na build minuto bawat buwan, na hindi gaanong katumbas ng anumang account. Kung gumagamit ka ng isang bagay tulad ng node.js app na ginawang static at ang iyong mga build ay tumatagal ng 2-3 minuto sa average, nakakakuha ka lang ng humigit-kumulang 100+ build bawat buwan sa Netlify, na madaling hindi sapat. Lalo na kung mayroon kang higit sa isang website

Kung kailangan mo ng higit pang build minutes sa Netlify âÃÂàmagbayad ng $7 kada 500 dagdag na minuto, o lumipat sa susunod na tier na kinabibilangan ng 1000 minuto, ngunit nagkakahalaga ng $45/buwan. Sa kabilang banda, sa GitHub Actions makakakuha ka ng 2000 build na minuto nang libre para sa mga pribadong repository at walang limitasyong build minuto para sa mga pampubliko. Sabihin nating gumagawa ka ng website ng dokumentasyon at magpasya na isapubliko ito sa GitHub âÃÂàmakakakuha ka ng walang limitasyong mga minuto ng build sa GitHub Actions âÃÂàat iyan ay isang malaking pagkakaiba

Ang susunod na pagsasaalang-alang ay ang mga gastos sa trapiko. Nagbibigay ang Netlify ng 100GB bandwidth egress bawat buwan na kasama sa libreng tier nito, na mapagbigay. Nag-aalok ang Google ng 1GB na paglabas bawat araw nang libre, na ginagawa itong humigit-kumulang 30GB bawat buwan. Kaya kung ang iyong paglabas ay nasa pagitan ng 30GB at 100GB maaari kang makakuha ng mas magandang deal sa Netlify. Gayunpaman, kapag nakalampas ka na sa 100GB, sisingilin ka kaagad ng Netlify ng $20 para sa susunod na 100GB sa buwang iyon. Ang Google ay may patakaran sa pagpepresyo sa bawat GB egress na nagkakahalaga ng $0.12. Ibig sabihin, magbabayad ka ng $12/100GB âÃÂàvs $20/100GB sa Netlify

Kaya depende sa trapiko, maaari kang maging mas mahusay sa alinman sa Netlify o sa GAE mula sa inaasahang paglabas. Ngunit sa maraming mga kaso, ang GAE ay magbibigay din ng mas mahusay na halaga dito
Panghuling salita sa pagpepresyo âÃÂàkung gumagamit ka ng isang bagay tulad ng GitHub Actions o CircleCI para sa iyong mga build, maaari ka pa ring mag-deploy sa Netlify âÃÂàna gumagawa Ang GitHub Actions ay mas nababaluktot na sistema

 Pag-configure ng Google App Engine Project
Magsisimula tayo sa pagpunta sa httpsconsole.cloud.google.com/appengine at lumikha ng bagong proyekto. Kung mayroon ka nang âÃÂài-click muna ang pangalan ng iyong proyekto sa itaas at pagkatapos ay i-click ang
**BAGONG PROYEKTO**

Ilagay ang pangalan ng proyekto, tandaan dito ang project ID na nakukuha mo (kakailanganin mo ito mamaya) âÃÂàsa aking kaso ito ay
*âÃÂÃÂevie-landing-tutorialâÃÂÃÂ* âÃÂàat i-click ang **CREATE Pagkatapos ay lumipat sa proyektong ito mula sa tagapili ng proyekto sa tuktok ng pahina

Mag-click sa
**Gumawa ng Application** at piliin ang iyong gustong rehiyon. Pagkatapos para sa static na application piliin ang Python at Standard na kapaligiran (ang libreng tier ay nalalapat lamang sa Standard na kapaligiran). Sa puntong ito handa na ang iyong aplikasyon para sa mga susunod na hakbang

Upang ituro ang iyong domain name sa application na ito, mag-navigate sa httpsconsole.cloud.google.com/appengine/settings/domains

at i-click
**Magdagdag ng custom na domain Sundin ang mga tagubilin at ituro ang DNS mula sa iyong domain sa mga ibinigay na tala ng Google. Kapag tapos na ito, awtomatikong ituturo ng Google ang iyong domain sa application na ito at mamamahala din ng SSL certificate

Panghuli, kailangan naming maghanda ng account ng serbisyo na magiging responsable para sa mga awtomatikong pag-deploy. Mag-navigate sa httpsconsole.cloud.google.com/iam-admin/serviceaccounts?project=your_project_id (palitan
*your_project_id *sa link na ito kasama ang iyong aktwal na project id, sa aking kaso ito ay magiging *evie-landing-tutorial Makakapunta ka sa sumusunod na pahina ng menu:
Mag-click sa icon na 3 tuldok sa column na Mga Pagkilos malapit sa default na account ng serbisyo ng App Engine. At pumili
**Gumawa ng key** na opsyon mula sa drop-down na menu

Piliin ang JSON bilang iyong uri ng Key at i-click
**GUMAWA Ito ay magda-download ng .json file sa iyong makina. Ang huling bagay na kailangan nating gawin dito ay i-encode ang file na ito sa base64 format âÃÂàkakailanganin natin ito mamaya kapag lumipat sa GitHub Actions

Magagawa ito sa pamamagitan ng paggamit ng command line tulad ng sumusunod:
base64 your_json_file.json >key.base64
Pagkatapos ang key.base64 file ay magkakaroon ng base64 na naka-encode na key

**Security note dito ang mga json at base64 key file na ito ay nagbibigay-daan upang makontrol ang iyong proyekto sa GAE, kaya pagkatapos mong idagdag ang mga ito sa GitHub Actions (tulad ng ipapakita ko sa ibaba), inirerekumenda na gupitin tanggalin ang mga file na ito. Magagawa ito mula sa cli bilang sumusunod:
gutayin ang key_file_name&& rm key_file_name
Kapag nakuha na ang susi, kailangan nating paganahin ang Google App Engine API âÃÂàupang magawa ito bisitahin ang page httpsconsole.developers.google.com/apis/api/appengine .googleapis.com/overview at i-click
**Paganahin**

 Pag-set Up ng GitHub Repository at GitHub Actions
Sa wakas, oras na para ihanda ang aming GitHub Repository. Sinasaklaw ng tutorial na ito ang setup ng Evie theme ni Undraw. (Ito ang temang kasalukuyang ginagamit ko para sa landing page ng Reliza Hub!) Ang orihinal na tema ng Evie ay naka-host dito, ngunit gagamit ako ng tinidor ng Reliza sa repositoryong ito.

Tulad ng nabanggit ko na sa iba pang mga artikulo, ang aking pilosopiya sa pagbuo sa mga araw na ito ay ang dockerize ang lahat at gamitin
build ng docker bilang isang pinag-isang CI build environment sa maraming platform. Samakatuwid, idinagdag ko ang Dockerfile, pagsasaayos ng nginx at na-update din ang mga bersyon ng npm na nauugnay sa orihinal na tema ng Evie upang magkaroon ng gumaganang dockerized na build

Ngayon kung gagawin natin
docker build command sa RelizaÃÂÃÂs Evie repository contents, bubuo ito ng nginx-based na imahe na naghahatid ng Evie theme nang walang dokumentasyon sa port 80

Oras na para ihanda ang script ng GitHub Actions. Gagamit kami ng actions-hub/gcloud@master action na ginagawang simple ang buong proseso

Magsisimula tayo sa pamamagitan ng pagtatakda ng 2 mga lihim ng GitHub Actions na kailangan ng aksyon. Mag-navigate sa Mga Setting ->Mga Lihim sa loob ng iyong GitHub repository at i-click
**Bagong lihim** upang itakda ang sumusunod na 2 lihim:
- GCLOUD_PROJECT_ID âÃÂàitakda ito sa project id na nabanggit noong ginagawa mo ang iyong proyekto: evie-landing-tutorial sa aking kaso

- GOOGLE_APPLICATION_CREDENTIALS âÃÂàitakda ito sa mga nilalaman ng base64-encoded json-key file na nakuha para sa google service account sa itaas

Ngayon sa repositoryo ako gumawa ng .github na direktoryo at pagkatapos ay direktoryo ng mga daloy ng trabaho sa loob nito. At sa loob nito ay gumagawa ako ng gae_build.yml. Kailangan din nating magdagdag ng app.yaml file na naglalaman ng configuration ng GAE at magiging napakasimple para sa static na kaso ng paggamit ng app na mayroon ako

Pagkatapos mong itulak ang code na ito, magti-trigger ito ng GitHub Actions build, na gagawa ng deployment sa iyong GAE application âÃÂàat magiging live ang iyong mga serbisyo! Bawat kasunod na push sa GitHub ay awtomatikong magti-trigger ng bagong GitHub Actions build at awtomatikong mag-a-update ng application sa GAE

Ngayon ay mayroon ka nang pangunahing CICD pipeline para sa iyong static na website na handa na! Maaari kang huminto dito o maaari kang magpatuloy sa pagbabasa kung paano ka magdagdag ng pag-apruba at pagpapagana ng visibility ng pag-deploy gamit ang Reliza Hub

 BONUS: Pagdaragdag ng Mga Pag-apruba at Visibility Gamit ang Reliza Hub

Ipagpalagay, na hindi namin nais na ang bawat bagong build ay awtomatikong mapupunta sa produksyon. Sa halip, gusto naming i-deploy muna ang mga ito sa isang lugar na hindi produksyon, at pagkatapos kung gusto namin ang mga ito, kailangan mo o ng iyong approver (sabihin, ang iyong Marketing Manager) na mag-click sa isang button at isulong sa produksyon  Narito kung paano ito makakamit sa Reliza Hub sa itaas ng configuration na inilarawan ko sa ngayon   1 âÃÂàStreaming Release Metadata sa Reliza Hub Una, mag-navigate sa httpsapp.relizahub.com, magpatotoo sa GitHub at lumikha ng iyong organisasyon, sa aking kaso ay gagamitin ko *âÃÂÃÂEvie Landing TutorialâÃÂÃÂ* bilang pangalan ng organisasyon. Mag-click sa **VCS** menu item at pagkatapos ay sa plus-circle icon upang magdagdag ng VCS Repository  I-paste ang iyong GitHub repository URI sa input at awtomatiko itong i-parse ng Reliza Hub  I-click **Isumite at gagawa ito ng iyong repository. Magpatuloy sa menu ng Mga Proyekto at mag-click sa icon na plus-circle para gumawa ng proyekto. Ilagay ang pangalan ng iyong proyekto (Gagamitin ko ang *Evie Landing Set version schema to Single Component (Major) âÃÂàiyon ay dahil ang GAE ay gumagamit ng sarili nitong bersyon na binubuo ng isang bahagi âà Âàna gagamitin natin sa loob ng Reliza Hub. Piliin ang repositoryo ng VCS upang maging ang nilikha mo sa nakaraang hakbang  At i-click **Isumite Ito ay lilikha ng bagong proyekto. Pagkatapos ay mag-click sa bagong likhang pangalan ng proyekto na ito at mag-click sa icon ng lock upang makabuo ng project api key  Kapag nakita mo ang API ID at API Key na nabuo para sa iyong proyekto, lumikha ng 2 bagong lihim sa GitHub Actions âÃÂàRELIZA_API_PROJECT_ID at RELIZA_API_PROJECT_KEY na may mga katumbas na value  Ngayon, oras na para i-update ang aming gae_build.yml script para i-stream ang mga detalye ng build sa Reliza at lumipat din sa no-promote mode. Nangangahulugan ito na sa bawat git push, isang deployment ang gagawin sa GAE, ngunit hindi ililipat ng Google ang trapiko sa bagong deployment na ito hanggang sa ilang manu-manong hakbang mamaya  Kasama sa na-update na script ang pag-uulat ng pagsubaybay sa oras ng build sa Reliza Hub at magkakaroon din ng URI ng bawat hindi na-promote na deployment sa GAE. Mahahanap mo ang paglalarawan ng iba't ibang flag na ginagamit namin sa GitHub repository ng Reliza Go Client  Matapos makumpleto ang pagtakbo ng GitHub Actions sa push, maaari kang mag-navigate sa pahina ng iyong release sa Reliza Hub at makita ang sumusunod na larawan:  Tandaan na ang pag-click sa Ang link na **Test endpoint** ay magdadala sa iyo sa aktwal na bersyon ng deployment sa GAE na naaayon sa source code entry na ito âÃÂàngunit hindi pa napo-promote upang maghatid ng trapiko  Maaari ka ring magdagdag ng maluwag na pagsasama ayon sa gabay dito upang makatanggap ng mga abiso ng bawat bagong release sa Reliza Hub   2 âÃÂàPagdaragdag ng Mga Pag-apruba Pumunta sa page ng Mga Setting ng Reliza Hub at sa ibaba nito ay i-configure ang iyong approval matrix para sa PRODUCTION environment. Sa aking kaso, mangangailangan lang ako ng pag-apruba mula sa MARKETING para sa isang release na ma-promote sa produksyon. Tulad ng sumusunod:  Mag-click sa **I-save ang Matrix**  Sunod kong i-install ang Reliza GitHub app âÃÂàhttpsgithub.com/apps/reliza-hub âÃÂàat sundin ang tutorial na Iâààay sumulat nang mas maaga upang irehistro ito para sa proyekto  Sa wakas, isang bagong GitHub Actions workflow na ma-trigger sa mga pag-apruba mula sa Reliza Hub âÃÂàmakikita mo ito dito. Mahalaga, ang daloy ng trabaho na ito ay nagtatanong sa Reliza Hub para sa pinakabagong bersyon na naaprubahan ng produksyon at pagkatapos ay humihiling sa Google App Engine na ilipat ang trapiko sa bersyong iyon  Ang tanging bagay na nangangailangan ng configuration sa script na ito ay RELIZA_PROJECT_ID environment variable âÃÂàna kailangang itakda sa project UUID na nakuha sa page ng proyekto sa Reliza Hub:  Ngayon, ang pinakabagong release ng proyekto na may pag-apruba mula sa MARKETING ay awtomatikong mapo-promote sa panig ng Google App EnginePara sa mga detalye, kung paano ka makakapagdagdag ng mga approver sa organisasyon, panoorin ang aking tutorial na video sa mga pag-apruba   3 âÃÂàMagdagdag ng Visibility para sa Ano ang Na-deploy Kapag Sa wakas, gusto naming magdagdag ng visibility sa Reliza Hub tungkol sa kung ano talaga ang release at kailan  Upang gawin ito, pumunta muna sa Mga Instances sa Reliza Hub at i-click ang icon na plus-circle para gumawa ng bagong instance  Pagkatapos ay ipinasok ko ang URI ng aking instance at pumili ng environment para maging PRODUCTION âÃÂàdahil mayroon lang akong production environment sa static na website na ito. Pag-click Ginagawa ng **Submit** ang aking bagong instance  Susunod, pipiliin ko ang bagong likhang instance na ito at mag-click sa icon ng lock para mabuo ang api key nito  Kapag nabuo ang API ID at API Key, gumawa ng 2 bagong lihim sa GitHub Actions âÃÂàRELIZA_API_INSTANCE_ID at RELIZA_API_INSTANCE_KEY na may katumbas na mga value  Sa pamamagitan nito, ina-update ko muna ang aking on-approval deployment script upang magdagdag ng seksyon upang suriin ang deployment sa GAE at i-stream ito sa Reliza Hub. At nagdagdag din ako ng cron GitHub Actions workflow para i-verify ang estado ng aking GAE application  Pagkatapos tumakbo ng alinman sa mga workflow na ito, makukuha namin ang snapshot ng deployment ng aming GAE application sa Reliza Hub sa aming instance view bilang sumusunod:   Buod Ito na, mayroon na kaming buong push-button na CI CD pipeline na may GitHub Actions na nagde-deploy sa GAE at mga pag-apruba at visibility na pinamamahalaan ng Reliza Hub. Maaari din kaming magkaroon ng mga notification ng Slack at tinitingnan ng aming Marketing manager ang mga pagbabago at pinipilit ang mga button para i-promote ang mga ito sa produksyon nang hindi humihingi ng teknikal na staff. Gaano kagaling iyon?
Kung gusto mo akong kausapin at talakayin pa ito o iba pang daloy ng trabaho âÃÂàmag-book ng walang kalakip na 30 minutong Reliza Hub demo call sa akin âààat gagawin ko ang aking makakaya upang tumulong.