Configurar despliegue con EAS Submit y monitoreo

Concepto clave

El despliegue y monitoreo de aplicaciones con EAS Submit es el proceso de automatizar la construcción y distribución de tu app Expo hacia las tiendas de aplicaciones, mientras implementas herramientas para rastrear su rendimiento y estabilidad en producción. Imagina que eres un arquitecto que no solo diseña un edificio, sino que también supervisa su construcción y luego instala sensores para monitorear su integridad estructural. EAS Submit actúa como tu equipo de construcción automatizado, transformando tu código en paquetes listos para Apple App Store y Google Play Store, mientras que el monitoreo te da visibilidad sobre cómo se comporta tu app en dispositivos reales.

En el mundo real, sin esta automatización, tendrías que configurar manualmente entornos de construcción, gestionar certificados de firma, y lidiar con las complejidades específicas de cada plataforma. EAS Submit abstrae esta complejidad, permitiéndote enfocarte en el desarrollo. El monitoreo, por otro lado, es como tener un panel de control en tiempo real que te alerta sobre caídas, lentitud o errores críticos, similar a cómo un sistema de seguridad monitorea una casa. Juntos, forman un ciclo continuo: despliegas, monitoreas, ajustas y vuelves a desplegar, asegurando que tu app de productividad mantenga un alto estándar de calidad.

Cómo funciona en la práctica

Para configurar EAS Submit y monitoreo en tu proyecto Expo, sigue estos pasos. Primero, asegúrate de tener una cuenta en expo.dev y el CLI de EAS instalado globalmente. Luego, en la raíz de tu proyecto, ejecuta eas init para crear un archivo eas.json que define tus configuraciones de construcción. Este archivo te permite especificar diferentes perfiles, como desarrollo, preview y producción, cada uno con sus propios ajustes.

Por ejemplo, para una app de productividad, podrías configurar un perfil de producción que optimice el tamaño del bundle y habilite actualizaciones over-the-air (OTA). Después, ejecuta eas build --platform all --profile production para iniciar la construcción. EAS manejará la compilación en la nube y te proporcionará enlaces para descargar los binarios o subirlos directamente a las tiendas. Para el monitoreo, integra Expo Application Services (EAS) con herramientas como Sentry o Firebase Crashlytics. Esto implica agregar SDKs a tu proyecto y configurar credenciales para enviar reportes de errores y métricas de rendimiento.

Codigo en accion

Aquí tienes un ejemplo funcional de configuración de eas.json para una app de productividad, mostrando el antes y después de optimizar para producción.

Antes: Configuración básica sin optimizaciones.

{
  "cli": {
    "version": ">= 3.0.0"
  },
  "build": {
    "production": {
      "android": {
        "buildType": "apk"
      },
      "ios": {
        "enterpriseProvisioning": "universal"
      }
    }
  },
  "submit": {
    "production": {}
  }
}

Después: Configuración avanzada con optimizaciones y monitoreo integrado.

{
  "cli": {
    "version": ">= 3.0.0"
  },
  "build": {
    "production": {
      "env": {
        "EXPO_PUBLIC_SENTRY_DSN": "https://clave@sentry.io/proyecto"
      },
      "android": {
        "buildType": "app-bundle",
        "gradleCommand": ":app:bundleRelease"
      },
      "ios": {
        "enterpriseProvisioning": "universal",
        "simulator": false
      },
      "cache": {
        "key": "v1-production",
        "paths": ["node_modules/**"]
      }
    },
    "preview": {
      "distribution": "internal",
      "android": {
        "buildType": "apk"
      }
    }
  },
  "submit": {
    "production": {
      "android": {
        "serviceAccountKeyPath": "./google-key.json",
        "track": "production"
      },
      "ios": {
        "appleId": "tu-email@dominio.com",
        "ascAppId": "1234567890"
      }
    }
  }
}

Para monitoreo, aquí hay un snippet de código en App.js que integra Sentry.

