# Probar tu despliegue de Vue.js ## Prerrequisitos Antes de comenzar, asegúrate de haber completado lo siguiente: - Completar todas las secciones anteriores de esta guía, comenzando con [Contenedorizar la aplicación Vue.js](/guides/vuejs/deploy/containerize/). - [Habilitar Kubernetes](/desktop/use-desktop/kubernetes/#enable-kubernetes) en Docker Desktop. > **¿Eres nuevo en Kubernetes?** > Visita el [tutorial de conceptos básicos de Kubernetes](https://kubernetes.io/docs/tutorials/kubernetes-basics/) 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](/desktop/kubernetes/). 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](/guides/vuejs/deploy/configure-github-actions/). ```yaml 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](/guides/vuejs/deploy/configure-github-actions/)). El contenedor escucha en el puerto `8080`, que normalmente utiliza [Nginx](https://nginx.org/en/docs/) 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](http://localhost:30001). > [!NOTE] > Para obtener más información sobre los objetos de Kubernetes, consulta la [documentación de Kubernetes](https://kubernetes.io/docs/home/). --- ## 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: ```console $ 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: ```shell 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: ```console $ kubectl get deployments ``` Deberías ver una salida similar a la siguiente: ```shell 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: ```console $ kubectl get services ``` Deberías ver algo como: ```shell NAME TYPE CLUSTER-IP EXTERNAL-IP PORT(S) AGE vuejs-sample-service NodePort 10.98.233.59 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](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: ```console $ kubectl delete -f vuejs-sample-kubernetes.yaml ``` Salida esperada: ```shell 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: - [Documentación de Kubernetes](https://kubernetes.io/docs/home/) – Aprende sobre conceptos básicos, cargas de trabajo, servicios y más. - [Desplegar en Kubernetes con Docker Desktop](/manuals) – Usa el soporte integrado de Kubernetes en Docker Desktop para pruebas locales y desarrollo. - [Referencia de la CLI de `kubectl`](https://kubernetes.io/docs/reference/kubectl/) – Gestiona clústeres de Kubernetes desde la línea de comandos. - [Recurso Deployment de Kubernetes](https://kubernetes.io/docs/concepts/workloads/controllers/deployment/) – Comprende cómo gestionar y escalar aplicaciones utilizando Deployments. - [Recurso Service de Kubernetes](https://kubernetes.io/docs/concepts/services-networking/service/) – Aprende cómo exponer tu aplicación al tráfico interno y externo.