Tutoriel : Ajouter une connexion de base de données MySQL dans Azure Static Web Apps (préversion)

Dans ce tutoriel, vous allez apprendre à connecter une base de données serveur flexible Azure Database pour MySQL à votre application web statique. Une fois configuré, vous pouvez effectuer des requêtes REST ou GraphQL au point de terminaison intégré /data-api pour manipuler des données sans avoir à écrire de code principal.

Par souci de simplicité, ce didacticiel vous montre comment utiliser une base de données Azure à des fins de développement local, mais vous pouvez également utiliser un serveur de base de données local pour vos besoins de développement local.

Note

Ce tutoriel montre comment utiliser le serveur flexible Azure Database pour MySQL. Si vous souhaitez utiliser une autre base de données, reportez-vous aux didacticiels Azure Cosmos DB, Azure SQL ou PostgreSQL .

Navigateur web affichant les résultats de MySQL dans la fenêtre de la console outils de développement.

Ce didacticiel vous apprend à effectuer les opérations suivantes :

Lier une base de données Azure Database pour MySQL à votre application web statique
Créer, lire, mettre à jour et supprimer des données

Prerequisites

Pour suivre ce tutoriel, vous devez disposer d’une base de données Azure Database pour MySQL existante et d’une application web statique. En outre, vous devez installer Visual Studio Code.

Resource	Descriptif
Serveur flexible Azure Database pour MySQL	Si vous devez créer une base de données, suivez les étapes décrites dans le guide de création d’un serveur flexible Azure Database pour MySQL . Si vous envisagez d’utiliser une authentification de chaîne de connexion pour votre application web, veillez à créer votre base de données avec l’authentification MySQL. Vous pouvez modifier ce paramètre ultérieurement si vous souhaitez utiliser l’identité managée ultérieurement.
Application web statique existante	Si vous n’en avez pas encore, suivez les étapes décrites dans le guide de prise en main pour créer une application web statique No Framework .
Visual Studio Code, avec l’extension MySQL Shell	Si Visual Studio Code n’est pas déjà installé, suivez le guide pour installer Visual Studio Code, avec l’extension MySQL Shell. Vous pouvez également utiliser n’importe quel autre outil pour interroger votre base de données MySQL, comme MySQL Workbench.

Commencez par configurer votre base de données pour qu’elle fonctionne avec la fonctionnalité de connexion à la base de données Azure Static Web Apps.

Configurer la connectivité de base de données

Azure Static Web Apps doit disposer d’un accès réseau à votre base de données pour que les connexions de base de données fonctionnent. En outre, pour utiliser une base de données Azure pour le développement local, vous devez configurer votre base de données pour autoriser les demandes de votre propre adresse IP.

Accédez à votre serveur flexible Azure Database pour MySQL dans le portail Azure.
Dans la section Paramètres, sélectionnez Mise en réseau.
Dans la section Règles de pare-feu , sélectionnez le bouton Ajouter votre adresse IP du client actuel . Cette étape garantit que vous pouvez utiliser cette base de données pour votre développement local.
Dans la section Règles de pare-feu , cochez la case Autoriser l’accès public à partir de n’importe quel service Azure dans Azure vers ce serveur . Cette étape garantit que votre ressource Static Web Apps déployée peut accéder à votre base de données.
Cliquez sur Enregistrer.

Obtenir la chaîne de connexion de base de données pour le développement local

Pour utiliser votre base de données Azure pour le développement local, vous devez récupérer la chaîne de connexion de votre base de données. Vous pouvez ignorer cette étape si vous envisagez d’utiliser une base de données locale à des fins de développement.

Accédez à votre serveur flexible Azure Database pour MySQL dans le portail Azure.
Dans la section Paramètres , sélectionnez Se connecter.
Dans la section Se connecter à partir de votre application , sélectionnez la chaîne de connexion ADO.NET et mettez-la de côté dans un éditeur de texte.
Remplacez le symbole {your_password} dans la chaîne de connexion par votre mot de passe.
Remplacez l’espace {your_database} réservé par le nom MyTestPersonDatabasede la base de données . Vous allez créer MyTestPersonDatabase dans les étapes à venir.
Supprimez sslMode et les sections SslCa de la chaîne de connexion, car elles nécessitent des étapes supplémentaires et sont destinées à des fins de production.

