Oefening: de pijplijn maken

Voltooid

Uw ontwikkelomgeving voor trainingsmodules kiezen

Lokale ontwikkelomgeving met behulp van een door Microsoft gehoste agent GitHub Codespaces-ontwikkelomgeving met behulp van een zelf-hostende agent

Op dit moment heeft Mara een build-configuratie gedefinieerd voor de Space Game-website. Nu is het jouw beurt. U gaat een pijplijn maken en uw eerste buildartefact produceren.

Zoals u hebt gezien, heeft Mara een YAML-bestand gebruikt om de build te definiëren. Wanneer u een pijplijn maakt, wordt u tijdens het proces gevraagd om uw YAML-bestand. Het project heeft dit bestand nog niet.

Wanneer u geen initiële YAML-bestand voor uw project opgeeft, kunnen Azure Pipelines er een voor u maken op basis van uw app-type. Hier bouwt u een ASP.NET Core-app, maar Azure Pipelines biedt ook startersbuildconfiguraties voor andere projecttypen, waaronder Java, Go en meer.

Maak de pijplijn

1. Ga in Azure DevOps naar uw project.

2. Selecteer Pijplijnen op de projectpagina of in het linkerdeelvenster.

3. Selecteer Pijplijn maken (of Nieuwe pijplijn als dit niet de eerste pijplijn in het project is).

4. Selecteer GitHub op het tabblad Verbinding maken.

   Voer uw GitHub-referenties in wanneer dit wordt gevraagd.

5. Selecteer op het tabblad Selecteren de opslagplaats mslearn-tailspin-spacegame-web .

6. Als u de Azure Pipelines-app wilt installeren, wordt u mogelijk omgeleid naar GitHub. Zo ja, schuift u naar beneden en selecteert u Goedkeuren en installeren.

7. Selecteer ASP.NET Core op het tabblad Configureren.

   Notitie

   Als u deze optie niet ziet, selecteert u Meer weergeven. Selecteer ASP.NET Core (.NET Framework) niet.

   Schermopname van het zoeken naar ASP.NET Core in de lijst met opgegeven toepassingstypen.

   Notitie

   Als uw opslagplaats een azure-pipelines.yml bestand op hoofdniveau heeft, kan Azure DevOps de stap Configureren overslaan. U kunt dit probleem oplossen door het bestand te verwijderen of de naam ervan te wijzigen.

8. Let op het tabblad Controleren op de eerste buildconfiguratie.

   Schermopname van Azure-pijplijnen met de eerste buildconfiguratie.

   Dit is een zeer eenvoudige configuratie die Azure DevOps u biedt op basis van uw app-type, ASP.NET Core. De standaardconfiguratie maakt gebruik van een door Microsoft gehoste agent.

   Vervang de tekst vmImage: ubuntu-latest door name: Default (of de naam van uw agent pool als u een andere pool hebt opgegeven bij het instellen van de geheimen van de Codespaces-repository).

9. Selecteer Opslaan en uitvoeren op het tabblad Controleren. Als u uw wijzigingen wilt doorvoeren in GitHub en de pijplijn wilt starten, kiest u Rechtstreeks doorvoeren naar de hoofdbranch en selecteert u Opslaan en een tweede keer uitvoeren . Als u wordt gevraagd om toestemming te verlenen met een bericht zoals This pipeline needs permission to access a resource before this run can continue, kiest u Weergeven en volgt u de aanwijzingen om toegang toe te staan.

Bekijk de pijplijn in werking

Selecteer Taak onder Taken. Volg vervolgens het buildproces via elk van de stappen. Als u de build-uitvoer als tekstbestand wilt zien zodra de build is voltooid, kunt u ook 'Onbewerkt logboek weergeven' selecteren.

Als uw pijplijn niet snel start, controleer dan of Codespaces nog steeds in gebruik is. Codespaces worden na 30 minuten afgesloten en moeten mogelijk opnieuw worden opgestart.

