Démarrage rapide : Créer une fonction JavaScript dans Azure à l’aide de Visual Studio Code

Utilisez Visual Studio Code pour créer une fonction JavaScript qui répond aux requêtes HTTP. Testez le code localement, puis déployez-le dans l’environnement serverless d’Azure Functions.

Le fait de suivre ce guide de démarrage rapide entraîne une petite dépense de quelques cents USD tout au plus dans votre compte Azure.

Il existe également une version basée sur l’interface CLI de cet article.

Configurer votre environnement

Avant de commencer, veillez à disposer des éléments suivants :

Créer votre projet local

Dans cette section, vous utilisez Visual Studio Code pour créer un projet Azure Functions local en JavaScript. Plus loin dans cet article, vous allez publier votre code de fonction sur Azure.

  1. Choisissez l’icône Azure dans la barre d’activité, puis dans la zone Azure : Fonctions, sélectionnez l’icône Créer un projet.

    Choisir Créer un projet

  2. Choisissez un emplacement de répertoire pour votre espace de travail de projet et optez pour Sélectionner.

    Notes

    Ces étapes ont été conçues pour être terminées en dehors d’un espace de travail. Dans ce cas, ne sélectionnez pas de dossier de projet qui fait partie d’un espace de travail.

  3. Quand vous y êtes invité, indiquez les informations suivantes :

    Prompt Sélection
    Sélectionner un langage pour votre projet de fonction Choisissez JavaScript.
    Sélectionner un modèle pour la première fonction de votre projet Choisissez HTTP trigger.
    Fournir un nom de fonction Tapez HttpExample.
    Niveau d’autorisation Choisissez l’option Anonymous, qui permet à quiconque d’appeler le point de terminaison de votre fonction. Pour en savoir plus sur le niveau d’autorisation, consultez Clés d’autorisation.
    Sélectionner la façon dont vous souhaitez ouvrir votre projet Choisissez Add to workspace.

    À l’aide de ces informations, Visual Studio Code génère un projet Azure Functions avec un déclencheur HTTP. Vous pouvez voir les fichiers de projet locaux dans l’Explorateur. Pour en savoir plus sur les fichiers créés, consultez Fichiers projet générés.

Exécuter la fonction localement

Visual Studio Code s’intègre à Azure Functions Core Tools pour vous permettre d’exécuter ce projet sur votre ordinateur de développement local avant toute publication sur Azure.

  1. Pour appeler votre fonction, appuyez sur F5 pour démarrer le projet d’application de fonction. La sortie de Core Tools est affichée dans le panneau Terminal. Votre application démarre dans le panneau Terminal. Vous pouvez voir le point de terminaison de l’URL de votre fonction déclenchée par HTTP en cours d’exécution localement.

    Sortie VS Code de la fonction locale

    Si vous rencontrez des problèmes d’exécution sur Windows, assurez-vous que le terminal par défaut pour Visual Studio Code n’est pas défini sur WSL Bash.

  2. Une fois Core Tools en cours d’exécution, accédez à la zone Azure : Functions. Sous Fonctions, développez Projet local > Fonctions. Cliquez avec le bouton droit (Windows) ou effectuez Ctrl-clic (macOS) sur la fonction HttpExample, puis choisissez Exécuter la fonction maintenant.

    Exécuter la fonction maintenant dans Visual Studio Code

  3. Dans Entrer le corps de la requête, vous pouvez voir la valeur du corps du message de requête pour { "name": "Azure" }. Appuyez sur Entrée pour envoyer ce message de requête à votre fonction.

  4. Quand la fonction s’exécute localement et retourne une réponse, une notification est générée dans Visual Studio Code. Les informations relatives à l’exécution de la fonction sont affichées dans le panneau Terminal.

  5. Appuyez sur Ctrl+C pour arrêter Core Tools et déconnecter le débogueur.

Après avoir vérifié que la fonction s’exécute correctement sur votre ordinateur local, il est temps d’utiliser Visual Studio Code pour publier le projet directement sur Azure.

Connexion à Azure

