Développer une API de données à l’aide d’Azure Static Web Apps

  • 7 minutes

Les applications web statiques sont un concept de conception de sites web qui est devenu populaire. Elles reposent sur l’envoi d’un contenu directement au navigateur d’un utilisateur, et ne nécessitent l’exécution d’aucun code sur le serveur. Les applications web statiques se composent de code HTML et CSS. Elles incluent également souvent du code JavaScript, qui s’exécute côté client, et non côté serveur. Les développeurs web trouvent souvent que les applications web statiques :

  • Peuvent être développées rapidement avec des infrastructures telles que Bootstrap, Jekyll et AngularJS.
  • Sont simples à mettre à l’échelle, car aucun état ne change sur le serveur.
  • Favorisent la séparation entre le code de l’interface utilisateur et les fonctionnalités back-end.

Azure Static Web Apps est un service Azure, conçu pour simplifier l’écriture de code et le déploiement d’applications web statiques sur Azure à des fins de production. Azure Static Web Apps prend en charge le déploiement continu en effectuant le monitoring d’un dépôt de code dans GitHub ou Azure DevOps. Quand vous apportez un changement au code du site web, et que vous effectuez un envoi (push) de ce changement vers le référentiel, Azure Static Web Apps détecte le changement, puis génère et déploie automatiquement le nouveau site sur Azure. Votre changement devient immédiatement disponible pour les utilisateurs.

Diagramme montrant comment Azure Static Web Apps facilite le déploiement d’applications web statiques à partir de référentiels.

Dans la mesure où le générateur d’API de données (DAB) est conçu pour fonctionner de manière transparente avec Azure Static Web Apps, il est facile d’héberger vos API de base de données dans ce service. Il vous suffit d’utiliser le fichier config pour indiquer au générateur d’API de données (DAB) votre instance d’Azure Static Web Apps, et la déployer sur un référentiel. Azure Static Web Apps hébergera votre API, et les utilisateurs pourront commencer à appeler ses méthodes.

Créer une application web statique

Commencez par accéder au portail Azure et sélectionnez Créer une ressource. Dans la barre de recherche, entrez Static Web App. Lorsque la carte Static Web App s’affiche, sélectionnez-la, puis sélectionnez Créer.

Ensuite, choisissez votre abonnement et sélectionnez un groupe de ressources existant ou créez-en un. Dans la zone de texte Name , entrez un nom descriptif pour votre application. Vous devez sélectionner le type de plan. Pour les projets personnels, vous pouvez utiliser le plan gratuit , tandis que pour les applications de production, le plan Standard est recommandé.

Capture d’écran montrant comment compléter l’Assistant pour créer une application web statique dans le portail Azure.

Sous Détails du déploiement, spécifiez le type de référentiel qui contient votre application. Vous devez vous connecter à GitHub, ou sélectionner le référentiel et la branche appropriés dans Azure DevOps. Enfin, passez en revue vos paramètres en sélectionnant Vérifier + créer, puis sélectionnez Créer pour terminer le processus.

Créer un fichier de configuration pour le générateur d’API de données

Pour déployer votre API de base de données sur Azure Static Web Apps, vous devez créer correctement le fichier config du générateur d’API de données (DAB). Vous pouvez effectuer cette tâche avec deux outils en ligne de commande :

  • swa : Utilisez cette interface CLI pour initialiser un nouveau fichier config de générateur d’API de données (DAB).
  • dab : Utilisez cette interface CLI pour ajouter une ou plusieurs bases de données au fichier.

Avant de commencer, clonez le dépôt GitHub sur votre machine locale, ou utilisez GitHub Codespaces pour ouvrir une invite de commandes dans GitHub.

  1. Pour initialiser le fichier config du générateur d’API de données (DAB) dans le dossier racine du référentiel, exécutez la commande suivante.

    swa db init --database-type "<database-type>"

    Remplacez <database type> par votre serveur de base de données. Par exemple, si votre base de données est hébergée dans Azure SQL Database, utilisez mssql. Si elle se trouve dans MySQL, utilisez mysql.

  2. Pour ajouter une base de données au fichier config, exécutez la commande suivante.

    dab add "<database-name>" --source "<schema>.<table>" --permissions "anonymous:*" -config "swa-db-connections/staticwebapp.database.config.json"

    Remplacez <database-name> par un nom descriptif, et <schema>.<table> par le nom du schéma et de la table de votre base de données.

Ces étapes créent un fichier de configuration dans le référentiel nommé swa-db-connections/staticwebapp.database.config.json. Passez en revue ce fichier avant de commiter vos changements dans le référentiel.

Configurer la connexion à la base de données

Pour configurer la connexion à la base de données dans votre application web statique, commencez par ouvrir l’application web statique dans le portail Azure. Accédez à la section Paramètres et sélectionnez Connexion à la base de données. Sous Production, choisissez de lier une base de données existante. Sélectionnez le type de base de données, le groupe de ressources et le nom de base de données appropriés. Enfin, choisissez votre type d’authentification préféré, puis liez la base de données.

Remarque

Nous vous recommandons d’utiliser une identité managée affectée par le système ou une identité managée affectée par l’utilisateur pour l’authentification, car la chaîne de connexion n’inclut pas de clé d’autorisation.

Valider l’accès à l’API

Pour valider l’accès à l’API, commencez par ouvrir l’application web statique que vous avez créée dans le portail Azure. Accédez à la section Essentials et sélectionnez l’URL pour parcourir le site web. Dans la barre d’adresses du navigateur, ajoutez /data-api à l’URL et appuyez sur Entrée.

Vous devez voir une page indiquant que le conteneur du générateur d’API de données (DAB) est sain. Pour parcourir les entités de votre base de données, ajoutez /data-api/rest/ à l’URL. Cela entraîne l’envoi d’une requête HTTP GET, et l’affichage de la réponse JSON.