Forem: Isaac Zepeda

El Curioso Caso del Dashboard Desaparecido en CapRover

Isaac Zepeda — Sun, 27 Oct 2024 23:15:57 +0000

Hay algo emocionante en resolver misterios técnicos; para muchos de nosotros, resolver estos enigmas digitales es igual de frustrante que gratificante. Recientemente, me encontré con uno de estos desafíos: un servidor de CapRover que dejó de mostrar su dashboard, lanzando un misterioso error ERR_HTTP2_PROTOCOL_ERROR. Lo que siguió fue una inmersión profunda en los servicios de Docker, registros de logs, y una eventual confrontación con un culpable que suele pasarse por alto: el espacio en disco.

Aquí te comparto la historia de cómo diagnosticamos, probamos y finalmente solucionamos el problema. Si eres usuario de CapRover o simplemente te gustan las buenas historias de solución de problemas, sigue leyendo para conocer toda la historia.

Los Primeros Síntomas

Nuestra historia comienza cuando el dashboard de CapRover dejó de responder repentinamente. En lugar de la interfaz familiar, solo se mostraba una pantalla en blanco. En los registros de la consola aparecía el mensaje ERR_HTTP2_PROTOCOL_ERROR, lo cual parecía inusual. En los registros de Docker de CapRover, el servicio captain-certbot parecía tener problemas, atrapado en un bucle de intentos para obtener el ID del contenedor.

Certbot, la parte de CapRover encargada de los certificados SSL, no podía ejecutarse correctamente. Aunque los problemas de Certbot no son desconocidos, este caso era extraño porque el problema no solo era de SSL; el dashboard entero se negaba a cargar. Este indicio nos llevó a pensar que podría haber un problema subyacente más amplio.

Los Primeros Pasos: Una Serie de Experimentos

Cuando se trata de solucionar problemas en CapRover, reiniciar los servicios suele ser un buen primer paso. Reiniciar los servicios captain-captain y captain-certbot podría ayudar a eliminar errores temporales. Esto es lo que probamos primero:

Reinicio de Servicios: Utilizamos comandos para actualizar y reiniciar los contenedores captain-captain y captain-certbot, con la esperanza de que regresaran a su funcionamiento normal.
Intentos Directos de Renovación de SSL: Cuando los servicios de CapRover no respondieron, intentamos acceder a captain-certbot directamente para renovar el certificado SSL con certbot renew --force-renewal. Desafortunadamente, este comando devolvió un error inesperado, lo que indicaba problemas con el propio Certbot.
Eliminar y Recrear Contenedores: Incluso eliminamos instancias adicionales del contenedor captain-certbot, sospechando que los contenedores redundantes podrían estar generando conflictos.

Pero cada intento nos llevaba de nuevo al punto de partida y nada parecía restaurar el dashboard de CapRover. En este punto, recurrimos a un último posible problema: el espacio en disco.

El Momento Eureka: Problemas de Espacio en Disco

Finalmente, decidimos verificar el uso del disco del servidor utilizando df -h. La salida reveló el verdadero problema en números alarmantes:

Filesystem      Size  Used Avail Use% Mounted on
/dev/vda2        23G   23G     0 100% /

¡El sistema de archivos raíz de nuestro servidor estaba completamente lleno! Esto explicaba por qué Certbot y NGINX fallaban: simplemente no había espacio disponible para que operaran.

La Solución: Liberando Espacio en Disco

Con la causa raíz identificada, ahora nos enfocamos en liberar suficiente espacio para que CapRover volviera a funcionar. Esto fue lo que hicimos:

Limpiar el Sistema de Docker: Primero, eliminamos los recursos no utilizados de Docker:

   docker system prune -a --volumes

Esto eliminó imágenes, contenedores, redes y volúmenes no utilizados, lo que liberó espacio, pero no lo suficiente como para resolver el problema completamente.

