Este repositorio es parte del proyecto final de ciclo.
Este módulo del proyecto servirá para mostrar e interactuar con el usuario final de la aplicación a través de un sitio web. Una parte de la web será estática y otra dinámica usando Angular.
Esta última parte (Angular), se iniciará desde una ruta concreta /reserva, y solo servirá para ayudar al cliente a realizar la reserva de una mesa a partir de la consulta de disponibilidad al servidor.
Para realizar la reserva el usuario no necesitará registrarse, solo se le pedirán algunos datos a través de un formulario, con lo que se le mostrará la disponibilidad y por último podrá reservar tan solo pulsando un botón.
El directorio angular contiene el código de desarrollo de la parte dinámica, desde donde se generará el directorio reserva usando ng build. El resto de directorios y documentos son la parte estática del sitio web.
- Html
- Css
- Bootstrap
- Javascript
- Typescript
- Angular
- Docker
El proceso de compilación del proyecto y generación de la imagen de docker es sencillo y se describirá más adelante. Para los pasos descritos se toma como sistema operativo en funcionamiento linux. En windows no difiere demasiado el proceso.
- node / npm
- angular-cli
- docker
Para instalar el cli de angular es necesario tener instalado previamente node.js y su gestor de paquetes npm Link. Para más información sobre el cli se puede consular su documentación Link.
Para poder generar el proyecto deben instalarse previamente las dependencias de angular con el siguiente comando, desde el directorio angular:
cd angular
npm installPara probar la aplicación se puede ejecutar el siguiente comando:
ng serveEsto genera un servidor que escuchará en el puerto 4200 y la aplicación se inicia desde la ruta reserva/, por lo que el enlace sería el siguiente:
http://localhost:4200/reserva/
Nota: debe tenerse en cuenta que la aplicación estará conectada a la api por lo que las reservas que se realicen se guardaran en la base de datos en producción Link.
Una vez probado el servidor se puede generar el build que se enviará a producción con el siguiente comando:
ng buildEsto guarda el resultado de la transpilación y construcción en un directorio superior llamando reserva y el cual será guardado en la imagen que se enviará a producción, no así con el directorio angular el cual no se guarda en la imagen.
Debido a que se pretende desplegar la aplicación como un contenedor sobre un servidor de kubernetes, a continuación se describen los pasos para crear la imagen que podrá ser publicada para su puesta en producción. En este caso el contenedor se desplegará sobre una raspberry-pi por lo que debe especificarse la arquitectura en el proceso.
Como se ha especificado anteriormente debe tenerse instalado docker o podman y que permitan la generación de imágenes en otras arquitecturas. Los comando que expongo usan podman pero podría sustituirse por docker sin problema.
Para que funcione correctamente la parte de angular, debe haberse generado la compilación previamente como se ha descrito anteriormente.
En caso de haber seguido los pasos anteriores, ahora se debe subir una carpeta para volver a la raíz de este proyecto cd ... Desde este punto se puede ejecutar el siguiente comando:
podman build --no-cache --pull --platform linux/arm64 -t kennycallado/sensacion_web:vX-nginx-arm64 .Nótese que he usado un tag relativo a mi cuenta en https://hub.docker.com.
Para que el resultado de todos estos pasos previos sea accesible desde cualquier punto, usaré el registro de imágenes oficial de docker, y para ello debe ejecutar el siguiente comando:
podman push --format docker kennycallado/sensacion_web:vX-nginx-arm64Para que funcione previamente ha de realizar el login con las credenciales oportunas:
podman loginPara el despliegue en kubernetes deben generarse los manifiestos necesarios que se aportan en otro repositorio (PFC-root).