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

Prueba tu despliegue de React.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.

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. 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.

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). El contenedor escucha en el puerto 8080, que normalmente utiliza Nginx 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.

Note

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

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:

  $ 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:

  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:

  $ kubectl get deployments

Deberías ver una salida similar a:

  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:

$ kubectl get services

Deberías ver algo como:

NAME                     TYPE        CLUSTER-IP       EXTERNAL-IP   PORT(S)          AGE
reactjs-sample-service   NodePort    10.100.244.65    <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. Accede a tu aplicación en el navegador

Abre tu navegador y navega a 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:

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

Salida esperada:

  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: