Netlify to dostawca hostingu, z którego usług możesz korzystać na potrzeby swoich statycznych stron internetowych czy aplikacji webowych. Opcja darmowa daje 300 minut czasu na proces budowania, co powinno wystarczyć do skonfigurowania ciągłego wdrażania (CD) w projekcie, w którym nie wprowadza się dużo rewizji. Pokażę Ci, jak – korzystając z tych zasobów – dodać prosty proces ciągłej integracji do swojego buildu.
Przykładowa aplikacja
Żeby za bardzo nie komplikować sprawy, oprę się na przykładzie aplikacji wygenerowanej w Create React App (CRA). Dzięki temu będziemy mieć do dyspozycji aplikację, która:
- przypomina proste, rzeczywiste przypadki,
- posiada kilka zależności npm,
- zapewnia już większość tego, co potrzebujemy.
Powstała aplikacja wygląda następująco:
Etapy weryfikacji
Niedawno pisałem o działaniach, które możesz podjąć dzięki CI. Pokażę Ci teraz, jak skonfigurować ten proces pod naszą przykładową aplikację.
Budowanie
Kod wygenerowany przez CRA robi wszystko, co będzie Ci potrzebne do procesu budowania:
$ npm run build
> netlify-ci@0.1.0 build
> react-scripts build
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
43.71 kB build/static/js/main.1fb16459.js
1.78 kB build/static/js/787.c84d5573.chunk.js
541 B build/static/css/main.073c9b0a.css
…
Netlify wybiera skrypt build z repozytorium wygenerowanego przez CRA automatycznie jako polecenie budowania i wszystko działa bez żadnych problemów:
Testy
Kod wygenerowany przez CRA obejmuje konfigurację pozwalającą na uruchamianie testów jednostkowych i jeden test przykładowy. Skrypt npm test został stworzony do programowania: uruchamia się w trybie interaktywnym, a jego domyślna konfiguracja zakłada obserwowanie plików. Uruchomienie w kontekście CI wymaga jednej iteracji:
$ npm test -- --watchAll=false
> netlify-ci@0.1.0 test
> react-scripts test "--watchAll=false"
PASS src/App.test.js
✓ renders learn react link (16 ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 0.644 s, estimated 1 s
Ran all test suites.
Zdefiniujmy teraz nowy skrypt w package.json, aby mieć go na podorędziu:
{
…
"scripts": {
…
"test": "react-scripts test",
"test:ci": "react-scripts test --watchAll=false",
…
},
Analiza statyczna
Kod warto wzbogacić o analizę statyczną. Podstawowa konfiguracja powinna być dość prosta, ale nie będę jej omawiał w tym artykule. Jeśli chcesz rozwinąć się w tym temacie, polecam zacząć od:
- ESLint – ze względu na to, że ostrzega Cię przed potencjalnymi problemami występującymi w kodzie,
- Prettier – bo pozwala Ci w sposób automatyczny zachować jednorodny styl programowania.
Nowy skrypt CI
Aby pomyślnie uruchomić CI/CD, wykonaj następujące działania na stworzonym kodzie:
-
npm install– zapewnia zależności, realizowane domyślnie przez Netlify, -
npm run test:ci– zmodyfikowane polecenie testowania, -
npm run build– oryginalne polecenie budowania, - wdrożenie – realizowane przez Netlify.
Build powinien być zależny od testów: jeśli one zawiodą, proces wykonywania powinien się zatrzymać – dlatego zastosuję '&&'. W ramach konfiguracji Netlify polecenie to może jednak uruchomić tylko jeden input. Stworzenie nowego skryptu przeznaczonego do tego przypadku użycia pozwala zająć się obiema kwestiami:
{
…
"scripts": {
…
"test:ci": "react-scripts test --watchAll=false",
"ci": "npm run test:ci && npm run build",
…
},
…
}
Przykładowe uruchomienie
Po całej konfiguracji skrypty będą zachowywać się tak:
- jeżeli testy buildów dadzą wynik negatywny, pulpit Netlify pokaże uruchomienie zakończone niepowodzeniem;
- jeżeli wszystko działa jak należy, aplikacja zostanie wdrożona.
Wykorzystanie zasobów
W ramach przeprowadzonych przeze mnie uruchomień testy nie miały praktycznie żadnego wpływu na czas budowania, czyli zasób, który Netlify sprawdza, aby kontrolować stopień wykorzystywania systemu. Będzie się to oczywiście zmieniać, w miarę jak Twój projekt będzie się rozrastał i będziesz do niego dodawał kolejne testy. W pewnym momencie dobrze będzie zainwestować w konfigurację dedykowanego rozwiązania CI, a z Netlify korzystać tylko na potrzeby hostingu.
Linki
Co zrobiłbyś dalej?
Uruchamianie CI na Netlify to tylko tymczasowe rozwiązanie. Z jakiego narzędzia skorzystałbyś w następnej kolejności? Chciałbym wiedzieć, co ciekawi czytelników mojego bloga. Daj mi znać w ankiecie.
Top comments (0)