Avant de pouvoir publier votre application, vous devez vous connecter à Azure.

  1. Si vous n’êtes pas déjà connecté, choisissez l’icône Azure dans la barre d’activité, puis dans la zone Azure : Fonctions, choisissez Se connecter à Azure... . Si vous ne l’avez pas encore fait, vous pouvez créer un compte Azure gratuit . Les étudiants peuvent créer un compte gratuit Azure pour Étudiant .

    Se connecter à Azure dans VS Code

    Si vous êtes déjà connecté, passez à la section suivante.

  2. Quand vous y êtes invité dans le navigateur, choisissez votre compte Azure, puis connectez-vous à l’aide de vos informations d’identification de compte Azure.

  3. Une fois la connexion réussie, vous pouvez fermer la nouvelle fenêtre de navigateur. Les abonnements qui font partie de votre compte Azure sont affichés dans la barre latérale.

Déployer le projet dans Azure

Dans cette section, vous créez une application de fonction et les ressources associées dans votre abonnement Azure, puis vous déployez votre code.

Important

Le déploiement vers une application de fonction existante remplace le contenu de cette application dans Azure.

  1. Choisissez l’icône Azure dans la barre d’activité, puis dans la zone Azure : Fonctions, choisissez le bouton Déployer sur une application de fonction.

    Publier votre projet sur Azure

  2. Quand vous y êtes invité, indiquez les informations suivantes :

    Prompt Sélection
    Sélectionner l’application de fonction dans Azure Choisissez + Create new Function App. (Ne choisissez pas l’option Advanced, qui n’est pas abordée dans cet article.)
    Entrer un nom global unique pour l’application de fonction Tapez un nom valide dans un chemin d’URL. Le système vérifie que le nom que vous tapez est unique dans Azure Functions.
    Sélectionnez un runtime Choisissez la version de Node.js que vous avez exécutée localement. Vous pouvez utiliser la commande node --version pour vérifier votre version.
    Sélectionnez un emplacement pour les nouvelles ressources Pour de meilleures performances, choisissez une région proche de vous.

    L’extension montre l’état des ressources individuelles au fur et à mesure de leur création dans Azure, au sein de la zone de notification.

    Notification de création de ressources Azure

    Quand vous avez terminé, les ressources Azure suivantes sont créées dans votre abonnement et leurs noms reposent sur le nom de votre application de fonction :

    • Un groupe de ressources, qui est un conteneur logique pour les ressources associées.
    • Un compte Stockage Azure standard, qui conserve l’état et d’autres informations spécifiques à vos projets.
    • Un plan de consommation, qui définit l’hôte sous-jacent pour votre application de fonction serverless.
    • Une application de fonction, qui fournit l’environnement d’exécution de votre code de fonction. Une application de fonction vous permet de regrouper des fonctions en une unité logique pour faciliter la gestion, le déploiement et le partage des ressources au sein du même plan d’hébergement.
    • Une instance Application Insights connectée à l’application de fonction, qui effectue le suivi de l’utilisation de votre fonction serverless.
  3. Une notification s’affiche après que votre application de fonction a été créée et que le package de déploiement a été appliqué.

    Conseil

    Par défaut, les ressources Azure nécessaires à votre application de fonction sont créées d’après le nom d’application de fonction que vous indiquez. Par défaut, elles sont également créées dans le même nouveau groupe de ressources avec l’application de fonction. Si vous souhaitez personnaliser les noms de ces ressources ou réutiliser des ressources existantes, vous devez plutôt publier le projet à l’aide des options de création avancées.

  4. Sélectionnez Afficher la sortie de dans cette notification pour afficher les résultats de la création et du déploiement, y compris les ressources Azure que vous avez créées. Si vous manquez la notification, sélectionnez l’icône de cloche dans le coin inférieur droit pour la voir de nouveau.

    Créer une notification de fin

Exécuter la fonction dans Azure

  1. Dans la zone Azure : Fonctions de la barre latérale, développez votre abonnement, votre nouvelle application de fonction et Fonctions. Cliquez avec le bouton droit (Windows) ou faites Ctrl - clic (macOS) sur la fonction HttpExample, puis choisissez Exécuter la fonction maintenant... .

    Exécuter la fonction maintenant dans Azure à partir de Visual Studio Code

  2. Dans Entrer le corps de la demande figure la valeur { "name": "Azure" } pour le corps du message de la demande. Appuyez sur Entrée pour envoyer ce message de demande à votre fonction.

  3. Quand la fonction s’exécute dans Azure et retourne une réponse, une notification est générée dans Visual Studio Code.

