Ajouter une API dans Azure Static Web Apps avec Azure Functions

Vous pouvez ajouter des API serverless à Azure Static Web Apps avec Azure Functions. Cet article explique comment ajouter et déployer une API sur un site Azure Static Web Apps.

Remarque

Les fonctions fournies par défaut dans Static Web Apps sont préconfigurées pour fournir des points de terminaison d’API sécurisés et ne prennent en charge que les fonctions déclenchées par HTTP. Pour plus d’informations sur les différences avec les applications Azure Functions autonomes, consultez Prise en charge d’API avec Azure Functions.

Prérequis

• Compte Azure avec un abonnement actif.
  • Si vous ne possédez pas de compte, vous pouvez créer un compte gratuit.
• Visual Studio Code.
• Extension Azure Static Web Apps pour Visual Studio Code.
• Extension Azure Functions pour Visual Studio Code.
• Node.js v18 pour exécuter l’API et l’application front-end.

Conseil

Vous pouvez utiliser l’outil nvm pour gérer plusieurs versions de Node.js sur votre système de développement. Sur Windows, NVM pour Windows peut être installé via Winget.

Créer l’application web statique

Avant d’ajouter une API, créez et déployez une application front-end sur Azure Static Web Apps en suivant le guide de démarrage rapide Création de votre premier site statique avec Azure Static Web Apps.

Une fois que vous avez déployé une application front-end sur Azure Static Web Apps, clonez votre dépôt d’applications. Par exemple, vous pouvez cloner votre référentiel à l’aide de la ligne de commande git.

Avant d’exécuter la commande suivante, veillez à remplacer <YOUR_GITHUB_USERNAME> par votre nom d’utilisateur GitHub.

git clone https://github.com/<YOUR_GITHUB_USERNAME>/my-first-static-web-app

Dans Visual Studio Code, ouvrez la racine du référentiel de votre application. La structure de dossiers contient la source de votre application front-end et le flux de travail GitHub Static Web Apps dans le dossier .github/workflows.

├── .github
│   └── workflows
│       └── azure-static-web-apps-<DEFAULT_HOSTNAME>.yml
│
└── (folders and files from your static web app)

Création de l’API

Vous créez un projet Azure Functions pour l’API de votre application web statique. Par défaut, l’extension Visual Studio Code Static Web Apps crée le projet dans un dossier nommé api à la racine de votre référentiel.

1. Appuyez sur F1 pour ouvrir la palette de commandes.

2. Sélectionnez Azure Static Web Apps : créer une fonction HTTP.... Si vous êtes invité à installer l’extension Azure Functions, installez-la et réexécutez cette commande.

3. Quand vous y êtes invité, entrez les valeurs suivantes :

   Prompt	Valeur
   Sélectionner une langue	JavaScript
   Sélectionner un modèle de programmation	V4
   Fournir un nom de fonction	message

   Conseil

   Vous pouvez en savoir plus sur les différences entre les modèles de programmation dans le Guide du développeur Azure Functions

   Un projet Azure Functions est généré avec une fonction déclenchée par HTTP. Votre application a maintenant une structure de projet similaire à celle de l’exemple suivant.

   ├── .github
   │   └── workflows
   │       └── azure-static-web-apps-<DEFAULT_HOSTNAME>.yml
   │
   ├── api
   ├── └──src
   │   │  │ functions
   │   │  │  └── message.js
   │   │  └── index.js
   │   ├── .funcignore
   │   ├── host.json
   │   ├── local.settings.json
   │   ├── package-lock.json
   │   └── package.json
   │
   └── (...plus other folders and files from your static web app)
   

4. Ensuite, modifiez la fonction message pour retourner un message au front-end. Mettez à jour la fonction dans src/functions/message.js avec le code suivant.

   const { app } = require('@azure/functions');
   
   app.http('message', {
       methods: ['GET', 'POST'],
       authLevel: 'anonymous',
       handler: async (request, context) => {
           return { body: `Hello, from the API!` };
       }
   });
   

Conseil

Vous pouvez ajouter d’autres fonctions d’API en exécutant à nouveau la commande Azure Static Web Apps : créer une fonction HTTP....

Mettre à jour l’application front-end pour appeler l’API

Mettez à jour votre application front-end pour appeler l’API dans /api/message et afficher le message de réponse.

Si vous avez utilisé les guides de démarrage rapide pour créer l’application, suivez les instructions ci-dessous pour appliquer les mises à jour.

Pas de framework

Mettez à jour le contenu du fichier src/index.html à l’aide du code suivant pour récupérer le texte de la fonction API et l’afficher à l’écran.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Vanilla JavaScript App</title>
</head>

<body>
    <main>
    <h1>Vanilla JavaScript App</h1>
    <p>Loading content from the API: <b id="name">...</b></p>
    </main>

    <script>
    (async function() {
        const { text } = await( await fetch(`/api/message`)).json();
        document.querySelector('#name').textContent = text;
    }());
    </script>
</body>

</html>

Angular

1. Mettez à jour le contenu de src/app/app.module.ts avec le code suivant pour activer HttpClient dans votre application.

   import { BrowserModule } from "@angular/platform-browser";
   import { NgModule } from "@angular/core";
   import { HttpClientModule } from '@angular/common/http';
   
   import { AppComponent } from "./app.component";
   
   @NgModule({
     declarations: [AppComponent],
     imports: [BrowserModule, HttpClientModule],
     bootstrap: [AppComponent]
   })
   export class AppModule {}
   

