Distribuire l'applicazione in Azure Functions e Azure Container Apps

In questo esercizio si apprenderà come distribuire le funzioni Microsoft Graph e ACS descritte negli esercizi precedenti in Funzioni di Azure. Si creerà anche un'immagine del contenitore e la si distribuirà in App Contenitore di Azure.

Distribuire su Funzioni di Azure

Eseguire la distribuzione in App Azure Container

1. La prima attività da eseguire consiste nel creare una nuova risorsa del Registro Azure Container. Dopo aver creato il registro, crea un'immagine ed esegui il push nel registro.

2. Aprire una finestra di comando ed eseguire il comando seguente per accedere alla sottoscrizione di Azure:

   az login
   

3. Aggiungere le seguenti variabili della shell, sostituendo i valori di segnaposto con quelli appropriati. Aggiungere il <GITHUB_USERNAME> come valore minuscolo e sostituire il dominio Azure Functions per il <AZURE_FUNCTIONS_DOMAIN> (includere il https:// nel valore di dominio).

   • Bash
   • PowerShell

   GITHUB_USERNAME="<YOUR_GITHUB_USERNAME>"
   RESOURCE_GROUP="<YOUR_RESOURCE_GROUP_NAME>"
   ACR_NAME="aca"$GITHUB_USERNAME
   AZURE_FUNCTIONS_DOMAIN="<YOUR_AZURE_FUNCTIONS_URL>"
   

4. Creare una nuova risorsa di Registro Azure Container eseguendo il comando seguente:

   • Bash
   • PowerShell

   az acr create \
       --resource-group $RESOURCE_GROUP \
       --name $ACR_NAME \
       --sku Basic \
       --admin-enabled true
   

5. Aprire il file client/react/Dockerfile nell'editor e notare che vengono eseguite le attività seguenti:

   • L'applicazione React viene costruita e assegnata alla fase di build.
   • Il server nginx è configurato e l'output della fase di compilazione viene copiato nell'immagine del server nginx.

6. Compilare l'immagine del contenitore in Azure eseguendo il comando seguente dalla radice della cartella client/react . Sostituire <YOUR_FUNCTIONS_DOMAIN> con il dominio di Funzioni di Azure copiato in un file locale in precedenza in questo esercizio.

   • Bash
   • PowerShell

   az acr build --registry $ACR_NAME --image acs-to-teams-meeting \
     --build-arg REACT_APP_ACS_USER_FUNCTION=$AZURE_FUNCTIONS_DOMAIN/api/httpTriggerAcsToken \
     --build-arg REACT_APP_TEAMS_MEETING_FUNCTION=$AZURE_FUNCTIONS_DOMAIN/api/httpTriggerTeamsUrl .
   

7. Eseguire il comando seguente per elencare le immagini nel Registro di sistema. Dovresti vedere la tua nuova immagine elencata.

   az acr repository list --name $ACR_NAME --output table
   

8. Dopo aver distribuito l'immagine, è necessario creare un'app contenitore di Azure in grado di eseguire il contenitore.

9. Visitare il portale di Azure nel browser e accedere.

10. Digitare app contenitore nella barra di ricerca superiore e selezionare App contenitore nelle opzioni visualizzate.

11. Selezionare Crea sulla barra degli strumenti.

    Annotazioni

    Anche se si usa il portale di Azure, è anche possibile creare un'app contenitore usando l'interfaccia della riga di comando di Azure. Per altre informazioni, vedere Avvio rapido: Distribuire la prima app contenitore. Verrà illustrato un esempio di come usare l'interfaccia della riga di comando di Azure anche alla fine di questo esercizio.

12. Eseguire le attività seguenti:

    • Selezionare la sottoscrizione.
    • Selezionare il gruppo di risorse da usare (crearne uno nuovo, se necessario). Se si vuole, è possibile usare lo stesso gruppo di risorse usato per la risorsa ACS. Copiare il nome del gruppo di risorse nello stesso file locale in cui è stato archiviato il dominio di Funzioni di Azure.
    • Immettere il nome di un'app contenitore, acs-to-teams-meeting.
    • Scegliere un'area.
    • Selezionare Crea nuovo nella sezione Ambiente App di Contenitori.
    • Immettere il nome ambienteacs-to-teams-meeting-env.
    • Selezionare il pulsante Crea.
    • Selezionare Avanti: Impostazioni app>.

13. Immettere i valori seguenti nella schermata Crea Container App :

    • Deselezionare la casella di controllo Usa immagine di avvio rapido .
    • Nome: acs-to-teams-meeting
    • L'origine dell'immagine: Azure Container Registry
    • Registro: <YOUR_ACR_REGISTRY_NAME>.azurecr.io
    • Immagine: acs-to-teams-meeting
    • Tag immagine: latest
    • CPU e memoria: 0,25 core CPU, -.5 Gi di memoria

14. Nella sezione Impostazioni ingresso applicazione seguire questa procedura:

    • Seleziona la casella di controllo Abilitato.
    • Selezionare il pulsante di opzione Accetta traffico da qualsiasi posizione .

    Verrà creato un punto di ingresso per l'applicazione React affinché possa essere chiamato da qualsiasi luogo. App Azure Container reindirizza tutto il traffico a HTTPS.

    • Porta di destinazione: 80

15. Selezionare Rivedi e crea. Dopo aver superato la convalida, selezionare il pulsante Crea.

    Se viene visualizzato un errore, potrebbe essere dovuto al fatto che l'ambiente delle app contenitore è rimasto inattivo troppo a lungo. La soluzione più semplice consiste nell'eseguire di nuovo il processo di creazione dell'app contenitore. In alternativa, è possibile eseguire il comando seguente per creare l'app contenitore usando l'interfaccia della riga di comando di Azure:

    • Bash
    • PowerShell

    az containerapp create --name acs-to-teams-meeting --resource-group $RESOURCE_GROUP \
        --location westus --image acs-to-teams-meeting \
        --cpu 0.25 --memory 0.5 --environment-name acs-to-teams-meeting-env \
        --ingress-enabled true --ingress-target-port 80 --ingress-type External \
        --ingress-protocol Https --ingress-traffic Anywhere
    

16. Al termine della distribuzione dell'app contenitore, passare a esso nel portale di Azure e selezionare l'URL dell'applicazione nella schermata Panoramica per visualizzare l'applicazione in esecuzione nel contenitore nginx.

Passaggio successivo