Esercitazio - Distribuisci un'app di Funzioni di Azure in Azure

15 minuti

Il progetto è stato fornito con una pipeline che compila i progetti nella soluzione e distribuisce l'app Web nel servizio app di Azure. A questo punto è possibile estendere la pipeline anche per distribuire il nuovo progetto per le Funzioni di Azure.

In questa parte verrà descritto come:

Esaminare la fase di Compilazione.
Aggiungere un'attività per distribuire l'app per le funzioni.
Aggiungere un'attività per configurare il servizio app pubblicato per usare la funzione pubblicata.
Salvare la pipeline per attivare un flusso di lavoro CI/CD.

Esaminare la fase di compilazione

In questa sezione verrà esaminata la pipeline CI/CD esistente definita in azure-pipelines.yml.

In Azure DevOps, passare a Pipelines.
Selezionare la pipeline.

Seleziona Modifica Assicurarsi che il ramo sia impostato su main, selezionandolo dal menu a discesa. Verrà aperto il file azure-pipelines.yml, che definisce la pipeline CI/CD esistente.

A causa dell'uso di caratteri jolly nei percorsi del progetto, le seguenti attività evidenziate consentono automaticamente di ripristinare, compilare e pubblicare il nuovo progetto per le Funzioni di Azure.

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.0.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

Andy: Questa era la fase di compilazione precedente. Non ho modificato il progetto originale perché le attività erano già configurate per essere eseguite su tutti i progetti in base al criterio di corrispondenza con caratteri jolly.

Mara: Sì, dovrebbe funzionare così com'è. Qui non è necessario apportare modifiche. Dopo aver eseguito questa attività di compilazione, gli artefatti del file zip dei progetti Web e di classifica verranno pubblicati per la fase di distribuzione da usare.

Aggiungere un'attività per distribuire la funzione di Azure

Andy: Credo che si possa anche riutilizzare l'attività di distribuzione del servizio app così com'è. Esiste un’attività simile per distribuire un'app per le funzioni?

Mara: Ho buone notizie. Dopo una breve ricerca, ho trovato un'attività concettualmente simile all'attività di distribuzione del servizio app, ma dedicata alle distribuzioni delle Funzioni di Azure. Vediamola ora.

Attività dell'app per le funzioni di Azure

L'attività AzureFunctionApp@1 è progettata per distribuire app per le funzioni. È concettualmente simile all'attività AzureWebApp@1 e include tutti gli elementi necessari per questo scenario di app per le funzioni:

azureSubscription si riferisce al nome della variabile della pipeline di connessione al servizio di Azure.
appType indica se l'app viene distribuita per Linux (functionAppLinux) o Windows (functionApp).
appName specifica il nome dell'istanza dell'app per le Funzioni di Azure nell'account Azure.
package specifica il percorso del pacchetto da distribuire.
runtimeStack indica l'immagine su cui deve essere eseguita la funzione, necessaria per le distribuzioni Linux.
startUpCommand specifica il comando di avvio da eseguire dopo la distribuzione della funzione, necessario per le distribuzioni Linux.

Per altre informazioni sulla flessibilità di questa attività, vedere la documentazione relativa all' Attività dell'app per le funzioni di Azure.

Aggiungere il codice evidenziato seguente alla fine della pipeline.

- stage: 'Deploy'
  displayName: 'Deploy the web application'
  dependsOn: Build
  jobs:
  - deployment: Deploy
    pool:
      vmImage: 'ubuntu-20.04'
    environment: spike
    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)'
              appType: webAppLinux
              package: '$(Pipeline.Workspace)/drop/$(buildConfiguration)/Tailspin.SpaceGame.Web.zip'

          - task: AzureFunctionApp@1
            displayName: 'Azure Function Deploy: leaderboard'
            inputs:
              azureSubscription: 'Resource Manager - Tailspin - Space Game'
              appType: functionAppLinux
              appName: '$(LeaderboardAppName)'
              package: '$(Pipeline.Workspace)/drop/$(buildConfiguration)/Tailspin.SpaceGame.LeaderboardFunction.zip'
              runtimeStack: DOCKER|microsoft/azure-functions-dotnet:4
              startUpCommand: 'func azure functionapp publish $(functionAppName) --no-bundler'

