Kako postaviti GitHub cjevovode neprekidne integracije s vlastitim pokretačima na Ubuntu 22.04.

Uvod

Softversko inženjerstvo je brzo i konkurentno područje. Brže plasiranje vaših proizvoda korisnicima pružit će vam prednost pred konkurentima. S pozitivne strane, uspostavljene su najbolje prakse u industriji kako bi se tvrtkama osigurali jednaki uvjeti.

Kontinuirana integracija i kontinuirani razvoj (CICD) primjer je strategije koja koristi najbolje prakse u industriji kako bi tvrtkama pružila prednost u ovom konkurentnom području.

GitHub, repozitorij temeljen na webu s Gitom, alatom za kontrolu verzija, omogućuje razvojnim programerima, inženjerima i arhitektima softvera implementaciju CI/CD-a. Kontinuirani razvoj (CD) je praksa automatizacije izgradnje, testiranja i postavljanja. Kontinuirana integracija (CI) omogućuje većem broju ljudi suradnju na istom projektu i provjeru radi li kod bez brige o konfliktima spajanja.

GitHub Actions omogućuju nam pisanje koraka koji automatiziraju izgradnju, testiranje i postavljanje.

U ovom vodiču naučit ćete kako postaviti kontinuiranu integraciju s GitHub Actions. Započet ćemo postavljanjem Git repozitorija za hostiranje našeg koda. Zatim ćemo konfigurirati GitHub CI proces za praćenje promjena u našem kodu, pokrenuti CI runner za izvođenje testova, izgraditi i postaviti našu aplikaciju na Ubuntu 22.04 poslužitelj koji pokreće Nginx.

Preduvjeti

Kako biste pratili ovaj vodič, trebat će vam sljedeće:

• Poslužitelj koji pokreće Ubuntu 22.04. Možete pratiti ovaj vodič za početno postavljanje Ubuntu poslužitelja, dodavanje ne-root korisnika, i omogućavanje Ubuntuovog UFW vatrozida.

• Trebat će vam instaliran Node.js na vašem poslužitelju, po mogućnosti verzija 14 i novija. Imamo vodič o tome kako instalirati Node.js na Ubuntu.

• Trebat će vam instaliran softver poslužitelja Nginx. Imamo vodič o tome kako instalirati Nginx na poslužitelj koji pokreće Ubuntu.

• Trebat će vam Docker i Docker Compose instalirani na vašem lokalnom računalu za pokretanje izoliranog razvojnog okruženja. Slijedite naš vodič kako biste naučili kako instalirati i upravljati Dockerom u oblaku.

Sada kada imamo sve što nam treba, krenimo.

Korak 1. Kloniranje repozitorija projekta.

Ovaj vodič temeljit ćemo na Reactjs, deklarativnoj Javascript knjižnici za izgradnju korisničkih sučelja. Ako želite postaviti novi projekt ispočetka, možete koristiti ovaj resurs o postavljanju React aplikacije. Radi kratkoće, koristit ćemo klon ovog React.js repozitorija koji smo već postavili na GitHubu.

Aplikacija koju kloniramo jednostavna je React aplikacija s react-router 6 i testom napravljenim pomoću React Testing Library, što nam daje metode za pristup DOM-u.

Za kloniranje repozitorija kliknite na zeleni gumb i kopirajte URL.

Otvorite terminal u svom radnom prostoru i pokrenite naredbu u nastavku kako biste klonirali aplikaciju:

Nakon što klonirate repozitorij, idite u direktorij projekta:

Pokrenite naredbu docker-compose up kako biste izgradili i pokrenuli aplikaciju:

Kada proces završi, posjetite http://localhost:3000

Trebali biste vidjeti nešto slično ovome:

Korak 2. Razumijevanje datoteke Node.js.yml.

U ovom koraku definirat ćemo direktive u GitHub Yaml datoteci kako bismo lakše razumjeli što se događa. U repozitoriju se nalazi direktorij .github/workflows koji sadrži node.js.yml datoteku, koja sadrži korake tijeka rada koje GitHub runneri slijede nakon što pošaljete promjene u svoj repozitorij koda na GitHubu. YAML sintaksa se koristi za pisanje tijekova rada za GitHub Actions. YAML datoteke završavaju ekstenzijom yaml ili yml.

Otvorite node.js.yml datoteku, trebala bi izgledati ovako:

U vrijeme pisanja ovog vodiča koristili smo verziju 16 Node.js-a 16. Sada proučimo GitHub Actions tijek rada:

• name

name: cicd-tut

Naziv vašeg tijeka rada, ovaj naziv će biti prikazan u vašem repozitoriju Actions kartici.

• on

on se koristi za definiranje događaja. Događaji mogu automatski pokrenuti tijek rada ili se rasporediti za kasnije. Događaji mogu biti pojedinačni ili višestruki, a također možete specificirati izvršavanja tijeka rada za određene grane, oznake ili datoteke. Ovo radi poput filtra.

U našoj YAML datoteci definiramo automatske višestruke događaje, a to su:

• Događaj push se pokreće kada se kôd pošalje u repozitorij

• Događaj pull_request se pokreće kada se kreira zahtjev za povlačenje na glavnoj grani.

Specificiramo naziv grane main kako bismo ograničili izvršavanje tijeka rada samo na tu granu. Također možemo specificirati grane koje treba zanemariti pomoću zastavice ! nakon koje slijedi naziv grane.

• jobs

Tijek rada se u osnovi sastoji od jednog ili više poslova. Ovi se poslovi izvode uzastopno od prvog do zadnjeg.

Svaki se posao izvodi u okruženju pokretača koje je specificirano s runs-on. Možete odabrati pokretanje poslova na GitHub pokretačima označenim s ubuntu-latest ili na self-hosted pokretaču označenom s self-hosted. Vaš izbor ovisit će o broju poslova koji su vam potrebni. S vlastitim pokretačima (self-hosted runners) imate više fleksibilnosti i kontrole nad resursima.

U sljedećem koraku najprije ćemo pokrenuti naše poslove na GitHub pokretačima, a kasnije ćemo postaviti vlastiti GitHub pokretač (self-hosted runner) na našem vlastitom poslužitelju.

• strategy

Strategija nam omogućuje korištenje varijabli u definiciji jednog posla za automatsko stvaranje višestrukih pokretanja poslova koji se temelje na kombinacijama varijabli.

U našoj YAML datoteci imamo jednu varijablu za našu verziju Node-a, ali ako dodamo drugu za verziju Node-a 18, ovako: node-version: [16.x, 18.x], tada će matrična strategija stvoriti 2 pokretanja posla za našu React aplikaciju za verzije Node-a 16 i 18.

• steps

Koraci su slijed zadataka koji čine posao. Koraci mogu pokretati naredbe, postavljati zadatke, pokretati akcije u vašem javnom repozitoriju ili akcije objavljene u Docker registru.

Korak ima naziv. Iako je neobavezan, možete ga koristiti kako biste odredili jednostavan način za prepoznavanje naziva vašeg koraka koji će se prikazati na Githubu.

U koraku možete odabrati akciju koja će se pokrenuti u vašem poslu, akcije su višekratno upotrebljive. Verzije akcije specificiraju se prilikom definiranja akcije, što je važno jer sprječava prekid vašeg tijeka rada kada vlasnik akcije objavi ažuriranje.

U gornjem isječku koda, checkout@v3 je primjer akcije sa specificiranom verzijom 3. Ova akcija preuzima vaše spremište kako bi mu vaš tijek rada mogao pristupiti.

Neke akcije poput actions/setup-node@v3 iznad imaju unose označene pomoću ključne riječi with, akcije postavljanja node-a zahtijevaju verziju node-a 16 i predmemoriranje npm-a.

• run

Ova akcija pokreće programe naredbenog retka koristeći ljusku operacijskog sustava.

U gornjoj YAML datoteci imamo tri naredbe, sve će se pokrenuti koristeći istu ljusku u okruženju pokretača.

• Prva naredba npm i instalira sve ovisnosti koje su potrebne našoj React aplikaciji.

• Druga npm test, pokreće test koji smo napisali. Test očekuje da se tekst learn react prikaže na početnoj stranici.

• Na kraju, npm run build naredba stvara direktorij 'build' s produkcijskom verzijom naše aplikacije. Kasnije ćemo koristiti ovaj direktorij u našem Nginx bloku poslužitelja.

Korak 3. Testiranje GitHub CI-ja s GitHub pokretačima.

U ovom koraku testirat ćemo proces kontinuirane integracije s GitHub pokretačima. Započnite otvaranjem datoteke node.js.yml. Promijenite vrstu pokretača na kojem će se akcije izvoditi na ubuntu-latest. Svrha ovoga je testirati radi li GitHub tijek rada savršeno na GitHub pokretačima prije postavljanja vlastitih samostalno gostujućih pokretača.

Stvorite novo spremište na svom GitHub računu. Prije nego što nastavimo, vratite se u svoj radni direktorij i izbrišite .git direktorij, ako ga ne možete vidjeti, provjerite skrivene datoteke. Možete koristiti sljedeću naredbu u svom terminalu za brisanje direktorija:

Sada možete dodati sve datoteke projekta pomoću naredbe git add, napraviti commit i poslati ih u svoje spremište. Ako zapnete, upotrijebite ovaj vodič o povezivanju mape vašeg projekta s GitHub spremištem koje ste stvorili iznad.

