TAREA OPCIONAL 2º

TRIMESTRE
Herramientas DevOps

Descripción de la tarea
Instalación de Git, Vagrant, VisualStudio Code y VirtualBox
Trabajo con GitHub
Trabajo con Vagrant
Trabajo con Docker

Mario Delprato Ramón

Despliegue de Aplicaciones Web – Desarrollo de Aplicaciones Web 2023-2024
Tabla de contenido
1. INSTALACIÓN DE PROGRAMAS DEVOPS .............................................................................. 2
a. Git ...................................................................................................................................... 2
b. Vagrant ............................................................................................................................ 11
c. VirtualBox y VisualStudio Code ...................................................................................... 14
2. PROBANDO GITHUB ........................................................................................................... 15
a. Creación de cuenta ......................................................................................................... 15
b. Creación de repositorio .................................................................................................. 18
3. PROBANDO VAGRANT ........................................................................................................ 19
4. PROBANDO DOCKER ........................................................................................................... 34
Bibliografía .................................................................................................................................. 39

1
 1. INSTALACIÓN DE PROGRAMAS DEVOPS

a. Git

A continuación, se muestran las pantallas del proceso de instalación de Git. Los pasos a seguir
son los siguientes:

2
3
4
5
6
7
8
9
10
 b. Vagrant

A continuación, se muestran las pantallas del proceso de instalación de Vagrant. Los pasos a
seguir son los siguientes:

11
12
13
 c. VirtualBox y VisualStudio Code

En el caso de estos dos programas no se muestra el proceso de instalación ya que, al tener que
trabajar con estas herramientas durante todo el ciclo, ya contábamos con ambas instaladas. El
proceso de instalación es sencillo e intuitivo.

14
 2. PROBANDO GITHUB

a. Creación de cuenta

Ya dispongo de una cuenta en GitHub de trabajos realizados el año pasado y de un fichero HTML
creado por mi cuenta durante el curso para practicar. Más adelante trabajaré con este fichero en
la tarea de Vagrant.

Introduzco los datos de mi cuenta para logearme.

Accedo a la página principal de mi cuenta en GitHub.

15
Una vez dentro, pulso en el panel derecho para desplegar el siguiente menú. Puedo acceder a
múltiples secciones. En este caso, nos interesa ir a nuestros repositorios, pulsando en Your
repositories.

16
Vemos que en esta cuenta de GitHub tengo un repositorio que se llama login, con el fichero
HTML, CSS y JS que comentamos anteriormente.

Si pulsamos en el repositorio login, accedemos a su contenido: un fichero readme y los ficheros

HTML, CSS y JS.

17
 b. Creación de repositorio

Si quisiéramos crear otro repositorio, pulsamos en el desplegable del símbolo + y a continuación

pulsamos en New repository.

Tras completar los siguientes campos ya podemos pulsar en Create repository. Los campos que
hemos rellenado previamente son: Repository name (nombre del repositorio), Description
(descripción opcional del repositorio), Public (marcamos la opción de repositorio público para
que sea accesible por otros usuarios) y, por último, Add a README file (para que añada un fichero
readme en la creación del repositorio).

18
 3. PROBANDO VAGRANT

Para trabajar con Vagrant lo haremos desde la consola de Git Bash.

Me muevo al Escritorio y desde allí creo el directorio vagrant y me muevo a él. Desde
allí, hago vagrant init para crear el fichero Vagrantfile en el directorio vagrant.

Como vemos, accedemos directamente al directorio en el escritorio para ver el

Vagrantfile ya creado en el directorio vagrant.

Abrimos el Vagrantfile con nano Vagrantfile.

19
Dentro del Vagrantfile, vemos el siguiente contenido inicial.