Suggerimento

Lo spazio vuoto è importante in un file YAML. Verificare che l'attività qui aggiunta abbia lo stesso rientro dell'attività precedente.

Aggiungere un'attività per aggiornare le impostazioni app del Servizio app

Andy: Ora basta configurare l'app Web per usare l'API della classifica pubblicata. Le variabili, di solito, vengono configurate nel portale, ma è meglio farlo qui. Richiede un parametro AppSettings denominato LeaderboardFunctionUrl.

Mara: Sono d'accordo. Infatti, aggiungere un'attività alla pipeline consentirà di evitare eventuali sviste accidentali in caso di modifica di uno dei servizi. Puoi aggiungere l’attività direttamente alla fine.

Aggiungere il codice evidenziato seguente alla fine della pipeline. Assicurarsi di far corrispondere il rientro dell'attività al di sopra di esso. Per altre informazioni su questa attività, vedere la documentazione relativa all'attività Impostazioni del servizio app di Azure.

- task: AzureFunctionApp@1
  displayName: 'Azure Function Deploy: leaderboard'
  inputs:
    azureSubscription: 'Resource Manager - Tailspin - Space Game'
    appType: functionAppLinux
    appName: '$(LeaderboardAppName)'
    package: '$(Pipeline.Workspace)/drop/$(buildConfiguration)/Tailspin.SpaceGame.LeaderboardFunction.zip'
    runtimeStack: DOCKER|microsoft/azure-functions-dotnet:4
    startUpCommand: 'func azure functionapp publish $(functionAppName) --no-bundler'

- task: AzureAppServiceSettings@1
  displayName: 'Update web app settings'
  inputs:
    azureSubscription: 'Resource Manager - Tailspin - Space Game'
    appName: $(WebAppName)
    resourceGroupName: $(ResourceGroupName)
    appSettings: |
      [
        {
          "name": "AppSettings__LeaderboardFunctionUrl",
          "value": "http://$(LeaderboardAppName).azurewebsites.net/api/LeaderboardFunction",
          "slotSetting": false
        }
      ]

Salvare la pipeline per attivare una compilazione e il rilascio

Selezionare Salva nell'angolo superiore destro della pagina. Conferma il Salvataggio per attivare l'esecuzione.
In Azure Pipelines passare alla compilazione. Tracciare quindi la compilazione durante l'esecuzione.
Al termine della compilazione, selezionare l'attività di distribuzione del sito Web e selezionare l'URL per visualizzare il sito distribuito.
Si otterrà una pagina con il sito in esecuzione nel servizio app. Scorri verso il basso e conferma che la classifica contiene dati reali. Questa è una funzionalità supportata dall'app per le funzioni.

Nota

Se si verifica un errore durante il caricamento del tabellone punteggi, verificare i passaggi seguiti in questo modulo. Se viene visualizzato il messaggio di eccezione "Tentativo di accesso al socket con modalità non consentite dalle rispettive autorizzazioni di accesso", assicurarsi che l'impostazione AppSettings__LeaderboardFunctionUrl del servizio app sia stata specificata correttamente.
È anche possibile testare direttamente l'app per le funzioni. È sufficiente passare all'URL usando il formato seguente. La risposta è JSON, che semplicemente permette di visualizzare il testo nel browser.
```
http://<leaderboard function name>.azurewebsites.net/api/LeaderboardFunction?pageSize=10
```
ad esempio
```
http://tailspin-space-game-leaderboard-4692.azurewebsites.net/api/LeaderboardFunction?pageSize=10
```