import * as Sentry from '@sentry/react-native';
import { useEffect } from 'react';

export default function App() {
  useEffect(() => {
    Sentry.init({
      dsn: process.env.EXPO_PUBLIC_SENTRY_DSN,
      enableNative: true,
      tracesSampleRate: 0.5,
    });
  }, []);

  // Resto de tu componente App
  return (
    // Tu UI aquí
  );
}

Errores comunes

• Olvidar configurar variables de entorno en eas.json: Si usas claves como EXPO_PUBLIC_SENTRY_DSN, debes definirlas en la sección env del perfil de construcción. Sin esto, el monitoreo fallará silenciosamente. Solución: Verifica que todas las variables estén listadas y accesibles.
• No validar certificados antes de construir: EAS requiere certificados válidos para iOS y claves para Android. Si están expirados o mal configurados, la construcción fallará. Solución: Usa eas credentials para gestionarlos y renovarlos periódicamente.
• Ignorar el tamaño del bundle: En producción, un bundle grande puede afectar la descarga y el rendimiento. Solución: Usa herramientas como expo-optimize o configura divisiones de código en eas.json.
• Desplegar sin pruebas en preview: Saltar directamente a producción puede introducir errores críticos. Solución: Siempre usa el perfil preview para distribuir internamente y realizar pruebas en dispositivos reales.
• No monitorear después del despliegue: Sin herramientas de monitoreo, los errores en producción pasan desapercibidos. Solución: Integra al menos una herramienta como Sentry o Firebase Crashlytics y revisa los reportes regularmente.

Checklist de dominio

1. Configurar y validar eas.json con perfiles para desarrollo, preview y producción.
2. Ejecutar construcciones exitosas para Android e iOS usando EAS Submit.
3. Integrar una herramienta de monitoreo como Sentry y verificar que los errores se reporten correctamente.
4. Gestionar certificados y claves para despliegue en tiendas de aplicaciones.
5. Optimizar el tamaño del bundle y habilitar actualizaciones OTA para correcciones rápidas.
6. Realizar pruebas de despliegue en entornos de preview antes de producción.
7. Configurar alertas o dashboards para monitorear métricas clave como tasa de caídas y rendimiento.

Configura despliegue y monitoreo para tu app de productividad con Expo

Sigue estos pasos para implementar EAS Submit y monitoreo en un proyecto Expo existente. Asegúrate de tener una cuenta en expo.dev y el proyecto inicializado.

1. Instala el CLI de EAS globalmente ejecutando npm install -g eas-cli o yarn global add eas-cli.
2. En la raíz de tu proyecto, ejecuta eas init y sigue las instrucciones para crear o actualizar eas.json.
3. Configura el archivo eas.json con al menos dos perfiles: preview para pruebas internas y production para despliegue final. Incluye optimizaciones como uso de app-bundle para Android y configuración de variables de entorno para monitoreo.
4. Integra una herramienta de monitoreo. Por ejemplo, para Sentry, instala @sentry/react-native y configura la inicialización en tu archivo principal (e.g., App.js). Asegúrate de agregar la DSN como variable de entorno en eas.json.
5. Ejecuta una construcción de preview con eas build --platform android --profile preview y distribúyela internamente a tu equipo usando el enlace generado.
6. Monitorea los resultados: después de la construcción, verifica en expo.dev que el build fue exitoso y en Sentry que los errores se reportan correctamente al simular un fallo en la app.
7. Documenta el proceso en un README.md, incluyendo cómo repetir los pasos para futuros despliegues.

Pistas

• Usa el comando 'eas credentials' para gestionar certificados si encuentras errores de firma.
• Para variables de entorno sensibles, considera usar secretos de EAS en lugar de hardcodearlas en eas.json.
• Prueba el monitoreo forzando un error en tu app (e.g., llamar a una función no definida) y verifica que aparezca en tu dashboard de Sentry.

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.