Tworzenie potoku CI/CD w narzędziu Azure Pipelines dla Node.js za pomocą Azure DevOps Starter

W tym przewodniku szybkiego startu utworzysz progresywną aplikację internetową NodeJS (PWA) za pomocą GatsbyJS oraz uproszczonego środowiska tworzenia aplikacji startowej w Azure DevOps. Po zakończeniu masz potok ciągłej integracji (CI) i ciągłego dostarczania (CD) dla swojego PWA w Azure Pipelines. Usługa Azure DevOps Starter konfiguruje elementy potrzebne do tworzenia, wdrażania i monitorowania.

Wymagania wstępne

• Konto Azure z aktywną subskrypcją. Utwórz konto bezpłatnie.
• Organizacja Azure DevOps.

Zaloguj się do witryny Azure Portal

Narzędzie DevOps Starter tworzy potok CI/CD w usłudze Azure Pipelines. Możesz utworzyć nową organizację usługi Azure DevOps lub użyć istniejącej organizacji. Usługa DevOps Starter tworzy również zasoby platformy Azure w wybranej subskrypcji platformy Azure.

1. Zaloguj się do witryny Azure Portal, a następnie w okienku po lewej stronie wybierz pozycję Utwórz zasób.

   

2. W polu wyszukiwania wpisz DevOps Starter, a następnie wybierz. Kliknij przycisk Dodaj, aby utworzyć nowy element.

   

Wybieranie przykładowej aplikacji i usługi platformy Azure

1. Wybierz przykładową aplikację Node.js.

   

2. Domyślna struktura przykładu to Express.js. Zmień zaznaczenie na Simple Node.js App (Prosta aplikacja Node.js), a następnie wybierz przycisk Next (Dalej).

   

3. Cele wdrożenia dostępne w tym kroku są dyktowane przez platformę aplikacji wybraną w kroku 2. W tym przykładzie aplikacja internetowa systemu Windows jest domyślnym celem wdrożenia. Pozostaw pozycję Web App for Containers i wybierz pozycję Dalej.

   

Konfigurowanie nazwy projektu i subskrypcji platformy Azure

1. W ostatnim kroku przepływu pracy tworzenia szablonu DevOps Starter przypisujesz nazwę projektu, wybierz subskrypcję platformy Azure i wybierz pozycję Gotowe.

   

2. Strona podsumowania jest wyświetlana podczas kompilowania projektu i wdrażania aplikacji na platformie Azure. Po krótkim czasie projekt jest tworzony w organizacji usługi Azure DevOps, który obejmuje Repozytorium Git, tablicę Kanban, pipeline wdrożeniowy, plany testów i artefakty wymagane przez aplikację.

Zarządzanie projektem

1. Przejdź do Wszystkie zasoby i znajdź swój DevOps Starter. Wybierz swój szablon startowy DevOps.

   

2. Zostaniesz przekierowany do pulpitu nawigacyjnego, który zapewnia wgląd w stronę główną projektu, repozytorium kodu, pipeline CI/CD oraz link do działającej aplikacji. Wybierz stronę główną projektu , aby wyświetlić aplikację w usłudze Azure DevOps , a następnie na innej karcie przeglądarki wybierz punkt końcowy aplikacji , aby wyświetlić przykładową aplikację na żywo. Zmienimy tę próbkę później, aby użyć PWA wygenerowanego przez GatsbyJS.

   

3. W projekcie usługi Azure DevOps możesz zaprosić członków zespołu do współpracy i ustanowienia tablicy Kanban, aby rozpocząć śledzenie pracy. Aby uzyskać więcej informacji, zobacz tutaj .

Sklonuj repozytorium i zainstaluj narzędzie Gatsby PWA

Usługa DevOps Starter tworzy repozytorium git w usłudze Azure Repos lub GitHub. W tym przykładzie utworzono repozytorium platformy Azure. Następnym krokiem jest sklonowanie repozytorium i wprowadzenie zmian.

1. Wybierz pozycję Repozytoria z projektu DevOps , a następnie kliknij pozycję Klonuj. Istnieją różne mechanizmy klonowania repozytorium git na komputerze. Wybierz ten, który pasuje do twojego doświadczenia programistycznego.

   

2. Po sklonowaniu repozytorium na pulpit wprowadź zmiany w szablonie startowym. Zacznij od zainstalowania interfejsu wiersza polecenia GatsbyJS z poziomu terminalu.

    npm install -g gatsby
   

3. W terminalu przejdź do katalogu głównego repozytorium. Powinien zawierać trzy foldery, które wyglądają następująco:

   Mode                LastWriteTime         Length Name
   ----                -------------         ------ ----
   d-----        2/23/2020  10:42 PM                Application
   d-----        2/23/2020   3:05 PM                ArmTemplates
   d-----        2/23/2020   3:05 PM                Tests
   

4. Nie chcemy wszystkich plików w folderze Application, ponieważ zamierzamy zastąpić go szablonem startowym Gatsby. Uruchom następujące polecenia w sekwencji, aby ją przyciąć.

   cp .\Application\Dockerfile .
   rmdir Application
   

