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-dessous 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 Nouvelle API et saisissez WildRydes en tant que API Name (Nom de l'API).

    4. La fonction Edge optimized (Périphérique optimisé) 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.

    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 allez configurer 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 Autorisateurs.

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

    3. Saisissez WildRydes en tant que nom pour l'authorizer.

    4. Sélectionnez le type Cognito.

    5. Dans le menu déroulant Région 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. Sélectionnez 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 /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 pour 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 Ressources sous votre API WildRydes.

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

    3. Saisissez ride en tant que 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 méthode).

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

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

    10. Cochez la case Utiliser l’intégration proxy Lambda.

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

    12. Saisissez le nom de la fonction que vous avez créée dans le module précédent, RequestUnicorn, pour Fonction Lambda.

    13. Choisissez 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’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, 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 Déploiement d’API.

    2. Sélectionnez [Nouvelle étape] dans la liste déroulante de la phase de déploiement.

    3. Saisissez prod en tant que Stage Name (Nom de stage).

    4. Choisissez Déploiement.

    5. Notez l’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.


    Si vous avez terminé le module 2 manuellement, vous pouvez modifier le fichier config.js que vous avez enregistré au niveau local. Si vous avez utilisé le modèle AWS CloudFormation, vous devez d'abord télécharger le fichier config.js à partir de votre compartiment S3. Pour ce faire, consultez la page /js/config.js sous l'URL de base de votre site web et choisissez Fichier, puis Save Page As (Enregistrer la page sous) depuis votre navigateur.

    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’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 vos modifications en local.

    2. Dans AWS Management Console, choisissez Services, puis sélectionnez S3 sous Stockage.

    3. Naviguez vers le compartiment du site web, puis vers le préfixe de clé js.

    4. Choisissez Charger.

    5. Choisissez Ajouter des fichiers, sélectionnez la copie locale du fichier config.js et cliquez ensuite sur Suivant.

    6. Choisissez Suivant sans modifier aucun paramètre par défaut via les sections Définir des autorisations et Définir les propriétés.

    7. Choisissez Charger dans la section Vérification.

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