Modifiez le code et redéployer vers Azure

  1. Dans la vue Explorer VSCode, sélectionnez le fichier ./HttpExample/index.js.

  2. Remplacez le fichier par le code suivant pour construire un objet JSON et le retourner.

    module.exports = async function (context, req) {
    
        try {
            context.log('JavaScript HTTP trigger function processed a request.');
    
            // Read incoming data
            const name = (req.query.name || (req.body && req.body.name));
            const sport = (req.query.sport || (req.body && req.body.sport));
    
            // fail if incoming data is required
            if (!name || !sport) {
    
                context.res = {
                    status: 400
                };
                return;
            }
    
            // Add or change code here
            const message = `${name} likes ${sport}`;
    
            // Construct response
            const responseJSON = {
                "name": name,
                "sport": sport,
                "message": message,
                "success": true
            }
    
            context.res = {
                // status: 200, /* Defaults to 200 */
                body: responseJSON,
                contentType: 'application/json'
            };
        } catch(err) {
            context.res = {
                status: 500
            };
        }
    }
    
  3. Exécuter à nouveau l’application de fonction localement.

  4. Dans l’invite Entrer le corps de la demande, remplacez le corps du message de la demande par {"name" : "Tom", "Sport" : "basketball"}. Appuyez sur Entrée pour envoyer ce message de requête à votre fonction.

  5. Affichez la réponse dans la notification :

    {
      "name": "Tom",
      "sport": "basketball",
      "message": "Tom likes basketball",
      "success": true
    }
    
  6. Déployer à nouveau la fonction sur Azure.

Dépannage

Utilisez la table ci-dessous pour résoudre les problèmes les plus courants rencontrés lors de l’utilisation de ce guide de démarrage rapide.

Problème Solution
Impossible de créer un projet de fonction local ? Assurez-vous que L’extension Azure Functions est installée.
Impossible d’exécuter la fonction localement ? Vérifiez que Azure Functions Core Tools sont installés.
Lors de l’exécution sur Windows, veillez à ce que l’interpréteur de commandes du terminal par défaut pour Visual Studio Code ne soit pas défini sur WSL Bash.
Impossible de déployer une fonction sur Azure ? Passez en revue la sortie et recherchez des informations d’erreur. L’icône en forme de cloche dans le coin inférieur droit est une autre façon d’afficher la sortie. Avez-vous publié dans une application de fonction existante ? Cette action remplace le contenu de cette application dans Azure.
Vous n’avez pas pu exécuter l’application de fonction basée sur le cloud ? N’oubliez pas d’utiliser la chaîne de requêtes pour y envoyer les paramètres.

Nettoyer les ressources

Quand vous passerez à l’étape suivante et ajouterez une liaison de file d’attente Stockage Azure à votre fonction, vous devrez conserver toutes vos ressources en place, car vous allez tirer parti de ce que vous avez déjà fait.

Sinon, vous pouvez utiliser les étapes suivantes pour supprimer l’application de fonction et ses ressources connexes afin d’éviter des coûts supplémentaires.

  1. Dans Visual Studio Code, sélectionnez l’icône Azure pour ouvrir l’explorateur Azure.
  2. Dans la section Groupes de ressources, recherchez votre groupe de ressources.
  3. Cliquez avec le bouton droit sur le groupe de ressources et sélectionnez Supprimer.

Pour en savoir plus sur les coûts de Functions, consultez Estimation des coûts d’un plan Consommation.

Étapes suivantes

Vous avez utilisé Visual Studio Code pour créer une application de fonction à l’aide d’une simple fonction déclenchée par HTTP. Dans le prochain article, vous allez développer cette fonction en vous connectant à Azure Cosmos DB ou à Stockage Azure. Pour en savoir plus sur la connexion à d’autres services Azure, consultez Ajouter des liaisons à une fonction existante dans Azure Functions. Pour en savoir plus sur la sécurité, consultez Sécurisation d’Azure Functions.