Aprenderemos de una forma muy sencilla a automatizar el despliegue de un sitio web dentro de un contenedor docker. 

En mi caso utilizaré una web-biografía personal creada en lenguaje Angular.

 

 

Clonaremos el repositorio con el siguiente comando:

❯ git clone REPOSITORIO

Nos ayudaremos del editor de código Visual Studio Code.

 

Nos posicionaremos sobre el proyecto Angular que hayamos elegido y creamos un nuevo fichero.

Es muy importante que lo llamemos “Dockerfile” (Si tenemos la extensión de Docker instalada nos aparecerá el icono azul indicándonos que el tipo de archivo Dockerfile).

 

Dentro del proyecto Angular nos dirigimos al archivo “package.json” y modificamos la línea “build”: escribiendo "build": "ng build",

Primer FROM:

• Utilizamos una imagen Node.

• Ejecutaremos el comando mkdir –p /app para crear el directorio app .

• Nos posicionaremos sobre el directorio /app para trabajar.

• Copiaremos el fichero package.json del proyecto Angular al directorio /app .

• Ejecutaremos el comando npm install (Node js) para instalar las dependencias.

• Copiaremos todo el contenido del directorio actual a /app .

• Copiaremos todo el proyecto.

• Crearemos los archivos de producción.

 

Segundo FROM:

• Utilizaremos una imagen del servidor de Nginx para crear un servidor y poder desplegar la aplicación en este.

• Copiaremos los archivos de producción de /app/dist/minibio a /usr/share/nginx/html

Para crear la imagen de docker con desde nuestro fichero Dockerfile pondremos el siguiente comando:

❯ docker build –t NOMBRE_IMAGEN . (UBICACIÓN)

A continuación, se mostrarán todos los pasos llevados a cabo para la construcción de la imagen.

Si todo está correctamente nos devolverá el ID de la imagen y el nombre de la misma junto con su etiqueta (En mi caso solamente le he puesto nombre, así que por defecto la etiqueta que me devuelve es :latest).

Volvemos a comprobar la imagen con el siguiente comando:

❯ docker images

Para arrancar nuestro contenedor usaremos el siguiente comando:

❯ docker run –d (Segundo plano) –it (interactive/tty) –p PUERTO_HOST/PUERTO_DOCKER NOMBRE_IMAGEN

Comprobamos los contenedores activos/no activos y podemos ver que está en funcionamiento.

Si nos dirigimos al navegador ya nos aparecerá el proyecto angular implementado en el puerto 80 como indicamos

Podemos subir nuestro proyecto a docker-hub

Iniciamos sesión con nuestra cuenta de docker-hub con el siguiente comando

❯ docker login –u USUARIO

A continuación, nos pedirá el password

Con el siguiente comando comentamos/modificamos la imagen a subir a nuestro repositorio

❯ docker conatiner commit ID_CONTENEDOR NUEVA_IMAGEN:TAG

❯ docker tag IMAGEN USUARIO/ IMAGEN

Para publicar nuestra imagen local al repositorio

❯ docker push USUARIO/IMAGEN

Si vamos a docker-hub podremos ver que se ha subido nuestra imagen a la cuenta

Si queremos volver a usar en cualquier otro momento dicha imagen, nos la podremos volver a descargar desde ese repositorio

❯ docker run –name NOMBRE_NUEVA_IMAGEN –d (Segundo plano) –p PUERTO_HOST/PUERTO_DOCKER REPOSITORIO

En este caso hemos elegido que se implemente en el puerto 8080, como podemos comprobar funciona correctamente.