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?](https://binary-coffee.dev/post/desplegando-un-proyecto-de-angular-en-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](https://binary-coffee.dev/post/desplegando-un-proyecto-de-angular-en-docker) sobre el tema, permitan que el despliegue de tu proyecto sea más rápido y eficiente. > Happy coding!!!
Opiniones