Skip to content

Creando imágenes a partir de múltiples imágenes con Dockerfiles

Multistage

Laboratorio: Creando imágenes a partir de múltiples imágenes con Dockerfiles

Descripción

La presente guía realiza la instalación un container engine como Docker CE. Docker Engine está disponible en una variedad de plataformas Linux , macOS y Windows 10 a través de Docker Desktop, y como una instalación binaria estática

Objetivo

  • Validación una contrucción utilizando build de multiples etapas.

Antes de comenzar

  • Contar con el acceso al ambiente de laboratorio

Inicio de laboratorio #1

  1. Ingresar al servidor qué contiene al ambiente de laboratorio con credenciales de administración y cree un directorio llamada multi-stage. 

    mkdir multi-stage
cd multi-stage

  2. Cree un archivo llamado Dockerfile.nginx con el siguiente contenido 

    1
2
3
4
5
6
    FROM registry.suse.com/bci/bci-base:15.4
LABEL description="Servicio de nginx en imagen opensuse"
LABEL maintainer="John Doe <jdoe@xyz.com>"
RUN zypper -n install nginx && zypper clean --all
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

  3. Cree una imagen nueva con el tag opensuse-nginx:15.4 

    sudo docker build -t opensuse-nginx:15.4 -f Dockerfile.nginx .

  4. Clone el siguiente repositorio (Angular App) en la máquina local y acceda a la carpeta que contenga el repositorio. Bash/Sh shell: 

    sudo zypper -n install git
git clone https://gitlab.com/ITMGT/sample-angular-app.git
cd sample-angular-app

  5. Cree una carpeta llamada docker 

    mkdir docker

  6. Cree un archivo llamado Dockerfile.multistage dentro de la carpeta docker con el siguiente contenido 

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
    FROM registry.suse.com/bci/nodejs:14 as build

# Set the working directory
WORKDIR /usr/local/app

# Add the source code to app
COPY ./ /usr/local/app/

# Install all the dependencies
RUN npm install

# Generate the build of the application
RUN npm run build

  7. Cree una imagen de prueba con el tag angular-app:0.0.1-build-only. Durante el proceso de construcción del app, se mostrarán algunas advertencias "WARN", en un caso real se deben validar y actualizar las versiones de las dependecias 

    sudo docker build -t angular-app:0.0.1-build-only -f docker/Dockerfile.multistage .

  8. Verifique los archivos que contiene la imagen iniciando un contenedor temporal y accediendo a la shell 

    sudo docker run -it --rm angular-app:0.0.1-build-only ls -l dist/sample-angular-app

  9. Valide el espacio ocupado en disco por el ambiente de contrucción del app 

    sudo docker run -it --rm angular-app:0.0.1-build-only du -sh /usr/local/app/

  10. Valide el espacio ocupado en disco por el app construido 

    sudo docker run -it --rm angular-app:0.0.1-build-only du -sh /usr/local/app/dist/

# Note que la diferencia es considerable

  11. Modifique el archivo Dockerfile.multistage agregando el siguiente contenido 

    15
16
17
18
19
20
21
22
23
24
25
26
27
28
    FROM opensuse-nginx:15.4

# Copy the build output to replace the default nginx contents.
COPY --from=build /usr/local/app/dist/sample-angular-app /srv/www/htdocs/

# Give permissions to write pid file to nginx user
RUN touch /run/nginx.pid && chown -R nginx:nginx /run/nginx.pid

# Use an user without root permissions
USER nginx


# Expose port 80
EXPOSE 80

  12. Verificar que el Dockerfile se vea de la siguiente manera: 

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
    FROM registry.suse.com/bci/nodejs:14 as build

# Set the working directory
WORKDIR /usr/local/app

# Add the source code to app
COPY ./ /usr/local/app/

# Install all the dependencies
RUN npm install

# Generate the build of the application
RUN npm run build

FROM opensuse-nginx:15.4

# Copy the build output to replace the default nginx contents.
COPY --from=build /usr/local/app/dist/sample-angular-app /srv/www/htdocs/

# Give permissions to write pid file to nginx user
RUN touch /run/nginx.pid && chown -R nginx:nginx /run/nginx.pid

# Use an user without root permissions
USER nginx


# Expose port 80
EXPOSE 80

  13. Crear una nueva imagen con el tag angular-app:0.0.1 

    sudo docker build -t angular-app:0.0.1 -f docker/Dockerfile.multistage .

  14. Inspeccione las imágenes creadas 

    sudo docker image inspect \
angular-app:0.0.1-build-only angular-app:0.0.1 \
--format='{{println .RepoTags}}{{range .RootFS.Layers}}{{println . }}{{end}}'

  15. Inicia un contenedor con la imagen que se creó. 

    sudo docker run --name=angular-app -p 30080:80 -d angular-app:0.0.1

  16. Verificar funcionamiento. Desde su navegador de Internet acceda a su HOST de Prueba. Ejecute el siguiente comando, para obtener su dirección ip. 

    HOST_EXTERNAL_IP=$(curl -s http://showip.net)
echo http://${HOST_EXTERNAL_IP}:30080

  17. Validar las imágenes y comparar su tamaño. 

    sudo docker images |grep angular

Limpieza de ambiente

  1. Limpiar el ambiente deteniendo y eliminando los recursos 
    sudo docker stop angular-app
sudo docker rm angular-app
sudo docker image rm opensuse-nginx:15.4
sudo docker image rm angular-app:0.0.1-build-only
sudo docker image rm angular-app:0.0.1