Proyectos en AWS:

Desarrolle una aplicación web sin servidor

con AWS Lambda, Amazon API Gateway, AWS Amplify, Amazon DynamoDB y Amazon Cognito

Serverless_Web_App_LP_assets-15
Serverless_Web_App_LP_assets-22

Introducción

Progression-Bar-07

Alojar un sitio web estático

Progression-Bar-08

Administrar usuarios

Progression-Bar-09

Crear un backend sin servidor

Progression-Bar-16

Implementar una API RESTful

Progression-Bar-11

Terminar los recursos

Módulo 4. API RESTful

En este módulo utilizará Amazon API Gateway para exponer la función Lambda que creó en el módulo anterior como una API RESTful. Esta API estará disponible en el Internet público. Se protegerá mediante el grupo de usuarios de Amazon Cognito que creó en el módulo anterior. Con esta configuración convertirá su sitio web alojado estáticamente en una aplicación web dinámica al añadir código JavaScript en el lado del cliente que realiza llamadas AJAX a las API expuestas.

Información general de la arquitectura

Serverless_Web_App_LP_assets-05

En el diagrama anterior se muestra cómo el componente API Gateway que creará en este módulo se integra con los componentes existentes que creó anteriormente. Los elementos atenuados son piezas que ya ha implementado en pasos anteriores.

El sitio web estático que implementó en el primer módulo ya tiene una página configurada para interactuar con la API que creará en este módulo. La página en /ride.html tiene una sencilla interfaz basada en un mapa para solicitar un paseo en unicornio. Después de autenticarse mediante la página /signin.html, los usuarios podrán seleccionar su ubicación de recogida haciendo clic en un punto del mapa y, a continuación, solicitando un paseo mediante el botón "Request Unicorn" (Solicitar unicornio) en la esquina superior derecha.

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

Tiempo para completar el módulo: 15 minutos

Servicios utilizados: Amazon API Gateway y AWS Lambda

Instrucciones de implementación

Siga las instrucciones paso a paso a continuación para crear la API REST. Haga clic en cada uno de los números de paso para ampliar la sección correspondiente.

  • Paso 1. Crear una nueva API REST

    Crear una nueva API REST

    1. En la consola de administración de AWS, haga clic en Services (Servicios) y seleccione API Gateway en los servicios de aplicaciones.

    2. Elija Create API (Crear API).

    3. Seleccione New API (Nueva API) y escriba WildRydes en API Name (Nombre de la API).

    4. Mantenga seleccionada la opción Edge optimized (Optimizado para borde) en el menú desplegable Endpoint Type (Tipo de punto de enlace). 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. Elija Create API (Crear API)

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

    Crear un autorizador de grupos de usuarios de Cognito

    Amazon API Gateway puede utilizar los tokens de JWT que devuelven los grupos de usuarios de Cognito para autenticar las llamadas a la API. En este paso configurará un autorizador para que su API utilice el grupo de usuarios que creó en el módulo 2.

    En la consola de Amazon API Gateway, cree un nuevo autorizador de grupo de usuarios de Cognito para su API. Configúrelo con los detalles del grupo de usuarios que creó en el módulo anterior. Puede probar la configuración en la consola copiando y pegando el token de autenticación que se le presenta después de iniciar sesión mediante la página /signin.html de su sitio web actual.

    1. En la API recién creada, seleccione Authorizers (Autorizadores).

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

    3. Escriba WildRydes en el nombre del autorizador.

    4. Seleccione Cognito para el tipo.

    5. En el menú desplegable de regiones 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. Escriba WildRydes (o el nombre que asignó a su grupo de usuarios) en la entrada Cognito User Pool (Grupo de usuarios de Cognito).

    7. Escriba Authorization (Autorización) en Token Source (Origen de token).

    8. Seleccione Create (Crear).

    Verificar la configuración de autorizador

    1. Abra una pestaña nueva en el navegador y vaya a /ride.html, en el 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) en la sección inferior de la tarjeta del 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 verifique que el código de respuesta sea 200 y que se muestran las solicitudes de su usuario.

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

    Crear un nuevo recurso y método

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

    1. En la barra de navegación izquierda, haga clic en Resources (Recursos) en la API de WildRydes.

    2. En el menú desplegable Actions (Acciones), elija Create Resource (Crear recurso).

    3. Escriba 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 API Gateway) para el recurso.

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

    7. Con el recién 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 Lambda Function (Función Lambda) para el tipo de integración.

    10. Marque la casilla Use Lambda Proxy integration (Usar integración de proxy de Lambda).

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

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

    13. Seleccione Save (Guardar). Si recibe un error de que no existe la función, verifique que la región que seleccionó coincida con la que utilizó en el módulo anterior.

    14. Cuando se le pregunte si desea conceder permiso a Amazon API Gateway para invocar su función, elija OK (Aceptar).

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

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

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

  • Paso 4. Implementar la API

    Implementar la API

    En la consola de Amazon API Gateway, elija Actions (Acciones), Deploy API (Implementar API). Se le pedirá que cree una nueva etapa. Puede utilizar prod en el nombre de la etapa.

    1. En la lista desplegable Actions (Acciones), seleccione Deploy API (Implementar API).

    2. Seleccione [New Stage] ([Nueva etapa]) en la lista desplegable Deployment stage (Etapa de implementación).

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

    4. Elija Deploy (Implementar).

    5. Anote el valor de Invoke URL (URL de invocación). Lo usará en la sección siguiente.

  • Paso 5. Actualizar la configuración del sitio web

    Actualizar la configuración del sitio web

    Actualice el archivo /js/config.js en la implementación de su sitio web para incluir la URL de invocación de la etapa que acaba de crear. Debe copiar la URL de invocación directamente de la parte superior de la página del editor de etapas en la consola de Amazon API Gateway y pegarla en la clave _config.api.invokeUrl del archivo /js/config.js de su sitio. Asegúrese de que, al actualizar el archivo de configuración, este todavía contenga las actualizaciones que efectuó en el módulo anterior en el grupo de usuarios de Cognito.

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

    2. Actualice la configuración invokeUrl en la clave api del archivo config.js. Defina el valor de Invoke URL (URL de invocación) de la etapa de implementación que creó 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 de su archivo serán distintos.

    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. Guarde el archivo modificado y envíelo al repositorio de Git para que se implemente de forma automática en la consola de Amplify.

    $ git push

  • Paso 5. Validar su implementación

    Validar su implementación

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

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

    2. Si se le redirecciona a la página de inicio de sesión, inicie la sesión con el usuario que creó en el módulo anterior.

    3. Después de que se haya cargado el mapa, haga clic en cualquier lugar del mapa para establecer una ubicación de recogida.

    4. Elija Request Unicorn (Solicitar unicornio). Debe ver una notificación en la barra lateral derecha de que un unicornio está en camino y, a continuación, ver un icono de unicornio volando a su lugar de recogida.

Siguiente: Terminar los recursos