Als de pijplijnstatus in de wachtrij blijft en na enkele ogenblikken niet wordt overgeschakeld naar Actief, controleert u uw parallelle taken en vraagt u een gratis toekenning aan. Als u geen toegang hebt tot parallelle taken, kunt u de module opnieuw starten met Codespaces.

Hier ziet u de stappen die door de builddefinitie zijn gemaakt. Hiermee wordt de VIRTUELE machine voorbereid, wordt de meest recente broncode opgehaald uit GitHub en wordt vervolgens de app gebouwd.

Schermopname van Azure Pipelines met uitvoer van de eerste buildconfiguratie.

Deze configuratie is een goed begin, omdat u nu een plek hebt om buildtaken toe te voegen. U moet deze nog steeds bijwerken om te voldoen aan de behoeften van het Tailspin-team, zoals het minificeren van JavaScript- en CSS-bestanden.

Tip

Controleer uw e-mail. Mogelijk hebt u al een buildmelding ontvangen met de resultaten van uw uitvoering. U kunt deze meldingen gebruiken om uw teamleden te laten weten wanneer de builds zijn voltooid en of elke build is geslaagd of mislukt.

Buildtaken toevoegen

Nu u een werkend buildproces hebt, kunt u beginnen met het toevoegen van buildtaken.

Houd er rekening mee dat u vanuit de main vertakking werkt. Als u uw werk wilt bewaren, maakt u nu een branch met de naam build-pipeline. De branch biedt u een plek om te experimenteren en uw build volledig te laten werken zonder de rest van het team te beïnvloeden.

U kunt buildtaken rechtstreeks vanuit Azure Pipelines toevoegen aan azure-pipelines.yml . Met Azure Pipelines worden uw wijzigingen rechtstreeks doorgevoerd in uw vertakking. Hier wijzigt u azure-pipelines.yml lokaal en pusht u uw wijzigingen naar GitHub of uploadt u deze. Op deze manier kunt u uw Git-vaardigheden oefenen. Bekijk hoe de pijplijn de app automatisch bouwt wanneer u wijzigingen pusht.

In de praktijk kunt u buildtaken één voor één toevoegen, uw wijzigingen pushen en de builduitvoering bekijken. Hier kun je alle buildtaken tegelijk toevoegen die we eerder hebben geïdentificeerd.

Notitie

U staat op het punt een paar Git-opdrachten uit te voeren. Maak u geen zorgen als u niet eerder met Git werkt. We laten u zien wat u moet doen. In toekomstige modules gaan we ook dieper in op Git.

1. Ga in Visual Studio Code naar de geïntegreerde terminal. Zorg ervoor dat u naar de main branch in uw opslagplaats gaat en vervolgens de stappen doorloopt.

2. Om de meest recente wijzigingen uit GitHub op te halen en uw main vertakking bij te werken, voert u deze git pull opdracht uit.

   git pull origin main
   

   U ziet in de uitvoer dat Git een bestand met de naam azure-pipelines.yml ophaalt. Dit is de configuratie van de starter-pijplijn die door Azure Pipelines voor u is gemaakt. Wanneer u de pijplijn instelt, voegt Azure Pipelines dit bestand toe aan uw GitHub-opslagplaats.

3. Voer dit git checkout commando uit om een vertakking met de naam build-pipeline te maken:

   git checkout -B build-pipeline
   

