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.

Serverless_Web_App_LP_assets-05

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 concevoir 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 de réalisation du module : 15 minutes

Services utilisés : Amazon API Gateway et AWS Lambda


Suivez les instructions détaillées ci-dessous pour créer votre API REST. Cliquez sur chaque numéro d’étape pour développer la section correspondante.

  • Étape 1. Création d'une nouvelle API REST


    1. Dans AWS Management Console, cliquez sur Services et sélectionnez API Gateway sous Services applicatifs.

    2. Choisissez Create API (Créer une API).

    3. Sélectionnez New API (Nouvelle API) et saisissez WildRydes en tant que API Name (Nom de l'API).

    4. La fonction Edge optimized (Optimisé pour les périphériques) doit rester sélectionnée dans le menu déroulant Endpoint Type (Type de point de terminaison). Remarque : l'option Edge optimized (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.

    5. Choisissez Create API (Créer une API).

  • Étape 2. 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.


    1. Sous l’API que vous venez de créer, choisissez Authorizers (Autorisateurs).

    2. Choisissez Create New Authorizer (Créer une nouvelle personne autorisée).

    3. Saisissez Enter WildRydes comme nom d'autorisateur.

    4. Sélectionnez le type Cognito.

    5. Dans le menu déroulant Region, sous Cognito User Pool (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).

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

    7. Saisissez Authorization (Autorisation) pour Token Source (Source du jeton).

    8. Choisissez Create (Créer).

    Vérifiez la configuration de votre autorisateur

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

    2. 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.

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

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

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

    6. Collez le jeton d'autorisation dans le champ Authorization Token (Jeton d'autorisation) de la boîte de dialogue contextuelle.

    7. 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.

  • Étape 3. 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.


    1. Dans le volet de gauche, cliquez sur Resources sous votre API WildRydes.

    2. Dans le menu déroulant Actions, sélectionnez Create Resource (Créer une ressource).

    3. Saisissez ride en tant que Resource Name (Nom de la ressource).

    4. Assurez-vous que le Resource Path (Chemin de ressource) est défini sur ride.

    5. Sélectionnez Enable API Gateway CORS (Activer la spécification CORS pour API Gateway) pour la ressource.

    6. Cliquez sur Create Resource (Créer une ressource).

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

    8. Sélectionnez POST dans le nouveau menu déroulant qui s'affiche, puis cliquez sur la coche.

    9. Sélectionnez Lambda Function (Fonction Lambda) comme type d’intégration.

    10. Cochez la case Use Lambda Proxy integration (Utiliser l’intégration proxy Lambda).

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

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

    13. Choisissez Save (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.

    14. Lorsque vous êtes invité à donner à Amazon API Gateway la permission d’appeler votre fonction, choisissez OK.

    15. Sélectionnez la carte Method Request (Demande de méthode).

    16. Choisissez l’icône représentant un crayon en regard d'Authorization (Autorisation).

    17. 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.

  • Étape 4. 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.


    1. Dans la liste déroulante Actions, sélectionnez Deploy API (Déploiement d'API).

    2. Sélectionnez [New Stage] (Nouvelle étape) dans la liste déroulante Deployment stage (Etape de déploiement).

    3. Saisissez prod en tant que Stage Name (Nom de l'étape).

    4. Choisissez Deploy (Déploiement).

    5. Notez l'Invoke URL (URL d'appel). Vous devrez l’utiliser dans la section suivante.

  • Étape 5. Mise à jour du 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.


    1. Ouvrez le fichier config.js dans un éditeur de texte.

    2. Mettez à jour le paramètre invokeUrl sous la clé api dans le fichier config.js. Comme valeur, utilisez l'Invoke URL (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, 
    
        } 
    
    };
    1. Enregistrez le fichier modifié et envoyez-le vers votre référentiel Git afin de le déployer automatiquement sur la console Amplify.

    $ git push
  • Étape 5. 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.


    1. Consultez la page /ride.html sous le domaine de votre site Web.

    2. Si vous êtes redirigé vers la page de connexion, connectez-vous avec l’utilisateur que vous avez créé dans le module précédent.

    3. Une fois la carte chargée, cliquez n’importe où sur celle-ci pour définir un emplacement de départ.

    4. Choisissez Request Unicorn (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.