Binary Coffee

Desplegando Angular con Docker (segunda parte)

angular docker typescript

Aunque ya en el pasado publiqu茅 un art铆culo de 驴c贸mo desplegar un proyecto de Angular con Docker?, creo que se hace necesario escribir esta nueva versi贸n, donde luego de un a帽o de experiencia, muchas de las cosas que anteriormente hac铆a, las he ido actualizando y pueden ser de mucha ayuda para los desarrolladores de Angular.

Construyendo el proyecto de Angular

Se hace necesario, antes de hacer nada, construir el proyecto que luego ser谩 desplegado con Docker. Para construir el proyecto solo necesitas ejecutar el comando build de Angular-Cli:

$ ng build

Una vez que el proyecto fue construido, deben chequear la carpeta en que el resultado fue copiado (esto puede variar algunas veces). Generalmente el proyecto es copiado en la carpeta dist. Cerciorarse que dentro de las configuraciones del proyecto Angular, no tienen puesto que se construya el proyecto en una carpeta distinta o en una sub-carpeta dentro de dist, donde quedar铆a de la siguiente manera: dist/proyect-name

Configuraci贸n de NGINX

Para los que no llegaron a ver el primer art铆culo sobre desplegar Angular con Docker, lo principal y m谩s importante, es que el proyecto ser谩 desplegado en un contenedor de nginx. Todo proyecto de Angular, una vez que es construido, se generan una serie de archivos, dentro de los cuales est谩n el index.html. Estos archivos significan, que solo necesitamos servir en alg煤n servidor de contenido, el proyecto, y aqu铆 es donde entra NGINX.

Con NGINX es posible servir en un servidor de contenido, los archivos compilados del proyecto. En el caso particular de Angular, y con el objetivo de servir estos archivos compilados de manera 贸ptima, se puede utilizar el siguiente archivo configuraci贸n de NGINX (el mismo utilizado en primer art铆culo).

server {
  listen 80;

  # send headers in one peace
  tcp_nopush on;
  # allow the server to close connection on non responding client, this will free up memory
  reset_timedout_connection on;
  # request timed out -- default 60
  client_body_timeout 20;
  # if client stop responding, free up memory -- default 60
  send_timeout 20;
  # server will close connection after this time -- default 75
  keepalive_timeout 40;
  # reduce the data that needs to be sent over network
  gzip on;
  gzip_min_length 200;
  gzip_types
    text/plain
    text/css
    text/xml
    text/javascript
    application/javascript
    application/x-javascript
    application/json
    application/x-web-app-manifest+json
    application/xml
    application/xhtml+xml
    application/x-font-ttf
    application/octet-stream
    font/opentype
    image/x-icon
    image/svg+xml;
  gzip_proxied expired no-cache no-store private auth;
  gzip_http_version 1.1;
  gzip_comp_level 5;
  gzip_vary on;
  gzip_disable msie6;

  location / {
    alias /usr/share/nginx/html/;
    try_files $uri $uri/ /index.html;
  }
}

Para utilizar esta configuraci贸n previamente, aconsejo crear el archivo nginx.conf en el directorio ra铆z del proyecto para posteriormente ser utilizado en la configuraci贸n de Docker.

Configuraci贸n de Docker

Una vez que el estamos seguros que el proyecto se construye correctamente y que conocemos la carpeta en que se copia el resultado de la construcci贸n del mismo, ya estamos listos para crear el archivo de configuraci贸n de Docker.

A continuaci贸n muestro un archivo de configuraci贸n de Docker de un proyecto de Angular y seguidamente explicar茅 que hace cada l铆nea del mismo.

FROM node:10.16.3 AS build-env

WORKDIR /app

# Instalar las dependencias del proyecto
COPY ./package.json ./package.json
COPY ./package-lock.json ./package-lock.json
RUN npm install

# Copiar los archivos del proyecto
COPY . ./

# Construir el proyecto de Angular
RUN npm run build

# Imagen final de docker que se utilizar谩 en el despliegue
FROM nginx:1.13.9-alpine

# Comprobar que se utiliza la direcci贸n correcta en que se construye el proyecto
COPY --from=build-env /app/dist/proyect-name/ /usr/share/nginx/html

# Copiar la configuraci贸n de nginx dentro del contenedor
COPY ./nginx.conf /etc/nginx/conf.d/default.conf

CMD ["nginx", "-g", "daemon off;"]

En esta versi贸n del archivo de configuraci贸n de Docker, se puede ver que primeramente se copian los archivos package.json y package-lock.json con el objetivo de instalar las dependencias y dejarlas en cach茅, para que en los pr贸ximos despliegues, no tener que repetir ese paso si las dependencias del proyecto no han cambiado. Con esta optimizaci贸n, se logra reducir en gran medida los tiempos de despliegue del proyecto.

Configuraci贸n de Docker-Compose

Para los que como a mi gustan de utilizar Docker-Compose, les dejo tambi茅n la configuraci贸n necesaria.

version: '3'

services:
  deploy:
    build:
      context: .
      dockerfile: ./Dockerfile
    restart: always
    ports:
      - '127.0.0.1:4000:80'

Como se puede notar en esta configuraci贸n, estamos construyendo la configuraci贸n de Docker que anteriormente creamos en un archivo Dockerfile y publicando la aplicaci贸n web por el puerto 4000 del contenedor de Docker.

Conclusiones

Espero que con este art铆culo, ahora se muy f谩cil el despliegue de un proyecto de Angular con Docker y que los cambios realizados a la configuraci贸n que explico en el primer art铆culo sobre el tema, permitan que el despliegue de tu proyecto sea m谩s r谩pido y eficiente.

Happy coding!!!

Opiniones