Kada završite, kliknite na karticu Code u svom spremištu i vidjet ćete malu narančastu točku pokraj ukupnog broja commitova. Kada kliknete na nju, vidjet ćete modalni prozor sličan onome u nastavku, koji označava da je vaš tijek rada stavljen u red čekanja:

Sada kliknite na poveznicu Details u modalnom prozoru ili idite na karticu Actions, vidjet ćete kako GitHub pokretači izvode svaki korak node.js.yml tijeka rada:

Ako je uspješno, kliknite na karticu Actions, trebala bi izgledati ovako:

I to je to, mala narančasta točka na našoj kartici Code sada bi trebala biti zelena kvačica. GitHub pokretač je uspješno izgradio našu aplikaciju.

Sada idimo korak dalje i promijenimo okruženje izgradnje kako bismo koristili GitHub samostalno gostujuće pokretače u našoj vlastitoj infrastrukturi Ubuntu poslužitelja.

Korak 4. Postavljanje GitHub tijeka rada za korištenje samostalno gostujućeg pokretača.

Prije nego što instaliramo samostalno gostujući pokretač na naš poslužitelj, vratimo se u naš radni prostor i uredimo datoteku tijeka rada node.js.yml  kako bi se izvodila na GitHub samostalno gostujućim pokretačima.

U ovoj fazi, kada commitate promjene, posao će biti stavljen u red čekanja jer samostalno gostujući pokretač još nije definiran.

U svom spremištu kliknite na karticu Settings, u lijevoj bočnoj traci kliknite Actions, a zatim kliknite Runners:

Kliknite New self-hosted runner, i odaberite Linux kao operacijski sustav.

Vidjet ćete upute koje vam pokazuju kako preuzeti pokretač i instalirati ga na svoj poslužitelj.

Korak 5. Instalacija i konfiguracija GitHub samostalno gostujućeg pokretača na našem poslužitelju.

U ovom koraku postavit ćemo vlastiti (self-hosted) GitHub runner. Vlastiti runner je sustav koji može implementirati i upravljati izvršavanjem poslova iz GitHub Actions na web stranici GitHub. Jedna prednost koju vlastiti runner ima u odnosu na runner koji hostira GitHub je fleksibilnost. Nudi veću kontrolu nad operativnim sustavom, hardverom i drugim alatima koji se mogu prilagoditi kako bi zadovoljili potrebe vaše aplikacije.

Vlastiti runneri mogu se dodati na različitim razinama kao što su:

• Runneri na razini repozitorija, oni su namijenjeni jednom repozitoriju.

• Runneri na razini organizacije, oni mogu obrađivati poslove za više repozitorija u organizaciji.

• Na razini poduzeća (enterprise) koji se mogu dodijeliti višestrukim organizacijama.

Za nastavak, prijavite se na svoj poslužitelj putem ssh-a:

Prijeđite u svoj početni direktorij naredbom:

Zatim stvorite direktorij pod nazivom action-runners i uđite u njega:

Zatim preuzmite najnoviju verziju paketa runnera:

Zatim raspakirajte preuzeti paket naredbom:

Natrag na svoj repozitorij, na kartici Settings, na lijevoj bočnoj ploči kliknite Actions, zatim Runners, baš kao što smo učinili u Koraku 4.

Vidjet ćete navedenu naredbu koja uključuje token koji povezuje vaš vlastiti runner s vašim GitHub repozitorijem. Dok ste još unutar direktorija u koji ste raspakirali kod GitHub runnera, upotrijebite navedenu naredbu za povezivanje vašeg runnera, na primjer:

Trebao bi se uspješno autentificirati:

Pritisnite enter za zadanu (Default) grupu runnera.

Zatim unesite naziv za svoj runner, na primjer, my-runner, i pritisnite enter.

Pritisnite Enter za preskakanje dodavanja dodatnih oznaka, trebali biste vidjeti poruku o uspjehu na snimci zaslona u nastavku:

Unesite naziv svog radnog direktorija, na primjer, react-cicd, trebalo bi biti uspješno s tekstom settings saved.

Na kraju, pokrenite ./run.sh, ovo bi trebalo prikazati Connected to Github:

Ali ovo se ne izvodi u pozadini, ako upišemo ctrl+c u našem terminalu, runner će se zaustaviti, moramo ga zamijeniti s .svc.sh uslugom kako bi runner nastavio raditi kao usluga tako da možemo nastaviti komunicirati s njim.

Zaustavite runner s ctrl+c. Možete instalirati .svc.sh uslugu pokretanjem naredbe:

Nakon što se instalira, pokrenite uslugu naredbom:

