• 20 min

W tym momencie Mara zdefiniowała konfigurację kompilacji dla witryny internetowej Space Game . Teraz to twoja kolej; Utworzysz potok i utworzysz pierwszy artefakt kompilacji.

Jak widać, Mara użyła pliku YAML do zdefiniowania kompilacji. Podczas tworzenia potoku proces wyświetla monit o podanie pliku YAML. Projekt nie ma jeszcze tego pliku.

Jeśli nie podasz początkowego pliku YAML dla projektu, usługa Azure Pipelines może utworzyć plik dla Ciebie na podstawie typu aplikacji. W tym miejscu utworzysz aplikację ASP.NET Core, ale usługa Azure Pipelines udostępnia również początkowe konfiguracje kompilacji dla innych typów projektów, w tym Java, Go i nie tylko.

Tworzenie potoku

1. W usłudze Azure DevOps przejdź do projektu.

2. Na stronie projektu lub w okienku po lewej stronie wybierz pozycję Potoki.

3. Wybierz pozycję Utwórz potok (lub Nowy potok , jeśli nie jest to pierwszy potok w projekcie).

4. Na karcie Połącz wybierz pozycję GitHub.

   Po wyświetleniu monitu wprowadź poświadczenia usługi GitHub.

5. Na karcie Wybierz wybierz repozytorium mslearn-tailspin-spacegame-web.

6. Aby zainstalować aplikację Usługi Azure Pipelines, możesz zostać przekierowany do usługi GitHub. Jeśli tak, przewiń do dołu, a następnie wybierz pozycję Zatwierdź i zainstaluj.

7. Na karcie Konfigurowanie wybierz pozycję ASP.NET Core.

   Uwaga

   Jeśli ta opcja nie jest widoczna, wybierz pozycję Pokaż więcej. Nie wybieraj ASP.NET Core (.NET Framework).

   

8. Na karcie Przegląd zanotuj początkową konfigurację kompilacji.

   

   Jest to bardzo podstawowa konfiguracja zapewniana przez usługę Azure DevOps na podstawie typu aplikacji ASP.NET Core. Domyślna konfiguracja używa agenta hostowanego przez firmę Microsoft.

   Zastąp name: Default tekst vmImage: ubuntu-latest ciągiem (lub nazwą puli agentów, jeśli określono inną pulę podczas konfigurowania wpisów tajnych repozytorium Codespaces).

9. Na karcie Przegląd wybierz pozycję Zapisz i uruchom. Aby zatwierdzić zmiany w usłudze GitHub i uruchomić potok, wybierz pozycję Zatwierdź bezpośrednio w gałęzi głównej, a następnie wybierz pozycję Zapisz i uruchom po raz drugi. Jeśli zostanie wyświetlony monit o udzielenie uprawnień z komunikatem, na przykład This pipeline needs permission to access a resource before this run can continue, wybierz pozycję Wyświetl i postępuj zgodnie z monitami, aby zezwolić na dostęp.

Obejrzyj przebieg potoku

W obszarze Zadania wybierz pozycję Zadanie. Następnie prześledzić proces kompilacji za pomocą każdego z kroków. Aby wyświetlić dane wyjściowe zadania jako plik tekstowy po zakończeniu kompilacji, możesz również wybrać pozycję Wyświetl nieprzetworzone dzienniki.

W tym miejscu zobaczysz kroki utworzone przez definicję kompilacji. Przygotowuje maszynę wirtualną, pobiera najnowszy kod źródłowy z usługi GitHub, a następnie kompiluje aplikację.

Ta konfiguracja jest doskonałym początkiem, ponieważ teraz masz miejsce do dodawania zadań kompilacji. Nadal musisz go zaktualizować, aby zaspokoić potrzeby zespołu Tailspin, na przykład w celu zmiefikacji plików JavaScript i CSS.

Dodawanie zadań kompilacji

Teraz, gdy masz działający proces kompilacji, możesz rozpocząć dodawanie zadań kompilacji.

Pamiętaj, że pracujesz z main gałęzi. Aby wstrzymać pracę, utworzysz teraz gałąź o nazwie build-pipeline. Gałąź zapewnia miejsce do eksperymentowania i całkowitego działania kompilacji bez wpływu na resztę zespołu.

