Como cargar tu app en angular a los registros de docker hub.
Paso 1: Crear nuestro proyecto Angular.
Ejecutamos en nuestra consola el siguiente comando:
ng new proyectoPruebaRecordar que al momento de ejecutar este comando en consola, tienes que darle “Y” si quieres crear el “Routing Module”, este archivo nos ayudara a rutear nuestros componentes.
Luego angular cli preguntara que tipo de hoja de estilos quieres usar, para efectos de este tutorial no necesitamos algo tan sofisticado, así que elije SCSS.
Al terminar la instalación, ejecuta este comando en la terminal para poder visualizar el proyecto.
ng serve -oSi todo sale bien deberías poder ver el proyecto así:
Paso 2: Crear nuestro usuario Docker Id.
Luego nos dirigimos al siguiente link y creamos un Docker Id
Apenas tengamos nuestro usuario creado, nos vamos al siguiente link para descargar el DOCKER DESKTOP, esta herramienta nos servirá de mucho ya que nos permite crear un espacio de tipo linux en nuestro equipo y poder generar y/o guardar las imágenes ahí.
Cuando tengamos descargado e instalado el docker desktop, nos creara un icono en nuestro escritorio, debemos iniciarlo y esperar.
Cuando el docker desktop termine de iniciarse tenemos que darnos cuenta de 2 cosas importantes.
1- Verificar si estamos logeado correctamente en nuestro usuario creado anteriormente.
2- Verificar si estamos posicionados en los contenedores de linux, si no es así, seleccionar la opción “Switch to Linux containers …”
Paso 3: Crear nuestro primer repositorio docker.
Nos dirigimos al dashboard del Docker Hub y pinchamos la opción “Create Repository” y procedemos a ingresar los datos necesarios.
La visibilidad del repositorio depende del tipo de cuenta que tengas asociada, si es primera vez que estas creando un ID tendrás la versión gratis, esta te permite crear N repositorios públicos y 1 solo privado.
Si necesitas repositorios privados, puedes pinchar este link y ver los precios.
Cuando tengamos nuestros datos ingresados, pinchamos la opción crear.
Y docker hub nos redireccionara a nuestro repositorio creado.
En este punto tenemos que tener en consideración 3 cosas importantes:
1- fbellod/primer-repositorio: Sera el nombre oficial de nuestro repositorio, este nombre tiene que ser el mismo al momento de realizar la subida de la imagen desde nuestro proyecto local.
2- Tags: Este sera el diferenciador de cada imagen generada.
3- Docker commands: Comando oficial para subir la imagen generada al docker hub.
Paso 4: Crear Dockerfile y nginx.conf.
Nos dirigimos a nuestro proyecto y creamos un archivo llamado Dockerfile, tiene que estar creado en la raíz.
y colocamos las siguientes instrucciones
FROM nginx:1.17.8-alpine
COPY nginx.conf /etc/nginx/nginx.conf
WORKDIR /usr/share/nginx/html
COPY dist/proyectoPrueba/ .
EXPOSE 80La instrucción COPY dist/proyectoPrueba/ . nos dice desde donde realizaremos la copia del proyecto, la ruta sabemos que tiene que estar posicionada en esta carpeta porque al momento de hacer BUILD del proyecto este lo creara en base a esta ruta, para salir de dudas y saber que nombre tenemos que ponerle acá, nos dirigimos al archivo angular.json y verificamos que nombre tenemos en la carpeta de salida.
EXPOSE 80: Este sera el puerto en donde expondremos nuestro proyecto, cabe resaltar que todo proyecto FRONT debería ir en este puerto.
Ahora procederemos a crear el archivo nginx.conf, también debe ir en la raíz del proyecto.
¿Porque creamos el archivo nginx.conf?
El resultado de un proyecto angular queda en la carpeta dist/proyectoPrueba con muchos archivos estáticos, estos archivos se suben a un servidor web y funcionan perfecto, pero en este caso creamos imágenes Docker que tiene las 2 opciones, el dist/proyectoPrueba del proyecto angular y el servidor web (en este caso nginx).
En simples palabras este archivo en particular de configuración es para decirle al nginx que se trata de una app web SPA, que es un solo index.
Dentro del archivo nginx.conf colocamos la siguiente configuración.
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 80;
server_name localhost;
root /usr/share/nginx/html;
index index.html index.htm;
include /etc/nginx/mime.types;
gzip on;
gzip_min_length 1000;
gzip_proxied expired no-cache no-store private auth;
gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
location / {
try_files $uri $uri/ /index.html;
}
}
}Si estas trabajando en VISUAL STUDIO CODE, puedes dirigirte a la sección de Extensiones y descargar la siguiente.
Esta herramienta nos ayudara a administrar las imágenes creadas para poder subirlas al docker hub desde nuestro IDE.
Cuando la extensión se instale, veras varias cosas que te explico a continuación:
CONTAINERS: En esta sección se guardaran los contenedores locales en donde podemos levantar nuestro proyecto y probar si la imagen quedo bien generada.
IMAGES: En esta sección quedaran guardadas todas las imágenes generadas desde nuestro proyecto local.
REGISTRIES: Esta sección nos mostrara nuestro usuario y los repositorios creados en nuestro docker hub.
Paso 5: Crear carpeta DIST y generar nuestra imagen.
Procederemos a crear nuestra carpeta dist, la idea de este comando es poder desplegar todos los resultados de la compilación para que sean reconocidos al momento de subirlos a nuestro servidor de producción.
ng build --prod
Quedando de la siguiente manera:
Ahora procederemos a construir la imagen en base a nuestro proyecto, debemos dar clic en el botón derecho encima del archivo Dockerfile y pinchar “build image”
Se nos habilitara un input en donde debemos poner el nombre exacto de nuestro repositorio creado anteriormente + el tag, en este caso le puse dev para llevar un orden con respecto a los ambientes.
Si quieres hacer la generación de la imagen vía comando, puedes ejecutar lo siguiente:
docker build --pull --rm -f "Dockerfile" -t tu-usuario/primer-repositorio:dev "."Al terminar deberíamos ver que la imagen se creo satisfactoriamente:
Para verificar si la imagen se creo bien, nos dirigimos a la sección DOCKER de nuestro visual studio code y vemos si esta creada nuestra imagen.
Paso 6: Subir nuestra imagen al docker hub
Antes de realizar este paso, debemos verificar si la extensión nos detecto el repositorio nuevo que creamos al principio de este tutorial.
Si esta todo OK, nos vamos a la sección de imágenes creadas y pinchamos la nuestra, clic derecho y pinchamos Push…
Se nos abrirá denuevo el input para verificar que el nombre del repositorio esta correcto, si esta todo OK damos ENTER
Si esta todo OK, veremos lo siguiente.
Si quieres hacer esta acción vía comando, puedes ejecutar lo siguiente en la terminal.
docker push tu-usuario/primer-repositorio:devSi todo marcha a la normalidad hasta acá, deberías ver la imagen subida al repositorio creado en los registros del docker hub y disponible para ser usada en los contenedores que tengas alojados en tu servidor.
Un truco para verificar si la imagen quedo generada correctamente, es emular un contenedor de forma local y correr nuestra imagen ahí, para eso nos vamos a nuestra imagen y pinchamos click derecho y seleccionamos “Run”.
Al hacer eso, en la sección CONTAINERS se habilitara un símbolo de PLAY en color verde que nos esta indicando que ese contenedor ya tiene cargada una imagen.
Ahora damos clic derecho y seleccionamos “Open in Browser”.
Si todo sale bien, deberíamos ver nuestro proyecto cargado en un contenedor local.
Muchas gracias por llegar hasta acá y muy agradecido que le pongas “CLAPS” a mis publicaciones, y claro se agradecen todos los feedback posibles, así podre ayudar a los demás de la mejor manera posible.