4. Wijzig in Visual Studio Code azure-pipelines.yml zoals u hier ziet:

   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'
   

   Onder de steps sectie ziet u de buildtaken die overeenkomen met elk van de scriptopdrachten die we eerder hebben geïdentificeerd.

   Azure Pipelines biedt ingebouwde buildtaken die overeenkomen met veel algemene buildactiviteiten. De DotNetCoreCLI@2 taak wordt bijvoorbeeld gekoppeld aan het dotnet opdrachtregelprogramma. De pijplijn gebruikt DotNetCoreCLI@2 twee keer: één keer om de afhankelijkheden van het project te herstellen of te installeren en één keer om het project te bouwen.

   Houd er rekening mee dat niet alle build-activiteiten overeenkomen met een ingebouwde taak. Er is bijvoorbeeld geen ingebouwde taak waarmee het hulpprogramma node-Sass wordt uitgevoerd of buildgegevens naar een tekstbestand worden geschreven. Als u algemene systeemopdrachten wilt uitvoeren, gebruikt u de CmdLine@2 of script taak. De pijplijn gebruikt de script taak omdat het een veelgebruikte snelkoppeling is voor CmdLine@2.

   In de buildstap waarmee informatie over de build naar een bestand wordt geschreven, ziet u deze elementen:

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

   Deze elementen zijn ingebouwde variabelen die het systeem biedt voor gebruik in uw pijplijnen:

   • $(Build.DefinitionName) is de naam van de build-pijplijn. Bijvoorbeeld 'SpaceGame-Web-CI'.
   • $(Build.BuildId) is een numerieke id voor de voltooide build, zoals 115.
   • $(Build.BuildNumber) is de naam van de voltooide build. U kunt de indeling configureren, maar het buildnummer bevat standaard de huidige datum, gevolgd door het buildnummer voor die dag. Een voorbeeld van een buildnummer is '20190329.1'.

   U kunt ook uw eigen variabelen definiëren, wat u binnenkort gaat doen.

   Mogelijk hebt u ook de UseDotNet@2 taak opgemerkt, die de eerste buildstap is. Mara wist nog dat het buildscript de vereiste buildhulpprogramma's niet heeft geïnstalleerd. Hoewel de buildagent wordt geleverd met verschillende .NET SDK-versies, kan de auteur van de pijplijn eenvoudig de versie opgeven die ze moeten gebruiken op de buildagent.

5. Voer vanuit de geïntegreerde terminal de volgende Git-opdrachten uit om azure-pipelines.yml toe te voegen aan de index, de wijziging door te voeren en de wijziging naar GitHub te pushen. Deze stappen zijn vergelijkbaar met de stappen die u eerder hebt uitgevoerd.

   Tip

   Voordat u deze Git-opdrachten uitvoert, moet u azure-pipelines.yml opslaan.

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

   Deze keer pusht u de build-pipeline vertakking, niet de main vertakking, naar GitHub.

   Door de vertakking naar GitHub te pushen, wordt het buildproces in Azure Pipelines geactiveerd.

6. Ga in Azure Pipelines naar uw build. Hiervoor selecteert u pijplijnen aan de zijkant van de pagina en selecteert u vervolgens uw pijplijn. U zult uw commit-bericht zien en dat de build wordt uitgevoerd met de code van de build-pipeline tak.

   Schermopname van Azure Pipelines, met de uitvoeringsgeschiedenis, inclusief de vertakking die u onlangs naar GitHub hebt gepusht.

   Tip

   Als u de build niet meteen ziet, wacht u even of vernieuwt u de pagina.

7. Selecteer uw build en kies Taken en traceer de buildtaken terwijl ze worden uitgevoerd.

   Dit is bijvoorbeeld wat er gebeurt wanneer de gulp@1 taak wordt uitgevoerd om de JavaScript- en CSS-assets te minificeren:

   Schermafbeelding van het traceren van de Gulp-taken in Azure Pipelines.

   Als er een stap mislukt, ziet u de fout in de uitvoer, zodat u de fout kunt diagnosticeren en oplossen.

   Eerder hebt u een minimalere buildconfiguratie uitgevoerd. Wanneer de build is voltooid, ziet u deze keer een meer volledige set taken die nodig zijn om de app te bouwen.

   Schermopname van Azure Pipelines met de volledige lijst met buildtaken.

8. Nadat de build is voltooid, selecteert u een van de stappen om de algehele voortgang van de build te zien. Van daaruit kunt u naar de buildlogboeken of de bijbehorende wijziging op GitHub gaan.

   Schermopname van Azure Pipelines met de volledige lijst met buildtaken. De Gulp-taak uitvoeren is geselecteerd.