Mascotas | Aplicación web
Introducción
El proyecto Full-Stack consiste en registrar mascotas con información como edad, nombre, raza y enfermedades, por lo que todos pueden comparar la información de sus mascotas sin necesidad de registrarse a la aplicación web. Fue creado por mi mismo, el día 7 de abril de 2023, inicialmente fue creado una prueba técnica de un puesto de trabajo de desarrollador Full-Stack.
Este proyecto tiene una arquitectura de "FrontEnd y BackEnd desacoplados", fue desarrollado usando ReactJS + Axios para el lado de "FrontEnd" y usando NodeJS + Express + Mongoose para el lado del "BackEnd".
También se utilizó la base de datos de MongoDB para almacenar los datos usando Mongoose cómo ODM, por lo que los datos se guardan en la nube, y pueden ser fácilmente recuperados.
Por último, pero no menos importante, este proyecto, implementa Vagrant con Ubuntu 18.02LTS como sistema operativo, además de incluir Docker y Docker-compose para crear y lanzar servicios (mongodb:4.0, node:14.21.3-slim, ) por contenedores. Por lo que, se puede probar usando Docker / Docker-compose / NPM.
Funciones
Esta arquitectura representa un enfoque completo y moderno para el desarrollo de aplicaciones web, integrando frontend, backend, y bases de datos, junto con herramientas de virtualización y contenedores para un manejo eficiente del entorno de desarrollo y despliegue.
Este conjunto de tecnologías y características para este aplicación web:
Proyecto con infraestructura virtualizada o proyecto Vagrantizado.
Proyecto dockerizado.
Proyecto de RectJS + Axios (FrontEnd).
Proyecto de NodeJS + Express + Moongose (BackEnd).
Base de datos usando MongoDB
Mapeador de Documentos a Objetos (ODM con Mongoose).
Notificaciones de sistema.
CRUD para mascotas (crear, leer, eliminar, actualizar).
¿Cómo funciona?
Es necesario crear un archivo `.env` del proyecto de backend dentro del path **./api**, opcionalmente puede hacer una copia del archivo `.env.example` con el nombre de **.env** que incluyen variables de entorno predeterminado o por default para funcionar con **docker-compose** y **vagrant**. <br>
```text
# API Mascotas
API_PORT=3033 # Puerto para API mascotas
API_CORS_ORIGIN="http://localhost:3080" # URL de App mascotas
# Mongo Database para MongoDB Atlas
API_MONGO_HOST="<host>"
API_MONGO_PORT=<port>
API_MONGO_DATABASE="<database>"
# Mongo Database para MongoDB Local u Otro
API_MONGO_URI="mongodb://user_vagrant:pass@service_db/db_vagrant?authSource=admin"
```
Variables de entorno | Mascota Api
API_PORT *(Requerido)* Puerto para API mascota por default es `3033`
API_CORS_ORIGIN *(Requerido)* Es la URL del proyecto frontend de App Mascotas por default es `http://localhost:3033`
Variables de entorno para base de datos | Local u Otro
API_MONGO_HOST *(Requerido)*
API_MONGO_PORT *(Requerido)*
API_MONGO_DATABASE *(Requerido)*
API_MONGO_URI *(Opcional)*
Solo en caso de requerir usuario y contraseña, por ejemplo: `mongodb://<user>:<password>@<host>:<port>/<database>?<options>`. Esta variable de entorno anula las anteriores.
El URI por defecto es `mongodb://user_vagrant:pass@service_db/db_vagrant?authSource=admin`
Configuración Previa | Frontend | Mascota App
Es necesario crear un archivo `.env` del proyecto de backend dentro del path **./mascotas-app**, opcionalmente puede hacer una copia del archivo `.env.example` con el nombre de **.env** que incluyen variables de entorno predeterminado o por default para funcionar con **docker-compose** y **vagrant**. <br>
```text
# Base URL de Moscota API
REACT_APP_MASCOTA_API="http://localhost:3033/api/v1/mascota"
```
Variables de entorno | Mascota App
* **REACT_APP_MASCOTA_API** *(Requerido)* Es la URL del proyecto backend de Mascotas API por default es `http://localhost:3033/api/v1/mascota`
Correr aplicación de forma independiente (Usando npm)
Es necesario ejecutar el siguiente comando desde donde se encuentra el archivo **package.json** de cada respectivo proyecto.
Configuración previa
Antes de ejecutar los proyectos Frontend (App Mascotas) y Backend (API Mascota) es necesario configurar el archivo `.env` de cada respectivo proyecto.
Ejecutar Frontend
Es necesario ejecutar el proyecto frontend usando el sig. comando dentro del path **./mascotas-app/**
$ npm run start
Ejecutar Backend
Es necesario ejecutar el proyecto backend usando el sig. comando dentro del path **./api/**
$ npm run dev
Correr aplicación de forma automatizada (Usando docker-compose)
Es necesario ejecutar el siguiente comando desde donde se encuentra el archivo **docker-compose.yml**
Configuración previa
Antes de ejecutar los proyectos Frontend (App Mascotas) y Backend (API Mascota) es necesario configurar el archivo `.env` de cada respectivo proyecto.
Esto construye y corre la aplicación en segundo plano
docker-compose build && docker-compose up -d
Esto detiene y elimina la aplicación
docker-compose stop -f && docker-compose rm -f
Correr aplicación de forma automatizada (Usando vagrant)
**Nota**
Es necesario ejecutar el siguiente comando desde la directorio/carpeta raíz donde se encuentra el archivo **Vagranfile**
Cabe mencionar que el archivo **docker-compose.yml** Es creado y configurado específicamente para ejecutarse dentro de vagrant.
Así también el comando "vagrant up" o "vagrant reload", levanta los servicios definidas en el archivo **docker-compose.yml** (Por defecto).
Configuración previa
Antes de ejecutar los proyectos Frontend (App Mascotas) y Backend (API Mascota) es necesario configurar el archivo `.env` de cada respectivo proyecto.
Crear maquina virtual
Este comando crea una máquina virtual usando **'vagrant'** para correr *docker* y *docker-compose* dentro de ella. <br>
Por tal motivo, este comando se debe ejecutar una sola vez.
$ vagrant up
Construir y levantar el proyecto
Este comando reinicia la maquina virtual usando **'vagrant'**, así también ejecuta la provision *run-workspace* definida en el archivo *Vagrantfile*. <br>
+ *run-workspace* : Suspende, Elimina, Construye y Levanta los servicios de *__docker-compose__* en el mismo orden. <br>
Por tal motivo, este comando se puede ejecutar las veces que sean necesarias.
$ vagrant reload
Ejecutar los contenedor individualmente y manualmente
Este comando levanta en segundo plano el servicio *__service_db__*
$ doc run -d -p 2780:2780 -v /home/vagrant/data:/data/db -t service_db mongod --port 27080 --dbpath /data/db
Este comando levanta en segundo plano el servicio *__service_api__*
$ doc run -p 3033:3033 -v /home/max98/workspace/api/node_modules -t service_api npm run dev --no-deps
0 comentarios:
Publicar un comentario