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. Sélectionnez Créer une API.

    3. Sélectionnez Nouvelle API et saisissez WildRydes en tant que nom de l’API.

    4. Sélectionnez 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. Dans la liste déroulante Créer, sélectionnez Autorisateur de groupe d’utilisateurs Cognito.

    3. Sélectionnez la région dans laquelle vous avez créé votre groupe d’utilisateurs Cognito au cours du module 2.

    4. Sélectionnez le groupe d’utilisateurs Cognito WildRydes dans la liste déroulante.

    5. Saisissez WildRydes comme nom d’autorisateur.

    6. Assurez-vous que la source du jeton d’identité est définie sur Autorisation.

    7. Sélectionnez Créer.

    Vérifiez la configuration de votre autorisateur

    1. Ouvrez un nouvel onglet et visitez /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 /ride.htmlet collez-le dans le champ du jeton d’identité de la console d’API Gateway.

    4. Choisissez Test et vérifiez que les réclamations de vos utilisateurs 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 comme nom de la ressource.

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

    5. Cliquez sur Créer une ressource.

    6. En maintenant la nouvelle ressource /ride sélectionnée, choisissez Créer une méthode dans le menu déroulant Action.

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

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

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

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

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

    12. Cliquez sur 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.

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

    14. Sélectionnez la case Demande de méthode.

    15. Choisissez l’icône représentant un crayon en regard d’Autorisation.

    16. 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. Activation du CORS

    Les navigateurs Web modernes empêchent les requêtes HTTP envoyées par des scripts de pages hébergées sur un domaine à des API hébergées sur un autre domaine, sauf si l’API fournit des en-têtes de réponse de partage des ressources cross-origin (CORS) qui les autorisent explicitement. Dans la console Amazon API Gateway, vous pouvez ajouter la configuration requise pour envoyer les en-têtes CORS appropriés sous le menu Action lorsqu’une ressource est sélectionnée. Vous devez activer le CORS pour POST et OPTIONS sur votre ressource /requestunicorne. Pour faciliter les choses, vous pouvez définir la valeur de l’en-tête Access-Control-Allow-Origin sur « * » mais, dans une application de production, vous devez toujours mettre en liste blanche les domaines autorisés afin de contrer les attaques de falsification de requête inter-site (CSRF, Cross-Site Request Forgery).

    Pour en savoir plus sur les configurations CORS en général, consultez la page https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS


    1. Dans la console Amazon API Gateway, dans le volet du milieu, sélectionnez la ressource /ride .

    2. Dans la liste déroulante Actions, sélectionnez Activer CORS.

    3. Utilisez les paramètres par défaut et choisissez Activer CORS et remplacer les en-têtes CORS existants.

    4. Choisissez Oui, remplacer les valeurs existantes.

    5. Attendez qu’une coche apparaisse en regard de toutes les étapes.

  • Étape 5. 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 comme nom de l’étape.

    4. Choisissez Déploiement.

    5. Notez l’URL d’appel. Vous devrez l’utiliser dans la section suivante.

  • Étape 6. 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é manuellement le module 2, vous pouvez modifier le fichier config.js que vous avez enregistré localement. Si vous avez utilisé le modèle AWS CloudFormation, vous devez d’abord télécharger le fichier config.js depuis votre compartiment S3. Pour ce faire, rendez-vous sur /js/config.js sous l’URL de base de votre site Web et choisissez Fichier, puis 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.

      Un exemple de fichier config.js terminé est donné ci-dessous. 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 de site Web, puis recherchez le préfixe de clé js .

    4. Choisissez Charger.

    5. Choisissez Ajouter des fichiers, sélectionnez la copie locale de config.js, puis cliquez sur Suivant.

    6. Cliquez sur Suivant sans changer les valeurs par défaut des sections Régler les permissions et Définir les propriétés .

    7. Choisissez Charger dans la section Vérification .

  • Étape 7. 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. Accédez à /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.