5. Użyj interfejsu wiersza polecenia narzędzia Gatsby, aby wygenerować przykładową aplikację PWA. Uruchom komendę gatsby new z terminalu, aby rozpocząć kreator PWA i wybierz szablon startowy gatsby-starter-blog. Powinien on wyglądać podobnie do tego przykładu:

   c:\myproject> gatsby new
   √ What is your project called? ... my-gatsby-project
   ? What starter would you like to use? » - Use arrow-keys. Return to submit.
       gatsby-starter-default
       gatsby-starter-hello-world
   >   gatsby-starter-blog
       (Use a different starter)
   

6. Masz teraz folder o nazwie my-gatsby-project. Zmień jego nazwę na Application i skopiuj Dockerfile do niej.

   mv my-gatsby-project Application
   mv Dockerfile Application
   

7. W ulubionym edytorze otwórz plik Dockerfile i zmień pierwszy wiersz z FROM node:8 na FROM node:12. Ta zmiana gwarantuje, że kontener używa Node.js w wersji 12.x zamiast wersji 8.x. GatsbyJS wymaga bardziej nowoczesnych wersji Node.js.

8. Następnie otwórz plik package.json w folderze Application i zmodyfikuj pole skryptów, aby upewnić się, że serwery programistyczne i produkcyjne nasłuchują na wszystkich dostępnych interfejsach sieciowych (na przykład 0.0.0.0) oraz port 80. Bez tych ustawień usługa aplikacji kontenerowej nie może kierować ruchu do aplikacji Node.js uruchomionej wewnątrz kontenera. Pole scripts powinno wyglądać podobnie do poniższego. W szczególności chcesz zmienić cele develop, serve i start z ich wartości domyślnych.

     "scripts": {
       "build": "gatsby build",
       "develop": "gatsby develop  -H 0.0.0.0 -p 80",
       "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
       "start": "npm run serve",
       "serve": "npm run build && gatsby serve -H 0.0.0.0 -p 80",
       "clean": "gatsby clean",
       "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
     }
   

Edytuj potoki CI/CD

1. Przed zatwierdzeniem kodu w poprzedniej sekcji wprowadź pewne zmiany w potokach kompilacji i wydania. Edytuj potok kompilacji i zaktualizuj zadanie Node, aby używać Node.js w wersji 12.x. Ustaw pole Wersja zadania na 1.x, a pole Wersja na 12.x.

   

2. W tym przewodniku Szybki start nie tworzysz testów jednostkowych i wyłączamy te kroki w potoku kompilacji. Podczas pisania testów można ponownie włączyć te kroki. Kliknij prawym przyciskiem myszy, aby wybrać zadania oznaczone etykietą Zainstaluj zależności testowe i Uruchom testy jednostkowe i wyłącz je.

   

3. Edytuj potok wydania.

   

4. Podobnie jak w przypadku potoku kompilacji, zmień zadanie dla Node, aby używać wersji 12.x i wyłączyć dwa zadania testowe. Wydanie powinno wyglądać podobnie do tego zrzutu ekranu.

   

5. Po lewej stronie przeglądarki przejdź do pliku views/index.pug .

6. Wybierz pozycję Edytuj, a następnie zmień nagłówek h2. Na przykład, rozpocznij od razu korzystanie z Azure DevOps Starter lub wprowadź inną zmianę.

7. Wybierz pozycję Zatwierdź, a następnie zapisz zmiany.

8. W przeglądarce przejdź do pulpitu nawigacyjnego devOps Starter.
   Teraz powinna być wyświetlana budowa w trakcie. Wprowadzone zmiany są automatycznie kompilowane i wdrażane za pośrednictwem potoku CI/CD.

Zatwierdź zmiany i sprawdź potok CI/CD platformy Azure

W poprzednich dwóch krokach dodałeś wygenerowane przez Gatsby PWA do repozytorium git i edytowałeś potoki, aby skompilować i wdrożyć kod. Możemy zatwierdzić kod i obserwować postęp w potoku kompilacji i wydania.

1. W katalogu głównym repozytorium Git Twojego projektu w terminalu uruchom następujące polecenia, aby przesłać kod do projektu usługi Azure DevOps.

   git add .
   git commit -m "My first Gatsby PWA"
   git push
   

2. Rozpoczęcie kompilacji następuje natychmiast po zakończeniu git push. Postęp możesz śledzić na pulpicie nawigacyjnym usługi Azure DevOps.

3. Po kilku minutach potoki kompilacji i wydania powinny zostać zakończone, a narzędzie PWA powinno zostać wdrożone w kontenerze. Kliknij link Punkt końcowy aplikacji z powyższego pulpitu nawigacyjnego i powinien zostać wyświetlony projekt startowy narzędzia Gatsby dla blogów.

Uprzątnij zasoby

Możesz usunąć usługę Azure App Service i inne powiązane zasoby utworzone, gdy nie potrzebujesz już zasobów. Użyj funkcji Usuń na pulpicie nawigacyjnym DevOps Starter.

Dalsze kroki

Podczas konfigurowania procesu CI/CD, potoki kompilacji i wydania są tworzone automatycznie. Możesz zmienić te potoki tworzenia i publikowania, aby spełniały potrzeby zespołu. Aby dowiedzieć się więcej na temat potoku ciągłej integracji/ciągłego wdrażania, zapoznaj się z:

Dostosowywanie procesu CD (Continuous Delivery)