Exercice – Créer un projet Azure Functions - Training

6 minutes

Votre application web de liste d’achats a besoin d’une API. Dans cet exercice, vous générez et exécutez votre API à l'aide d'un projet Azure Functions. À partir de là, vous étendez l’API avec une nouvelle fonction en utilisant l’extension Azure Functions pour Visual Studio Code.

Dans cet exercice, vous effectuez les étapes suivantes :

Créer une branche lorsque vous vous préparez à apporter des modifications à votre application web.
Explorer le projet Azure Functions.
Créer la fonction HTTP GET.
Remplacer le code de démarrage de la fonction par une logique visant à obtenir les produits.
Configurer l’application web pour proxyser les requêtes HTTP à l’API.
Exécuter l’API et l’application web.

Obtenir l’application de fonction

À présent, ajoutez une API et connectez-la à votre application front-end. Le dossier api-starter contient un projet Azure Functions incomplet. Nous allons à présent le terminer.

Créer une branche API

Avant d’apporter des modifications à une application, une bonne pratique consiste à créer une nouvelle branche pour ces modifications. Vous êtes sur le point de compléter l’API pour votre application et il est donc judicieux de créer une branche.

Dans Visual Studio Code, ouvrez la palette de commandes en appuyant sur F1.
Entrez et sélectionnez Git: Checkout to....
Sélectionnez Créer une branche.
Entrez api comme nom de la nouvelle branche et appuyez sur Entrée.

Vous venez de créer la branche git api.

Compléter l’API Azure Functions

Pour compléter cette API, commencez par déplacer le code de démarrage de l’API vers un dossier nommé api. Vous avez entré le nom de ce dossier pour api_location à la création de l’instance Static Web Apps.

Dans Visual Studio Code, ouvrez la palette de commandes en appuyant sur F1.
Entrez et sélectionnez Terminal : créer un nouveau terminal (dans l’espace de travail actif).
Vérifiez que vous êtes dans le dossier racine du projet.
Exécutez la commande Git suivante pour renommer le dossier api-starter en api.
```
git mv api-starter api
```
Ouvrez la palette de commandes en appuyant sur F1.
Entrez et sélectionnez Git: Commit All.
Entrez le message de validation api et appuyez sur Entrée.

Un dossier api s’affiche à présent dans l’explorateur Visual Studio Code. Le dossier api contient votre projet Azure Functions, ainsi que trois fonctions.

Dossier et fichier	Méthode	Route
api/products-post	POST	`products`
api/products-put	PUT	`products/:id`
api/products-delete	DELETE	`products/:id`

Créer la fonction HTTP GET

Votre API a des routes pour la manipulation des produits pour la liste d’achats, mais il manque une route pour l’obtention des produits. Ajoutons-le à présent.

Installer l’extension Azure Functions pour Visual Studio Code

Vous pouvez créer et gérer des applications Azure Functions au moyen de l’extension Azure Functions pour Visual Studio Code.

Accédez à Visual Studio Marketplace et installez l’extension Azure Functions pour Visual Studio Code.
Quand l’onglet de l’extension se charge dans Visual Studio Code, sélectionnez Installer.
Une fois l’installation terminée,sélectionnez Recharger.

Remarque

Assurez-vous d’installer Azure Functions Core Tools pour pouvoir exécuter Azure Functions localement.

Création de la fonction

Étendez à présent votre application Azure Functions avec une fonction permettant d’obtenir vos produits.

Dans Visual Studio Code, ouvrez la palette de commandes en appuyant sur F1.
Entrez et sélectionnez Azure Functions: Créer une fonction.
Quand vous êtes invité à créer une fonction, sélectionnez Déclencheur HTTP.
Entrez products-get comme nom de la fonction.
Sélectionnez Anonyme comme niveau d’authentification.

Notes

L’application Functions se trouve dans le dossier api, qui la sépare des projets d’applications web individuels. Toutes les applications web utilisant les frameworks front-end effectuent des appels à la même API. Vous pouvez décider de la façon de structurer vos applications, mais pour cet exemple, il est préférable de les voir séparées.

Configurer la méthode HTTP et le point de terminaison de route

Notez que le dossier api/products-get contient le fichier function.json. Ce fichier contient la configuration de votre fonction.

Par convention, le point de terminaison de route a le même nom que le dossier qui contient la fonction. Comme la fonction est créée dans le dossier products-get, le point de terminaison de route est généré par défaut avec le nom products-get. Toutefois, vous souhaitez que le point de terminaison soit products.

Configurez votre fonction :

Ouvrez le fichier api/products-get/function.json.
Notez que les méthodes permettent d’utiliser GET et POST.
Changez le tableau des méthodes pour autoriser seulement les requêtes GET.
Ajoutez une entrée "route": "products" après le tableau de méthodes.

À présent, votre fonction est déclenchée sur une requête HTTP GET à products. Votre fichier function.json doit ressembler au code suivant :

{
  "bindings": [
    {
      "authLevel": "anonymous",
      "type": "httpTrigger",
      "direction": "in",
      "name": "req",
      "methods": ["get"],
      "route": "products"
    },
    {
      "type": "http",
      "direction": "out",
      "name": "res"
    }
  ]
}

