Esercizio - Distribuire l'applicazione Web nel servizio app di Azure

13 minuti

In questo modulo viene creata una pipeline a più fasi per compilare e distribuire l'applicazione in Servizio app di Azure. Scopri come:

Creare un'istanza di servizio app per ospitare l'applicazione Web.
Creare una pipeline a più fasi.
Distribuire in Servizio app di Azure.

Creare l'istanza del servizio app

Accedi al portale di Azure.
Selezionare Servizi app nel riquadro sinistro.
Selezionare Crea>app Web per creare una nuova app Web.

Nella scheda Informazioni di base immettere i valori seguenti.

Impostazione	Valore
Dettagli del progetto
Subscription	sottoscrizione in uso
Gruppo di risorse	Selezionare Crea nuovo, quindi immettere tailspin-space-game-rg e selezionare OK.
Dettagli dell'istanza
Nome	Specificare un nome univoco, ad esempio tailspin-space-game-web-1234. Il nome deve essere univoco in Azure Questo nome diventa parte del nome di dominio. È consigliabile scegliere quindi un nome che descriva il servizio. Prendere nota del nome per usarlo in seguito.
Pubblica	Codice
Stack di runtime	.NET 6 (LTS)
Sistema operativo	Linux
Area	Selezionare un'area, preferibilmente una vicina.
Piani dei prezzi
Piano Linux	Accettare il valore predefinito.
Piano tariffario	Selezionare il piano tariffario Basic B1 dal menu a discesa.

Selezionare Rivedi e crea, esaminare il modulo e quindi selezionare Crea. Per completare la distribuzione sono necessari alcuni minuti.
Al termine della distribuzione, selezionare Vai alla risorsa. Il servizio app Essentials visualizza i dettagli relativi alla distribuzione.
Selezionare l'URL per verificare lo stato del servizio app.

Importante

La pagina Eseguire la pulizia dell'ambiente Azure DevOps di questo modulo illustra come eliminare l'istanza del servizio app al termine della procedura. La pulizia garantisce che non vengano addebitate risorse di Azure dopo aver completato questo modulo. Assicurarsi di eseguire la procedura di pulizia anche se non si completa questo modulo.

Creare una connessione al servizio

Importante

Assicurarsi di aver eseguito l'accesso al portale di Azure e ad Azure DevOps con lo stesso account Microsoft.

In Azure DevOps passare al progetto Space Game - Web - Versione.
Nell'angolo inferiore sinistro della pagina selezionare Impostazioni progetto.
In Pipeline seleziona Connessioni al servizio.
Selezionare Nuova connessione al servizio, quindi selezionare Azure Resource Manager e quindi selezionare Avanti.
Selezionare Entità servizio e quindi selezionare Avanti.

Compilare i campi obbligatori come indicato di seguito: se richiesto, accedere all'account Microsoft.

Campo	Valore
Livello ambito	Abbonamento
Subscription	la propria sottoscrizione di Azure
Gruppo di risorse	tailspin-space-game-rg
Nome connessione al servizio	Resource Manager - Tailspin - Space Game

Assicurarsi che sia selezionata l'opzione Concedi l'autorizzazione di accesso a tutte le pipeline.
Seleziona Salva.

Aggiungere la fase Build alla pipeline

Una pipeline a più fasi consente di definire fasi distinte che vengono attraversate da una modifica durante l'innalzamento di livello attraverso la pipeline. Ogni fase definisce l'agente, le variabili e i passaggi necessari per eseguire tale fase della pipeline. In questa sezione si definisce una fase per eseguire la compilazione. Si definisce quindi una seconda fase per la distribuzione dell'applicazione Web nel servizio app.

Per convertire la configurazione di compilazione esistente in una pipeline multistage, aggiungere una stages sezione alla configurazione e quindi aggiungere una o più stage sezioni per ogni fase della pipeline. Le fasi si suddividono in processi, ovvero una serie di passaggi eseguiti in sequenza come unità.

