Aplicaciones para Ambientes Distribuidos
Laboratorio # 10 – Prof. Regis Rivera
Objetivo: Creación de aplicación web simple con Amazon Web Services (AWS) con arquitectura
ServerLess
A. Inicio de sesión en consola
1. Iniciar sesión en AWS
2. Esto lo lleva a la consola de AWS
B. Creación de aplicación Web
1. Abrir el editor de texto de su preferencia, escribir el siguiente código
2. Guardar como [Link]
3. Comprimir el archivo [Link] en un .ZIP
4. Ir a la consola de Amplify (en este caso, región us-west-2)
[Link]
5. Click al botón Crear nueva aplicación
6. Seleccionar desplegar sin Git
7. Click en el botón Siguiente
8. En el campo nombre de la aplicación, colocar: GettingStarted
9. En el nombre de la ramificación, colocar: dev
10. Seleccionar el método: arrastrar y soltar
11. Click en el botón Elegir la [Link]
12. Buscar [Link] creado en el punto 3 de esta parte B del laboratorio
13. Click en guardar e implementar
14. Espere unos segundos
15. Resultado
16. Para probar la aplicación, copiar el URL que aparece en la sección dominio
17. Pegar en el navegador y observar resultados
18. Con esto, hemos creado la aplicación web, es decir, hasta ahora llevamos esta parte
del diseño
C. Crear función sin servidor
1. Abrir lambda en la consola de AWS [Link]
2. Asegurarse de crear la función en la misma región en la que creó la aplicación web en
el módulo anterior. Podrá ver esa información en la parte superior de la página, junto
al nombre de la cuenta (en nuestro caso: us-west-2)
3. Click en el botón crear función
4. Nombre de la función: HelloWorldFunction
5. Tiempo de ejecución: Python 3.8
6. Dejar el resto de los campos con los valores predeterminados
7. Click en crear función
8. Validar aparezca la confirmación de función creada correctamente
9. En el código fuente, sustituya el código de lambda_function.py por el siguiente:
10. Para guardar, vaya al menú Archivo y seleccione Guardar para guardar los cambios.
11. Click en deploy para implementar los cambios.
12. Validar aparezca la confirmación de la actualización
13. Click en el botón Probar crear un evento de prueba; para ello, seleccione Configurar
evento de prueba.
14. Nombre del evento, escriba: HelloWorldTestEvent
15. Evento JSON, escriba su nombre en el campo “firstName” y su apellido en “lastName”
(en la captura de pantalla dice literalmente estos textos, pero para efectos del
laboratorio, coloque su propio nombre y apellido respectivamente)
16. Luego click en guardar, confirmar se haya guardado exitosamente
17. Click en la sección probar
18. Click en probar
19. Confirmar ejecución exitosa
20. Click en Detalles para ver el evento que arroja la función.
21. Con esto, hemos creado nuestra función sin servidor para nuestra aplicación web, es
decir, hasta ahora llevamos esta parte del diseño
D. Enlazar función sin servidor a la aplicación web
1. Ir a la consola de API Gateway
[Link]
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 Crear una API nueva, seleccione Nueva API.
4. Nombre de API, escribir: HelloWorldAPI
5. Elegir optimizado para periferia en el campo tipo de punto de conexión de la API
Nota: Los puntos de conexión optimizados para periferias 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
6. Click en Crear API
7. Confirmar la creación exitosa del mismo
Creación nuevo recurso y método
8. En el panel de navegación de la izquierda, seleccione Recursos en API: HelloWorldAPI
9. Asegúrese de que el recurso “/” esté seleccionado
10. En el menú desplegable Acciones, elija Crear método
11. Seleccionar POST en el campo tipo de método
12. Seleccionar Función de Lambda en tipo de integración
13. Seleccionar la región de Lambda que utilizamos al crear la función (o bien, verá un
cuadro de advertencia que dice “No tiene ninguna función de Lambda en...”).
En nuestro caso la región es: us-west-2 (la cual debería aparecer preseleccionada)
14. Introducir HelloWorldFunction en el campo Función de Lambda, al final aparecerá con
su ruta completa (con su región y otros detalles)
15. Click en crear método
16. Confirmar el mensaje que indica que todo está en orden
17. Observar nuestro nuevo método creado
18. Ir a la raíz ( / ) en recursos, lado izquierdo de la pantalla
19. Observar aparece el método POST creado en un listado
20. Seleccionar el método, click en botón “Habilitar CORS”
21. Click al check POST
22. Click en guardar
23. Confirmar se haya creado exitosamente
24. Ver detalles de lo creado:
25. Así quedo nuestro listado de métodos
Implementación
26. Click en botón Implementar API
27. En la lista desplegable Etapa de implementación, seleccione [Nueva etapa]
28. En Nombre de etapa, escriba dev.
29. Elija Implementar
30. Confirmar la implementación
31. Copie y guarde la URL junto a URL de invocación (la necesitará en la parte F de este
laboratorio).
Validar la API
32. En el panel de navegación izquierdo, seleccionar Recursos.
33. Ahora, los métodos para nuestra API aparecerán en una lista a la derecha. Elegir POST.
34. Ir a la sección Pruebas
35. Escribir lo siguiente en el campo Cuerpo de la solicitud:
{
"firstName":"Fulano",
"lastName":"De Tal"
}
36. Click en el botón Probar
37. Observar detalle de la respuesta con el Código 200.
38. Con esto, hemos creado nuestro API que consume la función lambda con ingreso vía
API Gateway para nuestra aplicación web, es decir, hasta ahora llevamos esta parte
del diseño
E. Creación de tabla de datos
1. Ingresar a la consulta de DynamoDB
[Link]
2. Confirmar estemos en la misma región en la que creó la aplicación web en el módulo
anterior. Podrá ver esa información en la parte superior de la página, junto al nombre
de la cuenta. En nuestro caso, es: us-west-2
3. Click en crear tabla
4. Nombre de la tabla, escribir: HelloWorldDatabase
5. Clave de participación, escribir: ID
i. Tipo de dato: Cadena (String)
6. Dejar el resto de los valores predeterminados sin cambios
7. Click en el botón Crear tabla.
8. Confirmar creación exitosa
9. En la lista de tablas, seleccione el nombre de la tabla, HelloWorldDatabase
10. En la sección Información general, seleccione la flecha hacia abajo para mostrar
Información adicional.
11. Copiar el nombre de recurso de Amazon (ARN). Lo necesitará más adelante en este
laboratorio
Crear política IAM y agregarla a la función lambda
12. Editar la función de Lambda para que se pueda escribir datos en ella, abrir la consola
[Link]
13. Seleccionar la función HelloWorldFunction que creamos en la parte C de este
laboratorio
14. Seleccionar la pestaña Configuración
15. Seleccionar Permisos en el menú de la izquierda.
16. En el cuadro Rol de ejecución, en Nombre del rol, click al enlace. Se abrirá una nueva
pestaña del navegador.
17. En el cuadro Políticas de permisos, abrir el menú desplegable Agregar permisos y
seleccionar Crear política integrada.
18. Seleccionar la pestaña JSON.
19. Copiar la siguiente política en el área de texto; asegúrese de reemplazar el ARN de la
tabla en el campo Resource en la línea 15:
Nota: Esta política le permitirá a la función de Lambda leer, editar o eliminar
elementos, pero solo podrá hacerlo en la tabla que creamos (es decir, nuestra base de
datos).
20. Click en siguiente (para ir al paso 2, revisar y crear)
21. Nombre de la política, escribir: HelloWorldDynamoPolicy.
22. Click en Crear política
23. Confirmar todo este en orden
24. Ahora puede cerrar esta pestaña del navegador y volver a la pestaña de la función de
Lambda (donde quedamos en el punto 16)
Modificar la función de Lambda para escribir en la tabla de DynamoDB
25. Una vez volvimos al lambda, ir a la sección código (recordar estaba previamente):
26. Reemplazar el código de la función por el siguiente (Python)
27. Click al botón Implementar (deloy) en la parte superior del editor de código.
28. Confirmar actualización
Probar los cambios
29. Ir a la sección Probar
30. Click al botón Probar
31. Verá el mensaje Resultado de la ejecución: correcta con fondo verde.
32. En una nueva pestaña del navegador, abra la consola de DynamoDB.
33. En el panel de navegación de la izquierda, seleccione Tablas > Explorar elementos.
Seleccione HelloWorldDatabase, que creamos al comienzo de esta parte E del
laboratorio
34. Los elementos que coincidan con el evento de prueba aparecen en Elementos
devueltos. Si ha utilizado nuestros ejemplos, el ID del elemento será Hello from
Lambda su nombre su apellido
Nota: La tabla de DynamoDB se actualizará cada vez que se ejecute la función de
Lambda. Si se utiliza el mismo nombre, solamente cambiará la marca temporal
35. Con esto, hemos creado la base de datos de nuestra aplicación web que interactúa
con nuestra función Lambda y con los permisos dados en IAM, es decir, hasta ahora
llevamos esta parte del diseño
F. Adición de interactividad a aplicación web
1. Abrir el archivo [Link] creado al inicio de este laboratorio
2. Reemplazar el código existente por el siguiente:
3. Asegúrese de agregar su URL de invocación de API en la línea 34 (donde dice: URL
PARA INVOCAR API).
Nota: Si no tiene la URL de su API, para obtenerla en la consola de API Gateway,
seleccione la API y luego elija etapas.
4. Guardar el archivo.
5. Comprimir en ZIP únicamente el archivo HTML.
6. Abrir la consola de Amplify.
7. Elegir la aplicación web que creó en la parte B de este laboratorio, click en
Implementar actualizaciones
8. Click en el botón Elegir la [Link] en la sección arrastrar y soltar.
9. Seleccionar el archivo ZIP que creó en el paso 5 de esta sección del laboratorio
10. Click en guardar y desplegar
11. Esperar unos segundos
12. Confirmar implementación
Probar la aplicación web actualizada
13. Click en la URL que aparece en Dominio.
14. Observar su aplicación web creada:
15. Escriba su nombre/apellido (o lo que prefiera) y click al botón Invocar API
Ejemplo:
16. Debería ver un mensaje que comienza con Hola desde Lambda seguido del texto que
escribió.
Ejemplo:
17. Y con esto, concluimos nuestro laboratorio llegando al objetivo pactado al inicio del
mismo creando la aplicación web respetando nuestro diseño arquitectónico planteado