Zadania kompilacji można dodawać do azure-pipelines.yml bezpośrednio z usługi Azure Pipelines. Usługa Azure Pipelines zatwierdza zmiany bezpośrednio w gałęzi. W tym miejscu zmienisz azure-pipelines.yml lokalnie i wypchniesz lub przekażesz zmiany do usługi GitHub. Dzięki temu możesz ćwiczyć swoje umiejętności w usłudze Git. Obserwuj, jak potok automatycznie skompiluje aplikację podczas wypychania zmian.

W praktyce możesz dodawać zadania kompilacji pojedynczo, wypychać zmiany i obserwować przebieg kompilacji. W tym miejscu dodasz wszystkie zidentyfikowane wcześniej zadania kompilacji.

1. W programie Visual Studio Code przejdź do zintegrowanego terminalu. Upewnij się, że przejdziesz do main gałęzi w repozytorium, a następnie wykonaj kroki.

2. Aby pobrać najnowsze zmiany z usługi GitHub i zaktualizować gałąź main , uruchom to git pull polecenie.

   git pull origin main
   

   Zobaczysz z danych wyjściowych, że usługa Git pobiera plik o nazwie azure-pipelines.yml. Jest to konfiguracja potoku początkowego utworzona przez usługę Azure Pipelines. Po skonfigurowaniu potoku usługa Azure Pipelines dodaje ten plik do repozytorium GitHub.

3. Aby utworzyć gałąź o nazwie build-pipeline, uruchom następujące git checkout polecenie:

   git checkout -B build-pipeline
   

4. W programie Visual Studio Code zmień azure-pipelines.yml , jak widzisz tutaj:

   trigger:
   - '*'
   
   pool:
     name: 'Default' # Replace Default with the name of your agent pool if you used a different pool
   
   variables:
     buildConfiguration: 'Release'
   
   steps:
   - task: UseDotNet@2
     displayName: 'Use .NET SDK 6.x'
     inputs:
       packageType: sdk
       version: '6.x'
   
   - task: Npm@1
     displayName: 'Run npm install'
     inputs:
       verbose: false
   
   - script: './node_modules/.bin/node-sass Tailspin.SpaceGame.Web/wwwroot --output Tailspin.SpaceGame.Web/wwwroot'
     displayName: 'Compile Sass assets'
   
   - task: gulp@1
     displayName: 'Run gulp tasks'
   
   - script: 'echo "$(Build.DefinitionName), $(Build.BuildId), $(Build.BuildNumber)" > buildinfo.txt'
     displayName: 'Write build info'
     workingDirectory: Tailspin.SpaceGame.Web/wwwroot
   
   - task: DotNetCoreCLI@2
     displayName: 'Restore project dependencies'
     inputs:
       command: 'restore'
       projects: '**/*.csproj'
   
   - task: DotNetCoreCLI@2
     displayName: 'Build the project - Release'
     inputs:
       command: 'build'
       arguments: '--no-restore --configuration Release'
       projects: '**/*.csproj'
   

   trigger:
   - '*'
   
   pool:
     vmImage: ubuntu-latest
   
   variables:
     buildConfiguration: 'Release'
   
   steps:
   - task: UseDotNet@2
     displayName: 'Use .NET SDK 6.x'
     inputs:
       packageType: sdk
       version: '6.x'
   
   - task: Npm@1
     displayName: 'Run npm install'
     inputs:
       verbose: false
   
   - script: './node_modules/.bin/node-sass Tailspin.SpaceGame.Web/wwwroot --output Tailspin.SpaceGame.Web/wwwroot'
     displayName: 'Compile Sass assets'
   
   - task: gulp@1
     displayName: 'Run gulp tasks'
   
   - script: 'echo "$(Build.DefinitionName), $(Build.BuildId), $(Build.BuildNumber)" > buildinfo.txt'
     displayName: 'Write build info'
     workingDirectory: Tailspin.SpaceGame.Web/wwwroot
   
   - task: DotNetCoreCLI@2
     displayName: 'Restore project dependencies'
     inputs:
       command: 'restore'
       projects: '**/*.csproj'
   
   - task: DotNetCoreCLI@2
     displayName: 'Build the project - Release'
     inputs:
       command: 'build'
       arguments: '--no-restore --configuration Release'
       projects: '**/*.csproj'
   

   steps W sekcji zobaczysz zadania kompilacji, które mapują się na każde z zidentyfikowanych wcześniej poleceń skryptu.

   Usługa Azure Pipelines udostępnia wbudowane zadania kompilacji, które są mapowane na wiele typowych działań kompilacji. Na przykład DotNetCoreCLI@2 zadanie jest mapowe na dotnet narzędzie wiersza polecenia. Potok używa DotNetCoreCLI@2 dwóch razy: jeden raz, aby przywrócić lub zainstalować zależności projektu i jeden raz do skompilowania projektu.

   Pamiętaj, że nie wszystkie działania kompilacji są mapowane na wbudowane zadanie. Na przykład nie ma wbudowanego zadania, które uruchamia narzędzie node-Sass lub zapisuje informacje kompilacji w pliku tekstowym. Aby uruchomić ogólne polecenia systemowe, należy użyć zadania CmdLine@2 lub script . Potok używa script zadania, ponieważ jest to typowy skrót dla elementu CmdLine@2.

   W kroku kompilacji, który zapisuje informacje o kompilacji w pliku, zwróć uwagę na następujące elementy:

   • $(Build.DefinitionName)
   • $(Build.BuildId)
   • $(Build.BuildNumber)

   Te elementy są wbudowanymi zmiennymi, które system zapewnia do użycia w potokach:

   • $(Build.DefinitionName) to nazwa potoku kompilacji. Na przykład "SpaceGame-Web-CI".
   • $(Build.BuildId) jest identyfikatorem liczbowym ukończonej kompilacji, na przykład 115.
   • $(Build.BuildNumber) to nazwa ukończonej kompilacji. Możesz skonfigurować format, ale domyślnie numer kompilacji zawiera bieżącą datę, po której następuje numer kompilacji dla tego dnia. Przykładowy numer kompilacji to "20190329.1".

   Możesz również zdefiniować własne zmienne, które wkrótce zrobisz.

   Być może zauważysz UseDotNet@2 również zadanie, które jest pierwszym krokiem kompilacji. Mara pamiętała, że skrypt kompilacji nie zainstalował wymaganych narzędzi kompilacji. Mimo że agent kompilacji ma kilka wersji zestawu .NET SDK, to zadanie umożliwia autorowi potoku łatwe określenie wersji, której potrzebują do użycia w agencie kompilacji.