2. Mettez à jour le contenu de src/app/app.component.ts à l’aide du code suivant pour extraire le texte de la fonction API et l’afficher à l’écran.

   import { HttpClient } from '@angular/common/http';
   import { Component } from '@angular/core';
   
   @Component({
     selector: 'app-root',
     template: `<div>{{message}}</div>`,
   })
   export class AppComponent {
     message = '';
   
     constructor(private http: HttpClient) {
       this.http.get('/api/message')
         .subscribe((resp: any) => this.message = resp.text);
     }
   }
   

React

Mettez à jour le contenu de src/App.js à l’aide du code suivant pour extraire le texte de la fonction API et l’afficher à l’écran.

import React, { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState('');

  useEffect(() => {
    (async function () {
      const { text } = await( await fetch(`/api/message`)).json();
      setData(text);
    })();
  });

  return <div>{data}</div>;
}

export default App;

Vue

Mettez à jour le contenu de src/App.vue à l’aide du code suivant pour extraire le texte de la fonction API et l’afficher à l’écran.

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      message: ""
    };
  },
  async mounted() {
    const { text } = await (await fetch("/api/message")).json();
    this.message = text;
  }
};
</script>

Exécuter le front-end et l’API localement

Pour exécuter votre application front-end et votre API ensemble localement, Azure Static Web Apps fournit une interface CLI qui émule l’environnement cloud. L’interface CLI utilise Azure Functions Core Tools pour exécuter l’API.

Installer des outils en ligne de commande

Vérifiez que vous avez installé les outils en ligne de commande nécessaires.

npm install -g @azure/static-web-apps-cli

Conseil

Si vous ne souhaitez pas installer la ligne de commande swa globalement, vous pouvez utiliser npx swa au lieu de swa dans les instructions suivantes.

Générer une application front-end

Si votre application utilise un framework, créez l’application pour générer la sortie avant d’exécuter l’interface CLI Static Web Apps.

Pas de framework

Il n’est pas nécessaire de générer l’application.

Angular

Installez les dépendances npm et générez l’application dans le dossier dist/angular-basic.

npm install
npm run build --prod

React

Installez les dépendances npm et générez l’application dans le dossier build.

npm install
npm run build

Vue

Installez les dépendances npm et générez l’application dans le dossier dist.

npm install
npm run build

Exécuter localement l’application

Exécutez l’application front-end et l’API ensemble en démarrant l’application avec l’interface CLI Static Web Apps. L’exécution des deux parties de votre application permet à l’interface CLI de servir la sortie de génération de votre front-end à partir d’un dossier, et rend l’API accessible à l’application en cours d’exécution.

1. À la racine de votre référentiel, démarrez l’interface CLI Static Web Apps à l’aide de la commande start. Ajustez les arguments si votre application a une structure de dossiers différente.

   Pas de framework

   Transmettez le dossier actif (src) et le dossier d’API (api) à l’interface CLI.

   swa start src --api-location api
   

   Angular

   Transmettez le dossier de sortie de génération (dist/angular-basic) et le dossier d’API (api) à l’interface CLI.

   swa start dist/angular-basic --api-location api
   

   React

   Transmettez le dossier de sortie de génération (build) et le dossier d’API (api) à l’interface CLI.

   swa start build --api-location api
   

   Vue

   Transmettez le dossier de sortie de génération (dist) et le dossier d’API (api) à l’interface CLI.

   swa start dist --api-location api
   

2. Le Pare-feu Windows peut vous demander d’autoriser le runtime d’Azure Functions à accéder à Internet. Sélectionnez Autoriser.

3. Quand les processus de la CLI démarrent, accédez à votre application à l’adresse http://localhost:4280/. Notez que la page appelle l’API et affiche sa sortie, Hello from the API.

4. Pour arrêter l’interface CLI, tapez Ctrl + C.

Ajouter l’emplacement de l’API au flux de travail

Avant de pouvoir déployer votre application sur Azure, mettez à jour le flux de travail GitHub Actions de votre référentiel avec l’emplacement correct de votre dossier d’API.

1. Ouvrez votre flux de travail à l’adresse .github/workflows/azure-static-web-apps-<DEFAULT-HOSTNAME>.yml.

2. Recherchez la propriété api_location et définissez la valeur sur api.

   ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
   # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
   app_location: "src" # App source code path
   api_location: "api" # Api source code path - optional
   output_location: "" # Built app content directory - optional
   ###### End of Repository/Build Configurations ######
   

   Remarque : les valeurs ci-dessus pour api_location, app_location et output_location correspondent à une configuration sans infrastructure. Ces valeurs changent en fonction de votre infrastructure.

3. Enregistrez le fichier.

Déployer les modifications

Pour publier les modifications apportées à votre application web statique dans Azure, validez et envoyez votre code au référentiel GitHub à distance.

1. Appuyez sur F1 pour ouvrir la palette de commandes.

2. Sélectionnez la commande Git: Commit All.

3. Lorsque vous êtes invité à entrer un message de validation, entrez feat: add API et validez toutes les modifications apportées à votre référentiel Git local.

4. Appuyez sur F1 pour ouvrir la palette de commandes.

5. Sélectionnez la commande Git: push.

   Vos modifications sont envoyées (push) vers le référentiel à distance dans GitHub, déclenchant le flux de travail GitHub Actions Static Web Apps pour générer et déployer votre application.

6. Ouvrez votre référentiel dans GitHub pour superviser l’état d’exécution de votre flux de travail.

7. Une fois l’exécution du flux de travail terminée, visitez votre application web statique pour examiner vos modifications.

Étapes suivantes

Configurer les paramètres d’application