CI/CD dla aplikacji web z wykorzystaniem Azure DevOps

13/11/2018

Data ostatniej aktualizacji: 09.07.2020 06:38

Pod koniec września 2018 swoją premierę miała platforma Azure DevOps. Aby sprawdzić, co oferuje nowe narzędzie Microsoftu postanowiliśmy na początek stworzyć za jego pomocą procesy ciągłej integracji oraz ciągłego wdrażania (CI/CD) dla prostej (monolitycznej) aplikacji web’owej. Na potrzeby niniejszego artykułu posłużymy się zbudowaną przez nas wcześniej aplikacją PWA do zgłaszania szkód.

Rozwiązanie, które chcemy skonstruować będzie wyglądać następująco:

Proces ciągłej integracji pobiera kod źródłowy z repozytorium GitHub, kompiluje aplikację i opakowuje ją w kontener, który następnie zapisywany jest w repozytorium obrazów DockerHub.

Proces ciągłego wdrażania pobiera obraz kontenera z DockerHub i uruchamia go w przygotowanym uprzednio środowisku. W naszym przypadku będzie to Azure App Service.

 

Przygotowanie

Zanim przystąpimy do tworzenia procesów CI/CD musimy przygotować kilka rzeczy:

RG_NAME=claim-reporter
APP_NAME=claim-reporter-app
IMAGE=altkom/claim-reporter-app

az group create \
    --location westeurope \
    --name ${RG_NAME}

az appservice plan create \
    --name ${APP_NAME} \
    --resource-group ${RG_NAME} \
    --is-linux

az webapp create \
    --plan ${APP_NAME} \
    --resource-group ${RG_NAME} \
    --name ${APP_NAME} \
    --deployment-container-image-name ${IMAGE}

 

Proces Ciągłej Integracji

Zdefiniowanie procesu ciągłej integracji w Azure DevOps wymaga 11 prostych kroków:

 

1) Na ekranie wybranego projektu przechodzimy na zakładkę “Builds” i naciskamy przycisk “New Pipeline”:

Azure DevOps

2) Wskazujemy platformę, na której trzymamy repozytorium kodu (Github lub Azure):

Azure DevOps

3) Wybieramy sposób integracji z GitHub’em:

Azure DevOps

4) Instalujemy na koncie GitHub’owym wtyczkę Azure Pipelines:

Azure DevOps

5) Nadajemy wtyczce niezbędne uprawnienia:

Azure DevOps

6) Wybieramy repozytorium kodu:

Azure DevOps

7) Wybieramy szablon dla nowego pipeline:

Azure DevOps

Dostępne szablony zawierają proste przykłady procesów budowania dla wielu popularnych stosów technologicznych: Java (ant, maven, gradle), JavaScript (npm, grunt, gulp, angular, react, vue), .NET (Full, Core), UWP, Python, Ruby, Go, PHP, Xamarin, Xcode, C/C++, Docker, etc.

8) Przeglądamy go i zapisujemy bez modyfikacji:

Azure DevOps

Definicja pipeline została zapisana w repozytorium kodu w pliku azure-pipelines.yml

Nowy commit powoduje uruchomienie procesu budowania, który (z oczywistych względów) kończy się niepowodzeniem:

Azure DevOps

9) Żeby udrożnić proces budowania musimy dostosować definicję do specyfiki naszego projektu. Rozpoczynamy od zdefiniowania trzech zmiennych w pipeline:

Azure DevOps

10) Dostosowujemy definicję pipeline zapisaną w pliku azure-pipelines.yml:

# azure-pipelines.yml
pool:
  vmImage: 'Ubuntu 16.04'

variables:
  app: 'claim-reporter-app'
  image: '$(dockerNamespace)/claim-reporter-app'
  tag: '$(build.buildId)'

steps:
- script: docker login -u $(dockerId) -p $(dockerPass)
displayName: 'docker login'
- script: docker build -t $(image) $(app)
displayName: 'docker build $(app)'
- script: docker tag $(image) $(image):$(tag)
displayName: 'docker tag $(image):$(tag)'
- script: docker push $(image):$(tag)
displayName: 'docker push $(image):$(tag)'
- script: docker push $(image):latest
displayName: 'docker push $(image):latest'

11) Zapisujemy zmianę w repozytorium, co powoduje uruchomienie procesu budowania:

Azure DevOps

Status procesu budowania możemy podejrzeć również na GitHub’ie:

Azure DevOps

Na DockerHub pojawiły się zbudowane obrazy kontenerów:

Azure DevOps

 

Proces Ciągłego Wdrażania

W celu zdefiniowania prostego procesu Ciągłego Wdrażania musimy wykonać 8 kroków:

 

1) W oknie projektu przechodzimy na zakładkę “Releases” i wybieramy opcję “New Pipeline”:

Azure DevOps

2) Wybieramy szablon “Azure App Service deployment” i naciskamy “Apply”:

Azure DevOps

3) Określamy nazwę potoku oraz pierwszego kroku:

Azure DevOps

4) Otwieramy ekran wyboru artefaktów do instalacji i wybieramy jako źródło “Docker Hub”:

Azure DevOps

5) Konfigurujemy połączenie z kontem na DockerHub:

Azure DevOps

6) Następnie wybieramy przestrzeń nazw oraz repozytorium i zatwierdzamy przyciskiem “Add”:

Azure DevOps

7) Przechodzimy na zakładkę “Tasks”:

Azure DevOps

Wybieramy subskrypcję Azure, klikamy “Authorize” i logujemy do konta Azure (uwaga: należy zwrócić uwagę, czy w przeglądarce nie jest włączona blokada wyskakujących okien).

Następnie wybieramy miejsce docelowe instalacji wskazując utworzoną uprzednio usługę “App Service” i naciskamy “Save”:

Azure DevOps

8) Wracamy do ekranu konfiguracji potoku i konfigurujemy wyzwalacz procesu instalacji:

Azure DevOps

Proces, który udało nam się zbudować wygląda następująco:

Azure DevOps

Pierwszą instalację zainicjujemy manualnie (Release -> Create a release), wybierając wersję artefaktu, który ma zostać wykorzystany:

Azure DevOps

Po chwili proces instalacji się zakończy:

Azure DevOps

a pod adresem docelowym pojawi się nasza aplikacja:

Azure DevOps

 

Podsumowanie

Kilka eksperymentów, które przeprowadziliśmy z użyciem platformy Azure DevOps pozwoliło nam poczynić następujące obserwacje:

 

Podsumowując – platforma Azure DevOps oferuje bardzo duże możliwości. Liczymy, że te nieliczne zauważone przez nas niedociągnięcia zostaną niebawem usunięte.
Autor: Robert Kuśmierek, Lead Software Engineer, ASC-LAB