Créer des exemples de données

Créez un exemple de table et remplissez-la avec des données d'exemple pour qu'elle corresponde au didacticiel. Ici, vous pouvez utiliser Visual Studio Code, mais vous pouvez utiliser MySQL Workbench ou tout autre outil.

Dans Visual Studio Code avec l’extension MySQL Shell, créez une connexion à votre serveur flexible Azure MySQL.
Cliquez avec le bouton droit sur votre serveur et créez une base de données. Entrez MyTestPersonDatabase comme nom de la base de données, puis sélectionnez le jeu de caractères utf8mb4 et le classement utf8mb4_0900_ai_ci.
Cliquez avec le bouton droit sur votre serveur, puis sélectionnez Actualiser.
Cliquez avec le bouton droit sur votre MyTestPersonDatabase base de données et sélectionnez Nouvelle requête. Exécutez le script suivant pour créer une table nommée MyTestPersonTable.
```
CREATE TABLE MyTestPersonTable (
    Id INT AUTO_INCREMENT NOT NULL,
    Name VARCHAR(25) NULL,
    PRIMARY KEY (Id)
);
```

Exécutez le script suivant pour ajouter des données dans la MyTestPersonTable table.

INSERT INTO MyTestPersonTable (Name)
VALUES ('Sunny');

INSERT INTO MyTestPersonTable (Name)
VALUES ('Dheeraj');

Cliquez avec le bouton droit sur votre MyTestPersonTable table, puis sélectionnez Sélectionner le top 1000 pour vérifier qu’il existe des données dans votre base de données.

Configurer l’application web statique

Le reste de ce tutoriel se concentre sur la modification du code source de votre application web statique pour utiliser les connexions de base de données localement.

Important

Les étapes suivantes supposent que vous travaillez avec l’application web statique créée dans le guide de prise en main. Si vous utilisez un autre projet, veillez à ajuster les commandes git suivantes pour qu’elles correspondent à vos noms de branche.

Basculez vers la branche main.
- Bash
- PowerShell
```
git checkout main
```
```
git checkout main
```
Synchronisez votre version locale avec ce qui se trouve sur GitHub à l’aide git pullde .
- Bash
- PowerShell
```
git pull origin main
```
```
git pull origin main
```

Créer le fichier de configuration de base de données

Ensuite, créez le fichier de configuration que votre application web statique utilise pour interagir avec la base de données.

Ouvrez votre terminal et créez une variable pour contenir votre chaîne de connexion. La syntaxe spécifique peut varier en fonction du type d’interpréteur de commandes que vous utilisez.
- Bash
- PowerShell
```
export DATABASE_CONNECTION_STRING='<YOUR_CONNECTION_STRING>'
```
```
$env:DATABASE_CONNECTION_STRING='<YOUR_CONNECTION_STRING>'
```
Veillez à remplacer <YOUR_CONNECTION_STRING> par la valeur de chaîne de connexions que vous avez mise de côté dans un éditeur de texte.
Utilisez npm pour installer ou mettre à jour l’interface CLI Static Web Apps. Sélectionnez la commande la mieux adaptée à votre situation.

Pour installer, utilisez npm install.
- Bash
- PowerShell
```
npm install -g @azure/static-web-apps-cli
```
```
npm install -g @azure/static-web-apps-cli
```
Pour mettre à jour, utilisez npm update.
- Bash
- PowerShell
```
npm update
```
```
npm update
```
Utilisez la swa db init commande pour générer un fichier de configuration de base de données.
- Bash
- PowerShell
```
swa db init --database-type mysql
```
```
swa db init --database-type mysql
```
La init commande crée le fichier staticwebapp.database.config.json dans le dossier swa-db-connections .
Collez cet exemple dans le fichier staticwebapp.database.config.json que vous avez généré.

{
  "$schema": "https://github.com/Azure/data-api-builder/releases/latest/download/dab.draft.schema.json",
  "data-source": {
    "database-type": "mysql",
    "options": {
      "set-session-context": false 
    },
    "connection-string": "@env('DATABASE_CONNECTION_STRING')"
  },
  "runtime": {
    "rest": {
      "enabled": true,
      "path": "/rest"
    },
    "graphql": {
      "allow-introspection": true,
      "enabled": true,
      "path": "/graphql"
    },
    "host": {
      "mode": "production",
      "cors": {
        "origins": ["http://localhost:4280"],
        "allow-credentials": false
      },
      "authentication": {
        "provider": "StaticWebApps"
      }
    }
  },
  "entities": {
    "Person": {
      "source": "MyTestPersonTable",
      "permissions": [
        {
          "actions": ["*"],
          "role": "anonymous"
        }
      ]
    }
  }
}

Avant de passer à l’étape suivante, passez en revue le tableau suivant qui explique différents aspects du fichier de configuration. Pour obtenir une documentation complète sur le fichier de configuration, reportez-vous à la documentation du Générateur d’API de données.

Caractéristique	Explanation
Connexion de base de données	Lors du développement, le runtime lit la chaîne de connexion à partir de la valeur de la chaîne de connexion dans le fichier de configuration. Bien que vous puissiez spécifier votre chaîne de connexion directement dans le fichier de configuration, il est recommandé de stocker des chaînes de connexion dans une variable d’environnement locale. Vous pouvez faire référence aux valeurs des variables d’environnement dans le fichier de configuration via la `@env('DATABASE_CONNECTION_STRING')` notation. La valeur de la chaîne de connexion est remplacée par Static Web Apps pour le site déployé avec les informations collectées lorsque vous connectez votre base de données.
Point de terminaison d’API	Le point de terminaison REST est disponible `/data-api/rest` pendant que le point de terminaison GraphQL est disponible `/data-api/graphql` comme configuré dans ce fichier de configuration. Vous pouvez configurer les chemins REST et GraphQL, mais le `/data-api` préfixe n’est pas configurable.
Sécurité des API	Les `runtime.host.cors` paramètres vous permettent de définir des origines autorisées qui peuvent effectuer des requêtes à l’API. Dans ce cas, la configuration reflète un environnement de développement et autorise l’emplacement http://localhost:4280.
Modèle d’entité	Définit les entités exposées via des itinéraires dans l’API REST ou en tant que types dans le schéma GraphQL. Dans ce cas, le nom Person est le nom exposé au point de terminaison, tandis qu’il `entities.<NAME>.source` s’agit du schéma de base de données et du mappage de table. Notez que le nom du point de terminaison de l’API n’a pas besoin d’être identique au nom de la table.
Sécurité des entités	Les règles d’autorisation répertoriées dans le `entity.<NAME>.permissions` tableau contrôlent les paramètres d’autorisation d’une entité. Vous pouvez sécuriser une entité avec des rôles de la même façon que vous sécurisez les itinéraires avec des rôles.

Note

Les propriétés connection-string, host.mode, et graphql.allow-introspection du fichier de configuration sont remplacées lorsque vous déployez votre site. Votre chaîne de connexion est remplacée par les détails d’authentification collectés lorsque vous connectez votre base de données à votre ressource Static Web Apps. La propriété host.mode est définie sur production, et la propriété graphql.allow-introspection est définie sur false. Ces remplacements fournissent une cohérence dans vos fichiers de configuration dans vos charges de travail de développement et de production, tout en garantissant que votre ressource Static Web Apps avec des connexions de base de données activées est sécurisée et prête pour la production.

Une fois l’application web statique configurée pour vous connecter à la base de données, vous pouvez maintenant vérifier la connexion.

Mettre à jour la page d’accueil

Remplacez le balisage entre les body balises du fichier index.html par le code HTML suivant.

<h1>Static Web Apps Database Connections</h1>
<blockquote>
    Open the console in the browser developer tools to see the API responses.
</blockquote>
<div>
    <button id="list" onclick="list()">List</button>
    <button id="get" onclick="get()">Get</button>
    <button id="update" onclick="update()">Update</button>
    <button id="create" onclick="create()">Create</button>
    <button id="delete" onclick="del()">Delete</button>
</div>
<script>
    // add JavaScript here
</script>

Démarrer l’application localement

