Usar contenedores para el desarrollo con Angular

Requisitos previos

Completa Containerizar una aplicación Angular.

Descripción general

En esta sección aprenderás a configurar entornos de producción y desarrollo para tu aplicación Angular containerizada con Docker Compose. Esta configuración te permite servir una compilación de producción estática con Nginx y desarrollar de forma eficiente dentro de contenedores con un servidor de desarrollo con recarga en vivo y Compose Watch.

Aprenderás a:

• Configurar contenedores separados para producción y desarrollo
• Activar la sincronización automática de archivos con Compose Watch en desarrollo
• Depurar y previsualizar cambios en tiempo real sin reconstrucciones manuales

Actualizar servicios automáticamente (modo desarrollo)

Usa Compose Watch para sincronizar automáticamente los cambios de archivos fuente en tu entorno de desarrollo containerizado. Esto ofrece una experiencia de desarrollo fluida y eficiente sin reiniciar ni reconstruir contenedores manualmente.

Paso 1: Crear un Dockerfile de desarrollo

Crea un archivo llamado Dockerfile.dev en la raíz del proyecto con el siguiente contenido:

# =========================================
# Stage 1: Development - Angular Application
# =========================================

# Define the Node.js version to use (Alpine for a small footprint)
ARG NODE_VERSION=24.12.0-alpine

# Set the base image for development
FROM node:${NODE_VERSION} AS dev

# Set environment variable to indicate development mode
ENV NODE_ENV=development

# Set the working directory inside the container
WORKDIR /app

# Copy only the dependency files first to optimize Docker caching
COPY package.json package-lock.json* ./

# Install dependencies using npm with caching to speed up subsequent builds
RUN --mount=type=cache,target=/root/.npm npm install

# Copy all application source files into the container
COPY . .

# Expose the port Angular uses for the dev server (default is 4200)
EXPOSE 4200

# Start the Angular dev server and bind it to all network interfaces
CMD ["npm", "start", "--", "--host=0.0.0.0"]

Este archivo configura un entorno de desarrollo ligero para tu aplicación Angular usando el servidor de desarrollo.

Paso 2: Actualizar tu archivo compose.yaml

Abre tu archivo compose.yaml y define dos servicios: uno para producción (angular-prod) y otro para desarrollo (angular-dev).

Aquí tienes un ejemplo de configuración para una aplicación Angular:

services:
  angular-prod:
    build:
      context: .
      dockerfile: Dockerfile
    image: docker-angular-sample
    ports:
      - "8080:8080"

  angular-dev:
    build:
      context: .
      dockerfile: Dockerfile.dev
    ports:
      - "4200:4200"
    develop:
      watch:
        - action: sync
          path: .
          target: /app

• El servicio angular-prod compila y sirve tu aplicación de producción estática con Nginx.
• El servicio angular-dev ejecuta tu servidor de desarrollo de Angular con recarga en vivo y hot module replacement.
• watch activa la sincronización de archivos con Compose Watch.

Note

Para más detalles, consulta la guía oficial: Usar Compose Watch.

Tras completar los pasos anteriores, el directorio del proyecto debería contener los siguientes archivos:

├── docker-angular-sample/
│ ├── Dockerfile
│ ├── Dockerfile.dev
│ ├── .dockerignore
│ ├── compose.yaml
│ ├── nginx.conf
│ └── README.Docker.md

Paso 4: Iniciar Compose Watch

Ejecuta el siguiente comando desde la raíz del proyecto para iniciar el contenedor en modo watch:

$ docker compose watch angular-dev

Paso 5: Probar Compose Watch con Angular

Para comprobar que Compose Watch funciona correctamente:

1. Abre el archivo src/app/app.component.html en tu editor de texto.

2. Localiza la siguiente línea:

   <h1>Docker Angular Sample Application</h1>

3. Cámbiala por:

   <h1>Hello from Docker Compose Watch</h1>

4. Guarda el archivo.

5. Abre el navegador en http://localhost:4200.

Deberías ver el texto actualizado al instante, sin necesidad de reconstruir el contenedor manualmente. Esto confirma que la observación de archivos y la sincronización automática funcionan como se espera.

Resumen

En esta sección configuraste un flujo de trabajo completo de desarrollo y producción para tu aplicación Angular con Docker y Docker Compose.

Esto es lo que lograste:

• Crear un Dockerfile.dev para agilizar el desarrollo local con recarga en caliente
• Definir servicios angular-dev y angular-prod separados en tu archivo compose.yaml
• Activar la sincronización de archivos en tiempo real con Compose Watch para una experiencia de desarrollo más fluida
• Comprobar que las actualizaciones en vivo funcionan modificando y previsualizando un componente

Con esta configuración puedes compilar, ejecutar e iterar tu aplicación Angular íntegramente en contenedores, de forma eficiente y consistente en todos los entornos.

Recursos relacionados

Profundiza con estas guías y mejora tu flujo de desarrollo containerizado:

• Usar Compose Watch – Sincroniza cambios de código automáticamente durante el desarrollo
• Compilaciones multi-etapa – Crea imágenes Docker eficientes y listas para producción
• Buenas prácticas para Dockerfiles – Escribe Dockerfiles limpios, seguros y optimizados.
• Referencia del archivo Compose – Aprende la sintaxis completa y las opciones para configurar servicios en compose.yaml.
• Volúmenes de Docker – Persiste y gestiona datos entre ejecuciones de contenedores

Próximos pasos

En la siguiente sección aprenderás a ejecutar pruebas unitarias de tu aplicación Angular dentro de contenedores Docker. Esto garantiza pruebas consistentes en todos los entornos y elimina dependencias de la configuración de tu máquina local.