Démarrer avec AWS

Créer une application web sans serveur

avec AWS Lambda, Amazon API Gateway, AWS Amplify, Amazon DynamoDB et Amazon Cognito

Créer une application web sans serveur

Module 4 – Déployer une API RESTful

Vous utiliserez Amazon API Gateway pour exposer la fonction Lambda que vous avez conçue dans le module précédent en tant qu'API RESTful.

Présentation

Dans ce module, vous utiliserez Amazon API Gateway pour exposer la fonction Lambda que vous avez conçue dans le module précédent en tant qu'API RESTful. Cette API est accessible sur l'Internet public. Elle sera sécurisée à l'aide du groupe d'utilisateurs Amazon Cognito que vous avez créé dans le module précédent. En utilisant cette configuration, vous activerez ensuite votre site Web hébergé de manière statique dans une application Web dynamique en ajoutant un JavaScript côté client qui passe des appels AJAX aux API exposées.

Présentation de l'architecture

Serverless_Web_App_LP_assets-03

Le schéma ci-dessus illustre comment le composant API Gateway que vous allez créer dans ce module s'intègre avec les composants existants que vous avez créés précédemment. Les éléments grisés correspondent aux éléments que vous avez déjà mis en œuvre au cours des étapes précédentes.

Le site Web statique que vous avez déployé dans le premier module possède déjà une page configurée pour interagir avec l'API que vous allez créer dans ce module. La page /ride.html dispose d’une simple interface de mappage pour demander une promenade en licorne. Après s’être authentifiés sur la page /signin.html, vos utilisateurs pourront sélectionner leur point de départ en cliquant sur un point de la carte, puis demander une promenade en cliquant sur le bouton « Request Unicorn » (Demander licorne) situé dans l’angle supérieur droit.

Ce module se concentre sur les étapes à suivre pour créer les composants cloud de l'API, mais si vous souhaitez comprendre comment fonctionne le code de navigateur qui appelle cette API, vous pouvez étudier le fichier ride.js du site web. Dans ce cas, l'application utilise la méthode ajax() de jQuery pour envoyer la demande distante.

 Durée

15 minutes

 Services utilisés

