Introducción a AWS

Crear una aplicación web sin servidor

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

Crear una aplicación web sin servidor

Módulo 4: Implementar una API RESTful

Utilizará Amazon API Gateway para exponer la función Lambda que creó en el módulo anterior como una API RESTful

Información general

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-03

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. Sin embargo, 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 de realización

15 minutos

 Servicios utilizados

Implementación

  • Crear una nueva API REST

    a. En la consola de administración de AWS, haga clic en Servicios y seleccione API Gateway en Servicios de aplicaciones.
    b. Elija Crear API.
    c. Seleccione Nueva API e ingrese WildRydes en Nombre de la API.
    d. Mantenga seleccionada la opción Optimizado para borde en el menú desplegable 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 enlace regionales se utilizan para las API a las cuales se obtiene acceso principalmente desde el interior de la misma región de AWS.
    e. Elija Crear API

  • 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 la 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 la 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 al copiar y pegar el token de autenticación que se le presenta después de iniciar sesión mediante la página /signin.html del sitio web actual.

    a. En la API recién creada, elija Autorizadores.

    b. Elija Crear nuevo autorizador.

    c. Ingrese WildRydes en el nombre del autorizador.

    d. Seleccione Cognito para el tipo.

    e. En el menú desplegable de regiones en 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).

    f. Ingrese WildRydes (o el nombre que asignó al grupo de usuarios) en la entrada Grupo de usuarios de Cognito.

    g. Ingrese Autorización en la Fuente de token.

    h. Elija Crear.


    Verificar la configuración de autorizador

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

    k. 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 le redirigirá nuevamente a /ride.html.

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

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

    n. Haga clic en Probar en la sección inferior de la tarjeta del autorizador.

    o. Pegue el token de autorización en el campo Token de autorización en el cuadro de diálogo emergente.

    p. Haga clic en el botón Probar y verifique que el código de respuesta sea 200 y que se muestran las solicitudes correspondientes a su usuario.

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

    a. En la barra de navegación izquierda, haga clic en Recursos en la API de WildRydes.

    b. En el menú desplegable Acciones, elija Crear recurso.

    c. Ingrese ride en Nombre de recurso.

    d. Asegúrese de que la Ruta de recursos tenga el valor ride.

    e. Seleccione Habilitar API Gateway CORS para el recurso.

    f. Haga clic en Crear recurso.

    g. Con el recién creado recurso /ride seleccionado, en el menú desplegable Acción, seleccione Crear método.

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

    i. Seleccione Función Lambda para el tipo de integración.

    j. Marque la casilla Usar integración de proxy de Lambda.

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

    l. Ingrese el nombre de la función que creó en el módulo anterior, RequestUnicorn, en Función Lambda.

    m. Elija 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.

    n. Cuando se le solicite que conceda permiso a Amazon API Gateway para invocar la función, elija Aceptar.

    o. Elija la tarjeta Solicitud de método.

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

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

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

    a. En la lista desplegable Acciones, seleccione Implementar la API.
    b. En la lista desplegable Etapa de implementación, seleccione [Nueva etapa].
    c. Ingrese prod en Nombre de etapa.
    d. Elija Implementar.
    e. Anote el valor de URL de invocación. Lo usará en la sección siguiente.

  • Actualizar la configuración del sitio web

    Actualice el archivo /js/config.js en la implementación del 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 para el grupo de usuarios de Cognito.

    a. Abra el archivo config.js en un editor de texto.
    b. Actualice la configuración invokeUrl en la clave api del archivo config.js. Defina el valor de 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 del 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, 
    
        } 
    
    };

    c. 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
    
  • Validar la implementación

    Nota: Es posible que experimente un retraso entre la actualización del archivo config.js en el 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.

    a. Vaya a /ride.html ubicado en el dominio del sitio web.
    b. 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.
    c. Después de que se haya cargado el mapa, haga clic en cualquier lugar del mapa para establecer una ubicación de recogida.
    d. Elija 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 que vuela hacia el lugar de recogida.

¿Este módulo le resultó útil?

Gracias
Indíquenos lo que le gustó.
Cerrar
Lamentamos haberlo decepcionado
¿Hay información desactualizada, confusa o inexacta? Ayúdenos a mejorar este tutorial con sus comentarios.
Cerrar

Terminar los recursos