Vous pouvez maintenant exécuter votre site web et manipuler des données directement dans la base de données.

Démarrez l’application web statique avec la configuration de la base de données.
```
swa start --data-api-location swa-db-connections
```

Maintenant que l’interface CLI est démarrée, vous pouvez accéder à votre base de données via les points de terminaison définis dans le fichier staticwebapp.database.config.json .

Le http://localhost:4280/data-api/rest/<ENTITY_NAME> point de terminaison accepte les demandes GET, PUT, POST et DELETE pour manipuler des données dans la base de données.

Le point de terminaison http://localhost:4280/data-api/graphql accepte les requêtes et les mutations GraphQL.

Manipuler des données

Les commandes indépendantes de l’infrastructure suivantes montrent comment effectuer des opérations CRUD complètes sur votre base de données.

La sortie de chaque fonction s’affiche dans la fenêtre de console du navigateur.

Ouvrez les outils de développement en appuyant sur CMD/Ctrl + Maj I + , puis sélectionnez l’onglet Console .

Répertorier tous les éléments

Ajoutez le code suivant entre les script balises dans index.html.

async function list() {
  const endpoint = '/data-api/rest/Person';
  const response = await fetch(endpoint);
  const data = await response.json();
  console.table(data.value);
}

Dans cet exemple :

La demande par défaut pour l’API fetch utilise le verbe GET.
Les données de la charge utile de réponse se trouvent dans la value propriété.

async function list() {

  const query = `
      {
        people {
          items {
            Id
            Name
          }
        }
      }`;

  const endpoint = "/data-api/graphql";
  const response = await fetch(endpoint, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ query: query })
  });
  const result = await response.json();
  console.table(result.data.people.items);
}

Dans cet exemple :

La requête GraphQL sélectionne les champs Id et Name de la base de données.
La requête transmise au serveur nécessite une charge utile où la query propriété contient la définition de requête.
Les données de la charge utile de réponse se trouvent dans la data.people.items propriété.

Actualisez la page et sélectionnez le bouton Liste .

La fenêtre de console du navigateur affiche désormais une table qui répertorie tous les enregistrements de la base de données.

ID	Nom
1	Sunny
2	Dheeraj

Voici une capture d’écran de ce qu’elle doit ressembler dans votre navigateur.

Navigateur web affichant les résultats d’une sélection de base de données dans la fenêtre de la console outils de développement.

Obtenez par ID

Ajoutez le code suivant entre les script balises dans index.html.

async function get() {
  const id = 1;
  const endpoint = `/data-api/rest/Person/Id`;
  const response = await fetch(`${endpoint}/${id}`);
  const result = await response.json();
  console.table(result.value);
}

Dans cet exemple :

Le point de terminaison est suffixé par /person/Id.
La valeur ID est ajoutée à la fin de l'emplacement de l'endpoint.
Les données de la charge utile de réponse se trouvent dans la value propriété.

async function get() {

  const id = 1;

  const gql = `
    query getById($id: Int!) {
      person_by_pk(Id: $id) {
        Id
        Name
      }
    }`;

  const query = {
    query: gql,
    variables: {
      id: id,
    },
  };

  const endpoint = "/data-api/graphql";
  const response = await fetch(endpoint, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(query),
  });
  const result = await response.json();
  console.table(result.data.person_by_pk);
}

Dans cet exemple :

La requête GraphQL sélectionne les champs Id et Name de la base de données.
La requête transmise au serveur nécessite une charge utile où la query propriété contient la définition de requête.
Les données de la charge utile de réponse se trouvent dans la data.person_by_pk propriété.

Actualisez la page et sélectionnez le bouton Obtenir .

La fenêtre de console du navigateur affiche désormais une table répertoriant l’enregistrement unique demandé à partir de la base de données.

ID	Nom
1	Sunny

Update

Ajoutez le code suivant entre les script balises dans index.html.

Static Web Apps prend en charge à la fois les verbes PUT et PATCH. Une PUT demande met à jour l’enregistrement entier, tandis qu’elle PATCH effectue une mise à jour partielle.

