Ajouter une API dans Azure Static Web Apps avec Azure Functions

Article
06/01/2023

Vous pouvez ajouter des API serverless à Azure Static Web Apps qui sont alimentées par 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 pour exécuter l’API et l’application front-end

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. Utilisez une application existante que vous avez déjà déployée, ou créez-en une en suivant le guide de démarrage rapide Créer votre premier site statique avec Azure Static Web Apps.

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.

Appuyez sur F1 pour ouvrir la palette de commandes.
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.
Quand vous y êtes invité, entrez les valeurs suivantes :

Prompt Valeur

Sélectionner une langue JavaScript

Sélectionner un modèle de programmation V3

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
│   ├── message
│   │   ├── function.json
│   │   └── index.js
│   ├── host.json
│   ├── local.settings.json
│   └── package.json
│
└── (folders and files from your static web app)
```
Ensuite, modifiez la fonction message pour retourner un message au front-end. Mettez à jour la fonction dans api/message/index.js avec le code suivant.
```
module.exports = async function (context, req) {
    context.res.json({
        text: "Hello from the API"
    });
};
```

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

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.

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>

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 {}

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);
  }
}

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;

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 -D @azure/static-web-apps-cli

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.

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

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

npm install
npm run build --prod

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

npm install
npm run build

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

npm install
npm run build

Démarrer l’interface de ligne de commande

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.

À 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
- Angular
- React
- Vue
Transmettez le dossier actif (src) et le dossier d’API (api) à l’interface CLI.
```
swa start src --api-location api
```
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
```
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
```
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
```
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.
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.

Ouvrez votre flux de travail à l’adresse .github/workflows/azure-static-web-apps-<DEFAULT-HOSTNAME>.yml.
Recherchez la propriété api_location et définissez la valeur sur api.
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.

Appuyez sur F1 pour ouvrir la palette de commandes.
Sélectionnez la commande Git: Commit All.
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.
Appuyez sur F1 pour ouvrir la palette de commandes.
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.
Ouvrez votre référentiel dans GitHub pour superviser l’état d’exécution de votre flux de travail.
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