Ajouter une API dans Azure Static Web Apps (en préversion) avec Azure FunctionsAdd an API to Azure Static Web Apps Preview with Azure Functions

Vous pouvez ajouter des API serverless à Azure Static Web Apps via l’intégration à Azure Functions.You can add serverless APIs to Azure Static Web Apps via integration with Azure Functions. Cet article explique comment ajouter et déployer une API sur un site Azure Static Web Apps.This article demonstrates how to add and deploy an API to an Azure Static Web Apps site.

PrérequisPrerequisites

Créer un dépôt GitCreate a Git repository

Les étapes suivantes montrent comment créer un référentiel et cloner les fichiers sur votre ordinateur.The following steps demonstrate how to create a new repository and clone the files to your computer.

  1. Vérifiez que vous êtes connecté à GitHub et accédez à https://github.com/staticwebdev/vanilla-basic/generate pour créer un dépôt.Make sure you are logged in to GitHub and, navigate to https://github.com/staticwebdev/vanilla-basic/generate to create a new repository.

  2. Dans la zone Repository name (Nom du référentiel), entrez my-vanilla-api.In the Repository name box, enter my-vanilla-api.

  3. Cliquez sur Create repository from template (Créer un référentiel à partir du modèle).Click Create repository from template.

    Créer un référentiel à partir de vanilla-basic

Une fois votre projet créé, copiez l’URL dans votre navigateur pour le nouveau dépôt.Once your project is created, copy the URL in your browser for the new repository. Vous utilisez cette URL dans Visual Studio Code pour cloner le dépôt Git.You use this URL in Visual Studio Code to clone the Git repository.

  1. Appuyez sur F1 pour ouvrir la commande dans la palette de commandesPress F1 to open command in the Command Palette.

  2. Collez l’URL dans l’invite Git: Clone, puis appuyez sur Entrée.Paste the URL into the Git: Clone prompt, and press Enter.

    Cloner un projet GitHub à l’aide de Visual Studio Code

    Suivez les invites pour sélectionner un emplacement de dépôt auquel cloner le projet.Follow the prompts to select a repository location to clone the project.

Création de l’APICreate the API

Ensuite, vous créez un projet Azure Functions en tant qu’API de l’application.Next, you create an Azure Functions project as the application's API.

  1. Dans le projet my-vanilla-api, créez un sous-dossier nommé api.Inside the my-vanilla-api project, create a sub-folder named api.

  2. Appuyez sur F1 pour ouvrir la palette de commandesPress F1 to open the Command Palette

  3. Entrez Azure Functions : Create New Project... (Créer un projet...)Type Azure Functions: Create New Project...

  4. Appuyez sur EntréePress Enter

  5. Choisissez ParcourirChoose Browse

  6. Sélectionner le dossier api comme répertoire de votre espace de travail de projetSelect the api folder as the directory for your project workspace

  7. Choisissez Select (Sélectionner)Choose Select

    Capture d’écran montrant le dossier API et le bouton Sélectionner.

  8. Quand vous y êtes invité, indiquez les informations suivantes :Provide the following information at the prompts:

    • Sélectionnez un langage : Choisir JavaScriptSelect a language: Choose JavaScript
    • Sélectionner un modèle pour la première fonction de votre projet : Choisir HTTP trigger (Déclencheur HTTP)Select a template for your project's first function: Choose HTTP trigger
    • Fournir un nom de fonction : Entrez GetMessage.Provide a function name: Enter GetMessage
    • Niveau d’autorisation : Choisissez l’option Anonymous (Anonyme), qui permet à quiconque d’appeler le point de terminaison de votre fonction.Authorization level: Choose Anonymous, which enables anyone to call your function endpoint.

Visual Studio Code génère un projet Azure Functions avec un fonction déclenchée HTTP.Visual Studio Code generates an Azure Functions project with an HTTP triggered function.

Votre application a maintenant une structure de projet similaire à celle de l’exemple suivant.Your app now has a project structure similar to the following example.

├── api
│   ├── GetMessage
│   │   ├── function.json
│   │   ├── index.js
│   │   └── sample.dat
│   ├── host.json
│   ├── local.settings.json
│   ├── package.json
│   └── proxies.json
├── index.html
├── readme.md
└── styles.css

Ensuite, vous allez modifier la fonction GetMessage pour retourner un message au front-end.Next, you'll change the GetMessage function to return a message to the front-end.

  1. Mettez à jour la fonction GetMessage sous api/GetMessage/index.js avec le code suivant.Update the GetMessage function under api/GetMessage/index.js with the following code.

    module.exports = async function (context, req) {
      context.res = {
        body: {
          text: "Hello from the API"
        }
      };
    };
    
  2. Mettez à jour la configuration de GetMessage sous api/GetMessage/function.json avec les paramètres suivants.Update the GetMessage configuration under api/GetMessage/function.json with the following settings.

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

