Démarrer avec AWS

Créer une application web sans serveur

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

Module 4 : Déploiement d'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

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.

 Temps nécessaire

15 minutes

 Services utilisés

Mise en œuvre

    1. Dans la console Amazon API Gateway, sélectionnez les API dans le panneau de navigation de gauche. 
    2. Sous API REST, cliquez sur Créer.
    3. Dans la section Choisir le protocole, cliquez sur REST
    4. Dans la section Créer une API, sélectionnez Nouvelle API.
    5. Dans la section Paramètres, saisissez WildRydes pour le Nom de l'API et sélectionnez Optimisé pour les périphériques dans le menu déroulant Type de point de terminaison.
      Remarque : utilisez les types de points de terminaison optimisés pour les périphériques pour les services publics auxquels l'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.
    6. Sélectionnez Créer une API.
  • Vous devez créer un autorisateur de groupes d'utilisateurs Amazon Cognito. Amazon API Gateway utilise des jetons Web JSON (JWT), qui sont renvoyés par le groupe d'utilisateurs Amazon Cognito (créé dans le module 2) pour authentifier les appels d'API. Dans cette section, vous allez créer un autorisateur pour l'API, afin de pouvoir utiliser le groupe d'utilisateurs.

    Suivez les étapes ci-dessous pour configurer l'autorisateur dans la console Amazon API Gateway :

    1. Dans le panneau de navigation de gauche de l'API WildRydes que vous venez de créer, sélectionnez Autorisateurs.
    2. Cliquez sur Créer un nouvel autorisateur
    3. Saisissez WildRydes dans le champ Nom de l'autorisateur.
    4. Sélectionnez Cognito en tant que Type
    5. Sous Groupe d'utilisateurs Cognito, dans le menu déroulant Région, sélectionnez la même Région que celle que vous avez utilisée pour le reste du didacticiel. Saisissez WildRydes dans le champ du nom du Groupe d'utilisateurs Cognito.
    6. Saisissez Autorisation pour la Source du jeton
    7. Cliquez sur Créer.
    8. Cliquez sur Test pour vérifier la configuration de l'autorisateur. 
    9. Collez le Jeton d'autorisation copié depuis la page Web ride.html dans la section Validation de votre mise en œuvre du module 2 dans le champ Autorisation (en-tête), et vérifiez que le Code de réponse de l'état HTTP est défini sur 200. 

     

     

  • Dans cette section, vous allez créer une nouvelle ressource 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 panneau de navigation de gauche de votre API WildRydes, cliquez sur Ressources.
    2. Dans le menu déroulant Actions, sélectionnez Créer une ressource.
    3. Saisissez ride en tant que Nom de ressource. Cela créera automatiquement le Chemin de ressource /ride.
    4. Cochez la case Activer API Gateway CORS.
    5. Cliquez sur Créer une ressource.
    6. En sélectionnant la ressource /ride qui vient d'être créée, dans le menu déroulant Actions, cliquez sur Créer une méthode.
    7. Sélectionnez POST dans le nouveau menu déroulant qui apparaît sous OPTIONS, puis cochez la case.
    8. Sélectionnez Fonction Lambda en tant que Type d'intégration.
    9. Cochez la case Utiliser l'intégration proxy Lambda.
    10. Sélectionnez la même Région que celle que vous avez utilisée tout au long du didacticiel pour la Région Lambda.
    11. Saisissez RequestUnicorn pour la 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é à autoriser Amazon API Gateway à invoquer votre fonction, cliquez sur OK.
    14. Sélectionnez la carte Demande de méthode.
    15. Cliquez sur l'icône en forme de 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.
  • Dans cette section, vous allez déployer votre API depuis la console Amazon API Gateway

    1. Dans le menu déroulant Actions, sélectionnez Déploiement d'API.
    2. Sélectionnez [Nouvelle étape] dans le menu déroulant Étape de déploiement.
    3. Saisissez prod en tant que Nom de l'étape.
    4. Cliquez sur Déployer.
    5. Copiez l'URL d'invocation. Vous devrez l'utiliser dans la section suivante.
  • Au cours de cette étape, vous allez mettre à jour le fichier /js/config.js dans le déploiement de votre site Web de manière à y inclure l'URL d'invocation que vous venez de créer à l'étape précédente. Vous allez copier l'URL d'appel directement depuis la partie supérieure de la page de l'éditeur d'étape de la console Amazon API Gateway et la coller dans la clé invokeUrl du fichier config.js de votre site. Votre fichier de configuration contiendra toutes les modifications que vous avez effectuées dans le module précédent sur votre UserPoolID, votre UserPoolClientID et votre région Amazon Cognito.

    1. Sur votre machine locale, accédez au dossier js et ouvrez le fichier config.js dans l'éditeur de texte de votre choix.
    2. Collez l'URL d'invocation que vous avez copiée depuis la console Amazon API Gateway dans la section précédente dans la valeur invokeURL du fichier config.js
    3. Enregistrez le fichier.

    Voici un exemple d'un fichier config.js complet. 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, 
    
        } 
    
    };

        3. Ajoutez, validez et envoyez le fichier config.js modifié vers votre référentiel Git afin de le déployer automatiquement sur la console Amplify.

    $ git add .
    $ git commit -m "new_configuration"
    $ git push
    
  • 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. Passez votre version d'ArcGIS JS de 4.3 à 4.6 (les versions plus récentes ne fonctionneront pas dans ce didacticiel) dans le fichier ride.html en procédant comme suit :
    <script src="https://js.arcgis.com/4.6/"></script>
     <link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">

    Vous trouverez ci-dessous un exemple de fichier ride.html complet. Certaines valeurs de votre fichier peuvent être différentes.

    <div id="noApiMessage" class="configMessage" style="display: none;">
            <div class="backdrop"></div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Successfully Authenticated!</h3>
                </div>
                <div class="panel-body">
                    <p>This page is not functional yet because there is no API invoke URL configured in <a href="/js/config.js">/js/config.js</a>. You'll configure this in Module 3.</p>
                    <p>In the meantime, if you'd like to test the Amazon Cognito user pool authorizer for your API, use the auth token below:</p>
                    <textarea class="authToken"></textarea>
                </div>
            </div>
        </div>
    
        <div id="noCognitoMessage" class="configMessage" style="display: none;">
            <div class="backdrop"></div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">No Cognito User Pool Configured</h3>
                </div>
                <div class="panel-body">
                    <p>There is no user pool configured in <a href="/js/config.js">/js/config.js</a>. You'll configure this in Module 2 of the workshop.</p>
                </div>
            </div>
        </div>
    
        <div id="main">
            <div id="map">
            </div>
        </div>
    
        <div id="authTokenModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="authToken">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">Your Auth Token</h4>
                    </div>
                    <div class="modal-body">
                        <textarea class="authToken"></textarea>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    
    
        <script src="js/vendor/jquery-3.1.0.js"></script>
        <script src="js/vendor/bootstrap.min.js"></script>
        <script src="js/vendor/aws-cognito-sdk.min.js"></script>
        <script src="js/vendor/amazon-cognito-identity.min.js"></script>
        <script src="https://js.arcgis.com/4.6/"></script>
        <script src="js/config.js"></script>
        <script src="js/cognito-auth.js"></script>
        <script src="js/esri-map.js"></script>
        <script src="js/ride.js"></script>
    </body>
    
    </html>

        2. Enregistrez le fichier modifié. Ajoutez, validez et envoyez-le vers votre référentiel Git afin de le déployer automatiquement sur la console AWS Amplify.

        3. Ouvrez la page /ride.html sous le domaine de votre site Web.

        4. Si vous êtes redirigé vers la page de connexion d'ArcGIS, connectez-vous à l'aide des informations d'identification de l'utilisateur que vous avez créées dans la section Introduction comme condition préalable à ce didacticiel.

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

        6. Sélectionnez Demander licorne. Vous devez 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.

Cette page vous a-t-elle été utile ?

Nettoyage des ressources