Asignatura Datos del alumno Fecha
Desarrollo Web: Full Apellidos:
Stack Nombre:
Actividad 3. Integración y despliegue de una
aplicación web
Objetivos
Las tres actividades que se llevarán a cabo en la asignatura Desarrollo Web Full
Stack tienen como objetivo:
Desarrollar un front-end haciendo uso de React.
Desarrollar un back-end que exponga las API REST mediante microservicios con
Java, Spring, Eureka y Zuul.
Integrar ambas partes y desplegar el back-end mediante contenedores Docker.
De forma opcional, se podrá desplegar toda la aplicación en Heroku.
Esta tercera actividad consiste en la integración del front-end y el back-end
realizado en las actividades anteriores y su despliegue mediante contenedores
Docker.
Pautas de elaboración
En las dos actividades anteriores hemos construido:
El front-end de una aplicación web (hasta ahora, con datos de prueba o mock).
El de
© Universidad Internacional back-end encargado
La Rioja (UNIR) de dar servicio a ese front-end (con referencias a
máquinas locales y a una base de datos en memoria), que se expone a través del
servidor perimetral Zuul.
1
Actividades
Asignatura Datos del alumno Fecha
Desarrollo Web: Full Apellidos:
Stack Nombre:
En esta actividad se deberá realizar lo siguiente:
Integrar el front-end y el back-end. Para esto será necesario modificar los
componentes de React que se encargaban de acceder a los datos de prueba para
que ahora hagan peticiones HTTP al back-end (siempre al servidor perimetral). Se
debe asegurar lo siguiente:
• El microservicio buscador dejará de usar una base de datos en memoria H2 y
pasará a utilizar un clúster de Elasticsearch cuyo modelo de datos será similar
al que se tenía en H2.
• El front-end debe beneficiarse de este cambio en la implementación del
back-end (debe permitir búsquedas que utilicen internamente campos search
as you type de Elasticsearch).
Desplegar todos los componentes de la arquitectura en local mediante
contenedores Docker. Además, de forma opcional, se podrá desplegar la
aplicación en Heroku. Tenemos los siguientes componentes desarrollados (cinco
en total, que es el máximo de aplicaciones permitidas para desplegar utilizando
una cuenta gratuita de Heroku):
• Front-end: una aplicación desarrollada con JavaScript y React.
• Back-end: servidor perimetral Zuul, servidor de registro Eureka, microservicio
buscador y microservicio operador.
Si deseáis realizar la parte opcional de la práctica para obtener la máxima nota,
podéis seguir las instrucciones que se indican en la web de Heroku para desplegar
una aplicación hecha con React y para desplegar imágenes Docker.
© Universidad Internacional de La Rioja (UNIR)
Si el despliegue en local mediante contenedores funciona correctamente, el
despliegue en Heroku será muy sencillo.
2
Actividades
Asignatura Datos del alumno Fecha
Desarrollo Web: Full Apellidos:
Stack Nombre:
Para que todo funcione correctamente en Heroku, es necesario tener en cuenta las
siguientes consideraciones:
El front-end deberá conocer la URL de la aplicación desplegada en Heroku
correspondiente al servidor perimetral, con el objetivo de enviar las peticiones
HTTP a nuestro back-end.
Los microservicios y el servidor perimetral Zuul deberán conocer la URL de la
aplicación desplegada en Heroku correspondiente al servidor de registro Eureka,
con el objetivo de registrarse en él correctamente.
La entrega consistirá en un archivo comprimido, que contendrá:
Archivo comprimido con el código del front que incluya el Dockerfile.
Archivo comprimido con el código de todos los componentes del back (Zuul,
Eureka y los dos microservicios, que incluya el o los Dockerfile.
Memoria.
Extensión y formato de la memoria
La memoria tendrá una extensión máxima de 20 páginas y deberá incluir los
siguientes apartados (en este orden):
1. Portada.
2. Índice.
© Universidad Internacional de La Rioja (UNIR)
3. Modificaciones realizadas en el front-end. Se describirán brevemente las
modificaciones que han sido necesarias en el front-end para lograr la integración
con el back-end, si procede.
3
Actividades
Asignatura Datos del alumno Fecha
Desarrollo Web: Full Apellidos:
Stack Nombre:
4. Modificaciones realizadas en el back-end. Se describirán brevemente las
modificaciones que han sido necesarias en el back-end para lograr la integración
con el front-end y las consideraciones que se hayan tenido en cuenta para migrar
de H2 a Elasticsearch.
5. Despliegue mediante contenedores. Se mostrarán los Dockerfile de los
diferentes componentes del back-end, así como las evidencias de que la
aplicación se está ejecutando correctamente. Además, se incluirán las URL de
todas las aplicaciones desplegadas en Heroku, en el caso de que se haya
realizado esta parte.
6. Conclusiones.
7. Referencias bibliográficas. Si procede, en formato APA.
Rúbrica
Integración y
Puntuación
despliegue de Peso
Descripción máxima
una aplicación %
(puntos)
web
Criterio 1 Modificación del back-end para utilizar
2 20 %
Elasticsearch.
Criterio 2 Integración de front-end y back-end en local con
5 50 %
contenedores.
Criterio 3 Despliegue de la aplicación en Heroku. 2 20 %
Elaboración de la memoria según la
Criterio 4 especificación, cuidando la presentación y la 1 10 %
corrección ortográfica de la misma.
10 100 %
© Universidad Internacional de La Rioja (UNIR)
4
Actividades
