3. Desplegar React

Deployment y Service

Crear k8s/02-web.yaml:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: web
  namespace: mern
spec:
  replicas: 1
  selector:
    matchLabels:
      app: web
  template:
    metadata:
      labels:
        app: web
    spec:
      containers:
        - name: web
          image: mern-crud:study
          imagePullPolicy: IfNotPresent
          command:
            - sh
            - -c
            - |
              cd /usr/src/app/react-src
              exec ./node_modules/.bin/react-scripts start
          ports:
            - containerPort: 4200
          env:
            - name: REACT_APP_API_URL
              value: "http://localhost:3001"
            - name: PORT
              value: "4200"
---
apiVersion: v1
kind: Service
metadata:
  name: web
  namespace: mern
spec:
  type: ClusterIP
  selector:
    app: web
  ports:
    - port: 4200
      targetPort: 4200

Aplicar:

kubectl apply -f k8s/02-web.yaml
kubectl get deployment,pods,services -n mern

Acceder usando port-forward

API:

kubectl port-forward -n mern service/api 3001:3000

Web:

kubectl port-forward -n mern service/web 4200:4200

Abrir:

http://localhost:4200

En esta etapa el navegador llama a la API mediante localhost:3001.

Detalle importante del script de React

El package.json de la aplicación tenía un script que fijaba:

REACT_APP_API_URL=http://localhost:3000

Por eso no se usó npm start --prefix react-src directamente. Se ejecutó react-scripts sin pasar por ese script, para que Kubernetes pudiera inyectar:

REACT_APP_API_URL=http://localhost:3001

Pruebas a realizar

Listar los recursos de la aplicación y comprobar que ahora existen los
Deployments y Services de db, api y web:
```
kubectl get all -n mern
```

Revisar el Pod de React y sus logs:

kubectl describe pod -n mern -l app=web
kubectl logs deployment/web -n mern

Comprobar que el Service web tiene como endpoint la dirección del Pod:

kubectl get endpointslice -n mern \
  -l kubernetes.io/service-name=web -o wide

Mantener los dos port-forward activos y verificar por separado la web y
la API:
```
curl -I http://localhost:4200
curl -i http://localhost:3001
```
Consultar la configuración efectiva del contenedor para observar las
variables de entorno inyectadas por el manifiesto:
```
kubectl exec -n mern deploy/web -- printenv | grep -E 'REACT_APP_API_URL|PORT'
```

Eliminar el Pod de web y observar su recreación:

kubectl get pods -n mern -l app=web -w
kubectl delete pod -n mern -l app=web

Aprendizajes del despliegue

Un segundo Deployment puede consumir el Service de la API sin conocer el nombre del Pod.
Cada componente puede tener su propio Service aunque todavía no esté expuesto fuera del clúster.
ClusterIP permite la comunicación interna, mientras que port-forward sirve para probar temporalmente desde el equipo local.
Las variables de entorno del manifiesto modifican el comportamiento del contenedor.
La configuración compilada o iniciada por el frontend debe apuntar a una dirección accesible desde el navegador.
El Service continúa siendo estable cuando se recrea el Pod seleccionado.
Los endpoints permiten verificar si el Service está encontrando correctamente los Pods mediante sus etiquetas.