Exercice – Créer un projet Azure Functions

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 à l’aide de 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.
Explorez le projet fonction Azure.
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 frontale. Le dossier api-starter inclut un projet Azure Functions incomplet. Alors, nous allons terminer ça maintenant.

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 terminer l’API pour votre application. 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 : Basculement sur une branche....
Sélectionnez Créer une branche.
Entrez l’API pour le nouveau nom de branche, puis appuyez sur Entrée.

Vous venez de créer la branche git api.

Compléter l’API Azure Functions

Pour terminer l’API, commencez par déplacer le code de l’API de démarrage vers un dossier nommé API. Vous avez entré ce nom de dossier pour le api_location lors de 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 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 : Valider tout.
Entrez le message de validation api et appuyez sur Entrée.

À présent, vous voyez un dossier d’API dans l’Explorateur Visual Studio Code. Le dossier api contient votre projet Azure Functions, ainsi que trois fonctions.

Dossier et fichier	Méthode	Itinéraire
api/products-post	PUBLIER	`products`
api/products-put	PUT	`products/:id`
api/products-delete	Supprimer	`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 cela maintenant.

Installer l’extension Azure Functions pour Visual Studio Code

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

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

Remarque

Veillez à installer Azure Functions Core Tools, ce qui vous permet d’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.
Lorsque 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.

Remarque

L’application Functions se trouve dans le dossier api , qui le sépare des projets d’application web individuels. Toutes les applications web utilisant les frameworks frontaux effectuent des appels à la même API. Vous pouvez décider comment structurer votre application, mais pour cet exemple, il permet de les voir séparés.

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

Notez que l’API/products-get du dossier 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. Étant donné que la fonction est créée dans le dossier products-get , le point de terminaison de routage est généré en tant que products-get, par défaut. Toutefois, vous souhaitez que l'endpoint soit produits.

Configurez votre fonction :

Ouvrez le fichier api/products-get/function.json.
Notez que les méthodes autorisent à la fois GET et POST.
Modifiez le tableau de méthodes pour autoriser uniquement les GET requêtes.
Ajoutez une "route": "products" entrée après le tableau de méthodes.

Votre fonction est maintenant déclenchée sur une requête HTTP GET adressée aux produits. Votre 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"
    }
  ]
}

Mettre à jour la logique de fonction

Le fichier index.js dans le dossier API/products-get contient une logique qui s’exécute lorsque vous effectuez une requête HTTP vers l’itinéraire.

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 product-data module expose une fonction getProducts pour obtenir les produits de 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 un code d’état 200, en cas de réussite.

Vous n’avez pas à vous soucier de CORS lorsque vous publiez sur 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. Vous devez configurer CORS pour permettre à votre application web et à l'API de communiquer lors de l'exécution locale.

À présent, indiquez à Azure Functions d’autoriser votre application web à effectuer 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"
  }
}

Remarque

Le fichier local.settings.json est répertorié 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

Il est maintenant temps de regarder votre application web et votre projet Azure Functions travailler ensemble. Commencez par exécuter votre projet Azure Functions localement en procédant comme suit :

Remarque

Veillez à installer Azure Functions Core Tools, ce qui vous permet d’exécuter Azure Functions localement.

Ouvrez un terminal Git et accédez au dossier d’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 frontale pour effectuer sa requête HTTP à votre API. L’application frontale s’exécute sur un port et l’API s’exécute sur un autre port (7071). Chaque infrastructure frontale peut être configurée pour proxyr des requêtes HTTP vers un port en toute sécurité.

Configurer votre port proxy

Configurez le proxy pour votre application frontale 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.
Recherchez la ligne de code const api = 'http://localhost:7071/api';.
Notez 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 frontale

Votre API s’exécute déjà sur le port 7071. À présent, lorsque vous exécutez votre application web, elle envoie ses requêtes HTTP à votre API. Exécutez votre application web en procédant comme suit :

Ouvrez une deuxième instance de terminal Git.
Ensuite, entrez cette commande pour accéder au dossier de votre infrastructure frontale préférée :
```
cd angular-app
```
```
cd react-app
```
```
cd svelte-app
```
```
cd vue-app
```

Exécutez l’application cliente frontale :

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 et votre API en cours d’exécution en appuyant sur Ctrl-C dans les terminaux.

Étapes suivantes

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

Exercice – Créer un projet Azure Functions

Obtenir l’application de fonction

Créer une branche API

Compléter l’API Azure Functions

Créer la fonction HTTP GET

Installer l’extension Azure Functions pour Visual Studio Code

Création de la fonction

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

Mettre à jour la logique de fonction

Configurer le partage de ressources entre origines (CORS) localement

Exécuter l’API

Exécuter l’application web

Configurer votre port proxy

Exécuter votre application web frontale

Naviguer jusqu’à votre application

Étapes suivantes

Commentaires