5. W zintegrowanym terminalu uruchom następujące polecenia Git, aby dodać azure-pipelines.yml do indeksu, zatwierdzić zmianę i wypchnąć zmianę do usługi GitHub. Te kroki są podobne do wykonanych wcześniej kroków.

   Napiwek

   Przed uruchomieniem tych poleceń git pamiętaj, aby zapisać azure-pipelines.yml.

   git add azure-pipelines.yml
   git commit -m "Add build tasks"
   git push origin build-pipeline
   

   Tym razem wypchniesz build-pipeline gałąź, a nie main gałąź, do usługi GitHub.

   Wypychanie gałęzi do usługi GitHub wyzwala proces kompilacji w usłudze Azure Pipelines.

6. W usłudze Azure Pipelines przejdź do kompilacji. W tym celu po stronie wybierz pozycję Potoki, a następnie wybierz potok. Zobaczysz komunikat zatwierdzenia i że kompilacja jest uruchomiona przy użyciu kodu z build-pipeline gałęzi .

   

   Napiwek

   Jeśli kompilacja nie zostanie wyświetlona od razu, zaczekaj chwilę lub odśwież stronę.

7. Wybierz kompilację i wybierz pozycję Zadania i śledź zadania kompilacji podczas ich uruchamiania.

   Oto na przykład, co się stanie, gdy gulp@1 zadanie zostanie uruchomione w celu wykonania zadań gulp, które minyfikowają zasoby JavaScript i CSS:

   

   Jeśli jakikolwiek krok zakończy się niepowodzeniem, zobaczysz błąd w danych wyjściowych, aby zdiagnozować i naprawić błąd.

   Wcześniej uruchomiono bardziej minimalną konfigurację kompilacji. Tym razem po zakończeniu kompilacji zostanie wyświetlony bardziej kompletny zestaw zadań potrzebnych do skompilowania aplikacji.

   

8. Po zakończeniu kompilacji wybierz dowolny z kroków, aby zobaczyć ogólny postęp kompilacji. Z tego miejsca możesz przejść do dzienników kompilacji lub skojarzonej zmiany w usłudze GitHub.