Application Web serverless et API avec Code Engine

Ce tutoriel peut entraîner des coûts. Utilisez l'Estimateur de coûts pour générer une estimation du coût en fonction de votre utilisation projetée.

Dans ce tutoriel, vous allez créer une application Web sans serveur en utilisant un compartiment dans Object Storage et en implémentant la partie back-end de l'application avec IBM Cloud Code Engine et IBM Cloudant comme base de données de documents JSON.

Les sites Web statiques sont excellents pour les performances et la sécurité. Leur modèle d'architecture est parfois appelé Jamstack en référence à JavaScript, API et Markup. Dans ce tutoriel, vous allez créer un site Web statique hébergé sous Object Storage. Le site a un livre d'or qui utilise JavaScript pour accéder à une API pour récupérer des entrées ou pour ajouter une nouvelle entrée. L'API d'interaction avec la base de données de sauvegarde est implémentée à l'aide d'une approche sans serveur. Elle est déployée en tant qu'application dorsale ou microservice sur IBM Cloud Code Engine. Le système de back end ne s'exécute que lorsqu'il est requis et, par conséquent, il se produit des frais lorsqu'il est utilisé.

Objectifs

  • Déployer un back-end sans serveur et une base de données
  • Exposer une API REST en tant qu'application sans serveur
  • Héberger un site Web statique

L'application présentée dans ce tutoriel est un simple site Web de livre d'or où les utilisateurs peuvent publier des messages.

Architecture*Diagramme d'
du

  1. L'utilisateur accède à l'application hébergée dans le compartiment dans Object Storage.
  2. L'application Web appelle une API de back-end.
  3. L'application avec l'API de back end est déployée sur Code Engine.
  4. Le système dorsal utilise IBM Cloudant pour stocker et extraire les entrées du livre d'or.

Création de la base de données Guestbook

Commençons par créer une instance de service IBM Cloudant. IBM Cloudant est une base de données de documents JSON entièrement gérée. Elle est compatible avec Apache CouchDB sur lequel elle est basée.

  1. Dans le catalogue, sous Services, allez dans la catégorie Bases de données. Cliquez sur la vignette IBM Cloudant. Dans la boîte de dialogue qui s'affiche :

    1. Sous Multitenant sélectionnez une région.

    2. Sous Configurer l'instance de Cloudant, sélectionnez un nom Unique pour le service, tel que <yourinitials>-guestbook-db.

    3. Sélectionnez un groupe de ressources.

    4. Sélectionnez IAM comme méthode d'authentification.

    5. Sélectionnez le plan Lite. Si votre compte comporte déjà un plan Lite, sélectionnez un autre plan de service.

    6. Cliquez sur Créer.

  2. De retour dans la liste des ressources IBM Cloud Sous Services, cliquez sur l'instance IBM Cloudant que vous avez créée pour ouvrir la page des détails complets de l'instance. Remarque : il vous faudra peut-être patienter jusqu'à ce que le statut du service passe à Active.
  3. Cliquez sur Lancer le tableau de bord pour ouvrir le tableau de bord dans un nouvel onglet de navigateur.
  4. Dans l'angle supérieur droit, cliquez sur Créer une base de données. Saisissez guestbook comme nom et sélectionnez Non-Partitionné sous Partitionnement. Cliquez sur Créer pour créer la base de données.

Création d'un système de back end sans serveur

Dans cette section, vous allez créer l'application de back end sans serveur avec Code Engine. Les applications sans serveur encourent uniquement des frais correspondant au temps d'exécution idéal pour des solutions rarement consultées comme un livre d'or.

Créez un projet Code Engine

  1. Accédez à la page IBM Cloud Code Engine Overview.
  2. Dans la sous-fenêtre de gauche, cliquez sur Projets , puis sur Créer.
    • Sélectionner un emplacement.
    • Utilisez <yourinitials>-guestbook comme nom de projet et sélectionnez le même groupe de ressources que précédemment.
    • Cliquez sur Créer.
    • Patientez jusqu'à ce que le status du projet soit Actif.
  3. Cliquez sur le nom du projet pour entrer le tableau de bord du projet.

Créer et déployer une application de back end

  1. Dans le tableau de bord du projet, cliquez sur Applications, puis sur Créer.
  2. Dans la nouvelle boîte de dialogue, entrez guestbook-backend comme nom.
  3. Laissez Image du conteneur sélectionné et utilisez icr.io/solution-tutorials/tutorial-serverless-api-webapp:latest comme Référence d'image. Elle utilise une image de conteneur déjà existante.
  4. Sous Ressources d'instance, sélectionnez 0.25 vCPU / 0.5 GB pour l'UC et la mémoire. Il n'est pas nécessaire de disposer de ressources pour ce type d'application.
  5. Augmentez le nombre minimal d'instances à 1 et réduisez le nombre maximal d'instances à 2. Le minimum de 1 rend l'application plus réceptive lors des tests initiaux. Vous pouvez la réduire ensuite de nouveau à zéro.
  6. Cliquez sur Créer pour déployer la nouvelle application de back end pour le livre d'or. Notez que sans l'étape suivante de création d'une liaison de service, le déploiement échouera avec une erreur de code.
  7. Créez une liaison de service à la base de données.
    1. Cliquez sur l'onglet Liaisons de service.
    2. Cliquez sur Créer.
    3. Cliquez sur IBM Cloud et choisissez votre base de données dans la liste déroulante.
    4. Laissez le rôle Role sur Writer.
    5. Cliquez sur Ajouter.
  8. Attendez que le provisionnement indique qu'il est vert et prêt. Cliquez sur Tester l'application, puis sur URL de l'application. L'application de back end doit charger et renvoyer une page indiquant healthy. Mémorisez ou copiez l'URL de l'application car elle est nécessaire pour la partie suivante.

Au lieu d'utiliser l'image préconfigurée du conteneur, vous pouvez créer l'image par vous-même. Vous pouvez le faire en dehors de ou avec l'aide de Code Engine. Si vous n'utilisez pas l'image de conteneur préconfiguré et si vous utilisez un registre de conteneur privé, des étapes supplémentaires peuvent être nécessaires. Vous trouverez la source à l'adresse suivante https://github.com/IBM-Cloud/serverless-guestbook/tree/ce

Déploiement de l'application Web

Créez un compartiment Object Storage configuré avec l'hébergement de site Web statique contenant les fichiers de l'application JavaScript guestbook qui utilise la base de données IBM Cloudant.

Créez une instance Object Storage :

  1. Sélectionnez Object Storage dans le catalogue.
  2. Sélectionnez IBM Cloud pour l'infrastructure et Standard pour le forfait.
  3. Entrez un nom de service unique pour l'instance, tel que <yourinitials>-guestbook-cos.
  4. Sélectionnez un groupe de ressources.
  5. Cliquez sur Créer.

Créez un compartiment configuré pour l'hébergement de site Web statique :

  1. Cliquez sur Créer un compartiment.
  2. Cliquez sur Personnaliser votre compartiment
  3. Entrez un nom de compartiment unique pour tous les comptes IBM. Essayez <yourinitials>-guestbook.
  4. Sélectionnez une résilience de type Régional.
  5. Sélectionnez un Emplacement cohérent avec l'instance IBM Cloudant.
  6. Conserver la valeur par défaut de la Classe de stockage.
  7. Faites défiler la liste jusqu'à Hébergement de site Web statique et cliquez sur Ajouter +.
  8. Conservez les règles de routage (individuelles) sélectionnées et ajoutez le document Index index.html.
  9. Cliquez sur Accès public pour l'activer.
  10. Cliquez sur Sauvegarder.
  11. Faites défiler jusqu'au bas et cliquez sur Créer un compartiment.

Copiez les fichiers dans le répertoire docs de https://github.com/IBM-Cloud/serverless-guestbook/tree/ce dans le compartiment :

  1. Ouvrez https://github.com/IBM-Cloud/serverless-guestbook/tree/ce dans un nouvel onglet.

  2. Téléchargez un fichier zip en cliquant sur Code, puis sur Télécharger au format ZIP.

  3. Décompressiez le fichier et accédez au répertoire docs du fichier décompressé.

  4. Éditez Guestbook.js - remplacez la valeur de apiUrl par l'URL de l'application de la section précédente.

    Assurez-vous que l'URI ne se termine pas par une barre oblique (/). Sinon, l'application ne fonctionnera pas.

  5. Ouvrez la vue Objets du compartiment et faites un glisser-déposer des fichiers guestbook.js et index.html dans le compartiment COS.

  6. Accédez à l'onglet Configuration du compartiment. Dans la section Points de terminaison, recherchez la section Points de terminaison de l'hébergement de sites web statiques. Copiez le point d'accès public dans un onglet du navigateur.

  7. Vous devriez voir la page du livre d'or.

  8. Ajoutez de nouvelles entrées au livre d'or.

Capture d'écran du livre d'or
Capture d'écran du livre d'or

Suppression de ressources

Pour supprimer le compartiment et le service Object Storage créés :

  1. Accédez aux objets du compartiment Object Storage.
  2. Cochez la case de la ligne de titre pour sélectionner tous les objets du compartiment.
  3. Cliquez sur Supprimer des objets.
  4. Dans l'angle supérieur droit de la page d'objets de compartiment, menu Actions, sélectionnez Supprimer le compartiment.
  5. Dans le coin supérieur droit du menu Actions de l'instance Object Storage, sélectionnez Supprimer l'instance

Pour supprimer le service IBM Cloudant créé :

  1. Accédez à la liste de ressources
  2. Sous Bases de données, cliquez sur le menu d'action à côté de <yourinitials>-guestbook-db service
  3. Cliquez sur Supprimer.

Pour supprimer l'application et le projet Code Engine,

  1. Accédez à la page d'arrivée Code Engine.
  2. Dans la sous-fenêtre de gauche, cliquez sur Projets.
  3. Dans la liste des projets, consultez le projet du livre d'or, puis cliquez sur Supprimer.

En fonction de la ressource, le service peut ne pas être supprimé immédiatement mais conservé un certain temps (7 jours par défaut). Pour récupérer la ressource, vous pouvez la supprimer de manière définitive ou la restaurer pendant la période de conservation. Pour savoir comment utiliser la récupération de ressources, consultez ce document.

Contenu connexe