Esercizio - Creare la pipeline

Completato

A questo punto, Mara ha definito una configurazione di compilazione per il sito Web di Space Game. È ora il momento di creare una pipeline e produrre 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 contiene ancora questo file.

Se 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 Connetti 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, si potrebbe essere reindirizzati a GitHub. In tal caso, scorrere fino in fondo e selezionare Approva e installa.

7. Nella scheda Configura selezionare ASP.NET Core.

   Nota

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

   

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

   

   Si tratta di una configurazione molto semplice fornita 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 attraverso 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.

Se la pipeline non viene avviata rapidamente, verificare che Codespaces sia ancora in esecuzione. Codespaces verrà arrestato dopo 30 minuti e potrebbero essere necessario riavviarlo.

Se lo stato della pipeline rimane In coda e non passa a In esecuzione dopo alcuni istanti, controllare i processi paralleli e richiedere una concessione gratuita. Se non si ha accesso a processi paralleli, è possibile iniziare nuovamente il modulo con Codespaces.

In questa sezione vengono visualizzati i passaggi creati dalla definizione di compilazione. Prepara la macchina virtuale, recupera l'ultimo codice sorgente da GitHub e quindi compila l'app.

Questa configurazione è un ottimo punto di partenza perché ora si possono aggiungere attività di compilazione. È però ancora necessario aggiornarla per soddisfare le esigenze del team di Tailspin, ad esempio per comprimere i file CSS e JavaScript.

Suggerimento

Controllare l'e-mail. Probabilmente è già stata ricevuta una notifica di compilazione con i risultati dell'esecuzione. Queste notifiche possono essere usate per comunicare ai membri del team quando vengono completate le compilazioni e se ogni compilazione ha avuto esito positivo o negativo.

Aggiungere attività di compilazione

Ora che è disponibile un processo di compilazione funzionante, si può iniziare ad aggiungere le attività di compilazione.

Tenere presente che si sta lavorando dal ramo main. Per gestire il lavoro, verrà ora creato un ramo denominato build-pipeline. Il ramo consente di sperimentare e far funzionare completamente la compilazione senza influire sul resto del team.

È possibile aggiungere attività di compilazione in azure-pipelines.yml direttamente da Azure Pipelines. Azure Pipelines esegue il commit delle modifiche direttamente nel ramo. In questo caso, si modificherà azure-pipelines.yml localmente e si eseguirà il push, ovvero il caricamento, delle modifiche in GitHub. In questo modo si possono esercitare le proprie competenze per Git. Controllare che la pipeline crei automaticamente l'app quando si esegue il push delle modifiche.

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

Nota

Verranno eseguiti alcuni comandi Git. Non preoccuparsi se non si ha familiarità con Git, perché verranno illustrate le operazioni da eseguire. Nei moduli futuri saranno inoltre fornite maggiori informazioni su Git.

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

2. Eseguire il comando git pull per recuperare le ultime modifiche da GitHub e aggiornare il ramo main.

   git pull origin main
   

   Dall'output si noterà che Git recupera un file denominato azure-pipelines.yml. Si tratta della configurazione della pipeline di base che Azure Pipelines ha creato automaticamente. Quando si configura la pipeline, Azure Pipelines aggiunge il 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 fornisce attività di compilazione predefinite corrispondenti a numerose operazioni di compilazione comuni. Ad esempio, l'attività DotNetCoreCLI@2 corrisponde all'utilità della riga di comando dotnet. La pipeline usa DotNetCoreCLI@2 due volte: una volta per ripristinare, o installare, le dipendenze del progetto e una volta per compilarlo.

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

   Nel passaggio di compilazione che scrive le informazioni relative alla compilazione in un file, notare gli elementi seguenti:

   • $(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 compilazione di esempio è "20190329.1".

   È anche possibile definire variabili personalizzate, come si vedrà a breve.

   Potrebbe essere stata notata anche 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. Nel terminale integrato eseguire i comandi Git seguenti per aggiungere azure-pipelines.yml all'indice, eseguire il commit della modifica ed eseguire il push della modifica in GitHub. Questi passaggi sono simili ai passaggi eseguiti in precedenza.

   Suggerimento

   Ricordarsi di salvare azure-pipelines.yml prima di eseguire questi comandi Git.

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

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

   L'esecuzione del 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 qualche secondo o aggiornare la pagina.

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

   Ad esempio, di seguito viene indicato cosa accade quando viene eseguita l'attività gulp@1 per eseguire le attività gulp che comprimono 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 piuttosto semplice. Questa volta, al termine della compilazione, viene visualizzato un set più completo di attività necessarie per compilare l'app.

   

8. Al termine della compilazione, selezionare uno dei passaggi per visualizzare lo stato di avanzamento complessivo della compilazione. Da qui si può passare ai log di compilazione o alla modifica associata in GitHub.