Creación de una imagen a partir de un Dockerfile

  1. Crea una página web estática index.html. En mi caso, incluiré el CSS y el JS en el mismo fichero HTML.
<html>
<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <title>Crear Imagen Docker</title>
       <style type="text/css">
      /*<![CDATA[*/
            html {
             height: 100%;
             width: 100%;
           }  
             body {
       background: rgb(20,72,50);
       background: -moz-linear-gradient(180deg, rgba(23,43,70,1) 30%, rgba(0,0,0,1) 90%)  ;
       background: -webkit-linear-gradient(180deg, rgba(23,43,70,1) 30%, rgba(0,0,0,1) 90%) ;
       background: linear-gradient(180deg, rgba(23,43,70,1) 30%, rgba(0,0,0,1) 90%);
       background-repeat: no-repeat;
       background-attachment: fixed;
       filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3c6eb4",endColorstr="#3c95b4",GradientType=1); 
             color: white;
             font-size: 0.9em;
             font-weight: 400;
             font-family: 'Montserrat', sans-serif;
             margin: 0;
             padding: 10em 6em 10em 6em;
             box-sizing: border-box;      
           }
                   h1 {
         text-align: center;
         margin: 0;
         padding: 0.6em 2em 0.4em;
         color: #fff;
         font-weight: bold;
         font-family: 'Montserrat', sans-serif;
         font-size: 2em;
       }
       h1 strong {
         font-weight: bolder;
         font-family: 'Montserrat', sans-serif;
       }
       h2 {
         font-size: 1.5em;
         font-weight:bold;
       }
             .title {
         border: 1px solid black;
         font-weight: bold;
         position: relative;
         float: right;
         width: 150px;
         text-align: center;
         padding: 10px 0 10px 0;
         margin-top: 0;
       }
             .description {
         padding: 45px 10px 5px 10px;
         clear: right;
         padding: 15px;
       }
             .section {
         padding-left: 3%;
        margin-bottom: 10px;
       }
             img {
               padding: 2px;
         margin: 2px;
       }
       a:hover img {
         padding: 2px;
         margin: 2px;
       }
             :link {
         color: rgb(199, 252, 77);
         text-shadow:
       }
       :visited {
         color: rgb(122, 206, 255);
       }
       a:hover {
         color: rgb(16, 44, 122);
       }
       .row {
         width: 100%;
         padding: 0 10px 0 10px;
       }
             footer {
         padding-top: 6em;
         margin-bottom: 6em;
         text-align: center;
         font-size: xx-small;
         overflow:hidden;
         clear: both;
       }
             .summary {
         font-size: 140%;
         text-align: center;
       }
             #rocky-poweredby img {
         margin-left: -10px;
       }
             #logos img {
         vertical-align: top;
       }
             /* Desktop  View Options */
             @media (min-width: 768px)  {
               body {
           padding: 10em 20% !important;
         }
               .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
         .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
           float: left;
         }
               .col-md-1 {
           width: 8.33%;
         }
         .col-md-2 {
           width: 16.66%;
         }
         .col-md-3 {
           width: 25%;
         }
         .col-md-4 {
           width: 33%;
         }
         .col-md-5 {
           width: 41.66%;
         }
         .col-md-6 {
           border-left:3px ;
           width: 50%;
                     }
         .col-md-7 {
           width: 58.33%;
         }
         .col-md-8 {
           width: 66.66%;
         }
         .col-md-9 {
           width: 74.99%;
         }
         .col-md-10 {
           width: 83.33%;
         }
         .col-md-11 {
           width: 91.66%;
         }
         .col-md-12 {
           width: 100%;
         }
       }
             /* Mobile View Options */
       @media (max-width: 767px) {
         .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
         .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
           float: left;
         }
               .col-sm-1 {
           width: 8.33%;
         }
         .col-sm-2 {
           width: 16.66%;
         }
         .col-sm-3 {
           width: 25%;
         }
         .col-sm-4 {
           width: 33%;
         }
         .col-sm-5 {
           width: 41.66%;
         }
         .col-sm-6 {
           width: 50%;
         }
         .col-sm-7 {
           width: 58.33%;
         }
         .col-sm-8 {
           width: 66.66%;
         }
         .col-sm-9 {
           width: 74.99%;
         }
         .col-sm-10 {
           width: 83.33%;
         }
         .col-sm-11 {
           width: 91.66%;
         }
         .col-sm-12 {
           width: 100%;
         }
         h1 {
           padding: 0 !important;
         }
       }
             </style>
       </head>
       <body>
              <h1>¡Bienvenid@ Docker!</h1>
              <h2>Esta es una web desplegada desde un contenedor de Docker</h2>
              <p>Realizado por <strong>María Jesús Alloza</strong></p>
       </body>