async function update() {

  const id = 1;
  const data = {
    Name: "Molly"
  };

  const endpoint = '/data-api/rest/Person/Id';
  const response = await fetch(`${endpoint}/${id}`, {
    method: "PUT",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(data)
  });
  const result = await response.json();
  console.table(result.value);
}

Dans cet exemple :

Le point de terminaison est suffixé par /person/Id/.
La valeur d’ID est ajoutée à la fin du point de terminaison.
Le verbe REST est PUT pour mettre à jour l'enregistrement de la base de données.
Les données de la charge utile de réponse se trouvent dans la value propriété.

async function update() {

  const id = 1;
  const data = {
    Name: "Molly"
  };

  const gql = `
    mutation update($id: Int!, $item: UpdatePersonInput!) {
      updatePerson(Id: $id, item: $item) {
        Id
        Name
      }
    }`;

  const query = {
    query: gql,
    variables: {
      id: id,
      item: data
    } 
  };

  const endpoint = "/data-api/graphql";
  const res = await fetch(endpoint, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(query)
  });

  const result = await res.json();
  console.table(result.data.updatePerson);
}

Dans cet exemple :

La requête GraphQL sélectionne les champs Id et Name de la base de données.
L’objet query contient la requête GraphQL dans la query propriété.
Les valeurs d’argument de la fonction GraphQL sont transmises via la query.variables propriété.
La requête transmise au serveur nécessite une charge utile où la query propriété contient la définition de requête.
Les données de la charge utile de réponse se trouvent dans la data.updatePerson propriété.

Actualisez la page et sélectionnez le bouton Mettre à jour .

La fenêtre de console du navigateur affiche désormais un tableau montrant les données mises à jour.

ID	Nom
1	Molly

Créer

Ajoutez le code suivant entre les script balises dans index.html.

async function create() {

  const data = {
    Name: "Pedro"
  };

  const endpoint = `/data-api/rest/Person/`;
  const response = await fetch(endpoint, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(data)
  });
  const result = await response.json();
  console.table(result.value);
}

Dans cet exemple :

Le point de terminaison est suffixé par /person/.
Le verbe REST consiste POST à ajouter un enregistrement de base de données.
Les données de la charge utile de réponse se trouvent dans la value propriété.

async function create() {

  const data = {
    Name: "Pedro"
  };

  const gql = `
    mutation create($item: CreatePersonInput!) {
      createPerson(item: $item) {
        Id
        Name
      }
    }`;

  const query = {
    query: gql,
    variables: {
      item: data
    } 
  };

  const endpoint = "/data-api/graphql";
  const result = await fetch(endpoint, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(query)
  });

  const response = await result.json();
  console.table(response.data.createPerson);
}

Dans cet exemple :

La requête GraphQL sélectionne les champs Id et Name de la base de données.
L’objet query contient la requête GraphQL dans la query propriété.
Les valeurs d’argument de la fonction GraphQL sont transmises via la query.variables propriété.
La requête transmise au serveur nécessite une charge utile où la query propriété contient la définition de requête.
Les données de la charge utile de réponse se trouvent dans la data.updatePerson propriété.

Actualisez la page et sélectionnez le bouton Créer .

La fenêtre de console du navigateur affiche désormais un tableau affichant le nouvel enregistrement dans la base de données.

ID	Nom
3	Pedro

Supprimer

Ajoutez le code suivant entre les script balises dans index.html.

async function del() {
  const id = 3;
  const endpoint = '/data-api/rest/Person/Id';
  const response = await fetch(`${endpoint}/${id}`, {
    method: "DELETE"
  });
  if(response.ok) {
    console.log(`Record deleted: ${ id }`)
  } else {
    console.log(response);
  }
}

Dans cet exemple :

Le point de terminaison est suffixé par /person/Id/.
La valeur d’ID est ajoutée à la fin de l’emplacement du point de terminaison.
Le verbe REST DELETE supprime l'enregistrement de base de données.
Si la suppression réussit, la propriété de la charge utile de la réponse ok est true.

async function del() {

  const id = 3;

  const gql = `
    mutation del($id: Int!) {
      deletePerson(Id: $id) {
        Id
      }
    }`;

  const query = {
    query: gql,
    variables: {
      id: id
    }
  };

  const endpoint = "/data-api/graphql";
  const response = await fetch(endpoint, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(query)
  });

  const result = await response.json();
  console.log(`Record deleted: ${ result.data.deletePerson.Id }`);
}

