Déployer l’application sur Azure Functions et Azure Container Apps

Important

Outre les conditions préalables répertoriées pour ce didacticiel, vous devez également installer les outils suivants sur votre ordinateur pour effectuer cet exercice.

• Azure CLI
• Si vous utilisez VS Code, installez l’extension Azure Functions

Dans cet exercice, vous allez apprendre à déployer les fonctions Microsoft Graph et ACS décrites dans les exercices précédents sur Azure Functions. Vous allez également créer une image conteneur et la déployer sur Azure Container Apps.

Déployer sur Azure Functions

C#

Remarque

Cette section utilise Visual Studio pour publier les fonctions C# sur Azure. Si vous préférez utiliser Visual Studio Code, vous pouvez suivre les instructions de la fonction Créer une fonction C# dans Azure à l’aide du guide de démarrage rapide Visual Studio Code.

1. Ouvrez le samples/acs-video-to-teams-meeting/server/csharp/GraphACSFunctions.sln projet dans Visual Studio.

2. Cliquez avec le bouton droit sur le GraphACSFunctions projet, puis sélectionnez Publier.

3. Sélectionnez Azure dans la section cible, puis cliquez sur Suivant.

4. Sélectionnez Application de fonction Azure (Windows), puis cliquez sur Suivant.

5. Sélectionnez votre abonnement, puis sélectionnez + Créer.

6. Entrez les informations suivantes :

   • Nom de la fonction : un nom global unique est requis. Exemple : acsFunctions<YOUR_LAST_NAME>.
   • Abonnement : sélectionnez votre abonnement.
   • Groupe de ressources : sélectionnez un groupe de ressources que vous avez créé précédemment dans ce didacticiel, ou vous pouvez également en créer un nouveau.
   • Plan d’hébergement : Plan de consommation.
   • Emplacement : sélectionnez la région dans laquelle vous souhaitez effectuer le déploiement.
   • Stockage Azure : créez-en un. (Vous pouvez également sélectionner un compte de stockage existant.)
   • Azure Insights : Créez-en un nouveau. (Vous pouvez également sélectionner un compte de stockage existant.)

   Remarque

   Un nom global unique est requis. Vous pouvez rendre le nom plus unique en ajoutant un numéro ou votre nom à la fin du nom.

7. Une fois l’application de fonction Azure créée, un écran de confirmation s’affiche. Vérifiez que l’option Exécuter à partir du package est sélectionnée, puis sélectionnez Terminer.

8. Sélectionnez Publier pour déployer la fonction sur Azure.

9. Une fois la fonction déployée sur Azure, accédez au portail Azure et sélectionnez l’application de fonction que vous avez créée.

10. Copiez l’URL de la fonction que vous avez déployée. Vous utiliserez la valeur plus loin dans cet exercice.

11. Sélectionnez Paramètres -> Configuration dans le menu de gauche.

12. Sélectionnez + Bouton Nouveau paramètre d’application et ajoutez les clés et valeurs suivantes dans les paramètres de l’application. Vous pouvez récupérer ces valeurs à partir de local.settings.json dans le projet GraphACSFunctions.

    # Retrieve these values from local.settings.json
    TENANT_ID: <YOUR_VALUE>
    CLIENT_ID: <YOUR_VALUE>
    CLIENT_SECRET: <YOUR_VALUE>
    USER_ID: <YOUR_VALUE>
    ACS_CONNECTION_STRING: <YOUR_VALUE>
    

13. Sélectionnez le bouton Enregistrer pour enregistrer les paramètres.

14. Enfin, vous devez activer CORS (Cross-Origin Resource Sharing) pour que les API de cette application soient accessibles à partir de l’extérieur de votre domaine. Sélectionnez Paramètres -> CORS dans le menu de gauche.

15. Entrez * (accessible à partir de n’importe quel domaine) dans la zone de texte Origines autorisées , puis sélectionnez le bouton Enregistrer .

Tapuscrit

Commençons par utiliser VS Code pour déployer le code des fonctions sur Azure Functions.

1. Ouvrez le dossier de projet serveur/typescript .

2. Vous devriez déjà avoir exécuté npm install et voir un répertoire node_modules à la racine du projet. Si ce n’est pas le cas, ouvrez une fenêtre de commande et exécutez-la npm install pour installer les dépendances.

3. Ouvrir la palette de commandes VS Code (Maj+Cmd+P sur Mac | Maj+Ctrl+P sur Windows), puis sélectionnez Azure Functions : Créer une application de fonction dans Azure.

   

   Remarque

   Si vous ne voyez pas cette option, vérifiez que l’extension Azure Functions est installée dans VS Code.

4. Vous serez invité à entrer les informations suivantes :

   • Le nom de votre abonnement Azure.
   • Nom de la fonction : acsFunctions<YOUR_LAST_NAME>.

   Remarque

   Un nom global unique est requis. Vous pouvez rendre le nom plus unique en ajoutant un numéro ou votre nom à la fin du nom.

   • Pile d’exécution : sélectionnez la dernière version Node.js LTS .
   • Région (sélectionnez n’importe quelle région souhaitée).

5. Une fois l’application de fonction Azure créée, vous verrez un message sur l’affichage des détails.

6. Revenez à la palette de commandes dans VS Code et sélectionnez Azure Functions : Déployer sur Function App. Vous êtes invité à sélectionner votre abonnement et le nom de l’application de fonction que vous avez créé précédemment.

