Cómo Dockerizar una Aplicación Angular con Nginx

Cómo Dockerizar una Aplicación Angular con Nginx

  • Ruben
En este artículo, exploraremos cómo dockerizar una aplicación Angular utilizando un Dockerfile multi-etapa y servirlo con Nginx, optimizando el proceso para producción .

1. Crear una Aplicación Angular
Primero, necesitas una aplicación Angular básica. Si ya tienes una, puedes omitir este paso. Si no, ejecuta:

ng new sample-angular-app
cd sample-angular-app
ng serve

Esto genera un proyecto y lo ejecuta en http://localhost:4200. Asegúrate de tener Node.js y Angular CLI instalados .

2. Configurar el Dockerfile Multi-Etapa
El Dockerfile define dos etapas: una para construir la aplicación y otra para servirla con Nginx.

Ejemplo de Dockerfile
# ----------------------------
# Etapa 1: Construir la aplicación
# ----------------------------
FROM node:latest as build

WORKDIR /usr/local/app
COPY ./ /usr/local/app/
RUN npm install
RUN npm run build

# ----------------------------
# Etapa 2: Servir con Nginx
# ----------------------------
FROM nginx:latest

COPY --from=build /usr/local/app/dist/sample-angular-app /usr/share/nginx/html
EXPOSE 80
Explicación

  • Etapa 1 (Build):
    • Usa una imagen de Node.js para instalar dependencias y compilar el proyecto .
    • COPY . . copia todos los archivos del proyecto al contenedor.
    • npm run build genera los archivos estáticos en la carpeta dist/.
  • Etapa 2 (Run):
    • Utiliza una imagen de Nginx para servir los archivos compilados.
    • COPY --from=build transfiere los archivos de la etapa de construcción a la carpeta de Nginx .
    • EXPOSE 80 indica que el contenedor escucha en el puerto 80.
3. Configurar Nginx
Crea un archivo nginx.conf en la raíz del proyecto para evitar errores de rutas en Angular:
server {
    listen 80;
    location / {
        root /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
    }
}
Este archivo asegura que todas las rutas se redirijan a index.html, esencial para aplicaciones de una sola página (SPA) .

4. Construir la Imagen de Docker
Ejecuta desde la raíz del proyecto:
docker build -t mi-app-angular:latest .
  • -t etiqueta la imagen (ej: mi-app-angular:latest).
  • El . indica que el Dockerfile está en el directorio actual .
Verifica la imagen creada:
docker images
5. Ejecutar el Contenedor
Inicia el contenedor mapeando el puerto 8080 del host al 80 del contenedor:
docker run -d -p 8080:80 mi-app-angular:latest
  • -d ejecuta el contenedor en segundo plano.
  • -p 8080:80 vincula los puertos .
Verifica el estado del contenedor:
docker ps
Accede a la aplicación en http://localhost:8080.

6. Publicar la Imagen en Docker Hub
Si deseas compartir la imagen:
docker login -u <usuario>
docker tag mi-app-angular:latest <usuario>/mi-app-angular:latest
docker push <usuario>/mi-app-angular:latest

Conclusión
Dockerizar una aplicación Angular con Nginx simplifica el despliegue en cualquier entorno, asegurando consistencia y portabilidad. Este enfoque multi-etapa reduce el tamaño final de la imagen y optimiza el flujo de trabajo .

Recursos Adicionales:


¡Empieza a containerizar tus proyectos y lleva tu desarrollo al siguiente nivel! 🐳

  • Angular
  • Docker
  • Guías prácticas
Deja un comentario: