• 20 minuti

A questo punto Mara ha definito una configurazione di compilazione per il sito Web space game . Ora è il tuo turno. Si creerà una pipeline e si produrrà il primo artefatto di compilazione.

Come si è visto, Mara usa un file YAML per definire la build. Quando si crea una pipeline, il processo richiede il file YAML. Il progetto non ha ancora questo file.

Quando non si specifica un file YAML iniziale per il progetto, Azure Pipelines può crearne uno in base al tipo di app. In questa unità si compilerà un'app ASP.NET Core, ma Azure Pipelines fornisce anche configurazioni della build di base per altri tipi di progetto, tra cui Java, Go e altri.

Creare la pipeline

1. In Azure DevOps, andare al progetto.

2. Nella pagina del progetto o nel riquadro sinistro selezionare Pipeline.

3. Selezionare Crea pipeline (o Nuova pipeline se non è la prima pipeline nel progetto).

4. Nella scheda Connessione selezionare GitHub.

   Quando richiesto, immettere le credenziali di GitHub.

5. Nella scheda Seleziona selezionare il repository mslearn-tailspin-spacegame-web .

6. Per installare l'app Azure Pipelines, è possibile che si venga reindirizzati a GitHub. In tal caso, scorrere fino alla fine e selezionare Approva e installa.

7. Nella scheda Configura selezionare ASP.NET Core.

   Nota

   Se questa opzione non viene visualizzata, selezionare Mostra altro. Non selezionare ASP.NET Core (.NET Framework).

   

8. Nella scheda Revisione prendere nota della configurazione iniziale della build.

   

   Si tratta di una configurazione molto semplice offerta da Azure DevOps in base al tipo di app, ASP.NET Core. La configurazione predefinita usa un agente ospitato da Microsoft.

   Sostituire il testo vmImage: ubuntu-latest con name: Default (o il nome del pool di agenti se è stato specificato un pool diverso durante la configurazione dei segreti del repository Codespaces).

9. Nella scheda Revisione selezionare Salva ed esegui. Per eseguire il commit delle modifiche in GitHub e avviare la pipeline, scegliere Esegui commit direttamente nel ramo principale e selezionare Salva ed esegui una seconda volta. Se viene richiesto di concedere l'autorizzazione con un messaggio come This pipeline needs permission to access a resource before this run can continue, scegliere Visualizza e seguire le istruzioni per consentire l'accesso.

Monitorare l'esecuzione della pipeline

In Processi selezionare Processo. Tracciare quindi il processo di compilazione tramite ognuno dei passaggi. Per vedere l'output del processo come file di testo al termine della compilazione, è anche possibile selezionare Visualizza il log non elaborato.

Qui vengono visualizzati i passaggi creati dalla definizione di compilazione. Prepara la macchina virtuale, recupera il codice sorgente più recente da GitHub e quindi compila l'app.

Questa configurazione è un ottimo punto di partenza perché ora è possibile aggiungere attività di compilazione. Deve essere però aggiornata per soddisfare le esigenze del team di Tailspin, ad esempio comprimere i file CSS e JavaScript.

Aggiungere attività di compilazione

Ora che si dispone di un processo di compilazione funzionante, è possibile iniziare ad aggiungere attività di compilazione.

Tenere presente che si sta lavorando dal main ramo . Per conservare il lavoro, si creerà ora un ramo denominato build-pipeline. Il ramo offre un posto in cui sperimentare e ottenere il lavoro completo della compilazione senza influire sul resto del team.

È possibile aggiungere attività di compilazione ad azure-pipelines.yml direttamente da Azure Pipelines. Azure Pipelines eseguirà il commit delle modifiche direttamente nel ramo. In questo caso, si modificherà azure-pipelines.yml localmente e si eseguirà il push o il caricamento delle modifiche in GitHub. In questo modo è possibile praticare le competenze git. Guardare la pipeline compilare automaticamente l'app quando si esegue il push delle modifiche.

In pratica, è possibile aggiungere attività di compilazione una alla volta, eseguire il push delle modifiche e controllare l'esecuzione della compilazione. Qui si aggiungeranno tutte le attività di compilazione identificate in precedenza contemporaneamente.

1. In Visual Studio Code passare al terminale integrato. Assicurarsi di passare al ramo main nel repository e quindi eseguire i passaggi.

