Binary Coffee

Desplegando un proyecto de Angular en Docker?

angular docker

Versi贸n actualizada en la cual se pueden encontrar algunas optimizaciones en los archivos de configuraciones y en las im谩genes de Docker utilizadas.

En la actualidad es raro hablar de desplegar un proyecto y no hablar al mismo tiempo de Docker. Con Docker tenemos la posibilidad de que las aplicaciones est茅n aisladas en contenedores seguros que adem谩s de contener la aplicaci贸n, permita un mejor y m谩s facil modo de controlarlas. La idea de este art铆culo, es mostrar como podemos de una manera sencilla y r谩pida, construir un proyecto de Angular y desplegarlo en una imagen de Docker.

Para dockerizar un proyecto de Angular, mostraremos 2 maneras a lo largo del art铆culo:

  • construir el proyecto y luego dockerizar el resultado del build (en cuyo caso, se puede ir directamente al paso dos).
  • construir el proyecto dentro del ambiente de Docker y en el mismo ambiente de Docker crear el contenedor final.

1. Construir (build) el proyecto

Para construir el proyecto Angular dentro de un contenedor de Docker es sencillo, solo tenemos que crear el archivo Dockerfile en el directorio de nuestro proyecto y copiar el siguiente c贸digo:

Dockerfile

FROM node:10.16.3

WORKDIR /app

COPY . ./

RUN npm install
RUN npm run build

Analizando el c贸digo l铆nea a l铆nea:

  1. FROM node:10.16.3: primeramente seleccionamos la imagen de Docker base a utilizarse, en el ejemplo se utiliza la imagen de node:10.16.3, pero esto depende de la versi贸n de node que se desee para construir el proyecto
  2. WORKDIR /app: luego definimos el directorio de trabajo, este paso es solo para organizaci贸n y b谩sicamente define en que directorio dentro del contenedor se van a ejecutar los comandos m谩s adelante
  3. COPY . ./: seguidamente se copia el proyecto dentro del contenedor
  4. RUN npm install: instalamos las dependencia
  5. RUN npm run build: por 煤ltimo se construye el proyecto

2. Desplegar el proyecto con Nginx

Una vez que el proyecto ha sido construido, lo que faltar铆a ser铆a crear la imagen de Nginx y copiar el proyecto dentro. Para esto, primeramente se necesita crear un archivo de configuraci贸n de Nginx en el directorio del proyecto para posteriormente ser copiado dentro del contenedor. El archivo de configuraci贸n es el siguiente:

nginx.conf

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;
  }
}

Una vez creado el archivo de configuraci贸n de Nginx en el proyecto y asumiendo que se viene del primer paso, falta modificar el archivo Dockerfile de la siguiente manera:

Dockerfile

# Fijarse, que se le agreg贸 (AS build-env) a esta l铆nea
FROM node:10.16.3 AS build-env

WORKDIR /app

COPY . ./

RUN npm install
RUN npm run build

FROM nginx:1.13.9-alpine

COPY --from=build-env /app/dist/proyect-name/ /usr/share/nginx/html

COPY ./nginx.conf /etc/nginx/conf.d/default.conf

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

Con el soporte de m煤ltiples im谩genes de Docker es posible hacer lo que se ve en el ejemplo anterior, donde se hace uso de una segunda imagen, que ser谩 la base del contenedor. A continuaci贸n se explicar谩n los pasos a帽adidos:

  1. FROM nginx:1.13.9-alpine: se define la imagen final del contenedor a crearse
  2. COPY --from=build-env /app/dist/dcs-frontend/ /usr/share/nginx/html: se copian los archivos contruidos con la primera imagen de Node, haciendo referencia a esta por medio del parametro --from=build-env
  3. COPY ./nginx.conf /etc/nginx/conf.d/default.conf: se copia el archivo de configuraci贸n de Nginx remplazando el existente en el contenedor
  4. CMD ["nginx", "-g", "daemon off;"]: define el comando a ejecutarse al iniciar el contenedor de Docker

2.2. Desplegar el proyecto en caso de saltarse el paso 1

En caso de no utilizarse Docker para construir el proyecto, se hace necesario construirlo previamente y crear el Dockerfile con la configuraci贸n agregada en el paso 2. Por tanto lo primero que debe hacerse antes de construir la imagen de Docker es ejecutar los siguientes dos comando en un terminal en el directorio del proyecto:

npm install
npm run build

B谩sicamente instalamos las dependencias del proyecto y luego hacemos el build del mismo. A continuaci贸n pasaremos al paso dos directamente copiando los ficheros generados junto al archivo de configuraci贸n de Nginx descrito en el paso 2 y creamos el archivo de Docker con el siguiente c贸digo:

Dockerfile

FROM nginx:1.13.9-alpine

COPY ./dist/proyect-name/ /usr/share/nginx/html

COPY ./nginx.conf /etc/nginx/conf.d/default.conf

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

3. Levantar el contenedor de Docker

Una vez hecho esto la imagen del proyecto estar谩 lista para construir nuestro contenedor de Docker con el proyecto y ponerlo en producci贸n. Para ello podemos hacerlo de dos maneras: con docker-compose o directamente con Docker, a continuaci贸n se mostrar谩n ambas variantes:

Usando docker-compose

Primeramente es necesario crear el archivo de configuraci贸n de docker-compose:

docker-compose.yml

version: '3'

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

luego de crear este archivo en el directorio del proyecto solo falta ejecutar el siguiente comando y el proyecto estar谩 listo en el puerto 4000 definido en las cofiguraciones.

docker-compose up --build

Usando docker

Sin el uso de docker-compose la imagen puede construirse de la siguiente manera:

docker build -t my-project .

Una vez construida la imagen levantamos el contenedor con ella:

docker run my-project -p 127.0.0.1:4000:80 --restart=always

Y de esta manera y con no m谩s que 3 archivos de configuraci贸n se despliega el proyecto con Docker. No olviden dejarnos sus sugerencias si lo compartido en el art铆culo ha sido de ayuda.

Happy coding!

Opiniones
noavatar
Gracias amigo por tu ayuda!.