Ovo bi trebalo biti uspješno, prikazujući active (running).

Kako biste potvrdili da je svc.sh usluga aktivna i radi, izvršite naredbu:

U ovom trenutku, svaki tijek rada koji je možda bio u redu čekanja za vlastiti runner trebao bi se uspješno izvršiti. Također možete urediti datoteku i isprobati stvari. Na primjer, izmijenite O nama.tsx datoteku, potvrdite (commit) i pošaljite (push) promjene, vlastiti runner će uspješno dovršiti posao.

Korak 6. Postavljanje Nginx bloka poslužitelja

U ovom koraku postavit ćemo blok poslužitelja u Nginxu kako bismo vidjeli verziju izgradnje (build) naše react aplikacije. Imamo vodič o Postavljanju Nginx blokova poslužitelja koji bi vam mogao biti koristan.

Ispod je primjer bloka poslužitelja korištenog u ovom vodiču:

Kreirat ćete konfiguracijsku datoteku Nginx bloka poslužitelja unutar /etc/nginx/sites-available direktorija.

Otvorite datoteku za konfiguraciju bloka poslužitelja vaše web-lokacije pomoću nano uređivača koristeći naredbu:

Kopirajte gore podijeljeni blok poslužitelja i prilagodite ga prema putanjama svojih direktorija te ga zalijepite u otvorenu datoteku. Kada završite s uređivanjem, pritisnite ctrl+x zatim pritisnite y i enter za spremanje i izlaz.

Nakon što spremite, kreirajte simboličku poveznicu za react-cicd konfiguraciju bloka poslužitelja iz /etc/nginx/sites-available u /etc/nginx/sites-enabled pokretanjem naredbe:

Kako bi promjene stupile na snagu, morate ponovno pokrenuti Nginx. Međutim, prije nego što ponovno pokrenete uslugu Nginx, testirajte jesu li konfiguracije Nginxa ispravne pokretanjem naredbe:

Ako je konfiguracija ispravna, test bi trebao biti uspješan.

Primijetite vrijednost server_name direktive “ react.test ” u bloku poslužitelja? Ovu ćete vrijednost dodati u svoju hosts datoteku na vašem lokalnom računalu. To će vam omogućiti otvaranje aplikacije u pregledniku. Ovaj je korak potreban samo za virtualne domene koje se koriste u lokalnim razvojnim okruženjima. Ako imate registrirani naziv domene povezan s javnom IP adresom vašeg poslužitelja, tada bi naziv domene već trebao biti dostupan u vašem pregledniku.

Na svom lokalnom računalu otvorite datoteku hosts naredbom:

Unutar datoteke hosts dodajte IP adresu svog poslužitelja, npr. 127.0.0.1, nakon čega slijedi naziv vaše virtualne domene.

Primjer je prikazan u nastavku. Zatim zatvorite datoteku i spremite:

Natrag na vaš poslužitelj, unutar /var/www direktorija, kreirajte novi direktorij, možete ga nazvati react-cicd pokretanjem:

U ovoj fazi uklonit ćemo komentar s posljednje naredbe u node.js.yml datoteci.

Ova naredba kopira mapu 'build' naše React aplikacije s mjesta gdje smo odredili našu radnu mapu unutar direktorija actions-runner u prethodnom step 5.

I stavlja public mapu u /var/www/react-cicd direktorij.

Blok poslužitelja sada može pristupiti našoj aplikaciji i prikazati je u pregledniku.

Na kraju, ponovno pokrenite uslugu Nginx naredbom:

Sada možete napraviti promjenu u O nama.tsx datoteci, a zatim predati i gurnuti svoje promjene u repozitorij. Nakon uspješne izgradnje, vidjet ćete verziju izgradnje svoje React aplikacije na http://react.test ili na nazivu domene koji ste naveli. Izbjegavajte uređivanje href elementa u Home.tsx datoteci jer to može uzrokovati neuspjeh već napisanog testa. Kartica Actions u vašem repozitoriju također bi trebala prikazati dovršenu izgradnju zadatka.

Zaključak

Kontinuirana integracija s Github Actions donosi brojne prednosti, uključujući dobro iskustvo za programere, pomaže u kontinuiranom testiranju, omogućuje lakšu suradnju u većim timovima, skraćuje vrijeme razvoja, brzo objavljivanje novih značajki, povratne informacije u stvarnom vremenu i zadovoljstvo kupaca, što vam daje prednost pred konkurentima. Kako biste nadogradili ovo znanje, možda biste željeli naučiti i o Postavljanju GitLab Continuous Integration (CI) cjevovoda na Ubuntu. i o korištenju samostalno upravljane GitLab instance za smještaj vaših Docker slika i pokretanje privatnih izgradnji.

Sretno s radom!