En este módulo va a utilizar Amazon API Gateway para exponer la función de Lambda que creó en el módulo anterior como una API RESTful. Esta API podrá ser accesible a través de la Internet pública. Estará protegida con el grupo de usuarios de Amazon Cognito que ha creado en el módulo anterior. Con esta configuración cambiará su sitio web alojado estáticamente por una aplicación web dinámica al añadir JavaScript del lado del cliente que hace llamadas AJAX a la API expuesta.

Serverless_Web_App_LP_assets-05

El esquema anterior muestra cómo el componente de API Gateway que creará en este módulo se integra con los componentes existentes que ha creado anteriormente. Los difuminados elementos tienen partes que ya ha implementado en pasos anteriores.

El sitio web estático que se implementa en el primer módulo ya tiene una página configurada para interactuar con la API que va a crear en este módulo. La página en /ride.html cuenta con una sencilla interfaz de mapas para solicitar un paseo en unicornio. Después de autenticar utilizando la página /signin.html, los usuarios podrán seleccionar su ubicación de recogida haciendo clic en un punto en el mapa y, a continuación, solicitar un paseo eligiendo el botón “Solicitar unicornio” que se encuentra en la esquina superior derecha.

Este módulo se centrará en los pasos necesarios para crear los componentes de la nube de la API, pero si le interesa cómo funciona el código del navegador que llama esta API, puede inspeccionar el archivo ride.js del sitio web. En este caso, la aplicación utiliza el método ajax() de jQuery's para realizar la solicitud.

Tiempo para completar el módulo: 15 minutos

Los servicios utilizados: Amazon API Gateway y AWS Lambda


