Crear una aplicación web básica

TUTORIAL

En este módulo implementará la función sin servidor utilizando Amazon API Gateway

Información general

En este módulo utilizaremos Amazon API Gateway para crear una API RESTful que nos permitirá llamar a la función de Lambda desde un cliente web (en general se refiere al navegador web de un usuario). API Gateway cumplirá la función de capa intermedia entre el cliente HTML que creamos en el módulo uno y el backend sin servidor que creamos en el módulo dos.

Qué logrará

En este módulo, podrá:

  • Crear una API nueva usando API Gateway
  • Definir los métodos HTTP en su API
  • Desencadenar una función de Lambda desde una API
  • Habilite el uso compartido de recursos entre orígenes (CORS) en una API para que pueda consumir recursos de un origen diferente (dominio)
  • Probar una API creada con API Gateway desde la Consola de administración de AWS

Conceptos clave

API RESTful: REST significa “Transferencia de estado representacional” y se trata de un patrón arquitectónico para crear servicios web. API significa “interfaz de programación de aplicaciones”. Por lo tanto, una API RESTful implementa ese patrón arquitectónico de REST.

Métodos de solicitud HTTP: los métodos HTTP están diseñados para permitir la comunicación entre clientes y servidores. Los métodos como GET o PUT definidos por el protocolo HTTP se utilizan para indicar qué acción realizar en los recursos.

CORS: la característica de seguridad del navegador CORS utiliza encabezados HTTP para indicarle al navegador que debe permitir que una aplicación web específica se ejecute en un origen (dominio) para acceder a los recursos seleccionados de un servidor en otro origen.

Optimizado para borde: es un recurso que usa la infraestructura global de AWS para asistir mejor a los clientes dispersos geográficamente.

 Tiempo mínimo de realización

5 minutos

 Servicios utilizados

 Última actualización

4 de abril de 2023

Implementación

    1. Inicie sesión en la consola de API Gateway.
    2. En la sección Elegir un tipo de API, busque la tarjeta de API de REST y haga clic en el botón Crear de la tarjeta.
    3. En Elegir el protocolo, seleccione REST.
    4. En Crear una API nueva, seleccione Nueva API.
    5. En el campo Nombre de API, escriba HelloWorldAPI.
    6. Seleccione la opción Optimizado para borde en el menú desplegable Tipo de punto de conexión. (Nota: Los puntos de conexión optimizados para bordes son los mejores para los clientes distribuidos geográficamente. Esto los convierte en la mejor opción 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 la misma región de AWS).
    7. Haga clic en el botón Crear API de color azul. La configuración debe quedar como en la captura de pantalla que se puede ver a continuación.
    Cree una página de API, en la que se muestren las selecciones y configuraciones de la API.
    1. En el panel de navegación de la izquierda, seleccione Recursos en API: HelloWorldAPI.
    2. Asegúrese de que el recurso “/” esté seleccionado.
    3. En el menú desplegable Acciones, elija Crear método.
    4. Seleccione POST en el nuevo menú desplegable que aparece y, a continuación, seleccione la marca de verificación.
    5. Seleccione Función de Lambda en Tipo de integración.
    6. Seleccione la región de Lambda que utilizó al crear la función (o bien, verá un cuadro de advertencia que dice “No tiene ninguna función de Lambda en...”).
    7. Introduzca HelloWorldFunction en el campo Función de Lambda.
    8. Haga clic en el botón Guardar de color azul.
    9. Verá un mensaje que indica que le está concediendo a la API que está creando un permiso para llamar a la función de Lambda. Haga clic en el botón Aceptar.
    10. Seleccione el método POST creado recientemente, y luego, Habilitar CORS en el menú desplegable Acción.
    11. Deje seleccionada la marca de verificación POST y haga clic en el botón de color azul Habilitar CORS y reemplazar los encabezados CORS existentes.
    Habilite la página de configuración de CORS.

    10. Verá un mensaje de solicitud de confirmación de los cambios de método. Haga clic en el botón de color azul Sí, reemplazar los valores existentes.

    Mensaje de confirmación de cambios de método.
    1. En la lista desplegable Acciones, seleccione Implementar API.
    2. En la lista desplegable Etapa de implementación, seleccione [Nueva etapa].
    3. En Nombre de etapa, escriba dev.
    4. Elija Implementar.
    5. Copie y guarde la URL junto a URL de invocación (la necesitará en el módulo cinco).
    1. En el panel de navegación izquierdo, seleccioneRecursos.
    2. Ahora, los métodos para nuestra API aparecerán en una lista a la derecha. Elija POST.
    3. Haga clic en el pequeño rayo azul.
    4. Pegue lo siguiente en el campo Cuerpo de la solicitud:
    {
        "firstName":"Grace",
        "lastName":"Hopper"
    }

    5. Haga clic en el botón Probar de color azul.

    6. A la derecha verá una respuesta con el Código 200.

    7. ¡Genial! Creamos y probamos una API que llama a la función de Lambda.

Arquitectura de aplicaciones

Hemos terminado el módulo tres. Es hora de revisar la arquitectura:

En el diagrama de arquitectura se muestran los servicios alojados en la nube de AWS, con las conexiones de usuarios externos a los servicios de AWS interconectados.

Agregamos API Gateway y la conectamos a la función de Lambda existente. Ahora podemos disparar la función con una llamada a la API. Aún no sabemos generar esta llamada desde el cliente web. Primero agregaremos la tabla de datos en el módulo cuatro y conectaremos todo en el módulo cinco.

¿Le resultó útil esta página?

Crear una tabla de datos