Preparar un ambiente de desarrollo angular CLI con Docker 😄

Siempre resulta un problema incomodísimo la configuración del entorno, y más cuando es en equipo, o a veces cuando actualizamos la versión de node todo se va al carajo… por ello Docker entra en acción y nos permite optimizar estos escenarios.

Creando el dockerfile

Lo primero que tenemos que hacer es crear este archivo llamado Dockerfile

# Dockerfile
FROM node:6.9
MAINTAINER PepitoPerez
LABEL authors="Tu nombre "

# Agregamos un usuario
RUN useradd --user-group --create-home --shell /bin/false app

ENV HOME=/usr/src/app
RUN mkdir $HOME
WORKDIR $HOME

# Instalamos angular cli en nuestra imágen
RUN npm install -g @angular/cli && npm cache clean

# Puerto entorno dev
EXPOSE 4200
# Puerto livereload
EXPOSE 49153
# Puerto Test
EXPOSE 9876
# Puerto e2e
EXPOSE 49152 

Para que sea más fácil la construcción de la imágen, usaremos docker-compose, creamos nuestro archivo docker-compose.yml

version: "2"
services:
  client-angular:
    build: .
    ports:
     -"4200:4200"
     -"49153:49153"
     -"9876:9876"
     -"49152:49152"
    volumes:
     - ./:/usr/src/app  
    command: bash

Genial, ahora si, manos a la obra (recuerda que debes tener instalado Docker en tu equipo 😄)

Construyendo la imágen

Ahora, tan solo basta con ejecutar en nuestra terminal, ubicándonos en la carpeta donde está nuestro Dockerfile y el docker-compose.yml

docker-compose build

Este proceso tardará un poco, y veremos una salida parecida a lo siguiente:

Al final del proceso, nos arrojará el tag y el mensaje de éxito de nuestro entorno

Al listar las imágenes con

docker images

debemos encontrar el tag que nos halla quedado.

PD: Este proceso se puede mejorar profundizando en docker-compose up -d 😄

En resumen, hasta este momento, sabemos que tenemos una imágen con angular CLI instalado, sin embargo, no nos hemos conectado a esa imágen, y mucho menos tenemos el código fuente en nuestra máquina (recuerda que los contenedores se reciclan/eliminan ya que son volátiles)

La solución

Cada vez que necesitemos trabajar correremos nuestra imágen, y le indicaremos que use un directorio local de nuestro equipo dentro del contenedor, de esta manera aunque el contenedor se destruya nuestro flamante código aún vivirá 😄 , esto en docker se puede lograr usando el concepto de volumenes.

docker run -ti --rm -v /c/Users/YOUR_USER/Proyectos/folder/:/usr/src/app -p4200:4200 -p49153:49153 -p9876:9876 -p49152:49152 angularclifont_client-angular bash

  • Le indicamos que debe ser interactivo (-ti)
  • Que debe borrarse al detener el contenedor (–rm)
  • Que necesitamos conectar un directorio local con uno del contenedor (-v rutaLocal:/ruta/interna/contenedor)
  • Además le indicamos los puertos con la bandera -p
  • Finalmente el nombre de la imágen y el comando “bash”

Una vez ejecutamos este “sencillo” comando, ya nos encontramos en nuestro contenedor, podemos iniciar un proyecto con

ng new MiSuperProyecto --directory .

El punto (.) es para que se genere en el directorio actual, veremos una salida como esta si todo va bien

Ahora comprobamos que en nuestro directorio local se hallan creado los archivos, ehhhhhhh super!!

Y si todo va bien (eso espero), debemos poder correr nuestro proyecto en http://localhost:4200, si hacemos un cambio en los archivos en nuestra máquina local, veremos que el servidor se verán los cambios automáticamente, así que levantemos el servidor:

ng serve --host 0.0.0.0 --poll=2000

y voilá!!!

Ahora podemos desarrollar nuestra app con angular, sin tener que tener la versión de node ni angular CLI en nuestra máquina local, no tenemos que ensuciar nuestro sistema operativo, y podremos integrar a otros y asegurarnos que tengan nuestro entorno de desarrollo igual, y dejar en el olvido la famosa frase “en mi local funciona” 😄

Espero les sirva

PD: Punto a aclarar, si usas Docker CE te funcionará con localhost, si usas Docker Toolbox (esto por lo general sucede Win 10 versiones Home o con compilaciones menores a la que necesita Docker CE), deberás obtener la ip de tu máquina docker, entonces te quedaría el acceso “http://tu_ip:4200.

Validé que funcionara el livereload, y el comando ng test –poll=2000 corre de maravilla, por mejorar falta configurar la imágen para que corra protactor y levante nuestros test e2e para que todo sea perfecto.

Dios les bendiga

Fuente http://codefull.xyz/iniciar-el-proyecto-con-angular-cli/