Siga las instrucciones paso a paso que se detallan a continuación para crear la API REST. Haga clic en cada número de paso para expandir la sección.

  • Paso 1. Crear una nueva API REST


    1. En la consola de administración de AWS, haga clic en Servicios y luego seleccione API Gateway en Servicios de aplicación.

    2. Seleccione Crear API.

    3. Seleccione New API (API nueva) e introduzca WildRydes en API Name (Nombre de API).

    4. Mantenga seleccionada la opción Edge optimized (Optimizado para borde) en el menú desplegable Endpoint Type (Tipo de punto de conexión). Nota: Los elementos optimizados para borde son los mejores para los servicios públicos a los cuales se obtiene acceso a través de Internet. Normalmente, los puntos de conexión regionales se utilizan para las API a las cuales se obtiene acceso principalmente desde el interior de la misma región de AWS.

    5. Seleccione Crear API

  • Paso 2. Crear un autorizador de grupo de usuarios de Cognito

    Amazon API Gateway puede utilizar las fichas JWT enviadas por el grupo de usuarios de Cognito para autenticar las llamadas a la API. En este paso va a configurar un autorizador para su API para utilizar el grupo de usuarios que ha creado en el módulo 2.

    En la consola de Amazon API Gateway, cree un nuevo autorizador para el grupo de usuarios de Cognito para su API. Configúrelo con los detalles del grupo de usuarios que ha creado en el módulo anterior. Puede probar la configuración en la consola al copiar y pegar la ficha de autenticación presentada después de iniciar sesión a través de la página /signin.html de su sitio web actual.


    1. En API, elegir Autorizadores.

    2. Seleccione Create New Authorizer (Crear autorizador nuevo).

    3. Introduzca WildRydes en Authorizer name (Nombre del autorizador).

    4. Seleccione Cognito para el tipo.

    5. En el menú desplegable Region (Región) en Cognito User Pool (Grupo de usuarios de Cognito), seleccione la región en la que creó el grupo de usuarios de Cognito en el módulo 2 (se selecciona la región actual de manera predeterminada).

    6. Introduzca WildRydes (o el nombre que utilizó para el grupo de usuarios) en la sección de introducción de información Cognito User Pool (Grupo de usuarios de Cognito).

    7. Introduzca Authorization (Autorización) en la sección Token Source (Origen del token).

    8. Seleccione Crear.

    Compruebe la configuración de autorizador

    1. Abra una pestaña nueva en el navegador y vaya a /ride.html, ubicado debajo del dominio del sitio web.

    2. Si es redirigido a la página de inicio de sesión, inicie sesión con el usuario que creó en el último módulo. Se lo redirigirá nuevamente a /ride.html.

    3. Copie el token de autorización de la notificación en /ride.html,

    4. Regrese a la pestaña anterior en la que acaba de finalizar la creación del Autorizador

    5. Haga clic en Test (Probar) ubicado en la sección inferior de la tarjeta para el autorizador.

    6. Pegue el token de autorización en el campo Authorization Token (Token de autorización) en el cuadro de diálogo emergente.

    7. Haga clic en el botón Test (Probar) y controle que el código de respuesta sea 200 y que pueda ver las reclamaciones para su usuario exhibidas.

  • Paso 3. Crear un nuevo recurso y método

    Cree un nuevo recurso llamado /ride dentro de la API. A continuación, cree un método POST para ese recurso y configúrelo para utilizar una integración de proxy Lambda respaldada por la función RequestUnicorn que ha creado en el primer paso de este módulo.


    1. En el panel izquierdo, haga clic en Recursos bajo su WildRydes API.

    2. En el menú desplegable Acciones, seleccione Crear recursos.

    3. Introduzca ride en Resource Name (Nombre de recurso).

    4. Asegúrese de que Resource Path (Ruta de recursos) tenga el valor ride.

    5. Seleccione Enable API Gateway CORS (Activar CORS de gateway de API) para el recurso.

    6. Haga clic en Create Resource (Crear recurso).

    7. Con el recientemente creado recurso /ride seleccionado, en el menú desplegable Action (Acción), seleccione Create Method (Crear método).

    8. Seleccione POST en el nuevo menú desplegable que aparece y, a continuación, haga clic en la marca de verificación.

    9. Seleccione la Función de Lambda para el tipo de integración.

    10. Marque la casilla de Utilizar la integración proxy de Lambda.

    11. Seleccione la región que utiliza para la Región de Lambda.

    12. Introduzca el nombre de la función que creó en el módulo anterior, RequestUnicorn, en Lambda Function (Función de Lambda).

    13. Seleccione Guardar. Tenga en cuenta que, si obtiene un error que dice que no existe la función, compruebe que la región que ha seleccionado coincide con la que utilizó en el módulo anterior.

    14. Cuando se le solicite para ofrecer a Amazon API Gateway permiso para invocar su función, elija Aceptar.

    15. Elija la tarjeta Method Request (Solicitud de método).

    16. Elija el icono del lápiz que aparece junto a la Autorización.

    17. Seleccione el autorizador de grupo de usuarios de Cognito WildRydes en la lista desplegable y, a continuación, haga clic en el icono de verificación.

  • Paso 4. Implemente su API

    En la consola de Amazon API Gateway, elija Acciones, implementar API. Se le solicitará que cree una nueva fase. Puede utilizar prod para el nombre de la fase.


    1. En el menú desplegable Acciones, seleccione Implementar API.

    2. Seleccione [Nueva fase] en la lista desplegable Fase de implementación.

    3. Introduzca prod en Stage Name (Nombre de etapa).

    4. Elija Implementar.

    5. Anote el Invocar URL. Lo utilizará en la siguiente sección.

  • Paso 5. Actualizar la configuración de sitios web

    Actualice el archivo /js/config.js en la implementación de su sitio web para incluir la URL de la fase que acaba de crear. Debe copiar la URL para invocar directamente desde la parte superior de la página de editor de fase en la consola de Amazon API Gateway y péguela en la clave _config.api.invokeUrl del archivo /js/config.js de sus sitios. Asegúrese de que al actualizar el archivo de configuración todavía contenga las actualizaciones que se hicieron en el módulo anterior para el grupo de usuarios de Cognito.


    Si finalizó el módulo 2 manualmente, puede editar el archivo config.js que guardó en una ubicación local. Si utilizó la plantilla de AWS CloudFormation, primero debe descargar el archivo config.js en el bucket de S3. Para realizarlo, vaya a /js/config.js en la URL base de su sitio web y seleccione File (Archivo) y, a continuación, elija Save Page As (Guardar página como) en el navegador.

    1. Abra el archivo config.js en un editor de texto.

    2. Actualice la configuración invokeUrl bajo la clave de api en el archivo config.js. Establezca el valor de Invocar URL para la fase de implementación creada en la sección anterior.

      A continuación, se muestra un ejemplo de un archivo config.js completo. Tenga en cuenta que los valores reales en su archivo serán diferentes.

    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. Guardar los cambios a nivel local.

    2. En la consola de administración de AWS, elija Servicios a continuación, seleccione S3 en Almacenamiento.

    3. Vaya al bucket del sitio web y, a continuación, busque el prefijo de clave js.

    4. Seleccione Upload (Cargar).

    5. Elija Add files (Añadir archivos), seleccione la copia local de config.js y, a continuación, haga clic en Next (Siguiente).

    6. Elija Next (Siguiente) sin modificar los valores predeterminados en las secciones Set permissions (Definir permisos) y Set properties (Definir propiedades).

    7. Elija Upload (Cargar) en la sección Review (Revisar).

  • Paso 5. Valide su implementación

    Nota: Es posible que vea un retraso entre la actualización del archivo config.js en el bucket de S3 y cuando el contenido actualizado es visible en su navegador. También debe asegurarse de que borre la caché del navegador antes de ejecutar los pasos siguientes.


    1. Vaya a /ride.html ubicado debajo del dominio del sitio web.

    2. Si es redirigido a la página de inicio de sesión, inicie sesión con el usuario que ha creado en el módulo anterior.

    3. Una vez que el mapa se ha cargado, haga clic en cualquier lugar en el mapa para establecer un punto de recogida.

    4. Elija Solicitar unicornio. Debería ver una notificación en la barra lateral derecha de que un unicornio está en camino y luego debería ver un icono de unicornio volar a su punto de recogida.