Víctor J.

Ing. Sistemas Computacionales

viernes, 7 de abril de 2023

Proyecto | ReactJS | MusicApp

abril 07, 2023 Creado por Victor Jesus Maximo Abundio Sin comentarios

MusicApp | Aplicación web





Introducción



El proyecto Full-Stack consiste en registrar música con información sobre título, artista, género y año, por lo que todos pueden compartir la información de sus canciones favoritas sin necesidad de registrarse a la aplicación web. Fue creado por mi mismo, el día 7 de abril de 2023.


Este proyecto tiene una arquitectura "monolítica", fue desarrollado usando usando NodeJS + Express + Mongoose + MongoDB + Handlebars. Así 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.


Ver proyecto (GitHub)

Funciones

Esta arquitectura está compuesto por un solo código que maneja las rutas (endpoints), la lógica de negocio, y la interacción con la base de datos, sigue el enfoque de una arquitectura "monolítica", similar a cómo se estructuran las aplicaciones con Laravel.

Este conjunto de tecnologías y características para este aplicación web:

  • Proyecto con infraestructura virtualizada o proyecto Vagrantizado.
  • Proyecto dockerizado.
  • Proyecto con arquitectura "monolítica".
  • Patrón de diseño MVC (Modelo-Vista-Controlador)
  • Base de datos usando MongoDB.
  • Mapeador de Documentos a Objetos (ODM con Mongoose).
  • Notificaciones de sistema.
  • CRUD para música (crear, leer, eliminar, actualizar).

¿Cómo funciona?

Configuración Backend

Es necesario crear un archivo `.env` del proyecto de backend dentro del path **/**(raíz), opcionalmente puede hacer una copia del archivo `.env.example` con el nombre de **.env** que incluyen variables de entorno


Variables de entorno para proyecto | Musicapp

  • APP_PORT *(Requerido)* Puerto para la aplicación por defecto es `3015`


Variables de entorno para base de datos | MongoDB Atlas

  • APP_DB_USER *(Requerido)*
  • APP_DB_PASSWORD *(Requerido)*
  • APP_DB_DATABASE *(Requerido)*


Variables de entorno para base de datos | Otros

  • APP_DB_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

Correr aplicación de forma independiente (Usando npm)

Configuración previa

Antes de ejecutar la aplicación es necesario configurar el archivo `.env` en la ruta **./** (raíz), la configuración necesario es la siguiente:

```text
# MusicApp
APP_PORT=3015 # Puerto para Music App

# Database para Servidor de MongoDB Atlas
APP_DB_USER="<user>"
APP_DB_PASSWORD="<password>"
APP_DB_DATABASE="<database>"

# Database para Servidor Local
APP_DB_URI="mongodb://user_musicapp:pass@service_db/db_musicapp?authSource=admin" # Opcional
```

Iniciar la aplicación

Es necesario ejecutar el comando dentro del path para iniciar la aplicación ./ (raíz)

$ npm run start

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 es necesario configurar el archivo `.env` en la ruta ./musicapp, la configuración necesario es la siguiente:

```text
# MusicApp
APP_PORT=3015 # Puerto para Music App

# Database para Servidor de MongoDB Atlas
APP_DB_USER="<user>"
APP_DB_PASSWORD="<password>"
APP_DB_DATABASE="<database>"

# Database para Servidor Local
APP_DB_URI="mongodb://user_musicapp:pass@service_db/db_musicapp?authSource=admin" # Opcional
```

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 el directorio/carpeta raíz donde se encuentra el archivo docker-compose.yml.


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 definidos en el archivo docker-compose.yml (Por defecto).

Configuración previa

Antes de ejecutar los proyectos es necesario configurar el archivo `.env` en la ruta ./musicapp, la configuración necesario es la siguiente:


```text
# MusicApp
APP_PORT=3015 # Puerto para Music App

# Database para Servidor de MongoDB Atlas
APP_DB_USER="<user>"
APP_DB_PASSWORD="<password>"
APP_DB_DATABASE="<database>"

# Database para Servidor Local
APP_DB_URI="mongodb://user_musicapp:pass@service_db/db_musicapp?authSource=admin" # Opcional
```


Crear maquina virtual

Este comando crea una máquina virtual usando 'vagrant' para correr docker y docker-compose dentro de ella. Por tal motivo, este comando se debe ejecutar una sola vez.

$ vagrant up


Construir y levantar el proyecto
Este comando reinicia la máquina virtual usando 'vagrant', así también ejecuta la provision run-workspace definida en el archivo Vagrantfile.

run-workspace : Suspende, Elimina, Construye y Levanta los servicios de __docker-compose__ en el mismo orden.

Por tal motivo, este comando se puede ejecutar las veces que sean necesarias.

$ vagrant reload

Vista previas







0 comentarios:

Publicar un comentario