Aplikacja Angularowa – tworzymy proces CI przy pomocy Travis CI

Przyjmijmy scenariusz wdrażania naszej aplikacji na serwery w momencie utworzenia nowej wersji. Cały proces jest dosyć długi – musimy kod wypchać do repozytorium, połączyć się z serwerem, zaciągnąć zmiany, zbudować nową wersję aplikacji i w końcu ją uruchomić.

Oczywiście ten proces może wyglądać bardzo różnie, ale nie skłamię jeżeli powiem, że jest to najbardziej standardowy scenariusz.

Posłużę się definicją, która najbardziej mi się spodobała.

Continuous Integration (CI): automated build and execution of at least unit tests to prove integration of new code with existing code, but preferably integration tests (end-to-end).

Continuous Deployment (CD): automated deployment when code passes CI at least into a test environment, preferably into higher environments when quality is proven either via CI or by marking a lower environment as PASSED after manual testing. I.E., testing may be manual in some cases, but promoting to next environment is automatic.

Samym procesem CD zajmiemy się kiedy indziej.

Dzisiaj opiszę jak można zautomatyzować proces CI. Finalnym efektem będzie sytuacja kiedy wysłanie zmian do repozytorium skutkować będzie zbudowaniem się aplikacji oraz przetestowaniem jej przez testy automatyczne.

Pełny kod poniższej aplikacji znajduje się pod adresem https://github.com/mtszpater/Angular-CI

Zbudowanie aplikacji

Przejdźmy szybko przez proces budowania aplikacji angularowej.

ng new my-example-app

Dodanie pliku .travis.yml do aplikacji

Travis-CI – jest to darmowy system umożliwiający tworzenie procesów CI. Można go podpiąć bez problemu pod naszego Githuba.

Po stronie naszej aplikacji nie jest wymagana praktycznie żadna zmiana w kodach. Wystarczy, że dorzucimy plik .travis.yml.

language: node_js
node_js:
  - "8"
sudo: true
dist: trusty

branches:
  only:
  - master

before_script:
 - export CHROME_BIN=/usr/bin/google-chrome
 - export DISPLAY=:99.0
 - sh -e /etc/init.d/xvfb start
 - sudo apt-get update
 - sudo apt-get install -y libappindicator1 fonts-liberation
 - wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
 - sudo dpkg -i google-chrome*.deb

script: 
  - ng test --watch false -cc
  - npm run e2e
  - ng build --prod

W tym pliku znajduje się opis operacji jakie Travis powinien wykonać po wysłaniu przez nas kodu do repozytorium. Określony został branch na który powinien Travis reagować. Commity do innych będą pomijane w naszym procesie. Przyda to się jak w przyszłości będziemy budować proces CD. Nie chcemy przecież robić wrzutek na nasze środowiska co 5 minut. 🙂

Przed uruchomieniem aplikacji musimy zaciągnąć google-chrome, aby możliwe było uruchomienie testów end-to-end.

Rejestracja w Travis-CI i podłączenie repozytorium

Po zalogowaniu się na stronie https://travis-ci.com/ wystarczy, że zalogujemy się za pomocą naszego konta GitHub. I tak na prawdę to już wystarczy. Travis standardowo reaguje na wszystkie repozytoria, które zaciągniemy z naszego githuba po synchronizacji konta.