Compartir comentarios
Las respuestas se generan en base a la documentación.

Probar tu despliegue de Angular

Tabla de contenidos

Requisitos previos

Antes de empezar, asegúrate de haber completado lo siguiente:

¿Nuevo en Kubernetes?
Consulta el tutorial de conceptos básicos de Kubernetes para familiarizarte con clústeres, pods, deployments y services.

Descripción general

Esta sección te guía para desplegar tu aplicación Angular containerizada en local con el Kubernetes integrado de Docker Desktop. Ejecutar tu aplicación en un clúster Kubernetes local simula de cerca un entorno de producción real, lo que te permite probar, validar y depurar tus cargas de trabajo con confianza antes de promoverlas a staging o producción.

Crear un archivo YAML de Kubernetes

Sigue estos pasos para definir la configuración de despliegue:

  1. En la raíz del proyecto, crea un archivo llamado: angular-sample-kubernetes.yaml

  2. Abre el archivo en tu IDE o editor de texto preferido.

  3. Añade la siguiente configuración y sustituye {DOCKER_USERNAME} y {DOCKERHUB_PROJECT_NAME} por tu nombre de usuario de Docker Hub y el nombre del repositorio de la sección anterior Automatizar tus compilaciones con GitHub Actions.

apiVersion: apps/v1
kind: Deployment
metadata:
  name: angular-sample
  namespace: default
spec:
  replicas: 1
  selector:
    matchLabels:
      app: angular-sample
  template:
    metadata:
      labels:
        app: angular-sample
    spec:
      containers:
        - name: angular-container
          image: {DOCKER_USERNAME}/{DOCKERHUB_PROJECT_NAME}:latest
          imagePullPolicy: Always
          ports:
            - containerPort: 8080
          resources:
            limits:
              cpu: "500m"
              memory: "256Mi"
            requests:
              cpu: "250m"
              memory: "128Mi"
---
apiVersion: v1
kind: Service
metadata:
  name: angular-sample-service
  namespace: default
spec:
  type: NodePort
  selector:
    app: angular-sample
  ports:
    - port: 8080
      targetPort: 8080
      nodePort: 30001

Este manifiesto define dos recursos clave de Kubernetes, separados por ---:

  • Deployment
    Despliega una réplica de tu aplicación Angular dentro de un pod. El pod usa la imagen Docker compilada y enviada por tu flujo de CI/CD de GitHub Actions
    (consulta Automatizar tus compilaciones con GitHub Actions).
    El contenedor escucha en el puerto 8080, que suele usar Nginx para servir tu aplicación Angular de producción.

  • Service (NodePort)
    Expone el pod desplegado a tu máquina local.
    Reenvía el tráfico del puerto 30001 del host al puerto 8080 del contenedor.
    Así puedes acceder a la aplicación en el navegador en http://localhost:30001.

Note

Para más información sobre objetos de Kubernetes, consulta la documentación de Kubernetes.

Desplegar y comprobar tu aplicación

Sigue estos pasos para desplegar tu aplicación Angular containerizada en un clúster Kubernetes local y verificar que funciona correctamente.

Paso 1. Aplicar la configuración de Kubernetes

En la terminal, ve al directorio donde está tu archivo angular-sample-kubernetes.yaml y despliega los recursos con:

  $ kubectl apply -f angular-sample-kubernetes.yaml

Si todo está configurado correctamente, verás confirmación de que se crearon el Deployment y el Service:

  deployment.apps/angular-sample created
  service/angular-sample-service created

Esto confirma que el Deployment y el Service se crearon correctamente y están en ejecución dentro de tu clúster local.

Paso 2. Comprobar el estado del Deployment

Ejecuta el siguiente comando para comprobar el estado de tu deployment:

  $ kubectl get deployments

Deberías ver una salida similar a la siguiente:

  NAME                 READY   UP-TO-DATE   AVAILABLE   AGE
  angular-sample       1/1     1            1           14s

Esto confirma que tu pod está en ejecución con una réplica disponible.

Paso 3. Verificar la exposición del Service

Comprueba si el service NodePort expone tu aplicación en la máquina local:

$ kubectl get services

Deberías ver algo como:

NAME                     TYPE        CLUSTER-IP       EXTERNAL-IP   PORT(S)          AGE
angular-sample-service   NodePort    10.100.185.105    <none>        8080:30001/TCP   1m

Esta salida confirma que tu aplicación está disponible mediante NodePort en el puerto 30001.

Paso 4. Acceder a la aplicación en el navegador

Abre el navegador y ve a http://localhost:30001.

Deberías ver tu aplicación de ejemplo Angular lista para producción, servida por tu clúster Kubernetes local.

Paso 5. Limpiar recursos de Kubernetes

Cuando termines las pruebas, puedes eliminar el deployment y el service con:

  $ kubectl delete -f angular-sample-kubernetes.yaml

Salida esperada:

  deployment.apps "angular-sample" deleted
  service "angular-sample-service" deleted

Así mantienes el clúster limpio y listo para el siguiente despliegue.

Resumen

En esta sección aprendiste a desplegar tu aplicación Angular en un clúster Kubernetes local con Docker Desktop. Esta configuración te permite probar y depurar tu aplicación containerizada en un entorno similar a producción antes de desplegarla en la nube.

Esto es lo que lograste:

  • Crear un Deployment y un Service NodePort de Kubernetes para tu aplicación Angular
  • Usar kubectl apply para desplegar la aplicación en local
  • Verificar que la aplicación estaba en ejecución y accesible en http://localhost:30001
  • Limpiar los recursos de Kubernetes tras las pruebas

Recursos relacionados

Consulta referencias oficiales y buenas prácticas para mejorar tu flujo de despliegue en Kubernetes: