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 Nueva API e introduzca WildRydes para el Nombre de la API.

    4. 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. En el menú desplegable Crear, seleccione Autorizador del grupo de usuarios de Cognito.

    3. Seleccione la región en la que creó el grupo de usuarios de Cognito en el módulo 2.

    4. Seleccione el grupo de usuarios WildRydes de Cognito en la lista desplegable.

    5. Escriba WildRydes para el nombre del autorizador.

    6. Asegúrese de que la fuente de la ficha de identidad está establecida en Autorización.

    7. Seleccione Crear.

    Compruebe la configuración de autorizador

    1. Abra una nueva pestaña y visite /ride.html en el dominio de 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 último módulo. Se le redirigirá a /ride.html.

    3. Copie la ficha de autenticación de la notificación en el /ride.htmly péguela en el campo ficha de identidad en la pestaña de la consola API Gateway.

    4. Elija Probar y verifique que ve las reclamaciones para el usuario que se muestra.

  • 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. Escriba ride como el Nombre de recurso.

    4. Asegúrese de que la Ruta de recursos esté establecida en ride.

    5. Haga clic en Crear recurso.

    6. Con el nuevo recurso el recurso seleccionado, desde el menú desplegable Acción seleccione Crear método.

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

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

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

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

    11. Escriba el nombre de la función que ha creado en el módulo anterior, RequestUnicorn, para la Función de Lambda.

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

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

    14. Elija la tarjeta de Solicitud de método.

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

    16. 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. Habilitar CORS

    Los navegadores web modernos evitan solicitudes HTTP de secuencias de comandos en páginas alojadas en un dominio de API que se aloja en otro dominio a menos que la API proporcione los encabezados de respuesta de uso compartido de recursos de origen cruzado (CORS) que hayan admitido explícitamente. En la consola de Amazon API Gateway puede agregar la configuración necesaria para enviar los encabezados de CORS adecuados en el menú de acción cuando tenga un recurso seleccionado. Debe habilitar CORS para POST y OPTIONS en su recurso /requestunicorn. Para simplificar, puede establecer el valor del encabezado Access-Control-Allow-Origin a '*', pero en una aplicación de producción siempre debe aprobar de forma explícita dominios autorizados para mitigar los ataques de falsificación de solicitudes entre sitios (CSRF).

    Para obtener más información acerca de las configuraciones de CORS en general, consulte https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS


    1. En la consola de Amazon API Gateway, en el panel del medio, seleccione el recurso /ride.

    2. En el menú desplegable Acciones, seleccione Habilitar CORS.

    3. Utilice la configuración predeterminada y seleccione Activar CORS y sustituir los encabezados CORS existentes.

    4. Elija Sí, sustituir los valores existentes.

    5. Espere a que aparezca una marca de verificación junto a todos los pasos.

  • Paso 5. 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. Escriba prod para el Nombre de la fase.

    4. Elija Implementar.

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

  • Paso 6. 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 ha realizado módulo 2 de forma manual, puede editar el archivo config.js que ha guardado a nivel local. Si utilizó la plantilla de AWS CloudFormation, primero debe descargar el archivo config.js de su bucket de S3. Para hacerlo, visite /js/config.js en la URL base para su sitio web y seleccione Archivo y a continuación elija Guardar página como desde su 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.

      Un ejemplo de un archivo config.js completo se incluye a continuación. 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 de sitio web y, a continuación, acceda al prefijo js.

    4. Seleccione Cargar.

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

    6. Elija Siguiente sin cambiar los valores predeterminados a través de las secciones Establecer permisos y Establecer propiedades .

    7. Elija Cargar en la sección de Análisis.

  • Paso 7. 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. Visite el /ride.html en el dominio de su 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.