Vagrant para Holberton
Servers, MAC, Linux
Traté infructuosamente de lograr que mis contenedores de Docker se pudieran volver a levantar, parece que hay un serio problema con la versión Catalina de MAC y aún no pienso cambiar de máquina, de manera que ahora lo intentaré con Vagrant.
AirBnB_clone_v4
Los archivos de esta memoria están en GitHUB y hacen parte de una serie de proyectos de Holberton School, aquí les dejo el enlace a mi repo.
https://github.com/rodrigozarate/AirBnB_clone_v4
1- Instalar Vagrant
La versión de la caja que usaré es esta: https://app.vagrantup.com/hashicorp/boxes/bionic64 pero según las necesidades se puede usar la más conveniente. un aspecto a destacar de vagrant es que cada ambiente está ligado a la carpeta desde la que se ejecute y manteniendo sincronía con el sistema de archivos local. En los Links abajo hay tutoriales para la instalación.
2- Conectarse a Vagrant
$ vagrant up
Encendido Vagrant ahora nos conectamos mediante ssh
$ vagrant ssh
Una vez dentro de Vagrant, verás como cambia la interfaz del terminal.
3- Crear una llave de autenticación para conectar a GITHUB (proyecto AirBnB Clone v4)
$ ssh-keygen -t ed25519 -C "tu_email@esto_es_un_ejemplo.com"
La llave queda guardada en el directorio .ssh para acceder a él
$ cd ~/.ssh
$ ls
$ cat el_nombre_que_le_diste_a_la_llave.pub
Copia el texto y pégalo en donde corresponde en GitHub
4- Poner la llave en Github
5- Clonar el repo que vas a usar
En este caso es el proyecto AirBnB clone v4
6- Crear un entorno virtual (venv) instalación
Actualizar lo que necesites, en este caso por ejemplo se requiere, pero primero siempre es bueno actualizar la lista:
$ sudo apt-get update
$ sudo apt-get install python3-venv
Es importante recalcar que sin sudo no se pueden correr estos comandos.
7- Crear un entorno virtual (venv)
Python 3 para determinar el intérprete, -m para identificar el módulo a usar “venv” en este caso, luego el nombre de la carpeta donde quedará el entorno usaré airv4venv para facilitar su identificación.
$ python3 -m venv airv4venv
Para activarlo debes estar en la carpeta que contiene el repositorio en cuestión
$ source airv4venv/bin/activate
Para desactivarlo igual.
$ deactivate
8- Instalar módulos en el (venv)
Veamos qué hay instalado en el entorno virtual de la sandbox que provee Holberton para hacer experimentos, usamos el comando
$ pip3 freeze
No hay practicamente nada en nuestro entorno de Vagrant, lo que deberíamos tener según la sandbox del proyecto es algo así:
attrs==21.4.0
chardet==2.3.0
Click==7.0
colorama==0.2.5
flasgger==0.9.4
Flask==1.1.1
Flask-Cors==3.0.8
html5lib==0.999
importlib-metadata==4.11.0
importlib-resources==5.4.0
itsdangerous==1.1.0
Jinja2==2.11.1
jsonschema==3.0.1
MarkupSafe==1.1.1
mistune==2.0.2
mysqlclient==1.3.10
pep8==1.7.1
pycodestyle==2.5.0
pyrsistent==0.15.7
PyYAML==6.0
requests==2.9.1
six==1.16.0
SQLAlchemy==1.3.8
ssh-import-id==5.5
typing-extensions==4.0.1
urllib3==1.13.1
Werkzeug==0.16.1
zipp==3.7.0
Con esta información se puede hacer un archivo Requirements.txt y dejar que python installe de acuerdo a la lista, pero debido a que las versiones cambian y muchas ya no están dsponibles, eso no resulta tan fácil en este caso.
No obstante en otro Blog hablaré de eso.
$ sudo apt-get install python3-dev
$ pip3 install Flask==1.1.1Luego hay que ajustar algunas versiones de los paquetes. Ej Jinja2 y Markupsafe
Luego continuamos con la instalación
$ pip3 install SQLAlchemy==1.3.8Vamos revisando como están quedando los paquetes
Para esta fecha 11 de feb de 2022 no está disponible la instalación de la versión de mysqlclient que buscamos de manera que tendré que obtenerla e instalarla desde el sistema local de archivos
$ curl https://files.pythonhosted.org/packages/40/9b/0bc869f290b8f49a99b8d97927f57126a5d1befcf8bac92c60dc855f2523/mysqlclient-1.3.10.tar.gz — output mysqlclient-1.3.10.tar.gz
Primero hay que añadir otras librerias
$ sudo apt-get install libxml2-dev libxslt1-dev$ sudo apt-get install libmysqlclient-dev
Los mensajes de instalación son un poco confusos…
$ pip3 install mysqlclient-1.3.10.tar.gz
$ pip3 install Flask-Cors==3.0.8
Ahora veamos si es posible conectar la BD
Primero habrá que instalar el servidor mysql, pero cuál?
Inspeccionando la imagen del Docker se puede ver la lista de comandos de configuración del servidor de muestra.
Esta imagen de docker se supone es con la que corre el famoso “checker” de manera que tratar de replicar el mismo entorno nos acerca a las respuestas que entregará una máquina así configurada.
$ sudo apt-get install -y mysql-server-5.7
¿Cuál es el password de la base de datos?
Resulta que no tiene, pero además la carpeta que contiene el servicio no está expuesta de manera que tenemos que ejecutar lo siguiente:
$ systemctl stop mysqlEl que no tenga una contraseña parece ser una condición presente en Vagrant, investigaré al respecto.
Esto pedirá que se autentique el usuario vagrant cuya contraseña es también vagrant
luego modificamos el acceso al servicio con
$ sudo usermod -d /var/lib/mysql/ mysql
Reiniciamos el servicio e ingresamos a la base de datos con sudo
$ systemctl start mysql
$ sudo mysqlAhora desde mysql> ejecutamos un query para crear el password para el usuario root
mysql> ALTER USER ‘root’@’localhost’ IDENTIFIED BY ‘root’;
mysql> flush privileges;Pues bien, resulta que la consulta no funcionó, ese 0 rows affected…
Revisemos la tabla
El usuario root está configurado para conectarse por un socket.
igual seguimos con el proyecto
Usamos los SQL del repositorio para crear las tablas y para insertar algunos datos
Puede que según la configuración del servidor y de mysql deba usar un comando con password, en mi caso funciona con sudo mysql
$ cat setup_mysql_dev.sql | sudo mysql
$ cat setup_mysql_test.sql | sudo mysql
$ cat data.sql | sudo mysqlEstos script salieron del proyecto 289 0x02. AirBnB clone - MySQL
Los datos de las tablas salieron de https://s3.amazonaws.com/intranet-projects-files/holbertonschool-higher-level_programming+/290/7-states_list.sql
Que se encuentra en el proyecto 290 0x04. AirBnB clone - Web framework
Esta serie de proyectos encadenan un flujo de trabajo para lograr una aplicación completa en varias etapas que cubren conceptos clave.
Base de datos ok, sistema de archivos ok, servidor con dependencias ok, veamos si funciona.
Momento, faltan los usuarios…
9- Iniciar el SERVIDOR
HBNB_MYSQL_USER=hbnb_dev HBNB_MYSQL_PWD=hbnb_dev_pwd HBNB_MYSQL_HOST=localhost HBNB_MYSQL_DB=hbnb_dev_db HBNB_TYPE_STORAGE=db python3 -m web_dynamic.0-hbnbEste comando iniciará el servidor flask con las variables proporcionadas, nos cargará el modulo 0-hbnb de la carpeta web_dynamic.
Servidor funcionando
En otro terminal conectamos por ssh al vagrant y probamos lo básico.
Hasta ahora todo ok. Los archivos cargan con el uuid al final.
10- Vagrant — Exponer los puertos y mapearlos
En el sistema de archivos de la máquina local en donde tengamos el proyecto, AirBnB_clone_v4, creamos un archivo de nombre : Vagrantfile
En ese archivo se pueden configurar aspectos de la VM Vagrant
Vagrant.configure("2") do |config|
# Expose ports to host
config.vm.network "forwarded_port", guest: 5000, host: 5000
endEn nuestros scripts estámos enviando la salida del servidor al puerto 5000 y en nuestro host lo estamos consumiendo por el puerto 5000 también, pero eso es arbitrario, pudo ser guest: 3451 y host: 9876, si bien hay unos puertos reservados, como el 22 para SSH y el 3306 de mysql, en general es una decisión de arquitectura.
Un tutorial paso a paso sobre Vagrant está disponible en esta dirección https://learn.hashicorp.com/collections/vagrant/getting-started
Inevitablemente hay que detener Vagrant y reiniciarlo para que incorpore los cambios de configuración.
$ vagrant halt$ vagrant up
Resulta que algunos puertos en mi MAC están siendo usados por algún proceso y eso evita que Vagrant pueda iniciar correctamente.
netstat -vanp tcp
Habrá que ver que son esos procesos y si son residuos habrá que eliminarlos para poder liberar los puertos.
$ netstat -vanp tcpUsando el id del proceso resultó que docker seguía encendido
$ lsof -p 562
Ahora si con los puertos libres iniciamos Vagrant y (EXITO)
Adicionalmente creé una dirección privada 192.68.68.68 por motivos académicos.
Navegamos en el sistema hacia nuestra carpeta vagrant que debería contener los archivos que están en nuestra carpeta local del proyecto.
Del proyecto 0x04. AirBnB clone — Web framework se obtienen los datos de los amenities
https://s3.amazonaws.com/intranet-projects-files/holbertonschool-higher-level_programming+/290/10-hbnb_filters.sqlcat 10-dump.sql | mysql
Vamos armando el sitio
Con esos datos ya podemos probar la página en el navegador
11- DOM
Ahora javascript y JQuery
JQuery nos permite modificar los elementos del DOM que están presentes en la página, tiene métodos para seleccionar a partir de las etiquetas, las clases de css, o los identificadores, o los atributos; También se pueden usar de forma combinada, por ejemplo seleccionar un div que tenga la clase amenity como veremos en el ejemplo.
Para incluir JQuery usamos una invocación desde un servidor remoto con una etiqueta <script>
<script src=”https://code.jquery.com/jquery-3.2.1.min.js"></script>Los números nos indican la versión que usaremos 3.2.1 y el min significa que ese archivo pasó por un proceso en el que se le retiraron los comentarios y espacios en blanco de manera que está “minificado”.
Como contraste tenemos las versiones expandidas
https://code.jquery.com/jquery-3.6.0.js
Nuestra plantilla html contiene código que le permite hacer bucles, aquí mediante el uso de llaves, aquí documentación al respecto.
Tenemos un <div class=”amenities”> usaremos la clase css para referirnos a él, yo prefiero usar selectores tipo id=”identificador”, pero el ejercicio está planteado así. Dentro de ese div hay un bucle que recorre el objeto amenities y nos expone el id y el nombre, los asignaremos a los atributos data-id y data-name este atributo quedará dentro de cada elemento input del bucle.
Usando la consola de las herramientas para desarrolladores de Firefox veremos esto:
Usando JQuery adicionaremos al elemento <h4> </h4> dentro del div con clase amenities el nombre del amenity seleccionado con el input de tipo checkbox
Para asegurarnos que el script se ejecute cuando los elementos del DOM estén disponibles usaremos la función
$(document).ready(function () {
// Más código aquí
}
Además del JQuery para hacer nuestras modificaciones al DOM también le haremos unos ajustes a la capa de presentación el CSS y es un buen momento para recordar que las herramientas para desarrolladores de Firefox son una maravilla en estos casos para revisar y hacer experimentos.
Debido a que nuestra api va a utilizar un nuevo puerto, debemos mapearlo en el Vagrantfile, de manera que detendremos el servidor, editaremos el archivo y volveremos a encender.
Adicoinaremos la siguiente línea debajo de la del puerto 5000
config.vm.network “forwarded_port”, guest: 5001, host: 5001
Con los puertos mapeados ahora podemos consultar los endpoints
Probamos nuestro endpoint de búsqueda enviando un POST request así:
Nos responde con todos los resultados, dos en nuestro caso
Esto mismo desde el FRONT se vería así
Filtrando por lugares que tengan amenity Wifi, que lo insterté en la BD a modo de ejemplo
obtuve la información para hacer la consulta desde
Conclusión
Es un proyecto retador, requiere muchísimo conocimiento previo y además que uno tenga terminados todos los proyectos relacionados.
Si bien el enfoque era con javascript y JQuery de lo que más aprendí fue de servidores y virtualización.
Links
https://linuxize.com/post/curl-post-request/
Bloopers