</html>
  1. Crea un fichero Dockerfile que permita crear una imagen con un servidor web sirviendo la página. Puedes usar una imagen base debian o ubuntu, o una imagen que tenga ya un servicio web, como hemos visto en el apartado Ejemplo 1: Construcción de imágenes con una página estática.
  • Primero, crea un directorio donde guardarás los ficheros de la web. En este directorio crea un fichero index.html con el contenido que quieras. En este caso, el fichero index.html es el que hemos creado en el apartado anterior.
mkdir mi_servidor_web
cd servidor_web
touch index.html
  • Luego, crearemos un fichero Dockerfile con el siguiente contenido:
 FROM debian
 MAINTAINER María Jesús Alloza "mariajesus.alloza@outlook.es"
 RUN apt-get update && apt-get install -y apache2
 COPY index.html /var/www/html/index.html
 CMD ["/usr/sbin/apache2ctl", "-D", "FOREGROUND"]
  1. Ejecuta el comando docker que crea la nueva imagen. La imagen se debe llamar /mi_servidor_web:v1.
docker build -t mi_servidor_web:v1 .

Listamos las imágenes para comprobar que se ha creado correctamente:

docker images

NOTA: El punto al final del comando es importante, ya que indica que el contexto de construcción es el directorio actual.

  • Creamos el contenedor para comprobar que funciona correctamente:
docker run -d -p 80:80 --name mi_servidor_web mi_servidor_web:v1
  • Y accedemos a la página web desde el navegador:
  1. Una vez comprobado, nos conectamos a Docker Hub y subimos la imagen que acabas de crear.

  • Nos creamos una cuenta en Docker Hub en su página web.

  • Una vez creada la cuenta, nos logueamos en Docker Hub desde la terminal:

docker login -u legnakra
  • Lo siguiente es preparar nuestra imagen para que sea aceptada en este registro público. Todos los registros siguen una nomenclatura a la hora de almacenar los repositorios. En el caso de Docker Hub necesitamos que nuestra imagen se llame nombre_de_usuario/nombre_del_repositorio:etiqueta. En nuestro caso, la imagen se llamará legnakra/mi_servidor_web:v1.
docker tag mi_servidor_web:v1 legnakra/mi_servidor_web:latest

NOTA: La etiqueta latest es la que se utiliza por defecto cuando no se especifica ninguna etiqueta. Por eso, cuando nos descarguemos la imagen, no tendremos que especificar la etiqueta. Sin embargo, si queremos descargar una imagen con una etiqueta concreta, tendremos que especificarla.

  • Por último, subimos la imagen a Docker Hub:
docker push legnakra/mi_servidor_web:v1
# O también se puede hacer:
docker push legnakra/mi_servidor_web

Como podemos ver aquí, la imagen se ha subido correctamente.

  1. Descargamos la imagen en otro ordenador donde tengamos docker instalado, y creamos un contenedor a partir de ella.
  1. Realizamos una modificación de la página web. Modificaremos el fichero index.html y añadiremos:
<p>Administración de Sistemas Informáticos en Red</p>
# Añadimos una imagen al 50% de su tamaño
  1. Vuelve a crear una nueva imagen, en esta caso pon la eiqueta v2. Súbela a Docker Hub.
docker build -t mi_servidor_web:v2 .

docker tag mi_servidor_web:v2 legnakra/mi_servidor_web:latest
docker push legnakra/mi_servidor_web:v2
  • Creamos el contenedor para comprobar que funciona correctamente:
docker run -d -p 80:80 --name mi_servidor_web mi_servidor_web:v2
  1. Por último, baja la nueva imagen en el ordenador donde está corriendo el contenedor. Para hacer la implantación de la nueva versión debes borrar el contenedor y crear uno nuevo desde la nueva versión de la imagen.
  • Primero eliminamos el contenedor que teníamos creado:
docker rm -f mi_servidor_web
  • Y ahora descargamos la nueva imagen:
docker pull legnakra/mi_servidor_web
# O también se puede hacer:
docker pull legnakra/mi_servidor_web:v2
  • Y creamos el contenedor:
docker run -d -p 80:80 --name mi_servidor_web mi_servidor_web:v2

Y como podemos ver, se han aplicado los cambios correctamente: