Como resumen de lo visto en el curso vamos a crear:
1.- Un github con nuestros códigos
2.- Uno o varios deploys en render de nuestros proyectos
3.- Una web de ‘curriculum’ en html que desglose nuestras habilidades y enlace a las páginas anteriores.
(ejemplos: https://devsnap.me/html-resume-templates)
Esta web la podemos subir en alwaysdata, por ejemplo, pero si alguien quiere que se la suba en una carpeta de trifulcas lo hago.
Alwaysdata nos proporciona un servidor web con bases de datos gratuito
Render nos permite publicar imágenes docker
Paso 1:
Publicar mi base datos en alwaysdata
– Tener una cuenta de alwaysdata OK
– Tener el SQL de mi base de datos OK
– Crear una bd en alwaysdata OK
– Crear un usuario y contraseña OK
– Importar la base de datos OK
– Probar la conexión OK
Paso 2.
– Cambiar la conexión de mi backend a la BD remota OK
– Voy a probar que funcione OK (dándole al play en eclipse)
– Voy a crear el .jar OK (p. ej. run as -> Maven install
– Voy a probar que funcione OK (java -jar nombredelarchivo.jar)
– Voy a dockerizarlo OK (copio el .jar a la carpeta de docker, compruebo el dockerfile, ejecuto docker build -t nombre-imagen . nombre-imagen es el nombre que le queramos poner a nuestra imagen)
– Voy a probar OK (dentro de docker desktop busco la imagen, RUN, mapeo el puerto 8080 y accedo vía postman)
Paso 3
– Subir nuestro proyecto a docker hub
– Tener una cuenta docker hub
– login a docker hub
– Etiquetar nuestra imagen con el usuario docker hub
– Push de nuestra imagen
Paso 4
– Publicar en render
– Nos hacemos una cuenta en render
– Web service
– existing image
– Nuestra imagen
– Escogemos FREE
– PORT 8080 en enviroment variables
Paso 5
– Subir archivos front
– Necesitamos una cuenta en un servidor, ya tenemos el alwaysdata
– Creamos una cuenta ftp (usuario y contraseña)
– Tenemos la url (p. ej. ftp-thecorner.alwaysdata.net)
– Usamos cualquier programa de ftp para subir los archivos (ej. filezilla, winscp)
– Comprobamos que los archivos de front acceden a la url de render (y que funcionan)
– Subimos los archivos al servidor
Creamos un dockerfile
# Utiliza una imagen base de Java FROM eclipse-temurin:21-jdk-alpine # Crea un directorio dentro del contenedor para la aplicación WORKDIR /app # Copia el archivo JAR de tu aplicación al contenedor COPY SpringBoot01.jar /app/SpringBoot01.jar # Expone el puerto en el que se ejecutará la aplicación (puedes ajustarlo si es diferente) EXPOSE 8080 # Comando para ejecutar el JAR ENTRYPOINT ["java", "-jar", "/app/SpringBoot01.jar"]
Copiamos el arhivo .jar de nuestra aplicación (lo tenemos en target) a la raiz de nuestro proyecto. Aprovechad para cambiarle el nombre por otro un poco más amigable.
Tened cuidado con:
– La versión del Java
– El nombre de vuestro archivo
Construimos la imagen docker:
docker build -t SpringBoot01 .
La tendremos en nuestro docker desktop
La ejecutamos mapeando el puerto 8080 al puerto que queramos (el mismo 8080, por ejemplo). Si vamos a nuestro navegador deberíamos poder acceder como antes. Tened cuidado de no tener otro SpringBoot activo que nos pise los puertos.
Por consola:
mvnw clean package
Dentro de la carpeta del proyecto
En Eclipse:
Botón derecho -> run as -> Maven install
o
Botón derecho -> run as -> Maven build
Y poner package en ‘goal’
El archivo lo crea dentro de la carpeta /target
Para ejecutarlo vamos a la consola y ponemos
java -jar nombre-del-archivo.jar
# Utilizar una imagen base de Ubuntu FROM ubuntu:20.04 # Establecer el directorio de trabajo WORKDIR /usr/share/nginx/html # Instalar Nginx RUN apt-get update && apt-get install -y nginx # Copiar un archivo HTML personalizado al contenedor COPY index.html /var/www/html/index.html # Exponer el puerto 80 EXPOSE 80 # Iniciar Nginx CMD ["nginx", "-g", "daemon off;"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hola que tal</h1>
</body>
</html>
Si al acceder a la API desde JS tenemos problemas de CORS (orígenes cruzados de datos) se debe a que las direcciones tipo localhost suelen estar bloqueadas por los navegadores. Para solucionar esto debemos usar la anotacion @CrossOrigin. Simplemente poniendo esa anotación debería permitir el acceso desde cualquier origen.
Aquí tenéis algunos ejemplos:
https://spring.io/guides/gs/rest-service-cors
https://howtodoinjava.com/spring-boot2/spring-cors-configuration/
El proyecto final consiste en crear una aplicación que se componga de dos partes:
1.- Backend
Hay que desarrollar una API Rest con Spring Boot que nos permita realizar el mantenimiento (CRUD) de una base de datos de como mínimo tres tablas relacionadas.
2.- FrontEnd
Hay que desarrollar una web con HTML, CSS y JS que tenga un estilo atractivo y que consuma algún elemento de la API
Un ejemplo
Tengo mi biblioteca que tiene las siguientes tablas:
Género 1–N Libro N–N Autor
Mi Api REST me permite hacer el mantenimiento (CRUD) de géneros, libros y autores con los verbos estándar del REST (GET, POST, PUT y DELETE). También me tendría que poder asignar un libro a un autor y viceversa.
Mi página web podría tener, por ejemplo, una cabecera con una imagen de libros y un menú para ver el listado de los géneros que tengo y pinchando en uno de esos géneros me salieran los libros que son de ese género.
Un proyecto como el anterior sería lo mínimo a entregar. Después se puede complicar, podemos poner vistas en el Backend, búsquedas en el front, y cualquier cosa que se nos ocurra.
¿Qué tenemos que ir entregando?
1.- Una descripción del proyecto
2.- El modelo E-R de la base de datos (no la base de datos)
3.- Un esquema de lo que tendrá el frontend
Una vez validado por mí arrancamos el proyecto y al finalizarlo hay que entregar el código fuente y un volcado de la base de datos. Si alguien lo quiere subir a Github como vimos antes del verano, estupendo.