Dal progetto in Visual Studio Code aprire azure-pipelines.yml e sostituire il contenuto con il codice seguente:

trigger:
- '*'

variables:
  buildConfiguration: 'Release'

stages:
- stage: 'Build'
  displayName: 'Build the web application'
  jobs: 
  - job: 'Build'
    displayName: 'Build job'
    pool:
      vmImage: 'ubuntu-20.04'
      demands:
      - npm

    variables:
      wwwrootDir: 'Tailspin.SpaceGame.Web/wwwroot'
      dotnetSdkVersion: '6.x'

    steps:
    - task: UseDotNet@2
      displayName: 'Use .NET SDK $(dotnetSdkVersion)'
      inputs:
        version: '$(dotnetSdkVersion)'

    - task: Npm@1
      displayName: 'Run npm install'
      inputs:
        verbose: false

    - script: './node_modules/.bin/node-sass $(wwwrootDir) --output $(wwwrootDir)'
      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: $(wwwrootDir)

    - task: DotNetCoreCLI@2
      displayName: 'Restore project dependencies'
      inputs:
        command: 'restore'
        projects: '**/*.csproj'

    - task: DotNetCoreCLI@2
      displayName: 'Build the project - $(buildConfiguration)'
      inputs:
        command: 'build'
        arguments: '--no-restore --configuration $(buildConfiguration)'
        projects: '**/*.csproj'

    - task: DotNetCoreCLI@2
      displayName: 'Publish the project - $(buildConfiguration)'
      inputs:
        command: 'publish'
        projects: '**/*.csproj'
        publishWebProjects: false
        arguments: '--no-build --configuration $(buildConfiguration) --output $(Build.ArtifactStagingDirectory)/$(buildConfiguration)'
        zipAfterPublish: true

    - publish: '$(Build.ArtifactStagingDirectory)'
      artifact: drop

Dal terminale integrato eseguire i comandi seguenti per eseguire la fase, il commit e quindi eseguire il push delle modifiche nel ramo remoto.
```
git add azure-pipelines.yml
git commit -m "Add a build stage"
git push origin release-pipeline
```
Selezionare la pipeline in Azure Pipelines.
Al termine della compilazione, selezionare il pulsante Indietro per tornare alla pagina di riepilogo e controllare lo stato della pipeline e l'artefatto pubblicato.

Creare l'ambiente di sviluppo

Tenere presente che in Azure Pipelines con ambiente si intende una rappresentazione astratta dell'ambiente di distribuzione. Gli ambienti possono essere usati per definire criteri specifici per la versione, ad esempio la pipeline autorizzata a distribuire nell'ambiente. Gli ambienti possono essere usati anche per configurare approvazioni manuali per utenti/gruppi specifici da approvare prima della ripresa della distribuzione.

Selezionare Ambienti in Azure Pipelines.
Selezionare Crea ambiente.
In Nome immettere dev.
Lasciare i valori predefiniti negli altri campi.
Seleziona Crea.

Archiviare il nome dell'app Web in una variabile della pipeline

La fase di distribuzione creata usa il nome per identificare quale istanza di Servizio app distribuire, ad esempio tailspin-space-game-web-1234.

Sebbene sia possibile impostare come hardcoded questo nome nella configurazione della pipeline, la relativa definizione come variabile rende la configurazione più facilmente riutilizzabile.

In Azure DevOps selezionare Pipeline e quindi Libreria.
Selezionare + Gruppo di variabili per creare un nuovo gruppo di variabili.
Per il nome del gruppo di variabili, immettere Release.
Selezionare Aggiungi in Variabili per aggiungere una nuova variabile.
Immettere WebAppName come nome della variabile e il nome dell'istanza di Servizio app per il relativo valore, ad esempio tailspin-space-game-web-1234.
Seleziona Salva.

Aggiungere la fase di distribuzione alla pipeline