Mise à jour de la logique de la fonction

Le fichier index.js dans le dossier api/products-get contient une logique qui s’exécute lorsque vous adressez une requête HTTP à la route.

Vous devez mettre à jour la logique pour obtenir vos produits. Il existe une logique d’accès aux données dans le module JavaScript /shared/product-data.js. Le module product-data expose une fonction getProducts pour obtenir les produits pour la liste d’achats.

À présent, modifiez le point de terminaison de fonction pour retourner les produits :

Ouvrez le fichier api/products-get/index.js.

Remplacez le contenu par le code suivant :

const data = require('../shared/product-data');

module.exports = async function (context, req) {
  try {
    const products = data.getProducts();
    context.res.status(200).json(products);
  } catch (error) {
    context.res.status(500).send(error);
  }
};

Votre fonction obtient les produits et les retourne avec le code d’état 200, en cas de réussite.

Pas besoin à vous soucier du partage CORS lorsque vous publiez dans Azure Static Web Apps. Azure Static Web Apps configure automatiquement votre application afin qu’elle puisse communiquer avec votre API sur Azure à l’aide d’un proxy inverse. Toutefois, en cas d’exécution locale, vous devez configurer le partage CORS afin de permettre à votre application web et à l’API de communiquer.

À présent, indiquez à Azure Functions d’autoriser votre application web à adresser des requêtes HTTP à l’API, sur votre ordinateur.

Créez un fichier nommé api/local.settings.json.

Ajoutez le contenu suivant au fichier :

{
  "Host": {
    "CORS": "http://localhost:4200"
  }
}

{
  "Host": {
    "CORS": "http://localhost:3000"
  }
}

{
  "Host": {
    "CORS": "http://localhost:5000"
  }
}

{
  "Host": {
    "CORS": "http://localhost:8080"
  }
}

Notes

Le fichier local.settings.json est listé dans le fichier .gitignore, ce qui empêche l’envoi (push) de ce fichier vers GitHub. Cela est dû au fait que vous pouvez stocker des secrets dans ce fichier que vous ne souhaitez pas envoyer à GitHub. C’est la raison pour laquelle vous avez dû créer le fichier lorsque vous avez créé votre dépôt à partir du modèle.

Exécuter l’API

À présent, il est temps de voir votre application web et le projet Azure Functions fonctionner ensemble. Commencez par exécuter localement votre projet Azure Functions en procédant comme suit :

Remarque

Assurez-vous d’installer Azure Functions Core Tools pour pouvoir exécuter Azure Functions localement.

Ouvrez un terminal git et accédez au dossier api :
```
cd api
```
Exécutez l’application Azure Functions localement :
```
npm install
```
```
npm start
```

Exécuter l’application web

Votre API est en cours d’exécution. Vous devez maintenant configurer votre application front-end pour adresser sa requête HTTP à votre API. L’application front-end s’exécute sur un port et l’API s’exécute sur un autre port (7071). Chaque framework front-end peut être configuré pour proxyser les requêtes HTTP vers un port en toute sécurité.

Configurer votre port de proxy

Configurez le proxy pour votre application front-end en procédant comme suit :

Ouvrez le fichier angular-app/proxy.conf.json.
Localisez le paramètre target: 'http://localhost:7071'.
Notez que le port de la cible pointe vers 7071.

Ouvrez le fichier react-app/package.json.
Localisez le paramètre "proxy": "http://localhost:7071/",.
Notez que le port du proxy pointe vers 7071.

Ouvrez le fichier svelte-app/rollup.config.js.
Localisez la ligne de code const api = 'http://localhost:7071/api';.
Remarquez que le port de l’API pointe vers 7071.

Ouvrez le fichier vue-app/vue.config.js.
Localisez le paramètre target: 'http://localhost:7071',.
Notez que le port de la cible pointe vers 7071.

Exécuter votre application web front-end

Votre API est déjà en cours d’exécution sur le port 7071. À présent, quand vous exécutez votre application Web, elle adresse ses requêtes HTTP à votre API. Exécutez votre application web en procédant comme suit :

Ouvrez une deuxième instance de terminal git.
Entrez ensuite cette commande pour accéder au dossier de votre infrastructure front-end préféré :
```
cd angular-app
```
```
cd react-app
```
```
cd svelte-app
```
```
cd vue-app
```

Exécutez l’application cliente front-end :

npm start

npm start

npm run dev

npm run serve

Naviguer jusqu’à votre application

Il est temps de voir votre application s’exécuter localement avec l’API Azure Functions.

Accédez à http://localhost:4200.

Accédez à http://localhost:3000.

Accédez à http://localhost:5000.

Accédez à http://localhost:8080.

Vous avez généré votre application et celle-ci s’exécute maintenant localement en adressant des requêtes HTTP GET à votre API. À présent, arrêtez votre application en cours d’exécution et votre API en appuyant sur Ctrl-C dans les terminaux.

Étapes suivantes

Votre application fonctionne localement et l’étape suivante consiste à publier l’application avec l’API.

Continuer

Exercice – Créer un projet Azure Functions