# Prueba tu despliegue de React.js ## Prerrequisitos Antes de comenzar, asegúrate de haber completado lo siguiente: - Completar todas las secciones anteriores de esta guía, comenzando con [Contenerizar una aplicación de React.js](/guides/reactjs/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. --- ## Resumen Esta sección te guía a través del despliegue de tu aplicación de React.js contenerizada de forma local utilizando el [Kubernetes integrado en Docker Desktop](/desktop/kubernetes/). Ejecutar tu aplicación en un clúster local de Kubernetes te permite simular de cerca un entorno de producción real, lo que te habilita a probar, validar y depurar tus cargas de trabajo con confianza antes de promoverlas a entornos de pruebas (staging) o producción. --- ## Crea 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: `reactjs-sample-kubernetes.yaml` 2. Abre el archivo en tu IDE o editor de texto preferido. 3. Agrega la siguiente configuración y asegúrate de reemplazar `{DOCKER_USERNAME}` y `{DOCKERHUB_PROJECT_NAME}` con tu nombre de usuario de Docker Hub y el nombre del repositorio reales de la sección anterior, [Automatiza tus compilaciones con GitHub Actions](/guides/reactjs/deploy/configure-github-actions/). ```yaml apiVersion: apps/v1 kind: Deployment metadata: name: reactjs-sample namespace: default spec: replicas: 1 selector: matchLabels: app: reactjs-sample template: metadata: labels: app: reactjs-sample spec: containers: - name: reactjs-container image: {DOCKER_USERNAME}/{DOCKERHUB_PROJECT_NAME}:latest imagePullPolicy: Always ports: - containerPort: 8080 --- apiVersion: v1 kind: Service metadata: name: reactjs-sample-service namespace: default spec: type: NodePort selector: app: reactjs-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 de React.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 [Automatiza tus compilaciones con GitHub Actions](/guides/reactjs/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 React en producción. - Service (Servicio tipo NodePort) Expone el pod desplegado a tu máquina local. Reenvía el tráfico desde el puerto `30001` de 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/). --- ## Despliega y comprueba tu aplicación Sigue estos pasos para desplegar tu aplicación de React.js contenerizada en un clúster de Kubernetes local y verificar que se esté ejecutando correctamente. ### Paso 1. Aplica la configuración de Kubernetes En tu terminal, navega al directorio donde se encuentra tu archivo `reactjs-sample-kubernetes.yaml`, luego despliega los recursos utilizando: ```console $ kubectl apply -f reactjs-sample-kubernetes.yaml ``` Si todo está configurado correctamente, verás una confirmación de que tanto el Deployment como el Service fueron creados: ```shell deployment.apps/reactjs-sample created service/reactjs-sample-service created ``` Esta salida significa que tanto el Deployment como el Service se crearon con éxito y ahora se están ejecutando dentro de tu clúster local. ### Paso 2. Comprueba el estado del Deployment Ejecuta el siguiente comando para verificar el estado de tu despliegue: ```console $ kubectl get deployments ``` Deberías ver una salida similar a: ```shell NAME READY UP-TO-DATE AVAILABLE AGE reactjs-sample 1/1 1 1 14s ``` Esto confirma que tu pod está activo y ejecutándose con una réplica disponible. ### Paso 3. Verifica la exposición del Service 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 reactjs-sample-service NodePort 10.100.244.65 8080:30001/TCP 1m ``` Esta salida confirma que tu aplicación está disponible a través de NodePort en el puerto 30001. ### Paso 4. Accede 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 ejemplo de React.js lista para producción en funcionamiento, servida por tu clúster local de Kubernetes. ### Paso 5. Limpia los recursos de Kubernetes Una vez que hayas terminado las pruebas, puedes eliminar el despliegue y el servicio usando: ```console $ kubectl delete -f reactjs-sample-kubernetes.yaml ``` Salida esperada: ```shell deployment.apps "reactjs-sample" deleted service "reactjs-sample-service" deleted ``` Esto garantiza que tu clúster se mantenga limpio y listo para el siguiente despliegue. --- ## Resumen En esta sección, aprendiste cómo desplegar tu aplicación de React.js en un clúster local de Kubernetes utilizando Docker Desktop. Esta configuración te permite probar y depurar tu aplicación contenerizada en un entorno similar al de producción antes de desplegarla en la nube. Lo que lograste: - Creaste un Deployment y un Service NodePort de Kubernetes para tu aplicación de React.js - Usaste `kubectl apply` para desplegar la aplicación localmente - Verificaste que la aplicación estuviera en ejecución y fuera accesible en `http://localhost:30001` - Limpiaste tus recursos de Kubernetes después de realizar 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](/desktop/use-desktop/kubernetes/) – Utiliza el soporte integrado de Kubernetes de Docker Desktop para pruebas y desarrollo locales. - [Referencia de la CLI de `kubectl`](https://kubernetes.io/docs/reference/kubectl/) – Administra clústeres de Kubernetes desde la línea de comandos. - [Recurso Deployment de Kubernetes](https://kubernetes.io/docs/concepts/workloads/controllers/deployment/) – Entiende cómo administrar 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.