Úvod
Softvérové inžinierstvo je rýchlo sa rozvíjajúca a konkurenčná oblasť. Rýchlejšie uvedenie vašich produktov k používateľom vám poskytne výhodu nad vašimi konkurentmi. Pozitívom je, že existujú osvedčené postupy v odvetví, ktoré pomáhajú spoločnostiam zabezpečiť rovnaké podmienky.
Kontinuálna integrácia a kontinuálny vývoj (CICD) je príkladom stratégie, ktorá využíva osvedčené postupy v odvetví, aby spoločnostiam poskytla výhodu v tejto konkurenčnej oblasti.
GitHub, webový repozitár s nástrojom na správu verzií Git, umožňuje softvérovým vývojárom, inžinierom a architektom implementovať CI/CD. Kontinuálny vývoj (CD) je prax automatizácie zostavení, testov a nasadení. Kontinuálna integrácia (CI) umožňuje viacerým ľuďom spolupracovať na rovnakom projekte a kontrolovať, či kód funguje, bez obáv z konfliktov pri zlučovaní (merge conflicts).
GitHub Actions nám umožňujú písať kroky, ktoré automatizujú zostavenia, testy a nasadenie.
V tomto návode sa dozviete, ako nastaviť kontinuálnu integráciu pomocou GitHub Actions. Začneme nastavením repozitára Git na hosťovanie nášho kódu. Potom nakonfigurujeme proces GitHub CI na sledovanie zmien v našom kóde, spustíme CI runner na vykonanie testov, zostavenie a nasadenie našej aplikácie na server Ubuntu 22.04 so spusteným Nginx.
Požiadavky
Na sledovanie tohto návodu budete potrebovať nasledovné:
-
Server so systémom Ubuntu 22.04. Môžete postupovať podľa tohto návodu na počiatočné nastavenie servera Ubuntu, pridanie používateľa bez oprávnení root, a povolenie firewallu UFW v Ubuntu.
-
Na serveri budete musieť mať nainštalovaný Node.js, najlepšie verziu 14 a vyššiu. Máme návod na ako nainštalovať Node.js na Ubuntu.
-
Budete musieť mať nainštalovaný softvér servera Nginx. Máme návod na Ako nainštalovať Nginx na server so systémom Ubuntu.
-
Budete potrebovať Docker a Docker Compose nainštalovaný na vašom lokálnom počítači na spustenie izolovaného vývojového prostredia. Postupujte podľa nášho návodu, aby ste sa dozvedeli Ako nainštalovať a prevádzkovať Docker v cloude.
Teraz, keď máme všetko, čo potrebujeme, začnime.
Krok 1. Klonovanie repozitára projektu.
Tento návod budeme zakladať na Reactjs, deklaratívnej knižnici Javascriptu na vytváranie používateľských rozhraní. Ak chcete nastaviť nový projekt od nuly, môžete použiť tento zdroj o nastavení aplikácie React. Pre stručnosť budeme používať klon tohto React.js repozitára ktorý sme už nastavili na GitHub-e.
Aplikácia, ktorú klonujeme, je jednoduchá react aplikácia s react-router 6 a testom vykonaným pomocou React Testing Library, čo nám poskytuje metódy na prístup k DOM.
Ak chcete naklonovať repozitár, kliknite na zelené tlačidlo a skopírujte URL adresu.
Otvorte terminál vo vašom pracovnom priestore a spustením príkazu nižšie naklonujte aplikáciu:
|
1 |
git clone git@github.com:EspiraMarvin/cicd-tut.git |
Po naklonovaní repozitára prejdite do adresára projektu:
|
1 |
cd cicd-tut |
Spustite príkaz docker-compose up na zostavenie a spustenie aplikácie:
|
1 |
docker-compose up --build --force-recreate |
Po dokončení procesu navštívte http://localhost:3000
Mali by ste vidieť niečo podobné tomuto:
Krok 2. Pochopenie súboru Node.js.yml.
V tomto kroku budeme definovať direktívy v súbore GitHub Yaml, aby sme lepšie pochopili, čo sa deje. V repozitári sa nachádza adresár .github/workflows ktorý obsahuje node.js.yml súbor, ktorý obsahuje kroky workflow, ktoré spúšťače (runners) GitHubu vykonajú po odoslaní zmien do vášho repozitára kódu na GitHub-e. YAML syntax sa používa na zápis workflow pre GitHub Actions. Súbory YAML končia príponou yaml alebo yml.
Otvorte node.js.yml súbor, mal by vyzerať takto:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
name: cicd-tut on: push: branches: [ "main" ] pull_request: branches: [ "main" ] jobs: build: # Typ runnera, na ktorom sa úloha spustí runs-on: self-hosted strategy: matrix: node-version: [16.x] # Kroky predstavujú sekvenciu úloh, ktoré sa vykonajú ako súčasť úlohy steps: - name: 'checkout' uses: actions/checkout@v3 - name: 'nastaviť node akcie' uses: actions/setup-node@v3 with: node-version: "16" cache: 'npm' - run: npm i - run: npm test - run: npm run build # - run: cp -r ~/actions-runner/cicd-react/react-tut-test/react-tut-test/build /var/www/react-cicd |
V čase písania tohto návodu sme používali verziu 16 Node.js 16. Teraz si poďme vysvetliť workflow GitHub Actions:
-
name
name: cicd-tut
Názov vášho workflow, tento názov sa zobrazí vo vašom repozitári Actions karte.
-
on
|
1 2 3 4 5 |
on: push: branches: [ "main" ] pull_request: branches: [ "main" ] |
on sa používa na definovanie udalostí. Udalosti môžu automaticky spustiť workflow alebo byť naplánované na neskôr. Udalosti môžu byť jednotlivé alebo viaceré, môžete tiež špecifikovať spúšťanie workflow pre konkrétne vetvy, tagy alebo súbory. Funguje to ako filter.
V našom YAML súbore definujeme viacero automatických udalostí, sú to:
-
Udalosť push sa spustí, keď je kód odoslaný do repozitára
-
Udalosť pull_request sa spustí, keď je vytvorený pull request na hlavnej vetve.
Špecifikujeme názov vetvy main s cieľom obmedziť spúšťanie workflow len na túto vetvu. Môžeme tiež špecifikovať vetvy, ktoré sa majú ignorovať, pomocou príznaku ! nasledovaného názvom vetvy.
-
jobs
Workflow sa v podstate skladá z jednej alebo viacerých úloh (jobs). Tieto úlohy bežia postupne za sebou od prvej po poslednú.
|
1 2 3 4 |
jobs: build: # Typ runnera, na ktorom sa úloha spustí runs-on: self-hosted |
Každá úloha beží v prostredí runnera špecifikovanom pomocou runs-on. Môžete si vybrať spustenie úloh buď na runneroch od GitHubu označených ako ubuntu-latest alebo na self-hosted runneri označenom ako self-hosted. Vaša voľba bude závisieť od počtu úloh, ktoré potrebujete. S vlastnými (self-hosted) runnermi máte väčšiu flexibilitu a kontrolu nad prostriedkami.
V ďalšom kroku najprv spustíme naše úlohy na runneroch od GitHubu a neskôr nastavíme vlastný (self-hosted) GitHub runner na našom vlastnom serveri.
-
strategy
Stratégia (strategy) nám umožňuje použiť premenné v definícii jednej úlohy na automatické vytvorenie viacerých spustení úloh na základe kombinácií premenných.
V našom YAML súbore máme jednu premennú pre našu verziu node, ale ak pridáme ďalšiu pre verziu node 18, takto: node-version: [16.x, 18.x], potom maticová stratégia (matrix strategy) vytvorí 2 spustenia úloh pre našu react aplikáciu pre verzie node 16 aj 18.
|
1 2 3 |
strategy: matrix: node-version: [16.x] |
-
steps
Kroky (steps) sú sekvenciou úloh, ktoré tvoria prácu (job). Kroky môžu spúšťať príkazy, nastavovať úlohy, spúšťať akcie vo vašom verejnom repozitári alebo akcie zverejnené v registri docker.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
steps: - name: 'checkout' uses: actions/checkout@v3 - name: 'nastaviť node akcie' uses: actions/setup-node@v3 with: node-version: "16" cache: 'npm' - run: npm i - run: npm test - run: npm run build |
Krok má názov. Hoci je voliteľný, môžete ho použiť na jednoduchú identifikáciu názvu vášho kroku, ktorý sa zobrazí na GitHub-e.
V kroku môžete vybrať akciu, ktorá sa má spustiť vo vašej úlohe, akcie sú opakovane použiteľné. Verzie akcie sa špecifikujú pri definovaní akcie, čo je dôležité, pretože to zabraňuje narušeniu vášho workflow, keď vlastník akcie zverejní aktualizáciu.
Vo vyššie uvedenom fragmente kódu checkout@v3 je príkladom akcie so špecifikovanou verziou 3. Táto akcia stiahne váš repozitár, aby k nemu mal váš workflow prístup.
Niektoré akcie, ako napríklad actions/setup-node@v3 vyššie, majú vstupy označené pomocou kľúčového slova with, akcie setup node vyžadujú verziu node 16 a cache pre npm.
-
run
Táto akcia spúšťa programy príkazového riadka pomocou shellu operačného systému.
Vo vyššie uvedenom súbore YAML máme tri príkazy, pričom všetky tri sa spustia pomocou rovnakého shellu v prostredí runnera.
-
Prvý príkaz npm i nainštaluje všetky závislosti potrebné pre našu react aplikáciu.
-
Druhý npm test, spustí test, ktorý sme napísali. Test očakáva, že text learn react sa vykreslí na domovskej stránke.
-
Na záver, príkaz npm run build vytvorí adresár build s produkčnou verziou našej aplikácie. Neskôr tento adresár build použijeme v našom blok servera Nginx.
Krok 3. Testovanie GitHub CI s GitHub Runners.
V tomto kroku budeme testovať proces kontinuálnej integrácie s GitHub runners. Začnite otvorením súboru node.js.yml. Zmeňte typ runnera, na ktorom sa akcie spustia, na ubuntu-latest. Účelom tohto je otestovať, či GitHub workflow funguje perfektne na GitHub runners pred nastavením našich vlastných self-hosted runnerov.
|
1 2 3 |
jobs: build: runs-on: ubuntu-latest |
Vytvorte nový repozitár vo svojom účte GitHub. Predtým, ako budeme pokračovať, sa vráťte do adresára svojho pracovného priestoru a vymažte adresár .git, ak ho nevidíte, skontrolujte skryté súbory. Na vymazanie adresára môžete v termináli použiť nasledujúci príkaz:
|
1 |
rm -rf .git |
Teraz môžete pomocou git add pridať všetky súbory projektu, vykonať commit a odoslať ich do svojho repozitára. Ak ste sa zasekli, použite tento návod na prepojenie priečinka projektu s repozitárom GitHub , ktorý ste vytvorili vyššie.
Keď skončíte, kliknite na kartu Code vo vašom repozitári a vedľa celkového počtu commitov uvidíte malú oranžovú bodku. Keď na ňu kliknete, zobrazí sa modálne okno podobné tomu nižšie, ktoré indikuje, že váš workflow bol zaradený do frontu:
Teraz kliknite na odkaz Details v modálnom okne alebo prejdite na kartu Actions, kde uvidíte každý krok workflow node.js.yml spúšťaný GitHub runnermi:
V prípade úspechu kliknite na kartu Actions, mala by vyzerať takto:
A to je všetko, malá oranžová bodka na našej karte Code by teraz mala byť zelená fajka. GitHub runner úspešne zostavil našu aplikáciu.
Now, let’s go a step further and change the build environment to use GitHub self-hosted runners in our own infraštruktúre servera Ubuntu.
Krok 4. Nastavenie GitHub workflow na používanie self-hosted runnera.
Pred inštaláciou self-hosted runnera na náš server sa vráťme do nášho pracovného priestoru a upravme súbor workflow node.js.yml tak, aby bežal na GitHub self-hosted runneroch.
|
1 2 3 |
jobs: build: runs-on: self-hosted |
V tejto fáze, keď potvrdíte zmeny, úloha bude zaradená do frontu, pretože self-hosted runner ešte nebol definovaný.
Vo svojom repozitári kliknite na kartu
Settings, v ľavom bočnom paneli kliknite na
Actions, potom kliknite na
Runners:
Kliknite na New self-hosted runner, a vyberte Linux ako operačný systém.
Uvidíte pokyny, ktoré vám ukážu, ako stiahnuť runner a nainštalovať ho na váš server.
Krok 5. Inštalácia a konfigurácia GitHub self-hosted runnera na našom serveri.
V tomto kroku nastavíme self-hosted GitHub runner. Self-hosted runner je systém, ktorý dokáže nasadzovať a spravovať spúšťanie úloh z GitHub Actions na webovej stránke GitHub. Jednou z výhod self-hosted runnera oproti runneru hostovanému GitHubom je flexibilita. Ponúka väčšiu kontrolu nad operačným systémom, hardvérom a ďalšími nástrojmi, ktoré je možné prispôsobiť vašim potrebám aplikácie.
Self-hosted runnere môžu byť pridané na rôznych úrovniach, ako napríklad:
-
Runnere na úrovni repozitára, tie sú vyhradené pre jeden repozitár.
-
Runnere na úrovni organizácie, tie dokážu spracovávať úlohy pre viacero repozitárov v organizácii.
-
Na úrovni podniku, ktoré môžu byť priradené viacerým organizáciám.
Ak chcete pokračovať, prihláste sa na svoj server cez ssh:
|
1 |
ssh username@server_ip |
Prejdite do svojho domovského adresára pomocou príkazu:
|
1 |
cd ~ |
Potom vytvorte adresár s názvom action-runners a prejdite doň:
|
1 |
mkdir actions-runner && cd actions-runner |
Ďalej stiahnite najnovšiu verziu balíka runnera:
|
1 |
curl -o actions-runner-linux-x64-2.298.2.tar.gz -L https://github.com/actions/runner/releases/download/v2.298.2/actions-runner-linux-x64-2.298.2.tar.gz |
Potom rozbaľte stiahnutý balík pomocou príkazu:
|
1 |
tar xzf ./actions-runner-linux-x64-2.298.2.tar.gz |
Späť vo vašom repozitári, na karte Settings kliknite na ľavom paneli na Actions, potom na Runners, presne tak, ako sme to urobili v Step 4.
Uvidíte zobrazený príkaz, ktorý obsahuje token prepájajúci váš self-hosted runner s vaším repozitárom na GitHub-e. Kým ste stále v adresári, do ktorého ste rozbalili kód GitHub runnera, použite uvedený príkaz na prepojenie vášho runnera, napríklad:
|
1 |
./config.sh --url https://github.com/EspiraMarvin/react-tut-test --token XXXXXXXXXXXXXXXXXXXXXXXXXXX |
Malo by to úspešne prebehnúť overenie:
Stlačte Enter pre predvolenú skupinu runnerov (Default runner group).
Potom zadajte názov pre váš runner, napríklad my-runner, a stlačte Enter.
Stlačením klávesu Enter preskočíte pridávanie ďalších štítkov, na snímke obrazovky nižšie by ste mali vidieť správu o úspechu:
Zadajte názov vášho pracovného adresára, napríklad react-cicd, malo by to byť úspešné s textom settings saved.
Nakoniec spustite ./run.sh, malo by sa zobraziť Connected to Github:
To však nebeží na pozadí, ak v našom termináli stlačíme ctrl+c, runner sa zastaví. Musíme ho nahradiť službou .svc.sh , aby runner bežal ako služba a mohli sme s ním naďalej komunikovať.
Zastavte runner pomocou ctrl+c. Službu .svc.sh môžete nainštalovať spustením príkazu:
|
1 |
sudo ./svc.sh install |
Po inštalácii spustite službu pomocou príkazu:
|
1 |
sudo ./svc.sh start |
Malo by to byť úspešné a zobraziť active (running).
Ak chcete potvrdiť, že služba svc.sh beží a je aktívna, vykonajte príkaz:
|
1 |
sudo ./svc/sh status |
V tomto bode by mal úspešne prebehnúť akýkoľvek workflow, ktorý mohol byť zaradený do frontu a čakal na self-hosted runner. Môžete tiež upraviť súbor a vyskúšať si to. Napríklad upravte súbor O nás.tsx, potvrďte (commit) a odošlite (push) zmeny, self-hosted runner úspešne dokončí úlohu.
Krok 6. Nastavenie bloku servera Nginx
V tomto kroku nastavíme blok servera v Nginx, aby sme mohli zobraziť zostavenú verziu našej aplikácie React. Máme návod na Nastavenie blokov servera Nginx, ktorý by pre vás mohol byť užitočný.
Nižšie je uvedený príklad bloku servera použitého v tomto návode:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
server { listen 80; listen [::]:80; server_name react.test; root /var/www/react-cicd/build; index index.html index.htm index.nginx-debian.html; add_header X-Frame-Options "SAMEORIGIN"; add_header X-XSS-Protection "1; mode=block"; add_header X-Content-Type-Options "nosniff"; charset utf-8; location / { try_files $uri $uri/ =404; } } |
Vytvoríte konfiguračný súbor bloku servera Nginx v adresári /etc/nginx/sites-available .
Otvorte súbor pre konfiguráciu bloku servera vášho webu pomocou editora nano príkazom:
|
1 |
sudo nano /etc/nginx/sites-available/react-cicd |
Skopírujte vyššie zdieľaný blok servera, upravte ho podľa ciest k vašim adresárom a vložte ho do otvoreného súboru. Po dokončení úprav stlačte ctrl+x potom stlačte y a enter pre uloženie a ukončenie.
Po uložení vytvorte symlink pre konfiguráciu bloku servera react-cicd z /etc/nginx/sites-available do /etc/nginx/sites-enabled spustením príkazu:
|
1 |
sudo ln -s /etc/nginx/sites-available/react-cicd /etc/nginx/sites-enabled/ |
Aby sa zmeny prejavili, musíte reštartovať Nginx. Pred reštartovaním služby Nginx však otestujte, či sú konfigurácie Nginx platné, spustením príkazu:
|
1 |
sudo nginx -t |
Ak je konfigurácia správna, test by mal byť úspešný.
Všimli ste si hodnotu direktívy server_name “ react.test ” v bloku servera? Túto hodnotu pridáte do svojho súboru hosts na vašom lokálnom počítači. To vám umožní otvoriť aplikáciu vo vašom prehliadači. Tento krok je potrebný iba pre virtuálne domény používané v lokálnych vývojových prostrediach. Ak máte registrovaný názov domény prepojený s verejnou IP adresou vášho servera, potom by mal byť názov domény už prístupný vo vašom prehliadači.
Na svojom lokálnom počítači otvorte súbor hosts pomocou príkazu:
|
1 |
sudo nano /etc/hosts |
Do súboru hosts pridajte IP adresu vášho servera, napr. 127.0.0.1, za ktorou nasleduje názov vašej virtuálnej domény.
Príklad je uvedený nižšie. Potom súbor zatvorte a uložte:
|
1 |
192.168.3.123 react.test |
Späť na vašom serveri v adresári /var/www vytvorte nový adresár, môžete ho pomenovať react-cicd spustením:
|
1 |
mkdir react-cicd |
V tejto fáze odkomentujeme posledný príkaz v súbore node.js.yml .
Tento príkaz skopíruje priečinok zostavy (build) našej aplikácie React z miesta, kde sme špecifikovali náš pracovný priečinok v adresári actions-runner v predchádzajúcom kroku 5.
A umiestni priečinok public do adresára /var/www/react-cicd .
Blok servera teraz môže pristupovať k našej aplikácii a zobraziť ju v prehliadači.
Nakoniec reštartujte službu Nginx príkazom:
|
1 |
sudo service nginx restart |
Teraz môžete vykonať zmenu v súbore O nás.tsx, potom potvrďte (commit) a odošlite (push) svoje zmeny do vášho repozitára. Po úspešnom zostavení uvidíte produkčnú verziu vašej aplikácie React na http://react.test alebo na názve domény, ktorý ste zadali. Vyhnite sa úprave elementu href v súbore Home.tsx, pretože to môže spôsobiť zlyhanie už napísaného testu. Karta Actions vo vašom repozitári by tiež mala zobrazovať dokončené zostavenie úlohy.
Záver
Kontinuálna integrácia s Github Actions prináša množstvo výhod vrátane dobrej skúsenosti pre vývojárov, pomáha s priebežným testovaním, umožňuje jednoduchšiu spoluprácu vo väčších tímoch, skracuje čas vývoja, rýchle vydávanie nových funkcií, spätnú väzbu v reálnom čase a spokojnosť zákazníkov, čo vám dáva náskok pred vašimi konkurentmi. Ak chcete na týchto znalostiach stavať, možno sa budete chcieť dozvedieť aj o Nastavení GitLab Continuous Integration (CI) Pipelines na Ubuntu. a o používaní samostatne spravovanej inštancie GitLab na hosťovanie vašich Docker obrazov a spúšťanie súkromných zostavení.
Príjemnú prácu!
Komentáre
Zatiaľ žiadne komentáre. Buďte prvý.