Dans cet exemple :

La requête GraphQL sélectionne le Id champ dans la base de données.
L’objet query contient la requête GraphQL dans la query propriété.
Les valeurs d’argument de la fonction GraphQL sont transmises via la query.variables propriété.
La requête transmise au serveur nécessite une charge utile où la query propriété contient la définition de requête.
Les données de la charge utile de réponse se trouvent dans la data.deletePerson propriété.

Actualisez la page et sélectionnez le bouton Supprimer .

La fenêtre de console du navigateur affiche désormais un tableau montrant la réponse de la demande de suppression.

Enregistrement supprimé : 3

Maintenant que vous avez travaillé avec votre site localement, vous pouvez maintenant le déployer sur Azure.

Déployer votre site

Pour déployer ce site en production, vous devez simplement valider le fichier de configuration et envoyer vos modifications au serveur.

Ajoutez les modifications apportées au fichier pour effectuer le suivi.
```
git add .
```

Validez les modifications de configuration.

git commit -am "Add database configuration"

Envoyez vos modifications au serveur.
```
git push origin main
```

Connecter la base de données à votre application web statique

Procédez comme suit pour créer une connexion entre l’instance Static Web Apps de votre site et votre base de données.

Sur le portail Azure, ouvrez votre application web statique.
Dans la section Paramètres , sélectionnez Connexion de base de données.
Sous la section Production , sélectionnez le lien lier la base de données existante .

Dans la fenêtre Lier une base de données existante , entrez les valeurs suivantes :

Propriété	Valeur
Type de base de données	Sélectionnez votre type de base de données dans la liste déroulante.
Subscription	Sélectionnez votre abonnement Azure dans la liste déroulante.
Nom de la ressource	Sélectionnez le nom du serveur de base de données qui a votre base de données souhaitée.
Nom de la base de données	Sélectionnez le nom de la base de données à lier à votre application web statique.
Type d’authentification	Sélectionnez Chaîne de connexion, puis entrez le nom d’utilisateur et le mot de passe MySQL.

Cliquez sur OK.

Vérifiez que votre base de données est connectée à votre ressource Static Web Apps

Une fois que vous avez connecté votre base de données à votre application web statique et que le site est terminé, procédez comme suit pour vérifier la connexion de la base de données.

Sur le portail Azure, ouvrez votre application web statique.
Dans la section Essentials , sélectionnez l’URL de votre ressource Static Web Apps pour accéder à votre application web statique.
Sélectionnez le bouton Liste pour répertorier tous les éléments.

La sortie doit ressembler à ce qui s’affiche dans cette capture d’écran.

Nettoyer les ressources

Si vous souhaitez supprimer les ressources créées pendant ce didacticiel, vous devez dissocier la base de données et supprimer les exemples de données.

Dissocier la base de données : ouvrez votre application web statique dans le portail Azure. Dans la section Paramètres , sélectionnez Connexion à la base de données. En regard de la base de données liée, sélectionnez Afficher les détails. Dans la fenêtre Détails de la connexion de base de données , sélectionnez le bouton Dissocier .
Supprimer des exemples de données : dans votre base de données, supprimez la table nommée MyTestPersonTable.

Étapes suivantes

Ajouter une API

Commentaires

Cette page a-t-elle été utile ?

Last updated on 2026-02-05

Partager via

Tutoriel : Ajouter une connexion de base de données MySQL dans Azure Static Web Apps (préversion)

Prerequisites

Configurer la connectivité de base de données

Obtenir la chaîne de connexion de base de données pour le développement local

Créer des exemples de données

Configurer l’application web statique

Créer le fichier de configuration de base de données

Mettre à jour la page d’accueil

Démarrer l’application localement

Manipuler des données

Répertorier tous les éléments

Obtenez par ID

Update

Créer

Supprimer

Déployer votre site

Connecter la base de données à votre application web statique

Vérifiez que votre base de données est connectée à votre ressource Static Web Apps

Nettoyer les ressources

Étapes suivantes

Commentaires

Ressources supplémentaires