Autor: Juan Pablo Fuentes

Formador de programación y bases de datos

Pasos para realizar el despliegue

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

Dockerizar jar

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.

Crear ejecutable jar

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

 

 

Ejemplo imagen docker


# 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>

Problemas de CORS

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/

Proyecto final

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.