Implémentation

  • Création d'une nouvelle API REST

    a. Dans la Console de gestion AWS, cliquez sur Services et sélectionnez API Gateway sous Services applicatifs.
    b. Sélectionnez Créer une API.
    c. Sélectionnez Nouvelle API et saisissez WildRydes en tant que Nom de l'API.
    d. La fonction Optimisé pour les périphériques doit rester sélectionnée dans le menu déroulant Type de point de terminaison. Remarque : l'option Optimisé pour les périphériques est la plus adaptée aux services publics auxquels on accède depuis Internet. Les points de terminaison régionaux sont généralement utilisés pour les API auxquels on accède principalement depuis la même région AWS.
    e. Sélectionnez Créer une API.

  • Création d'un autorisateur de groupes d'utilisateurs Cognito

    Amazon API Gateway peut utiliser les jetons JWT renvoyés par les groupes d'utilisateurs Cognito pour authentifier les appels d'API. Au cours de cette étape, vous configurerez un autorisateur permettant à votre API d'utiliser le groupe d'utilisateurs que vous avez créé dans le Module 2.

    Dans la console Amazon API Gateway, créez un nouvel autorisateur de groupe d'utilisateurs Cognito pour votre API. Configurez-le en utilisant les détails du groupe d’utilisateurs que vous avez créé dans le module précédent. Vous pouvez tester cette configuration dans la console en copiant et collant le jeton d'autorisation qui est apparu après votre connexion sur la page /signin.html de votre site web actuel.

    a. Sous l'API que vous venez de créer, sélectionnez Autorisateurs.

    b. Sélectionnez Créer une personne autorisée.

    c. Saisissez WildRydes comme nom d'autorisateur.

    d. Sélectionnez le type Cognito.

    e. Dans le menu déroulant Region, sous Groupe d'utilisateurs Cognito, sélectionnez la région dans laquelle votre groupe d'utilisateurs Cognito a été créé dans le module 2 (la région actuelle devrait être sélectionnée par défaut).

    f. Saisissez WildRydes (ou le nom que vous avez donné à votre groupe d'utilisateurs) dans l'entrée Groupe d'utilisateurs Cognito.

    g. Saisissez Authorization pour Source du jeton.

    h. Sélectionnez Créer.


    Vérifiez la configuration de votre autorisateur

    j. Ouvrez un nouvel onglet de navigateur et consultez la page /ride.html sous le domaine de votre site web.

    k. Si vous êtes redirigé vers la page de connexion, connectez-vous avec l'utilisateur que vous avez créé dans le dernier module. Vous serez redirigé vers la page /ride.html.

    l. Copiez le jeton d'authentification indiqué dans la notification sur la page /ride.html.

    m. Revenez à l'onglet précédent où vous venez de créer la personne autorisée

    n. Cliquez sur Test au bas de la carte de la personne autorisée.

    o. Collez le jeton d'autorisation dans le champ Jeton d'autorisation de la boîte de dialogue contextuelle.

    Cliquez sur le bouton Test et vérifiez que le code de réponse est 200 et que les réclamations pour votre utilisateur sont affichées.

  • Création d'une nouvelle ressource et méthode

    Créez une nouvelle ressource appelée /ride dans votre API. Ensuite, créez une méthode POST pour cette ressource et configurez-la pour utiliser une intégration proxy Lambda sauvegardée par la fonction RequestUnicorn que vous avez créée dans la première étape de ce module.

    a. Dans le volet de gauche, cliquez sur Ressources sous votre API WildRydes.

    b. Dans le menu déroulant Actions, sélectionnez Créer une ressource.

    c. Saisissez ride en tant que Nom de la ressource.

    d. Assurez-vous que le Chemin de ressource est défini sur ride.

    e. Sélectionnez Activer la spécification CORS pour API Gateway pour la ressource.

    f. Cliquez sur Créer une ressource.

    g. En sélectionnant la ressource /ride qui vient d'être créée, dans le menu déroulant Action, sélectionnez Créer une méthode.

    h. Sélectionnez POST dans le nouveau menu déroulant qui s'affiche, puis cochez la case.

    i. Sélectionnez Fonction Lambda en tant que type d'intégration.

    j. Cochez la case Utiliser l'intégration proxy Lambda.

    k. Sélectionnez la région que vous utilisez comme Région Lambda.

    l. Pour Fonction Lambda, saisissez le nom de la fonction que vous avez créée dans le module précédent, RequestUnicorn.

    m. Sélectionnez Enregistrer. Remarque : si vous obtenez une erreur indiquant que votre fonction n'existe pas, vérifiez que la région que vous avez sélectionnée correspond à celle que vous avez utilisée dans le module précédent.

    n. Lorsque vous êtes invité à donner à Amazon API Gateway la permission d'appeler votre fonction, sélectionnez OK.

    o. Sélectionnez la carte Demande de méthode.

    Sélectionnez l'icône représentant un crayon en regard d'Autorisation.

    q. Sélectionnez l'autorisateur du groupe d'utilisateurs Cognito WildRydes dans la liste déroulante, puis cliquez sur l'icône représentant une coche.

  • Déploiement de votre API

    À partir de la console Amazon API Gateway, cliquez sur Actions, Deploy API (Déploiement d'API). Vous serez invité à créer une nouvelle étape. Vous pouvez utiliser « prod » comme nom de l'étape.

    a. Dans la liste déroulante Actions, sélectionnez Déploiement d'API.
    b. Sélectionnez [Nouvelle étape] dans la liste déroulante Étape de déploiement.
    c. Saisissez prod en tant que Nom de l'étape.
    d. Sélectionnez Déployer.
    e. Notez l'URL d'appel. Vous devrez l'utiliser dans la section suivante.

  • Mettre à jour le fichier de configuration du site web

    Mettez à jour le fichier /js/config.js dans le déploiement de votre site Web pour y inclure l'URL d'appel que vous venez de créer à l'étape précédente. Copiez l’URL d’appel directement depuis le haut de la page de l’éditeur d’étape de la console Amazon API Gateway et collez-la dans la clé _config.api.invokeUrl du fichier /js/config.js de votre site. Lorsque vous mettez à jour le fichier de configuration, vérifiez qu'il contient toujours les mises à jour effectuées dans le module précédent pour votre groupe d'utilisateurs Cognito.

    a. Ouvrez le fichier config.js dans un éditeur de texte.
    b. Mettez à jour le paramètre invokeUrl sous la clé api dans le fichier config.js. Comme valeur, utilisez l'URL d'appel pour l'étape de déploiement que vous avez créée à la section précédente.

    Vous trouverez ci-dessous un exemple de fichier config.js complet. Notez que les valeurs réelles seront différentes dans votre fichier.

    window._config = {
    
        cognito: {
    
            userPoolId: 'us-west-2_uXboG5pAb', // e.g. us-east-2_uXboG5pAb         
    
            userPoolClientId: '25ddkmj4v6hfsfvruhpfi7n4hv', // e.g. 25ddkmj4v6hfsfvruhpfi7n4hv
    
            region: 'us-west-2' // e.g. us-east-2 
    
        }, 
    
        api: { 
    
            invokeUrl: 'https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod' // e.g. https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod, 
    
        } 
    
    };

    c. Enregistrez le fichier modifié et envoyez-le vers votre référentiel Git afin de le déployer automatiquement sur Amplify Console.

    $ git push
    
  • Validation de votre implémentation

    Remarque : il est possible qu'il y ait un délai entre la mise à jour du fichier config.js dans votre compartiment S3 et le moment où le contenu mis à jour soit visible dans votre navigateur. Vous devez aussi vous assurer de vider le cache avant d'exécuter les étapes suivantes.

    a. Consultez la page /ride.html sous le domaine de votre site web.
    b. Si vous êtes redirigé vers la page de connexion, connectez-vous avec l'utilisateur que vous avez créé dans le module précédent.
    c. Une fois la carte chargée, cliquez n'importe où sur celle-ci pour définir un emplacement de départ.
    d. Sélectionnez Demander licorne. Vous devriez d'abord voir une notification indiquant qu'une licorne est en chemin dans la barre latérale de droite, puis une icône de licorne voler jusqu'à votre emplacement de départ.

Ce module vous a-t-il été utile ?

Merci
Merci de nous indiquer ce que vous avez aimé.
Fermer
Nous sommes désolés de vous décevoir.
Quelque chose est-il obsolète, déroutant ou inexact ? Aidez-nous à améliorer ce didacticiel en fournissant des commentaires.
Fermer

Résilier des ressources