Como no tenemos el box “base” que usa Vagrant (equivalente a las ISO`s instaladas),
vamos a http://app.vagrantup.com y buscamos el box que nos interesa. En nuestro
caso, seleccionamos el box para Ubuntu 22.04, que es la versión con la que estamos
trabajando.

20
Como podemos ver entrando en la información del box, los parámetros con los que
tenemos que trabajar en el Vagrantfile son los que se muestran en la siguiente imagen.

21
Editamos el Vagrantfile con la información que nos ha dado el box.

Una vez modificado el fichero Vagrantfile, desde el terminal de Git Bash ejecutamos el
comando vagrant up para levantar la máquina virtual.

22
Si ahora accedemos al panel de VirtualBox vemos como, a mayores de nuestras
máquinas anteriores, tenemos la máquina vagrant_default que acabamos de levantar
con el comando vagrant up.

Ya la podemos ver tanto en VirtualBox como corriendo en terminal. El usuario es

vagrant y la contraseña es vagrant.

Desde la consola de Git Bash ejecuto el comando vagrant ssh para entrar con protocolo
SSH (Secure Shell), por tanto no pide ni usuario ni contraseña.

23
Una vez he accedido a la máquina virtual levantada con Vagrant desde la consola de
Git, ejecuto comando sudo apt install vagrant para poder probar varios comandos de
vagrant como, por ejemplo, vagrant ssh para entrar, vagrant halt para apagarla,
vagrant up para arrancarla, entre otros.

Salgo de la máquina virtual a la consola de Git con exit.

Hago vagrant halt para apagarla.

Hago nuevamente vagrant up para arrancar de nuevo la máquina y podemos verla

nuevamente en el panel de VirtualBox.

24
Ahora vamos a volver a editar el Vagrantfile para asignarle una memoria de 2048 MB y
el nombre MiMVPorVagrant.

A mayores, descomento las siguientes líneas para que, al ejecutar el fichero

Vagrantfile, por defecto ya actualice el sistema e instale el servidor Apache.

Ahora, como la máquina ya estaba creada, en lugar de levantarla con vagrant up

ejecuto el comando vagrant provision.

25
Vuelvo a entrar con vagrant shh y ejecuto el comando systemctl status apache2: todo
correcto.

Como quiero poder acceder a ficheros servidos por Apache desde fuera de la máquina
virtual, es decir, desde mi equipo Windows, tengo que abrir los puertos. Para ello,
descomento la línea del final de la siguiente imagen, dentro del Vagrantfile.

Ahora, desde mi equipo Windows puedo teclear localhost:8080 en la URL del

navegador y obtengo el mensaje de bienvenida de Apache: It works!

26
Podemos ver la redirección de puertos hecha correctamente desde VirtualBox. Para
ello, click derecho en la máquina virtual levantada con Vagrant, ahora renombrada a
MiMVPorVagrant, Congiraución > Red > Reglas de reenvío de puertos. Obteniendo la
redirección de la IP local 127.0.0.1 al puerto anfitrión 8080.

Ahora, para poder probarlo con un fichero HTML creado previamente por nosotros,
dentro del directorio vagrant donde se encuentra el Vagrantfile, creo el directorio
www.

27
Ahora tengo que volver a editar el Vagrantfile añadiendo la siguiente línea. De esta
forma queda asociado el directorio www con el directorio donde Apache va a buscar
las páginas a servir.

Ahora copio dentro de la carpeta www mi carpeta user_login.

El contenido de la carpeta user_login es el siguiente: index.html, script.js y styles.css.

Se trata de un formulario login.

28
Como podemos ver, tecleando localhost:8080/user_login en la URL del navegador de
mi equipo Windows, puedo acceder al fichero index.html, con el estilo de styles.css y
un par de eventos que recoge desde el fichero script.js.

Como ahora me interesa compartir mi Vagrantfile en un repositorio público de Github,

lo primero que hago es crear un nuevo repositorio.

29
Para ello, cubro con los siguientes datos y pulse en Create repository. Importante:
hacerlo público y crear un fichero readme.

Ahora entro en el repositorio recién creado y pulso en Code > HTTPS y copio la URL del
directorio.

30
Vuelvo a la consola de GitBash en Windows, me muevo al Escritorio y creo el directorio
gitVagrant con el comando mkdir gitVagrant. Luego me muevo a él con cd gitVagrant y,
desde allí, hago git clone con la URL que hemos cogido previamente desde Github. De
esta forma, clonamos el repositorio en el directorio gitVagrant.

31
Ahora tengo que subir el directorio inicial de vagrant, es decir, donde tengo tanto el
Vagrantfile como la carpeta www con la carpeta user_login que contiene los ficheros
necesarios para que Apache pueda servir el login que hemos creado, a Github.

Para ello, desde el Escritorio hago cp -R vagrant/ ./gitVagrant/. Acabamos de copiar el

directorio vagrant y su contenido al directorio gitVagrant, que es donde he clonado mi
repositori de Github.

Ahora, los pasos a seguir son los siguientes. Me muevo al directorio gitVagrant con cd
gitVagrant, veo su contenido con ls para confirmar que se ha copiado todo
correctamente. Me muevo a la carpeta recién copiada, vagrant, con cd vagrant. Veo su
contenido con ls. Desde aquí, hago git add . Con este comando estoy agregando todos
los cambios en el directorio de trabajo al área de preparación (staging area).

La staging area es un área intermedia entre el directorio de trabajo y el repositorio Git.

Digamos que aquí se preparan los cambios antes de confirmarlos.

A continuación, ejecuto el comando git commit -m “Subo mi carpeta con Vagrantfile a

mi repositorio en GitHub Mario Delprato”. De esta forma, confirmo los cambios y los
registro en la historia del repositorio.

Para subir los cambios confirmados de mi repositorio local al repositorio remoto, es

decir, a GitHub, ejecuto el comando git push origin main, es decir, que suba mi rama
principal de trabajo. Aquí, antes de introducir este comando, cometí un fallo de sintaxis
ya que el nombre de la rama introducido erróneamente fue git push origin master. Una
vez solucionado el problema, todo funciona correctamente.

32
Una vez hecho todo lo anterior, ya podemos acceder a nuestros repositorios de GitHub
y ver su contenido. Como vemos, todo ha funcionado correctamente: tenemos el
repositorio público vagrant con la carpeta .vagrant, la carpeta www que, a su vez,
contiene la carpeta user_login con los ficheros HTML, CSS y JS del login, el fichero
readme que creados por defecto en la creación del repositorio y el Vagrantfile con la
configuración que hemos establecido previamente.

33
 4. PROBANDO DOCKER

Desde el Escritorio creo el directorio docker con mkdir docker. Me muevo a él con cd
docker. Desde allí, me clono el repositorio de GitHub que nos interesa para esta tarea,
que en este caso es el siguiente: https://github.com/bigdatawirtz/escenarios.git

Para ello, ejecuto el comando git clone https://github.com/bigdatawirtz/escenarios.git

Puedo ver su contenido haciendo dir. Veo que el contenido es un directorio llamado
escenarios. Me muevo a él con cd escenarios y vuelvo a hacer dir para ver su contenido,
que es el que vemos en la siguiente imagen.

34
Ahora me muevo al directorio docker-host con el comando cd docker-host. Una vez
dentro, desde allí hago vagrant up para levantar la máquina que nos permite crear el
Vagrantfile de este directorio.

Una vez hemos levantado la máquina virtual, podemos entrar con SSH haciendo
vagrant ssh. De esta forma no se nos pide ni usuario ni contraseña.

Una vez hemos accedido a la máquina virtual (vagrant@docker-host), para comprobar

el funcionamiento de docker hacemos docker run hello-world. Esto crea un contenedor

35
nuevo que se lanza y muere. Luego, podemos hacer ps para ver los que están en
ejecución.

El docker hello-world sólo muestra por pantalla el contenido de la anterior imagen y

muere. Para ver el histórico, podemos hacer docker ps -a.

Ahora vamos a crear un contenedor de Nginx: un servidor web/proxy inverso. Para ello,
ejecuto el comando docker run nginx.

Para meterle una redirección de puertos de nuestra máquina virtual a nuestro host,
ejecuto el comando docker run -d -p8000:80 nginx

36
Para comprobar que todo ha funcionado correctamente, desde la URL del navegador
de nuestro equipo Windows tecleamos 192.168.33.10:8000. Tengamos en cuenta que
esta IP es la que se nos indica en el Vagrantfile del directorio docker-host que hemos
obtenido clonando el repositorio de GitHub.

Aunque se mueran, los docker quedan activos en el sistema. Para verlos, podemos
ejecutar el comando docker ps -a. Vemos, de esta forma, tanto el ID del contenedor
Docker, como si imagen, su comando, el tiempo que hace que fue creado, el status y el
puerto.

Podemos parar y arrancar un contenedor con stop y start respectivamente. Como

nosotros queremos parar el contenedor de Nginx, vemos su id y ejecutamos docker
stop cc1c966a5f9b. Luego, hacemos docker ps -a para confirmar que se ha detenido
correctamente.

37
Ahora queremos borrar los contenedores y las imágenes de hello-world y de nginx.
Para ello, buscamos los nombres de los contenedores que queremos borrar y hacemos:
docker rm eager_gagarin, docker rm focused_northcutt, docker rm adoring_roentgen y
docker rm infallible_swason.

Para confirmar que hemos borrado todos los contenedores correctamente, ejecutamos
nuevamente docker ps -a y vemos que no hay ningún contenedor, ni arrancado ni
parado.

38
Bibliografía
https://code.visualstudio.com/

https://www.virtualbox.org/

https://www.vagrantup.com/

https://www.docker.com/

https://github.com/

https://www.xataka.com/basics/que-github-que-que-le-ofrece-a-desarrolladores

https://keepcoding.io/blog/que-es-vagrant-y-para-que-sirve/

https://www.redhat.com/es/topics/containers/what-is-docker

Guía Aula Virtual – Probando Git – Desarrollo Aplicaciones Web

Guía Aula Virtual – Probando Vagrant – Desarrollo Aplicaciones Web

Guía Aula Virtual – Probando Docker – Desarrollo Aplicaciones Web

39