Dockerando una aplicación de Angular

En este post vamos a crear un contenedor para correr una aplicación de Angular para desarrollo. Angular es uno de los marcos de trabajo más famosos del mundo, hago este post para ayudar a los equipo de desarrollo que estén migrando sus proyectos a contenedores.

En el equipo que desarrollo hicimos el paso decidimos hacer este contenedor porque a pesar de tener las mismas dependencias instaladas y las mismas versiones tanto de Angular como de NodeJS teníamos comportamientos no esperados. Es por ello que se decidió crear un contenedor para que todo sea absolutamente todo lo mismo. En el próximo articulo les voy ayudar a crear una imagen personalizada para ambiente productivo.

Regularmente a mi me gusta ocupar dos archivos de configuración

• dev.Dockerfile
• docker-compose.override.yml

El primero regularmente lo ocupa para la personalización de la imagen base y agregar capas personalizadas a la misma de acuerdo con mis necesidades. Y el otro archivo regularmente lo ocupo para configurar los volúmenes persistentes y también los puertos que van a estar expuesto.

A continuación muestro el contenido del archivo de dev.Dockerfile, regularmente debe de estar a nivel de proyecto, como se muestra a continuación:

Estructura de proyecto de ejemplo ignorar el archivo docker-compose.yml

Contenido de dev.Dockerfile

FROM node:20.10.0

RUN mkdir -p /app

WORKDIR /app

COPY ["app-angular/package.json", "app-angular/package-lock.json", "/app/"]

COPY ["app-angular", "/app/"]

RUN npm install -g @angular/cli @angular-devkit/build-angular && npm install

CMD ["npm", "run", "start"]

Las lineas se describen a continuación:

1. La primera parte es el nombre de la imagen de node puedes optar por la completa o por alguna versión de Alpine Linux que regularmente son mucho mas ligeras lo cual agiliza el proceso de despliegue cuando se hace por medio de pipelines.
2. Creamos una carpeta dentro de contenedor a nivel de raiz en donde se van a almacenar los archivos de nuestro proyecto.
3. Establecemos el directorio en donde nos queremos mover y en donde se ejecutaran los comandos siguientes.
4. Se copian los archivos de configuración de NPM (package.json y package-lock.json) que se encuentran dentro de la carpeta app-angular dentro del contenedor.
5. Se copian todos los archivos que se encuentran dentro de la carpeta del proyecto de app-angular dentro del contenedor.
6. Se instalan las dependencias que están configuradas dentro del contenedor.
7. Se corre el proyecto dentro del contenedor.

Todos los pasos anteriores deberíamos de tener una imagen lista para poder ocupar con nuestro archivo de docker-compose.yml

Contenido del archivo de docker-compose.yml

name: angular-project

services: 
  angular-container:
    build:
      context: .
      dockerfile: dev.Dockerfile
    ports:
      - "4200:4200"
    volumes:
      - ./app-angular:/app
      - /app/node_modules

El archivo de configuración de docker-compose.yml es importante porque yo regularmente lo ocupo para configurar puertos y volúmenes persistentes. Ocupo este archivo porque es sencillo modificar y bastante visual.

1. La primera linea es el nombre del stack
2. El segmento de build es importante porque ahí se especifica cual es el documento de Dockerfile que se va ocupar.
3. En el segmento de ports se especifica cual es el puerto que se va exponer en tu localhost. El puerto de la izquierda es de tu host o computadora y del lado derecho es el del contenedor, no necesariamente deben de coincidir.
4. Se configura un volumen, este volumen es para que todos los archivos dentro de app-angular si son modificados se vean reflejados automáticamente en el contenedor. El segundo es para decir que ignore la carpeta de node_modules y no la sincronice con el host.

Teniendo estos dos archivos ahora solo se debe de ejecutar el siguiente comando:

docker-compose up -d --build

Este comando hará que no solo se cree la imagen a partir del dev.Dockerfile sino que también corra la imagen con las configuraciones del docker-compose.yml