Avec les paramètres ci-dessus, le point de terminaison de l’API est :With the above settings, the API endpoint is:

  • Déclenché avec une requête HTTP adressée à la fonctionTriggered when an HTTP request is made to the function
  • Disponible pour toutes les requêtes, quel que soit l’état de l’authentificationAvailable to all requests regardless of authentication status
  • Exposé via l’itinéraire /api/messageExposed via the /api/message route

Exécuter l’API localementRun the API locally

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.Visual Studio Code integrates with Azure Functions Core Tools to let you run this project on your local development computer before you publish to Azure.

Conseil

Avant de poursuivre, vérifiez que vous avez toutes les ressources listées dans la section Prérequis installées.Make sure you have all the resources listed in the prerequisites section installed before proceeding.

  1. Exécutez la fonction en appuyant sur F5 pour démarrer l’application Functions.Run the function by pressing F5 to start the Functions app.

  2. Si Azure Functions Core Tools n’est pas encore installé, sélectionnez Installer à l’invite.If Azure Functions Core Tools isn't already installed, select Install at the prompt.

    Core Tools montre la sortie de l’application en cours d’exécution dans le panneau Terminal.The Core Tools shows output from the running application in the Terminal panel. Dans la sortie, vous pouvez voir le point de terminaison de l’URL de votre fonction déclenchée par HTTP en train de s’exécuter localement.As a part of the output, you can see the URL endpoint of your HTTP-triggered function running locally.

    Capture d’écran montrant l’onglet TERMINAL dans lequel vous pouvez voir l’URL.

  3. Avec Core Tools en cours d’exécution, accédez à l’URL suivante pour vérifier que l’API s’exécute correctement : http://localhost:7071/api/message.With Core Tools running, navigate to the following URL to verify the API is running correctly: http://localhost:7071/api/message.

    La réponse figurant dans le navigateur doit ressembler à l’exemple suivant :The response in the browser should look similar to the following example:

    Capture d’écran montrant une réponse texte dans un navigateur.

  4. Pour arrêter la session de débogage, appuyez sur Maj+F5.Press Shift + F5 to stop the debugging session.

Appeler l’API à partir de l’applicationCall the API from the application

Lors du déploiement sur Azure, les demandes envoyées à l’API sont automatiquement routées vers l’application Functions pour les demandes envoyées à la route api.When deployed to Azure, requests to the API are automatically routed to the Functions app for requests sent to the api route. Si vous travaillez en local, vous devez configurer les paramètres de l’application pour qu’ils proxysent les demandes adressées à l’API locale.Working locally, you have to configure the application settings to proxy requests to the local API.

Proxy localLocal proxy

Vous pouvez configurer un proxy pour l’extension Live Server Visual Studio Code qui achemine toutes les requêtes à /api vers le point de terminaison de l’API en cours d’exécution sur http://127.0.0.1:7071/api.You can configure a proxy for the Live Server Visual Studio Code extension that routes all requests to /api to the running API endpoint at http://127.0.0.1:7071/api.

  1. Ouvrez le fichier .vscode/settings.json.Open the .vscode/settings.json file.

  2. Ajoutez les paramètres suivants pour spécifier un proxy pour Live Server.Add the following settings to specify a proxy for Live Server.

    "liveServer.settings.proxy": {
       "enable": true,
       "baseUri": "/api",
       "proxyUri": "http://127.0.0.1:7071/api"
    }
    

    Cette configuration est à enregistrer de préférence dans le fichier de paramètres du projet, par opposition au fichier de paramètres utilisateur.This configuration is best saved in project settings file, as opposed to in the user settings file.

    Le fait d’utiliser les paramètres de projet garantit que le proxy n’est pas appliqué à tous les autres projets ouverts dans Visual Studio Code.Using project settings assures the proxy isn't applied to all other projects opened in Visual Studio Code.

Mettre à jour les fichiers HTML pour accéder à l’APIUpdate HTML files to access the API

  1. Ensuite, mettez à jour le contenu du fichier index.html à l’aide du code suivant pour extraire le texte de la fonction API et l’afficher à l’écran :Next, update the content of the index.html file with the following code to fetch the text from the API function and display it on the screen:

    <!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() {
          let { text } = await( await fetch(`/api/message`)).json();
          document.querySelector('#name').textContent = text;
        }())
      </script>
    </body>
    
    </html>
    
  2. Appuyez sur F5 pour démarrer le projet d’API.Press F5 to start the API project.

  3. Appuyez sur F1 et choisissez Live Server : Ouvrir avec Live Server.Press F1 and choose Live Server: Open with Live Server.

    Vous devez maintenant voir le message de l’API dans la page web.You should now see the API message in the web page.

    Capture d’écran montrant le message API dans un navigateur.

    Notes

    Vous pouvez utiliser d’autres serveurs ou proxys HTTP pour servir le fichier index.html.You can use other HTTP servers or proxies to serve the index.html file. L’accès au fichier index.html n’est pas possible à l’aide de file:///.Accessing the index.html from file:/// will not work.

  4. Appuyez sur Maj+F5 pour arrêter le projet d’API.Press Shift + F5 to stop the API project.

Valider et envoyer vos modifications à GitHubCommit and push your changes to GitHub

À l’aide de Visual Studio Code, validez et envoyez vos modifications dans le référentiel git distant.Using Visual Studio Code, commit and push your changes to the remote git repository.

  1. Appuyez sur F1 pour ouvrir la palette de commandesPress F1 to open the Command Palette
  2. Taper Git: Commit AllType Git: Commit All
  3. Ajoutez un message de validation et appuyez sur Entrée.Add a commit message and press Enter
  4. Appuyez sur F1.Press F1
  5. Tapez Git: push et appuyez sur Entrée.Type in Git: push and press Enter

Créer une application web statiqueCreate a static web app

  1. Accéder au portail AzureNavigate to the Azure portal
  2. Cliquez sur Create a Resource (Créer une ressource).Click Create a Resource
  3. Recherchez Static Web Apps.Search for Static Web App
  4. Cliquez sur Static Web Apps (préversion) .Click Static Web App (Preview)
  5. Cliquez sur CréerClick Create

Ensuite, ajoutez les paramètres propres à l’application.Next, add the app-specific settings.

  1. Sélectionnez votre abonnement Azure.Select your Azure subscription
  2. Sélectionner ou créer un groupe de ressourcesSelect or create a new Resource Group
  3. Nommez l’application my-vanilla-api.Name the app my-vanilla-api.
  4. Sélectionner la région la plus proche de vousSelect Region closest to you
  5. Sélectionner SKU gratuiteSelect the Free SKU
  6. Cliquer sur le bouton Sign-in with GitHub (Se connecter à GitHub) et authentifiez-vous auprès de GitHubClick the Sign-in with GitHub button and authenticate with GitHub
  7. Sélectionner votre Organisation préféréeSelect your preferred Organization
  8. Sélectionner my-vanilla-api dans la liste déroulante Repository (Référentiel)Select my-vanilla-api from the Repository drop-down
  9. Sélectionnez principale dans la liste déroulante Branche.Select main from the Branch drop-down
  10. Sélectionner l’infrastructure de votre choix pour la configuration de build dans la liste déroulante Présélections de buildSelect the framework of your choice for build configuration from the Build Presets drop-down

Ces champs reflètent la structure du projet par défaut du type d'application.These fields will reflect the app type's default project structure. Modifiez les valeurs en fonction de votre application.Change the values to suit your app.

Ensuite, ajoutez les détails de build suivants.Next, add the following build details.

  1. Entrez / dans App location (Emplacement de l’application).Enter / for the App location.

  2. Entrez api dans App location.Enter api in the Api location box.

  3. Désactivez la valeur par défaut de l’emplacement de l’artefact d’application en laissant la zone vide.Clear the default value out of the App artifact location, leaving the box empty.

  4. Cliquez sur Vérifier + créer.Click Review + create.

  5. Cliquez sur le bouton CréerClick the Create button

    Une fois que vous avez cliqué sur le bouton Créer, Azure effectue deux opérations.Once you click the Create button, Azure does two things. Tout d’abord, les services cloud sous-jacents sont créés pour prendre en charge l’application.First, the underlying cloud services are created to support the app. Ensuite, un processus en arrière-plan commence à créer et à déployer l’application.Next, a background process begins to build and deploy the application.

  6. Cliquez sur le bouton Accéder à la ressource pour accéder à la page Vue d’ensemble de l’application web.Click the Go to Resource button to take you to the web app's Overview page.

    Lorsque l’application est générée en arrière-plan, vous pouvez cliquer sur la bannière qui contient un lien pour afficher l’état de la build.As the app is being built in the background, you can click on the banner which contains a link to view the build status.

    Workflow GitHub

  7. Une fois le déploiement terminé, vous pouvez accéder à l’application web en cliquant sur le lien URL situé dans la page Vue d’ensemble.Once the deployment is complete, you can navigate to the web app, by clicking on the URL link shown on the Overview page.

    Accéder à l’URL de l’application statique à partir du Portail Azure

Nettoyer les ressourcesClean up resources

Si vous ne souhaitez pas conserver cette application pour une utilisation ultérieure, vous pouvez utiliser la procédure suivante pour supprimer l’application Azure Static Web App et ses ressources associées.If you don't want to keep this application for further use, you can use the following steps to delete the Azure Static Web App and its related resources.

  1. Accéder au portail AzureNavigate to the Azure portal
  2. Dans la barre de recherche supérieure, taper Groupes de ressourcesIn the top search bar, type Resource groups
  3. Cliquer sur Groupes de ressourcesClick Resource groups
  4. Sélectionner myResourceGroupSelect myResourceGroup
  5. Dans la page myResourceGroup, assurez-vous que les ressources répertoriées sont bien celles que vous souhaitez supprimer.On the myResourceGroup page, make sure that the listed resources are the ones you want to delete.
  6. Sélectionnez Supprimer.Select Delete
  7. Taper myResourceGroup dans la zone de texteType myResourceGroup in the text box
  8. Sélectionnez Supprimer.Select Delete.

Étapes suivantesNext steps