Alojar una aplicación UI5 sin servidor en AWS

Estimada comunidad,

El siguiente blog lo guiará para implementar una aplicación UI5 en AWS S3 con Dynamo DB como base de datos back-end, Lambda como la capa de lógica comercial y la puerta de enlace API que actúa como una conexión entre el cliente (UI) y Lambda.

Arquitectura

Ahora abordemos estas capas una por una.

Dirígete a tu cuenta de AWS y busca S3. Haga clic en la opción Crear cubo como se muestra a continuación.

Crear depósito

En la ventana que aparece, escriba un nombre único para su depósito. Tenga en cuenta que el nombre debe ser único en todas las cuentas y regiones.lo que significa que si elijo el nombre de mi depósito para que sea demo-app-archisman, no podrá usar el mismo nombre aunque esté trabajando en su propia cuenta privada (y tal vez en una región separada).

Desmarque «Bloquear todo el acceso público» como se muestra a continuación.

Manteniendo el resto de la configuración como predeterminada, presione el botón Crear cubo. Debería poder ver un nuevo depósito público creado.

A continuación, navegaremos a nuestro depósito y editaremos la política del depósito para «Permitir» Obtenga acceso a todos los objetos almacenados en nuestro depósito.

Tipo de política: política de depósito S3

Efecto: Permitir

Principal: *

Acción: ObtenerObjeto

ARN: arn:aws:s3:::demo-app-archisman/* (asegúrese de pegar su propio nombre de recurso de Amazon único aquí y agregue /* al final, lo que significa que estamos otorgando acceso a GetObject a todos los objetos dentro de nuestro depósito )

Una vez que haya agregado correctamente la declaración anterior, genere la política.

Debería poder ver una ventana emergente con la política generada en formato JSON. Cópialo al portapapeles.

Pegue el JSON copiado anteriormente en el área de texto de la política del depósito como se muestra a continuación y guarde los cambios.

Ahora que hemos eliminado la política de depósitos, subamos nuestra aplicación web UI5 a S3. Vaya a la pestaña Objetos y haga clic en el botón Cargar.

Seleccione todos los archivos y arrástrelos y suéltelos en la sección Cargar.

Haga clic en Cargar. Una vez que se complete la carga, podrá ver los archivos y carpetas cargados en la pestaña Objetos.

Ahora que los archivos de la aplicación web están cargados, debemos decirle explícitamente a S3 que vamos a alojar un sitio web estático.

Vaya a la pestaña Propiedades y en la última sección haga clic en el botón Editar para «Alojamiento de sitios web estáticos».

Edite las siguientes propiedades y guarde los cambios.

Regrese a la misma sección de alojamiento de sitios web estáticos y debería poder ver una URL de punto final. Haga clic en la URL y su aplicación UI5 estará en funcionamiento.

Para mí, es una interfaz de aplicación de chat simple.

Ahora que tenemos un sitio web estático en funcionamiento, trabajemos en el backend para que nuestra aplicación sea interactiva.

Nuestra elección de base de datos aquí es Dynamo DB, que se parece mucho a NoSql Mongo DB. Siguiendo con el tema de nuestra aplicación, esta base de datos nuevamente no tiene servidor, por lo que no debemos preocuparnos por aprovisionar el servidor adecuado para alojar nuestra base de datos.

Diríjase al servicio de AWS Dynamo DB y haga clic en Crear tabla.

Escriba el nombre de su tabla, la clave de partición (sinónimo de clave principal de SQL) y la clave de ordenación (que es opcional). Si no está seguro acerca de las Unidades de capacidad de lectura y las Unidades de capacidad de escritura, manténgalas como predeterminadas. Sin embargo, es importante comprenderlos al diseñar una aplicación lista para producción, ya que determinan el rendimiento de su base de datos. Estas unidades ayudan a Dynamo DB a decidir la cantidad de particiones que se crearán y, a su vez, la eficiencia con la que la base de datos devuelve el resultado de una consulta.

Haga clic en Crear tabla.

Una vez creada la tabla, navegue hasta la tabla y cree algunos elementos (filas).

Vista JSON para el elemento anterior. Quería mostrar esta vista de Dynamo DB del JSON especialmente porque esta comprensión de la estructura será necesaria cuando escriba sus funciones lambda. «S» denota cadena, «L» denota lista/matriz y «M» denota mapa/objeto.

Cree tantas tablas como requiera su aplicación y pase a crear la capa de lógica empresarial, es decir, funciones lambda.

Nuestras funciones lambda básicamente interactuarán con nuestras tablas de base de datos anteriores para realizar operaciones CRUD. Diríjase al servicio AWS Lambda y cree sus funciones lambda según los requisitos de su aplicación. Aquí hemos utilizado Node como lenguaje de programación.

OBTENER Operación:

La siguiente función lambda muestra cómo obtener todos los registros de la tabla de la base de datos. La función «unmarshall» resaltada convierte el elemento de un objeto db de dynamo (como se muestra arriba) en un objeto JSON normal con el que estamos familiarizados.

GET Operación por ID

La siguiente función lambda muestra cómo obtener registros de la tabla de la base de datos en función de la clave principal.

Post operacion

A continuación, la función lambda muestra cómo insertar un registro en la base de datos.

Ahora que tenemos nuestra interfaz de usuario y la lógica de back-end configuradas, lo único que queda es conectar estos 2. Ahí es donde la puerta de enlace API entra en escena.

Diríjase a AWS service API Gateway y haga clic en Crear API. Elija el servicio API REST y haga clic en Build.

Asigne un nombre a su API y haga que el tipo de punto final esté optimizado para Edge. Haga clic en Crear API.

Una vez que se crea la API, haga clic en Acciones y presione Crear recurso.

Escriba el Nombre del recurso y haga clic en Crear recurso.

Ahora en este recurso queremos crear un método GET.

En la siguiente ventana, escriba el nombre de su función lambda y presione guardar.

Una vez guardado, debería poder ver este tipo de tubería creada.

Haga clic en Prueba. En la siguiente ventana, vuelva a hacer clic en el botón Prueba. Debería poder ver la salida de su función lambda que se devuelve como se muestra a continuación.

Ahora suponga que su equipo está dividido en diferentes equipos de front-end y back-end y su función lambda está devolviendo información redundante que no desea filtrar a su capa de interfaz de usuario. En el escenario anterior, los encabezados son una sección que mi lado del cliente no tendrá interés en conocer. API Gateway proporciona una función de modelado mediante la cual podemos remodelar/filtrar nuestra estructura de salida según lo requiera la aplicación del lado del cliente. Utiliza el lenguaje Velocity Templating y a continuación se muestra una versión simple.

Vaya a la sección Modelos y cree un nuevo modelo.

Cree un esquema JSON de la salida que devuelve la función lambda y guarde su modelo.

Ahora regrese a Recursos y haga clic en Respuesta de integración.

Agregue una plantilla de tipo «aplicación/json» y, en el menú desplegable Generar plantilla, seleccione el modelo que creó en el paso anterior.

A continuación se muestra la plantilla generada a partir del modelo.

En la plantilla anterior, eliminaré la sección de encabezados (ya que no quiero que esa información fluya a mi interfaz de usuario), cambiaré el nombre de la tecla «cuerpo» a «resultados» y reemplazaré TODO con cuerpo. Además, los valores ficticios deben reemplazarse con el nombre real de la clave. La plantilla modificada se verá como se muestra a continuación.