Tworzenie potoku ciągłej integracji/ciągłego wdrażania w usłudze Azure Pipelines dla Node.js za pomocą usługi Azure DevOps Starter

W tym przewodniku Szybki start utworzysz progresywną aplikację internetową NodeJS (PWA) przy użyciu narzędzia GatsbyJS i uproszczone środowisko tworzenia szablonu startowego usługi Azure DevOps. Po zakończeniu masz potok ciągłej integracji (CI) i ciągłego dostarczania (CD) dla programu PWA w usłudze Azure Pipelines. Usługa Azure DevOps Starter konfiguruje elementy potrzebne do tworzenia, wdrażania i monitorowania.

Wymagania wstępne

• Konto platformy Azure z aktywną subskrypcją. Utwórz bezpłatne konto.
• Organizacja usługi Azure DevOps .

Logowanie się do witryny Azure Portal

Usługa DevOps Starter tworzy potok ciągłej integracji/ciągłego wdrażania 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 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 pozycję Dodaj , aby utworzyć nowy.

   

Wybieranie przykładowej aplikacji i usługi platformy Azure

1. Wybierz przykładową aplikację środowiska 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 strukturę 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 set (Zestaw funkcji Web App for Containers ) i wybierz pozycję Next (Dalej).

   

Konfigurowanie nazwy projektu i subskrypcji platformy Azure

1. W ostatnim kroku przepływu pracy tworzenia szablonu DevOps Starter przypiszesz 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 zostanie utworzony w organizacji usługi Azure DevOps , który zawiera repozytorium Git, tablicę Kanban, potok wdrożenia, plany testów i artefakty wymagane przez aplikację.

Zarządzanie projektem

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

   

2. Zostanie przekierowany do pulpitu nawigacyjnego, który zapewnia wgląd w stronę główną projektu, repozytorium kodu, potok ciągłej integracji/ciągłego wdrażania i link do uruchomionej 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 ten przykład później, aby używać aplikacji PWA wygenerowanej przez narzędzie GatsbyJS.

   

3. W projekcie usługi Azure DevOps możesz zaprosić członków zespołu do współpracy i ustanowić tablicę Kanban, aby rozpocząć śledzenie pracy. Więcej informacji można znaleźć 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 komputer. Wybierz ten, który odpowiada twojemu doświadczeniu programistycznemu.

   

2. Po sklonowanym repozytorium na pulpicie wprowadź pewne zmiany w szablonie startowym. Rozpocznij od zainstalowania interfejsu wiersza polecenia GatsbyJS z poziomu terminalu.

    npm install -g gatsby
   

3. W terminalu przejdź do katalogu głównego repozytorium. Powinien on 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, aby wszystkie pliki w folderze Application zostały zastąpione szablonem startowym Gatsby. Uruchom następujące polecenia w sekwencji, aby go przyciąć.

   cp .\Application\Dockerfile .
   rmdir Application
   

5. Użyj interfejsu wiersza polecenia narzędzia Gatsby, aby wygenerować przykładową aplikację PWA. Uruchom polecenie z terminalu, aby rozpocząć pracę gatsby new kreatora programu PWA i wybierz gatsby-starter-blog szablon startowy. 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 ją 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. Narzędzie GatsbyJS wymaga bardziej nowoczesnych wersji Node.js.

8. Następnie otwórz plik package.json w folderze Application i zmodyfikuj pole scripts , aby upewnić się, że serwery programistyczne i produkcyjne nasłuchują wszystkich dostępnych interfejsów sieciowych (na przykład 0.0.0.0) i port 80. Bez tych ustawień usługa App Service kontenera 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ć wartości developdomyślne obiektów docelowych , servei start .

     "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"
     }
   

Edytowanie potoków ciągłej integracji/ciągłego wdrażania

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ło Node.js wersji 12.x. W polu Wersja zadania ustaw wartość 1.x, a w polu Wersja ustaw wartość 12.x.

   

2. W tym przewodniku Szybki start nie tworzymy 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 z 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 Node na 12.x i wyłącz dwa zadania testowe. Twoje wydanie powinno przypominać ten zrzut ekranu.

   

5. Przejdź do pliku views/index.pug z lewej strony okna przeglądarki.

6. Wybierz pozycję Edytuj i wprowadź zmianę w nagłówku h2. Na przykład wprowadź ciąg Rozpoczynanie pracy od razu z usługą Azure DevOps Starter lub wprowadź inną zmianę.

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

8. W przeglądarce przejdź do pulpitu nawigacyjnego usługi DevOps Starter.
   W tym momencie powinna być widoczna trwająca kompilacja. Wprowadzone zmiany są automatycznie kompilowane i wdrażane za pośrednictwem potoku ciągłej integracji/ciągłego wdrażania.

Zatwierdzanie zmian i badanie potoku ciągłej integracji/ciągłego wdrażania platformy Azure

W poprzednich dwóch krokach dodano narzędzie PWA wygenerowane przez narzędzie Gatsby do repozytorium git i edytowało potoki w celu skompilowania i wdrożenia kodu. Możemy zatwierdzić kod i obserwować postęp w potoku kompilacji i wydania.

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

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

2. Kompilacja jest uruchamiana natychmiast po git push zakończeniu. Postęp możesz śledzić z poziomu pulpitu nawigacyjnego 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.

Czyszczenie zasobów

Możesz usunąć Azure App Service i inne powiązane zasoby utworzone, gdy zasoby nie są już potrzebne. Użyj funkcji Usuń na pulpicie nawigacyjnym devOps Starter.

Następne kroki

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

Dostosowywanie procesu ciągłego wdrażania