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

Probar tu despliegue de Vue.js

Tabla de contenidos

Prerrequisitos

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

¿Eres nuevo en Kubernetes?
Visita el tutorial de conceptos básicos de Kubernetes para familiarizarte con el funcionamiento de los clústeres, pods, despliegues (deployments) y servicios.

Descripción general

Esta sección te guiará para desplegar tu aplicación Vue.js contenedorizada localmente usando el Kubernetes integrado en Docker Desktop. Ejecutar tu aplicación en un clúster local de Kubernetes simula fielmente un entorno de producción real, lo que te permite probar, validar y depurar tus cargas de trabajo con confianza antes de promoverlas a entornos de staging o producción.

Crear un archivo YAML de Kubernetes

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

  1. En la raíz de tu proyecto, crea un nuevo archivo llamado: vuejs-sample-kubernetes.yaml

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

  3. Asegúrate de reemplazar {DOCKER_USERNAME} y {DOCKERHUB_PROJECT_NAME} con tu nombre de usuario real de Docker Hub y el nombre del repositorio del paso anterior Automatizar tus compilaciones con GitHub Actions.

apiVersion: apps/v1
kind: Deployment
metadata:
  name: vuejs-sample
  namespace: default
spec:
  replicas: 1
  selector:
    matchLabels:
      app: vuejs-sample
  template:
    metadata:
      labels:
        app: vuejs-sample
    spec:
      containers:
        - name: vuejs-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: vuejs-sample-service
  namespace: default
spec:
  type: NodePort
  selector:
    app: vuejs-sample
  ports:
    - port: 8080
      targetPort: 8080
      nodePort: 30001

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

  • Deployment (Despliegue) Despliega una única réplica de tu aplicación Vue.js dentro de un pod. El pod utiliza la imagen de Docker compilada y subida por tu flujo de trabajo de CI/CD de GitHub Actions (consulta Automatizar tus compilaciones con GitHub Actions). El contenedor escucha en el puerto 8080, que normalmente utiliza Nginx para servir tu aplicación de producción de Vue.js.

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

Note

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

Desplegar y comprobar tu aplicación

Sigue estos pasos para desplegar tu aplicación Vue.js contenedorizada en un clúster local de Kubernetes y verificar que se esté ejecutando correctamente.

Paso 1. Aplicar la configuración de Kubernetes

En tu terminal, navega al directorio donde se encuentra tu archivo vuejs-sample-kubernetes.yaml, luego despliega los recursos usando:

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

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

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

Esto confirma que tanto el Deployment como el Service se crearon correctamente y ahora se están ejecutando dentro de tu clúster local.

Paso 2. Comprobar el estado del Deployment

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

  $ kubectl get deployments

Deberías ver una salida similar a la siguiente:

  NAME                 READY   UP-TO-DATE   AVAILABLE   AGE
  vuejs-sample         1/1     1            1           1m14s

Esto confirma que tu pod está activo y ejecutándose con una réplica disponible.

Paso 3. Verificar la exposición del Servicio

Comprueba si el servicio NodePort está exponiendo tu aplicación a tu máquina local:

$ kubectl get services

Deberías ver algo como:

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

Esta salida confirma que tu aplicación está disponible a través de NodePort en el puerto 30001.

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

Abre tu navegador y navega a http://localhost:30001.

Deberías ver tu aplicación de muestra de Vue.js lista para producción ejecutándose, servida por tu clúster de Kubernetes local.

Paso 5. Limpiar los recursos de Kubernetes

Una vez que hayas terminado las pruebas, puedes eliminar el despliegue y el servicio usando:

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

Salida esperada:

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

Esto garantiza que tu clúster se mantenga limpio y listo para el próximo despliegue.

Resumen

En esta sección, aprendiste cómo desplegar tu aplicación Vue.js en un clúster local de Kubernetes usando Docker Desktop. Esta configuración te permite probar y depurar tu aplicación contenedorizada en un entorno similar al de producción antes de desplegarla en la nube.

Lo que has logrado:

  • Crear un Deployment y un Service NodePort de Kubernetes para tu aplicación Vue.js
  • Usar kubectl apply para desplegar la aplicación localmente
  • Verificar que la aplicación esté ejecutándose y accesible en http://localhost:30001
  • Limpiar tus recursos de Kubernetes después de las pruebas

Recursos relacionados

Explora las referencias oficiales y las mejores prácticas para perfeccionar tu flujo de trabajo de despliegue en Kubernetes: