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/
