¿ Como Dockerizar una aplicación en Angular?

Docker es un proyecto de código abierto que automatiza el despliegue de aplicaciones dentro de contenedores de software. En este tutorial se explica como “Dockerizar” una aplicación realizada en Angular, para propósitos de este proyecto se utiliza la aplicación de PokeApi realizada en tutoriales pasados.

Requisitos

El repositorio del proyecto a utilizar esta en el siguiente link

• Proyecto PokeApi
• Docker instalado y funcionando correctamente.
• Conocimientos básicos de Docker

Creación de Dockerfile

El archivo Dockerfile es un archivo de texto plano que permite indicarle a Docker cuales son las instrucciones necesarias para crear una imagen, Docker funciona mediante Dockerfiles.

Dicho lo anterior lo primero que creamos es un archivo el cual nombramos Dockerfile, se crea a nivel de raiz, el archivo debe estar como en la siguiente imagen

El contenido del archivo Dockerfile es el siguiente:

#Primera Etapa
FROM node:10-alpine as build-step

RUN mkdir -p /app

WORKDIR /app

COPY package.json /app

RUN npm install

COPY . /app

RUN npm run build --prod

#Segunda Etapa
FROM nginx:1.17.1-alpine
	#Si estas utilizando otra aplicacion cambia PokeApp por el nombre de tu app
COPY --from=build-step /app/dist/PokeApp /usr/share/nginx/html

• Primera Etapa:
  1. Utilizamos una imagen de Node
  2. Copiamos el código de la aplicación en una carpeta llamada app
  3. Instalamos las dependencias del archivo package.json
  4. Creamos los archivos de producción usando la imagen de Node
• Segunda Etapa:
  1. Utilizamos una imagen del servidor de Nginx para crear un servidor y poder desplegar la aplicación en este.
  2. Copiamos los archivos de producción de app/dist/PokeApp a la ruta /usr/share/nginx/html.

Creación de .dockerignore

El archivo .dockerignore es una buena practica recomendada para que la imagen se construya mas rápido y aparte excluir lo que no sea necesario para la construcción de esta. El contenido es el siguiente:

.git

.firebase

.editorconfig

/node_modules

/e2e

/docs

.gitignore

*.zip

*.md

Creación de la imagen Docker

En la consola de comandos ubicados en el proyecto escribimos el siguiente comando

docker build -t pokeapp .

Observación: No olvidar el . del final

Al final de la construcción de la imagen si todo va bien obtendremos el id de la imagen y la versión.

Si escribimos docker images observamos que tenemos nuestra imagen de pokeapp creada, la imagen none es la instalación de las dependencias.

Corriendo el contenedor

docker run -d -it -p 80:80 pokeapp

Al escribir el comando anterior nos muestra el id del contenedor que se creo.

Si vamos al navegador y escribimos localhost, nuestro contenedor esta funcionando perfectamente.

Creamos otra instancia de nuestro contenedor

docker run -d -it -p 8000:80 pokeapp

Como podemos comprobar tenemos dos contenedores, uno corriendo por el puerto 80 y el otro por el puerto 8000.

Espero les funcione, cualquier duda quedo atento a los comentarios, gracias!

Tutorial en Video

Contacto