7. Une fois la fonction déployée sur Azure, procédez comme suit :

   • Sélectionnez l’extension Azure dans VS Code (cliquez sur l’icône Azure dans la barre latérale).
   • Développez votre abonnement.
   • Étendez votre application fonctionnelle.
   • Cliquez avec le bouton droit sur la fonction et sélectionnez Parcourir le site web. Vérifiez que l’application de fonction fonctionne correctement avant de continuer.

8. Copiez le domaine de fonction Azure dans un fichier local. Vous utiliserez la valeur plus loin dans cet exercice.

Déployer sur Azure Container Apps

1. La première tâche que vous allez effectuer consiste à créer une ressource Azure Container Registry (ACR ). Une fois le Registre créé, vous allez générer une image et l’envoyer (push) au Registre.

2. Ouvrez une fenêtre de commande et exécutez la commande suivante pour vous connecter à votre abonnement Azure :

   az login
   

3. Ajoutez les variables shell suivantes en les remplaçant par les valeurs appropriées pour les espaces réservés selon les besoins. Ajoutez votre <GITHUB_USERNAME> en tant que valeur minuscule et remplacez votre domaine Azure Functions par la <valeur AZURE_FUNCTIONS_DOMAIN> (incluez la https:// valeur du domaine).

   Cogner

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

   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. Créez une ressource Azure Container Registry en exécutant la commande suivante :

   Cogner

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

   PowerShell

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

5. Ouvrez le fichier client/react/Dockerfile dans votre éditeur et notez que les tâches suivantes sont effectuées :

   • L’application React est compilée et affectée à l’étape de compilation.
   • Le serveur nginx est configuré, et le résultat de la phase de génération est copié dans l'image du serveur nginx.

6. Générez l’image conteneur dans Azure en exécutant la commande suivante à partir de la racine du dossier client/react . Remplacez <YOUR_FUNCTIONS_DOMAIN> par votre domaine Azure Functions que vous avez copié dans un fichier local précédemment dans cet exercice.

   Cogner

   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 .
   

   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. Exécutez la commande suivante pour répertorier les images dans votre Registre. Votre nouvelle image devrait apparaître.

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

8. Maintenant que l’image est déployée, vous devez créer une application conteneur Azure qui peut exécuter le conteneur.

9. Visitez le portail Azure dans votre navigateur et connectez-vous.

10. Tapez des applications conteneur dans la barre de recherche supérieure et sélectionnez Container Apps dans les options qui s’affichent.

11. Sélectionnez Créer dans la barre d’outils.

    Remarque

    Bien que vous utilisiez le portail Azure, une application conteneur peut également être créée à l’aide d’Azure CLI. Pour plus d’informations, consultez Démarrage rapide : Déployer votre première application conteneur. Vous verrez également un exemple de la façon dont Azure CLI peut être utilisé à la fin de cet exercice.

12. Effectuez les tâches suivantes :

    • Sélectionnez votre abonnement.
    • Sélectionnez le groupe de ressources à utiliser (créez-en un si nécessaire). Vous pouvez utiliser le même groupe de ressources que celui que vous avez utilisé pour votre ressource ACS si vous le souhaitez. Copiez le nom de votre groupe de ressources dans le même fichier local que celui où vous avez stocké votre domaine Azure Functions.
    • Entrez un nom pour l'application de conteneur acs-to-teams-meeting.
    • Sélectionnez une région.
    • Sélectionnez Créer nouveau dans la section Environnement Container Apps.
    • Entrez un nom d’environnement de acs-to-teams-meeting-env.
    • Cliquez sur le bouton Créer.
    • Sélectionnez Suivant : Paramètres >de l’application .

13. Entrez les valeurs suivantes dans l’écran Créer une application conteneur :

    • Désélectionnez la case à cocher Utiliser l’image de démarrage rapide .
    • Nom : acs-to-teams-meeting
    • Source de l’image : Azure Container Registry
    • Registre : <YOUR_ACR_REGISTRY_NAME.azurecr.io>
    • Image : acs-to-teams-meeting
    • Balise d’image : latest
    • Processeur et mémoire : 0,25 cœurs de CPU, -0,5 Gio de mémoire

14. Dans la section Paramètres d’entrée de l’application , procédez comme suit :

    • Cochez la case Activé.
    • Sélectionnez la case d’option Acceptation du trafic depuis n’importe où.

    Cela crée un point d’entrée (entrée) pour votre application React et lui permet d’être appelé n’importe où. Azure Container Apps redirige tout le trafic vers HTTPS.

    • Port cible : 80

15. Sélectionnez Vérifier + créer. Une fois la validation réussie, sélectionnez le bouton Créer.

    Si vous obtenez une erreur, cela peut être dû à l’inactivité de votre environnement d’applications conteneur pendant trop longtemps. La solution la plus simple consiste à passer par le processus de création de l’application conteneur à nouveau. Vous pouvez également exécuter la commande suivante pour créer l’application conteneur à l’aide d’Azure CLI :

    Cogner

    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
    

    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. Une fois le déploiement de votre application conteneur terminé, accédez-y dans le portail Azure et sélectionnez l’URL de l’application dans l’écran Vue d’ensemble pour afficher l’application s’exécutant dans le conteneur nginx !

Étape suivante

Félicitations !