Limpieza de Logs: Los logs pueden consumir mucho espacio, así que recurrimos a los logs del sistema:

   sudo journalctl --vacuum-size=100M
   sudo find /var/log -type f -name "*.log" -exec truncate -s 0 {} \;

También truncamos los registros de contenedores de Docker, estableciéndolos en 0 bytes sin eliminarlos, liberando valiosos megabytes.

Limpieza de Caché de Paquetes: Luego, limpiamos las cachés de paquetes del sistema, que pueden crecer mucho con el tiempo:

   sudo apt-get clean

Eliminación de Archivos Temporales Antiguos: Finalmente, eliminamos archivos temporales y paquetes no utilizados:

   sudo rm -rf /tmp/*
   sudo rm -rf /var/tmp/*
   sudo apt-get autoremove -y

Después de esta meticulosa limpieza, liberamos más de 14 GB en el servidor, reduciendo el uso al 39%.

El Resultado: Un Servidor CapRover Saludable

Con el problema de espacio en disco resuelto, reiniciamos el servicio captain-captain para asegurar que CapRover pudiera utilizar el espacio recién liberado. Esta vez, el dashboard cargó sin problemas. Certbot renovó los certificados SSL sin inconvenientes, y NGINX manejó las solicitudes como se esperaba.

Al final, el misterio estaba resuelto: el disco lleno había causado toda la serie de errores, desde los fallos en la renovación de SSL hasta los errores de protocolo HTTP. Al investigar cada posible causa y no pasar por alto el factor de espacio en disco, logramos restaurar el servidor por completo.

Lecciones de la Experiencia

El Espacio en Disco es Importante: El espacio en disco es una causa de problemas que suele pasarse por alto, especialmente en servidores que ejecutan aplicaciones en contenedores. Un monitoreo regular puede evitar estos problemas antes de que comiencen.
Solución de Problemas Paso a Paso: En lugar de hacer suposiciones, un enfoque sistemático ayuda a reducir rápidamente el problema.
Los Logs son tus Aliados: Aunque los logs pueden parecer poco útiles a veces, pueden llevarte a la causa raíz mostrando lo que no está sucediendo (como la imposibilidad de Certbot de avanzar).
Limpieza Regular de Docker: Los entornos de Docker se benefician de limpiezas periódicas, ya que los recursos no utilizados pueden acumularse con el tiempo.

Al final, lo que comenzó como un error misterioso se convirtió en una solución sencilla, aunque algo tediosa. Y aunque tomó tiempo llegar a la raíz del problema, la experiencia reforzó una de las lecciones más valiosas de la solución de problemas: nunca pases por alto lo básico.

Cómo solucionar el error de CORS orign en Django

Isaac Zepeda — Tue, 01 Oct 2024 14:18:29 +0000

El error CORS (Cross-Origin Resource Sharing) o Intercambio de Recursos de Origen Cruzado ocurre cuando tu frontend (o cualquier otra aplicación) intenta acceder a tu API de Django desde un dominio o puerto diferente, y el servidor de la API no está configurado para permitir estas solicitudes.

Para resolver el error CORS en tu proyecto de Django, necesitas instalar el paquete django-cors-headers y configurarlo en tu archivo settings.py para permitir solicitudes desde orígenes específicos o desde todos los orígenes.

¿Qué es CORS y por qué es importante?

CORS es un mecanismo de seguridad implementado por los navegadores web para proteger a los usuarios de posibles ataques maliciosos. Sin embargo, este mecanismo también puede impedir que aplicaciones legítimas se comuniquen entre sí si no están correctamente configuradas.

En la ingeniería de software moderna, es común tener el frontend y el backend en servidores diferentes. Por ejemplo, podrías tener tu aplicación React ejecutándose en http://localhost:3000 y tu API de Django en http://localhost:8000. Sin la configuración adecuada de CORS, el navegador bloqueará las solicitudes entre estos dos orígenes por razones de seguridad.

Pasos para resolver el problema de CORS

1. Instalar `django-cors-headers`

Primero, necesitas instalar el paquete django-cors-headers para manejar CORS en Django. Ejecuta el siguiente comando:

pip install django-cors-headers

También puedes agregar esta dependencia a tu archivo requirements.txt:

django-cors-headers==4.4.0

2. Agregar `django-cors-headers` a las aplicaciones instaladas

Una vez instalado, agrega corsheaders a tu lista de INSTALLED_APPS en el archivo settings.py:

INSTALLED_APPS = [
    # Otras aplicaciones instaladas...
    'corsheaders',
]

3. Agregar `CorsMiddleware` a Middleware

El siguiente paso es agregar CorsMiddleware a tu middleware en settings.py. Este middleware debe agregarse antes de CommonMiddleware:

MIDDLEWARE = [
    # Otros middleware...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    # Otros middleware...
]

4. Configurar CORS en `settings.py`

Ahora necesitas configurar CORS para permitir solicitudes desde ciertos dominios o desde todos los dominios.

Para permitir todos los orígenes (no recomendado para producción):

  CORS_ALLOW_ALL_ORIGINS = True

Para permitir orígenes específicos: Puedes especificar una lista de orígenes permitidos configurando la opción CORS_ALLOWED_ORIGINS. Por ejemplo, si tu frontend se ejecuta en http://localhost:3000, puedes permitir ese origen así:

  CORS_ALLOWED_ORIGINS = [
      "http://localhost:3000",
      "https://tu-dominio-de-produccion.com",
  ]

5. Permitir encabezados CORS para cookies (opcional)

Si estás trabajando con cookies para autenticación (por ejemplo, con autenticación de sesión), también necesitas configurar lo siguiente:

CORS_ALLOW_CREDENTIALS = True

Esto permitirá que las credenciales (como cookies, encabezados de autorización o certificados de cliente TLS) se envíen en solicitudes de origen cruzado.

6. Permitir métodos HTTP (opcional)

Por defecto, se permiten los métodos HTTP más comunes (GET, POST, PUT, PATCH, DELETE, OPTIONS). Sin embargo, si necesitas restringir o permitir otros métodos, puedes especificarlos:

CORS_ALLOW_METHODS = [
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
]

7. Permitir encabezados HTTP (opcional)

Si quieres permitir encabezados específicos en las solicitudes, puedes configurarlo así:

CORS_ALLOW_HEADERS = [
    'authorization',
    'content-type',
    'x-csrftoken',
    'accept',
    'origin',
    'user-agent',
]

Ejemplo de configuración completa de CORS en `settings.py`

Aquí tienes un ejemplo de configuración con django-cors-headers agregado a la configuración:

INSTALLED_APPS = [
    # Otras aplicaciones...,
    'corsheaders',
    # Otras aplicaciones...
]

MIDDLEWARE = [
    # Otros middleware...,
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    # Otros middleware...
]

# Permitir todos los orígenes (para desarrollo)
# CORS_ALLOW_ALL_ORIGINS = True

# O, si quieres permitir orígenes específicos:
CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",  # Frontend en localhost (React/Vue/Angular)
    "https://tu-dominio-de-produccion.com",
]

# Opcional: Para permitir credenciales como cookies, encabezados de sesión
CORS_ALLOW_CREDENTIALS = True

Reiniciar tu servidor

Después de actualizar tu settings.py, asegúrate de reiniciar tu servidor Django para que se apliquen las nuevas configuraciones de CORS.

Consideraciones de seguridad

Es importante tener en cuenta que permitir CORS desde cualquier origen (CORS_ALLOW_ALL_ORIGINS = True) puede representar un riesgo de seguridad en un entorno de producción. Siempre es mejor especificar explícitamente los orígenes permitidos utilizando CORS_ALLOWED_ORIGINS en producción.

Además, si estás utilizando CORS_ALLOW_CREDENTIALS = True, es crucial que configures cuidadosamente CORS_ALLOWED_ORIGINS y no uses CORS_ALLOW_ALL_ORIGINS = True, ya que esto podría permitir ataques de tipo CSRF (Cross-Site Request Forgery).

Conclusión

Al instalar django-cors-headers y configurar los orígenes permitidos en tu settings.py, puedes resolver el error CORS y permitir solicitudes de origen cruzado desde tu frontend a tu API de Django. Asegúrate de restringir los orígenes permitidos en producción para mejorar la seguridad.

La configuración adecuada de CORS es esencial para el desarrollo de aplicaciones web modernas, especialmente cuando se trabaja con arquitecturas de frontend y backend separados. Con estos pasos, deberías poder resolver los problemas de CORS en tu aplicación Django y permitir una comunicación fluida entre tu frontend y tu API.

Recursos adicionales

Para obtener más información sobre CORS y su implementación en Django, puedes consultar los siguientes recursos:

Documentación oficial de django-cors-headers: https://github.com/adamchainz/django-cors-headers
MDN Web Docs sobre CORS: https://developer.mozilla.org/es/docs/Web/HTTP/CORS
Django REST framework documentation on CORS: https://www.django-rest-framework.org/topics/ajax-csrf-cors/

Deconstrución de Objectos en JavaScript

Isaac Zepeda — Sat, 03 Aug 2024 16:06:33 +0000

Introducción

JavaScript, como lenguaje de programación, ha evolucionado significativamente desde su creación. Con la introducción de ECMAScript 6 (ES6) en 2015, llegaron varias características que mejoraron la legibilidad y eficiencia del código. Una de estas características es la deconstrucción (o destructuring) de objetos. La deconstrucción permite extraer propiedades de objetos y arreglos de manera más concisa y legible. En este artículo, exploraremos en detalle qué es la deconstrucción de objetos, cómo se usa y algunos casos prácticos.

¿Qué es la deconstrucción de objetos?

La deconstrucción de objetos es una sintaxis que permite desempacar valores de arreglos o propiedades de objetos en variables distintas. Esto se hace utilizando una sintaxis similar a la de creación de objetos y arreglos. Veamos un ejemplo básico:

const persona = {
  nombre: 'Juan',
  edad: 30,
  ciudad: 'Mazatlán'
};

const { nombre, edad, ciudad } = persona;

console.log(nombre); // Juan
console.log(edad);   // 30
console.log(ciudad); // Mazatlán

En este ejemplo, el objeto persona tiene tres propiedades: nombre, edad y ciudad. Utilizando la sintaxis de deconstrucción, creamos tres variables (nombre, edad y ciudad) y les asignamos los valores correspondientes del objeto persona.

Beneficios de la deconstrucción de objetos

Código más limpio y legible: La deconstrucción reduce la cantidad de líneas de código necesarias para extraer propiedades de un objeto.
Asignación simultánea: Permite asignar múltiples variables en una sola línea, haciendo el código más compacto.
Valores por defecto: La deconstrucción permite asignar valores por defecto a variables si la propiedad no existe en el objeto.
Renombrado de variables: Se pueden renombrar las variables al deconstruir, lo que es útil para evitar conflictos de nombres.

Características

Asignación de valores por defecto

Es posible asignar valores por defecto a las variables si la propiedad que se intenta deconstruir no existe en el objeto. Esto se hace utilizando el operador =.

const persona = {
  nombre: 'Juan',
  edad: 30
};

const { nombre, edad, ciudad = 'Desconocida' } = persona;

console.log(ciudad); // Desconocida

En este ejemplo, la propiedad ciudad no existe en el objeto persona, por lo que la variable ciudad toma el valor por defecto 'Desconocida'.

Renombrado de variables

Es posible renombrar las variables mientras se deconstruye un objeto utilizando la sintaxis propiedad: nuevoNombre.

const persona = {
  nombre: 'Juan',
  edad: 30
};

const { nombre: nombreCompleto, edad: años } = persona;

console.log(nombreCompleto); // Juan
console.log(años);           // 30

En este ejemplo, la propiedad nombre se deconstruye en la variable nombreCompleto y edad en años.

Deconstrucción anidada

La deconstrucción también puede ser utilizada en objetos anidados, permitiendo extraer propiedades de objetos dentro de otros objetos.

const persona = {
  nombre: 'Juan',
  direccion: {
    ciudad: 'Mazatlán',
    pais: 'México'
  }
};

const { nombre, direccion: { ciudad, pais } } = persona;

console.log(ciudad); // Mazatlán
console.log(pais);   // México

En este ejemplo, extraemos ciudad y pais del objeto direccion que está anidado dentro del objeto persona.

Deconstrucción con parámetros de función

La deconstrucción de objetos es especialmente útil cuando se trabaja con parámetros de funciones, permitiendo pasar objetos completos y deconstruir sus propiedades directamente en la firma de la función.

function mostrarInformacion({ nombre, edad, ciudad }) {
  console.log(`Nombre: ${nombre}`);
  console.log(`Edad: ${edad}`);
  console.log(`Ciudad: ${ciudad}`);
}

const persona = {
  nombre: 'Juan',
  edad: 30,
  ciudad: 'Mazatlán'
};

mostrarInformacion(persona);

En este ejemplo, la función mostrarInformacion recibe un objeto y deconstruye sus propiedades directamente en los parámetros.

Intercambio de Variables

let a = 1, b = 2;
[a, b] = [b, a];

console.log(a); // 2
console.log(b); // 1

Deconstrucción en la Importación de Módulos

Otro uso práctico de la deconstrucción es en la importación de módulos. Cuando importamos varios elementos de un módulo, podemos deconstruirlos directamente en la declaración de importación.

import { useState, useEffect } from 'react';

// Uso de useState y useEffect

En este ejemplo, deconstruimos useState y useEffect directamente desde el módulo 'react'.

Deconstrucción en Ciclos

La deconstrucción puede ser utilizada en ciclos para iterar sobre arreglos de objetos y extraer sus propiedades de manera concisa.

const personas = [
  { nombre: 'Juan', edad: 30 },
  { nombre: 'Ana', edad: 25 },
  { nombre: 'Luis', edad: 28 }
];

for (const { nombre, edad } of personas) {
  console.log(`Nombre: ${nombre}, Edad: ${edad}`);
}

En este ejemplo, iteramos sobre un arreglo de objetos personas y deconstruimos nombre y edad directamente en el ciclo for...of.

Deconstrucción y Rest Operator

La deconstrucción se puede combinar con el operador rest (...) para capturar el resto de las propiedades de un objeto en una nueva variable.

const persona = {
  nombre: 'Juan',
  edad: 30,
  ciudad: 'Mazatlán',
  profesion: 'Ingeniero'
};

const { nombre, edad, ...resto } = persona;

console.log(nombre); // Juan
console.log(edad);   // 30
console.log(resto);  // { ciudad: 'Mazatlán', profesion: 'Ingeniero' }

En este ejemplo, nombre y edad se extraen del objeto persona, y el resto de las propiedades (ciudad y profesion) se agrupan en el objeto resto.

Deconstrucción de Arrays

Aunque este artículo se centra en objetos, es importante mencionar que la deconstrucción también funciona con arrays:

const [primero, segundo, ...resto] = [1, 2, 3, 4, 5];
console.log(primero); // 1
console.log(segundo); // 2 console.log(resto);   // [3, 4, 5]

Casos prácticos

Manipulación de objetos en APIs

Cuando se trabaja con datos provenientes de APIs, la deconstrucción puede simplificar la manipulación de los datos. Por ejemplo:

fetch('https://api.example.com/persona/1')
  .then(response => response.json())
  .then(({ nombre, edad, ciudad }) => {
    console.log(`Nombre: ${nombre}`);
    console.log(`Edad: ${edad}`);
    console.log(`Ciudad: ${ciudad}`);
  });

Estado en React

En React, la deconstrucción se usa frecuentemente al trabajar con el estado y las propiedades de los componentes.

function Componente({ nombre, edad, ciudad }) {
  return (
    <div>
      <h1>{nombre}</h1>
      <p>Edad: {edad}</p>
      <p>Ciudad: {ciudad}</p>
    </div>
  );
}

const persona = {
  nombre: 'Juan',
  edad: 30,
  ciudad: 'Mazatlán'
};

<Componente {...persona} />;

En este ejemplo, se pasa un objeto persona al componente Componente y se deconstruyen las propiedades directamente en los parámetros de la función.

Validación y Limpieza de Datos

La deconstrucción también es útil para la validación y limpieza de datos al recibir objetos con múltiples propiedades.

function procesarUsuario({ nombre, edad, email }) {
  if (!nombre) {
    throw new Error('El nombre es requerido');
  }
  if (!email.includes('@')) {
    throw new Error('Email no válido');
  }
  // Procesar usuario
}

const usuario = {
  nombre: 'Juan',
  edad: 30,
  email: 'juan@example.com'
};

procesarUsuario(usuario);

En este ejemplo, se deconstruyen las propiedades nombre, edad y email del objeto usuario para realizar validaciones antes de procesar los datos.

Conclusión

La deconstrucción de objetos en JavaScript es una característica poderosa que mejora la legibilidad y eficiencia del código. Permite extraer propiedades de objetos de manera concisa, asignar valores por defecto, renombrar variables y trabajar con objetos anidados y parámetros de funciones. Su uso adecuado puede simplificar considerablemente la manipulación de datos, especialmente en aplicaciones complejas y al trabajar con APIs.

En resumen, la deconstrucción es una herramienta esencial en el arsenal de cualquier desarrollador de JavaScript moderno, facilitando un código más claro, conciso y mantenible. Si aún no la has incorporado en tus proyectos, es un buen momento para empezar a hacerlo y aprovechar sus beneficios.

Recursos adicionales

Para más información, puedes consultar los siguientes recursos:

Forem: Isaac Zepeda

El Curioso Caso del Dashboard Desaparecido en CapRover

Los Primeros Síntomas

Los Primeros Pasos: Una Serie de Experimentos

El Momento Eureka: Problemas de Espacio en Disco

La Solución: Liberando Espacio en Disco

El Resultado: Un Servidor CapRover Saludable

Lecciones de la Experiencia

Cómo solucionar el error de CORS orign en Django

¿Qué es CORS y por qué es importante?

Pasos para resolver el problema de CORS

1. Instalar django-cors-headers

2. Agregar django-cors-headers a las aplicaciones instaladas

3. Agregar CorsMiddleware a Middleware

4. Configurar CORS en settings.py

5. Permitir encabezados CORS para cookies (opcional)

6. Permitir métodos HTTP (opcional)

7. Permitir encabezados HTTP (opcional)

Ejemplo de configuración completa de CORS en settings.py

Reiniciar tu servidor

Consideraciones de seguridad

Conclusión

Recursos adicionales

Deconstrución de Objectos en JavaScript

Introducción

¿Qué es la deconstrucción de objetos?

Beneficios de la deconstrucción de objetos

Características

Asignación de valores por defecto

Renombrado de variables

Deconstrucción anidada

Deconstrucción con parámetros de función

Intercambio de Variables

Deconstrucción en la Importación de Módulos

Deconstrucción en Ciclos

Deconstrucción y Rest Operator

Deconstrucción de Arrays

Casos prácticos

Manipulación de objetos en APIs

Estado en React

Validación y Limpieza de Datos

Conclusión

Recursos adicionales

1. Instalar `django-cors-headers`

2. Agregar `django-cors-headers` a las aplicaciones instaladas

3. Agregar `CorsMiddleware` a Middleware

4. Configurar CORS en `settings.py`

Ejemplo de configuración completa de CORS en `settings.py`