Accéder aux données dans Azure Cosmos DB en utilisant Mongoose avec Azure Static Web Apps

  • Article

Mongoose est le client ODM (Object Document Mapping) le plus populaire pour Node.js. Mongoose vous permet de concevoir une structure de données et d’appliquer la validation, tout en vous apportant tous les outils nécessaires pour interagir avec les bases de données qui prennent en charge l’API MongoDB. Cosmos DB prend en charge les API MongoDB nécessaires et est disponible en tant qu’option de serveur back-end sur Azure.

Prérequis

1. Créer une base de données Cosmos DB serverless

Procédez comme suit pour créer une base de données Cosmos serverless.

  1. Connectez-vous au portail Azure.
  2. Sélectionnez Créer une ressource.
  3. Entrez Azure Cosmos DB dans la zone de recherche.
  4. Sélectionnez Azure Cosmos DB.
  5. Sélectionnez Create (Créer).
  6. Si vous y êtes invité, sous API Azure Cosmos DB pour MongoDB, sélectionnez Créer.
  7. Configurez votre compte Azure Cosmos DB avec les informations suivantes :
    • Abonnement : choisissez l’abonnement à utiliser
    • Ressource : sélectionnez Créer, puis indiquez le nom aswa-mongoose
    • Nom du compte : une valeur unique est nécessaire
    • Localisation : USA Ouest 2
    • Mode de capacité : Serverless (préversion)
    • Version : 4.0Capture d’écran montrant le formulaire de création d’une instance Cosmos DB.
  8. Sélectionnez Revoir + créer.
  9. Sélectionnez Create (Créer).

Le processus de création prend quelques minutes. Nous revenons à la base de données pour collecter la chaîne de connexion après avoir créé une application web statique.

2. Créer une application web statique

Ce tutoriel utilise un dépôt de modèles GitHub pour vous aider à créer votre application.

  1. Accédez au modèle de démarrage.

  2. Choisissez le propriétaire (si vous utilisez une organisation différente de votre compte principal).

  3. Nommez votre référentiel aswa-mongoose-tutorial.

  4. Sélectionnez Create repository from template (Créer un dépôt à partir du modèle).

  5. Revenez au portail Azure.

  6. Sélectionnez Créer une ressource.

  7. Tapez application web statique dans la zone de recherche.

  8. Sélectionnez Static Web Apps.

  9. Sélectionnez Create (Créer).

  10. Configurez votre application Azure Static Web Apps avec les informations suivantes :

    • Abonnement : choisissez le même abonnement qu’auparavant
    • Groupe de ressources : sélectionnez aswa-mongoose
    • Nom : aswa-mongoose-tutorial
    • Région : USA Ouest 2
    • Sélectionnez Se connecter avec GitHub
    • Sélectionnez Autoriser si vous êtes invité à autoriser Azure Static Web Apps à créer la fonctionnalité GitHub Actions pour activer le déploiement
    • Organisation : Nom de votre compte GitHub
    • Dépôt : aswa-mongoose-tutorial
    • Branche : main
    • Options prédéfinies de build : choisissez React
    • Emplacement de l’application : /
    • Emplacement de l’API : api
    • Emplacement de sortie : buildFormulaire Azure Static Web Apps renseigné

  11. Sélectionnez Examiner et créer.

  12. Sélectionnez Create (Créer).

  13. Le processus de création prend quelques minutes. Sélectionnez Accéder à la ressource une fois l’application web statique configurée.

3. Configurer la chaîne de connexion de base de données

Pour permettre à l’application web de communiquer avec la base de données, la chaîne de connexion de base de données est stockée en tant que paramètre d’application. Les valeurs des paramètres sont accessibles dans Node.js à l’aide de l’objet process.env.

  1. Sélectionnez Accueil dans l’angle supérieur gauche du Portail Azure (ou revenez à https://portal.azure.com).
  2. Sélectionnez Groupes de ressources.
  3. Sélectionnez aswa-mongoose.
  4. Sélectionnez le nom de votre compte de base de données. Son type est API Azure Cosmos DB pour Mongo DB.
  5. Sous Paramètres, sélectionnez Chaîne de connexion.
  6. Copiez la chaîne de connexion répertoriée sous CHAÎNE DE CONNEXION PRINCIPALE.
  7. Dans la barre de navigation, sélectionnez aswa-mongoose.
  8. Sélectionnez aswa-mongoose-tutorial pour retourner à l’instance du site web.
  9. Sous Paramètres, sélectionnez Configuration.
  10. Sélectionnez Ajouter, puis créez un paramètre d’application avec les valeurs suivantes :
    • Nom : AZURE_COSMOS_CONNECTION_STRING
    • Valeur : <collez la chaîne de connexion que vous avez copiée plus tôt>
  11. Sélectionnez OK.
  12. Sélectionnez Ajouter, puis créez un paramètre d’application avec les valeurs suivantes pour le nom de la base de données :
    • Nom e: AZURE_COSMOS_DATABASE_NAME
    • Valeur : todo
  13. Sélectionnez OK.
  14. Sélectionnez Enregistrer.

4. Accéder à votre site

Vous pouvez à présent explorer l’application web statique.

  1. Dans le Portail Azure, sélectionnez Vue d’ensemble.
  2. Sélectionnez l’URL affichée dans le coin supérieur droite.
    1. Il ressemble à https://calm-pond-05fcdb.azurestaticapps.net.
  3. Sélectionnez Connectez-vous pour voir votre liste de tâches.
  4. Sélectionnez Donner son consentement pour accéder à l’application.
  5. Créez une liste en tapant un nom dans la zone de texte intitulée Créer une liste et sélectionnez Enregistrer.
  6. Créez une tâche en tapant un titre dans la zone de texte intitulée Créer un élément et sélectionnez Enregistrer.
  7. Vérifiez que la tâche s’affiche (cela peut prendre un moment).
  8. Marquez la tâche comme terminée en cochant la case ; la tâche est déplacée vers la section Éléments terminés de la page.
  9. Actualisez la page pour confirmer l’utilisation d’une base de données.

Nettoyer les ressources

Si vous ne comptez pas continuer à utiliser cette application, supprimez le groupe de ressources en effectuant les étapes suivantes :

  1. Revenez au portail Azure.
  2. Sélectionnez Groupes de ressources.
  3. Sélectionnez aswa-mongoose.
  4. Sélectionnez Supprimer le groupe de ressources.
  5. Tapez aswa-mongoose dans la zone de texte.
  6. Sélectionnez Supprimer.

Étapes suivantes

Passez à l’article suivant pour découvrir comment configurer un développement local...

Configurer le développement local