2. Per recuperare le modifiche più recenti da GitHub e aggiornare il main ramo, eseguire questo git pull comando.

   git pull origin main
   

   Dall'output si noterà che Git recupera un file denominato azure-pipelines.yml. Si tratta della configurazione della pipeline iniziale creata automaticamente da Azure Pipelines. Quando si configura la pipeline, Azure Pipelines aggiunge questo file al repository GitHub.

3. Per creare un ramo denominato build-pipeline, eseguire questo comando git checkout:

   git checkout -B build-pipeline
   

4. In Visual Studio Code modificare azure-pipelines.yml come indicato di seguito:

   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'
   

   Nella sezione steps vengono visualizzate le attività di compilazione corrispondenti a ognuno dei comandi script identificati in precedenza.

   Azure Pipelines offre attività di compilazione predefinite che eseguono il mapping a molte attività di compilazione comuni. Ad esempio, l'attività esegue il DotNetCoreCLI@2 mapping all'utilità della dotnet riga di comando. La pipeline usa DotNetCoreCLI@2 due volte: una volta per ripristinare o installare, le dipendenze del progetto e una volta per compilare il progetto.

   Tenere presente che non tutte le attività di compilazione eseguono il mapping a un'attività predefinita. Ad esempio, non esiste un'attività predefinita che esegue l'utilità node-Sass o scrive informazioni di compilazione in un file di testo. Per eseguire comandi di sistema generali, usare l'attività CmdLine@2 o script . La pipeline usa l'attività script perché è un collegamento comune per CmdLine@2.

   Nel passaggio di compilazione che scrive informazioni sulla compilazione in un file notare questi elementi:

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

   Questi elementi sono variabili predefinite fornite dal sistema per l'uso nelle pipeline:

   • $(Build.DefinitionName) è il nome della pipeline di compilazione. Ad esempio, "SpaceGame-Web-CI".
   • $(Build.BuildId) è un identificatore numerico per la compilazione completata, ad esempio 115.
   • $(Build.BuildNumber) è il nome della compilazione completata. Il formato può essere configurato, ma per impostazione predefinita il numero di build include la data corrente seguita dal numero di build per quel giorno. Un numero di build di esempio è "20190329.1".

   È anche possibile definire variabili personalizzate, che verranno eseguite a breve.

   Si potrebbe anche notare l'attività UseDotNet@2 , ovvero il primo passaggio di compilazione. Mara ha ricordato che lo script di compilazione non aveva installato gli strumenti di compilazione necessari. Anche se l'agente di compilazione include varie versioni di .NET SDK, questa attività le consente di specificare facilmente la versione che deve usare nell'agente di compilazione.

5. Dal terminale integrato, per aggiungere azure-pipelines.yml all'indice, eseguire il commit della modifica ed eseguire il push della modifica in GitHub, eseguire i comandi Git seguenti. Questi passaggi sono simili ai passaggi eseguiti in precedenza.

   Suggerimento

   Prima di eseguire questi comandi Git, ricordarsi di salvare azure-pipelines.yml.

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

   Questa volta si esegue il push del build-pipeline ramo, non del main ramo, in GitHub.

   Il push del ramo in GitHub attiva il processo di compilazione in Azure Pipelines.

6. In Azure Pipelines passare alla compilazione. A tale scopo, sul lato della pagina selezionare Pipeline e quindi selezionare la pipeline. Verrà visualizzato il messaggio di commit e indicato che la compilazione viene eseguita usando il codice del ramo build-pipeline.

   

   Suggerimento

   Se la compilazione non viene visualizzata immediatamente, attendere alcuni istanti o aggiornare la pagina.

7. Selezionare la compilazione, scegliere Processi e tracciare le attività di compilazione durante l'esecuzione.

   Ad esempio, ecco cosa accade quando l'attività gulp@1 viene eseguita per eseguire le attività gulp che minimizzano gli asset JavaScript e CSS:

   

   Se un passaggio ha esito negativo, nell'output verrà visualizzato l'errore per consentire di diagnosticarlo e correggerlo.

   In precedenza è stata eseguita una configurazione di compilazione più minima. Questa volta, al termine della compilazione, viene visualizzato un set di attività più completo necessario per compilare l'app.

   

8. Al termine della compilazione, selezionare uno dei passaggi per visualizzare la progressione complessiva della compilazione. Da qui è possibile passare ai log di compilazione o alla modifica associata in GitHub.