Oefening: de pijplijn maken

Voltooid

Op dit moment heeft Mara een buildconfiguratie 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.

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

   Schermopname van Azure Pipelines 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 agentgroep als u een andere pool hebt opgegeven bij het instellen van de geheimen van de Codespaces-opslagplaats).

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.

De pijplijnuitvoering bekijken

Selecteer Taak onder Taken. Volg vervolgens het buildproces via elk van de stappen. Als u de taakuitvoer wilt zien als tekstbestand wanneer de build is voltooid, kunt u ook onbewerkt logboek weergeven selecteren.

Als uw pijplijn niet snel wordt gestart, controleert u of Codespaces nog steeds wordt uitgevoerd. 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 vertakking met de naam build-pipeline. De vertakking biedt u een plek om te experimenteren en uw build volledig te laten werken zonder dat dit van invloed is op de rest van het team.

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 voegt u alle buildtaken toe die we eerder in één keer 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 vertakking in uw opslagplaats gaat en vervolgens de stappen doorloopt.

2. Voer deze git pull opdracht uit om de meest recente wijzigingen op te halen uit GitHub en uw main vertakking bij te werken.

   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 deze git checkout opdracht uit om een vertakking met de naam build-pipelinete 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 zijn toegewezen aan elk van de scriptopdrachten die we eerder hebben geïdentificeerd.

   Azure Pipelines biedt ingebouwde buildtaken die zijn toegewezen aan veel algemene buildactiviteiten. De taak wordt bijvoorbeeld DotNetCoreCLI@2 toegewezen 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 buildactiviteiten zijn toegewezen aan 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 maakt gebruik van de script taak omdat deze 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. Dit is de eerste buildstap. 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 ziet het doorvoerbericht en dat de build wordt uitgevoerd met behulp van de code uit de build-pipeline vertakking.

   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 gulp-taken uit te voeren die JavaScript- en CSS-assets minificeren:

   Schermopname 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 taak Gulp uitvoeren is geselecteerd.