Per estendere la pipeline, si aggiunge una fase di distribuzione per distribuire Space Game a Servizio app usando le attività download e AzureWebApp@1 per scaricare l'artefatto della compilazione e quindi distribuirlo.

In Visual Studio Code sostituire il contenuto di azure-pipelines.yml con il codice seguente:

trigger:
- '*'

variables:
  buildConfiguration: 'Release'

stages:
- stage: 'Build'
  displayName: 'Build the web application'
  jobs: 
  - job: 'Build'
    displayName: 'Build job'
    pool:
      vmImage: 'ubuntu-20.04'
      demands:
      - npm

    variables:
      wwwrootDir: 'Tailspin.SpaceGame.Web/wwwroot'
      dotnetSdkVersion: '6.x'

    steps:
    - task: UseDotNet@2
      displayName: 'Use .NET SDK $(dotnetSdkVersion)'
      inputs:
        version: '$(dotnetSdkVersion)'

    - task: Npm@1
      displayName: 'Run npm install'
      inputs:
        verbose: false

    - script: './node_modules/.bin/node-sass $(wwwrootDir) --output $(wwwrootDir)'
      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: $(wwwrootDir)

    - task: DotNetCoreCLI@2
      displayName: 'Restore project dependencies'
      inputs:
        command: 'restore'
        projects: '**/*.csproj'

    - task: DotNetCoreCLI@2
      displayName: 'Build the project - $(buildConfiguration)'
      inputs:
        command: 'build'
        arguments: '--no-restore --configuration $(buildConfiguration)'
        projects: '**/*.csproj'

    - task: DotNetCoreCLI@2
      displayName: 'Publish the project - $(buildConfiguration)'
      inputs:
        command: 'publish'
        projects: '**/*.csproj'
        publishWebProjects: false
        arguments: '--no-build --configuration $(buildConfiguration) --output $(Build.ArtifactStagingDirectory)/$(buildConfiguration)'
        zipAfterPublish: true

    - publish: '$(Build.ArtifactStagingDirectory)'
      artifact: drop

- stage: 'Deploy'
  displayName: 'Deploy the web application'
  dependsOn: Build
  jobs:
  - deployment: Deploy
    pool:
      vmImage: 'ubuntu-20.04'
    environment: dev
    variables:
    - group: Release
    strategy:
      runOnce:
        deploy:
          steps:
          - download: current
            artifact: drop
          - task: AzureWebApp@1
            displayName: 'Azure App Service Deploy: website'
            inputs:
              azureSubscription: 'Resource Manager - Tailspin - Space Game'
              appName: '$(WebAppName)'
              package: '$(Pipeline.Workspace)/drop/$(buildConfiguration)/*.zip'

Si noti la sezione evidenziata e come si usano le attività download e AzureWebApp@1. La pipeline recupera l'oggetto $(WebAppName) dal gruppo di variabili creato in precedenza.

Si noti anche come si usa environment per eseguire la distribuzione nell'ambiente dev.

Dal terminale integrato aggiungere azure-pipelines.yml all'indice. Eseguire quindi il commit della modifica ed eseguirne il push in GitHub.
```
git add azure-pipelines.yml
git commit -m "Add a deployment stage"
git push origin release-pipeline
```
Selezionare la pipeline in Azure Pipelines.
Al termine della compilazione, selezionare il pulsante Indietro per tornare alla pagina di riepilogo e controllare lo stato della pipeline e l'artefatto pubblicato. Entrambe le fasi sono state completate correttamente nel nostro caso.

Visualizzare il sito Web distribuito nel servizio app

Se la scheda di Servizio app è ancora aperta, aggiornare la pagina. In caso contrario, passare alla Servizio app di Azure nel portale di Azure e selezionare l'URL dell'istanza, ad esempio,https://tailspin-space-game-web-1234.azurewebsites.net
Il sito Web Space Game è distribuito correttamente in Servizio app di Azure.

Complimenti. Il sito Web di Space Game è stato distribuito correttamente in Servizio app di Azure con Azure Pipelines.