Démarrer avec AWS

Création d'une application Web simple

Déploiement d'une application Web et ajout de fonctionnalités d'interactivité avec une API et une base de données

Dans ce module, vous allez déployer votre fonction sans serveur à l'aide d'API Gateway.

Introduction

Dans ce module, vous allez utiliser Amazon API Gateway pour créer une API RESTful permettant d'effectuer des appels en direction d'une fonction Lambda depuis un client Web (qui se rapporte généralement à un navigateur Web). API Gateway fait office de couche intermédiaire entre le client HTML créé au cours du module 1 et le back-end sans serveur créé au cours du module 2.

Opérations que vous allez apprendre à effectuer

  • Créer une nouvelle API à l'aide d'API Gateway
  • Définir des méthodes HTTP avec une API
  • Déclencher une fonction Lambda depuis une API
  • Activer le mécanisme CORS avec une API afin de pouvoir utiliser cette dernière à partir d'un site Web
  • Tester une API créée à l'aide d'API Gateway depuis l'AWS Management Console

Concepts clés

API RESTful : « REST », qui est l’acronyme de « Representational State Transfer », désigne un type d'architecture permettant de créer des services Web. Une API, pour sa part, est une interface de programmation d'application. Ainsi, une API RESTful permet d'implémenter une architecture REST.

Méthodes de requête HTTP : les méthodes HTTP sont conçues pour permettre les communications entre des clients et des serveurs. Par exemple, les méthodes GET ou PUT, définies par le protocole HTTP, sont utilisées pour indiquer l'action à effectuer avec une ressource.

Mécanisme CORS : le mécanisme CORS (Cross Origin Resource Sharing) utilise des en-têtes HTTP pour indiquer à un navigateur que l'exécution d'une application Web donnée doit être permise au niveau d'une origine (ou d'un domaine), et que cette même application est autorisée à accéder à certaines ressources depuis un serveur situé au niveau d'une origine différente.

Optimisé pour la périphérie : cette expression fait référence aux ressources s'appuyant sur l'infrastructure mondiale AWS pour mieux répondre aux besoins de clients du monde entier.

 Durée nécessaire

5 minutes

 Services utilisés

Implémentation

  • Création d'une nouvelle API REST
    1. Connectez-vous à la console API Gateway.
    2. Cliquez sur le bouton Créer une API, de couleur orange.
    3. Accédez au champ API REST et cliquez sur le bouton Créer, de couleur orange.
    4. Sous Choisir le protocole, sélectionnez REST.
    5. Sous Créer une nouvelle API, sélectionnez Nouvelle API.
    6. Dans le champ Nom de l'API, saisissez HelloWorldAPI.
    7. Sélectionnez Optimisé pour la périphérie dans le menu déroulant Type de point de terminaison. Remarque : les points de terminaison optimisés pour la périphérie constituent la meilleure alternative pour les clients distribués géographiquement. Il s'agit également de l'option la plus adaptée aux services publics auxquels l'on accède depuis Internet. Les points de terminaison régionaux, quant à eux, sont généralement utilisés avec les API auxquelles l'on accède principalement depuis la même région AWS.
    8. Cliquez sur le bouton Créer une API, de couleur bleue. Vous devez avoir défini les paramètres suivants :
    Full Stack tutorial API settings
  • Création d'une nouvelle ressource et d'une nouvelle méthode
    1. Dans le volet de gauche, cliquez sur Ressources sous votre API HelloWorld.
    2. Sélectionnez la ressource « / », puis cliquez sur Créer une méthode dans le menu déroulant Action.
    3. Sélectionnez POST dans le menu déroulant qui s'affiche, puis cliquez sur la coche.
    4. Sélectionnez Fonction Lambda en tant que type d'intégration.
    5. Saisissez HelloWorldFunction dans le champ Fonction.
    6. Cliquez sur le bouton Enregistrer, de couleur bleue.
    7. Un message vous indiquant que vous autorisez l'API en cours de création à appeler votre fonction Lambda doit s'afficher. Cliquez sur le bouton OK.
    8. Sélectionnez la méthode POST nouvellement créée, puis Activer le mécanisme CORS dans le menu déroulant Action.
    9. Ne décochez pas la case POST et cliquez sur le bouton Activer le mécanisme CORS et remplacer les en-têtes CORS existants, de couleur bleue.
    Full Stack tutorial EnableCORS

    10. Un message vous invitant à confirmer les modifications apportées à la méthode doit s'afficher. Cliquez sur le bouton Oui, remplacer les valeurs existantes, de couleur bleue.

    Full Stack tutorial ConfirmMethodChanges
  • Déploiement de l'API
    1. Dans la liste déroulante Actions, sélectionnez Déployer l'API.
    2. Sélectionnez [Nouvelle étape] dans la liste déroulante Étape de déploiement.
    3. Saisissez dev dans le champ Nom de l'étape.
    4. Sélectionnez Déployer.
    5. Copiez et enregistrez l'URL située en regard de URL d'invocation (vous en aurez besoin au cours du module 5).
  • Validation de l'API
    1. Dans la partie gauche, cliquez sur Ressources.
    2. Les méthodes disponibles pour l'API s'affichent sur la droite. Cliquez sur POST.
    3. Cliquez sur l'icône d'éclair bleu.
    4. Collez les éléments suivants dans le champ Corps de la requête :
    {
        "firstName":"Grace",
        "lastName":"Hopper"
    }

    5. Cliquez sur le bouton Tester, de couleur bleue.

    6. Sur la droite, une réponse comportant la mention Code 200 doit s'afficher.

    7. Félicitations ! Vous avez créé et testé une API permettant d'appeler une fonction Lambda.


Architecture d'application

Le module 3 est désormais terminé. Voici à quoi ressemble votre infrastructure :

full-stack amplify console arch diagram module 3

Le service API Gateway a été ajouté et connecté à la fonction Lambda existante. La fonction peut maintenant être déclenchée à l'aide d'un appel d'API. Il n'est cependant toujours pas possible de générer cet appel depuis un client Web. Vous allez donc ajouter une table de données au cours du module 4, puis connecter tous les éléments au cours du module 5.

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

Merci
Merci de nous indiquer ce que vous avez aimé.
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.

Création d'une table de données