Análisis web autohospedado gratuito con Umami, PlanetScale, Prisma y Vercel.

RESUMEN

Tener mi propio análisis web autohospedado con Umami, PlanetScale, Prisma y Vercel, me está ayudando a componer un panorama completo de las analíticas web de mi sitio, sin sesgo de plataforma, con una solución simple y enfocada en la privacidad, y gratuita.

Además, porque me interesa el lado técnico, ha sido una buena oportunidad para interactuar con alternativas de base de datos SQL como PlanetScale, ORM de Node.js como Prisma, y despliegues a Vercel.

Esta guía cubre cómo adapté el proceso de instalación de Umami para funcionar con PlanetScale.

Introducción

Tener al menos una visión general de cuántas vistas está recibiendo tu sitio web podría ser una buena práctica para informar tu estrategia de publicación de contenido o mejoras técnicas del sitio web.

Puedes tener problemas con análisis web gratuitos como Google Analytics por su enfoque a la privacidad, complejidad, curva de aprendizaje o simplemente por ser excesivo para el tamaño de tu proyecto. También podrías simplemente querer sumergirte en una solución de análisis web autohospedada para entender cómo funciona, antes de embarcarte en una solución de análisis web más compleja gratuita o de pago.

¿Sabías que los motores de búsqueda tienen criterios diferentes para indexar tus páginas? Me sucedió que algunos artículos fueron indexados en Bing pero no en Google. Solo estaba usando Google Analytics que resultó en perder puntos de datos relacionados con artículos que no fueron indexados en Google, pero fueron indexados en otros motores de búsqueda y fueron vistos en sitios de referencia como redes sociales y agregadores de contenido especializados.

Controlar mi propio análisis web autohospedado con Umami, PlanetScale, Prisma y Vercel, me está ayudando a tener un panorama completo de las analíticas web de mi sitio, sin sesgo de plataforma, en una solución simple y enfocada en la privacidad, y gratuita.

Además, porque me interesa el lado técnico, ha sido una buena oportunidad para interactuar con alternativas de base de datos SQL como PlanetScale, ORM de Node.js como Prisma, y despliegues a Vercel. Si necesitas ayuda con el lado técnico, no dudes en comunicarte y seré feliz de ayudarte.

Esta guía cubre cómo adapté el proceso de instalación de Umami para funcionar con PlanetScale.

Visión General de Umami, PlanetScale, Prisma y Vercel.

Umami

¿Buscas una alternativa a Google Analytic y otros servicios de análisis pagados?

Echa un vistazo a Umami.

Umami es una solución simple, fácil de usar y análisis web autohospedada. El objetivo es proporcionarte una alternativa más amable y enfocada en la privacidad a Google Analytics y una alternativa gratuita y de código abierto a las soluciones pagadas. Umami recopila solo las métricas que te importan y todo cabe en una sola página.

Umami está diseñado con la simplicidad en mente solo recopilando métricas importantes como vistas de página, URL, dispositivos, etc., sin entrar en el laberinto del embudo de marketing y comportamientos de rastreo de usuarios. Desde tu panel puedes tener una vista general del rendimiento de todos tus sitios web, y la opción de profundizar en las métricas de proyecto específico.

Una única instalación de Umami puede usarse para recopilar análisis web de sitios web ilimitados, y crear múltiples cuentas para partes interesadas externas donde cada cuenta puede tener un panel independiente para sus propios sitios web. Posees los datos de tus sitios web y tienes la posibilidad de compartirlo públicamente con una URL generada.

Umami es compatible con GDPR y tiene soporte para más de 30 idiomas incluyendo inglés, español, chino, árabe, japonés e hindi.

Umami no recopila ninguna información personal identificable y anonimiza todos los datos recopilados. Los usuarios no pueden ser identificados y nunca son rastreados entre sitios web.

El código es código abierto (MIT), disponible para auditar y mejorar en Github. El script resultante es ligero (2KB), compatible con IE y capaz de eludir bloqueadores de anuncios.

Para alojar tu servicio necesitarás una base de datos (MySQL o PostgreSQL) y un servidor compatible con Node.js (10.13 o más nuevo).

La aplicación se puede alojar en Vercel, Netlify, Render y Railway.

Para acelerar tu proceso puedes usar un proveedor de base de datos administrada como DigitalOcean, Scaleway (UE), Amazon Web Services, Google Cloud SQL, Microsoft Azure, Render, Heroku o Railway.

Porque Umami usa Prisma, en este artículo explicaré cómo usar PlanetScale para alojar tu base de datos compatible con MySQL, y cómo conectarte a ella con poca configuración adicional.

PlanetScale

PlanetScale ofrece una plataforma de base de datos MySQL compatible y sin servidor capaz de manejar cargas de trabajo del tamaño de YouTube, donde con solo algunas acciones tendrás una base de datos funcionando, sin preocupaciones sobre rebalanceo, escalado y planificación de consultas.

Usa un flujo de trabajo de desarrollo de base de datos novedoso que es impulsado por ramificación de base de datos (trata la base de datos como código) y cambios de esquema sin bloqueo. Hace más fácil experimentar con tu base de datos en una rama de desarrollo y más seguro desplegar cambios de esquema a producción.

Es compatible con muchos marcos y lenguajes como JavaScript, Python, Java, Ruby, PHP, .NET y Go. Y soporta conexiones ilimitadas y fragmentación horizontal.

Importar tus datos es tan fácil como solo necesitas conectar tu base de datos a PlanetScale y hará el trabajo pesado por ti.

Con su CLI puedes experimentar con tu estructura de ramificación de base de datos desde la comodidad de tu línea de comandos. El CLI pscale pone en tu mano herramientas poderosas para secuencias de comandos, automatización y escala de tu ciclo de vida de desarrollo.

Su Plan de Desarrollador incluye hasta 10GB de almacenamiento/mes, 1 mil millones de lecturas de filas/mes, 10 millones de escrituras de filas/mes, 3 ramas por base de datos, 1000 conexiones simultáneas, copias de seguridad diarias automatizadas y soporte comunitario.

Por $29/mes puedes actualizar a un Plan Scaler que más que duplica los límites del Plan de Desarrollador, más acceso a características avanzadas como autoscalado y soporte estándar.

Prisma

Prisma es una biblioteca del lado del servidor autopresentada como un siguiente ORM de Node.js y Type. Ofrece un conjunto de herramientas de código abierto para PostgreSQL, MySQL, SQL Server, SQLite y MongoDB (vista previa). Permite que tu aplicación lea y escriba en la base de datos.

El modelo de datos de Prisma gira en torno al esquema donde describes declarativamente, en un formato legible por humanos, los modelos de datos de tu aplicación y sus relaciones.

Proporciona un cliente de base de datos seguro de tipo que se genera automáticamente desde el esquema de Prisma con tipos específicos para tu aplicación. El Cliente de Prisma permite construir consultas que se componen de la forma en que piensas.

Tiene una extensión de Visual Studio Code con autocompletación, linting, formateo, etc. Además, el uso de TypeScript ayuda a cometer menos errores y enfatiza la seguridad de tipo extensa para tu ciclo de vida de desarrollo.

Prisma permite migración sin problemas con comandos de secuencia de comandos especialmente creados como prisma deb push y npx prisma migrate.

Prisma Studio hace que la exploración y manipulación de tus datos sea tan fácil como ejecutar el comando npx prisma studio e interactuar con una aplicación de navegador.

Como ORM, la integración de Prisma con otras herramientas como Next.js, GraphQL, Express, Apollo, NestJS e hapi, es fácil y poderosa evitando dolores de cabeza alrededor del acceso a base de datos, código repetitivo de CRUD y seguridad de tipo.

Su flujo de trabajo se organiza alrededor de Planificar (modelar tus datos), Codificar (consultar tus datos), Probar (ejecutar pruebas unitarias e integración), Desplegar (desplegar usando cualquier paradigma), Monitorear (monitorear y detectar cuellos de botella de rendimiento) y Operar (solucionar problemas de producción).

Vercel

Vercel es el "mejor lugar para desplegar cualquier aplicación de frontend" con soporte de primera clase para Next.js (el marco de React de código abierto).

Tiene un flujo de trabajo desarrollar / vista previa / enviar organizado alrededor del objetivo de proporcionar la mejor experiencia del desarrollador (actualización rápida, obtención de datos flexible, borde en localhost) y obsesión por el rendimiento del usuario final. Facilita la colaboración en equipo e integración perfecta con GitHub, GitLab y Gitbucket.

Su red perimetral global, sin configuración de tu parte, enruta solicitudes a la función sin servidor correcta (o función perimetral) y archivo estático.

Vercel beneficia al SEO de la aplicación, velocidad y seguridad proporcionando almacenamiento en caché de contenido estático, ejecución de código dinámico, cifrado SSL, compresión de activos y invalidación de caché.

El plan Hobby de Vercel es lo suficientemente generoso para alojar tus proyectos secundarios (MVPs) con 100 GB de ancho de banda, 100 GB-horas de ejecución de función sin servidor, 10 segundos de tiempo de espera de ejecución de función sin servidor, 100K invocaciones de funciones perimetrales por día, 6K minutos de ejecución de compilación, 1K imágenes de origen impulsadas por optimización de imágenes, invocaciones de funciones sin servidor ilimitadas, vistas previas ilimitadas, 50 dominios por proyecto, 100 despliegues por día, análisis limitados (solo puntos de datos de las últimas 24 horas), HTTPS / SSL predeterminado, mitigación de DDoS y soporte por correo electrónico.

Si quieres acceso a características avanzadas como puntos de datos de análisis históricos, funciones sin servidor de múltiples regiones, agregar miembro del equipo al proyecto, sufijo de despliegue de vista previa, SAML de inicio de sesión único y 2FA, ingeniero de éxito del cliente dedicado, auditoría de código y servicios profesionales, etc., deberías actualizar tu plan a Pro ($ 20 / mes por miembro) o Enterprise (Precio personalizado). Para una comparación de planes completa consulta su página de precios.

Instalación de Umami con PlanetScale, Prisma y Vercel

Puedes instalar y alojar Umami usando varias alternativas.

Esta guía adapta el proceso para funcionar con una base de datos PlanetScale y un despliegue en Vercel.

Clonar repositorio de Umami localmente usando git

git clone https://github.com/mikecao/umami.git

Entra en el directorio de Umami e instala las dependencias

cd umami
npm install

Elimina la entrada del archivo .gitignore para preservar cambios locales a schema.prisma.

/prisma/schema.prisma

El archivo schema.prisma será recreado nuevamente en el tiempo de despliegue por el script de instalación de Umami, pero eso no afectará tu configuración porque la base de datos de PlanetScale es creada manualmente solo.

Precisamente estamos usando pasos alternativos porque el script de instalación no funciona con PlanetScale.

Crear esquema de prisma

Genera el esquema con los modelos de Umami que será usado por el CLI de Prisma para crear la base de datos de PlanetScale.

npm run build

Configura el datasource y el generator para funcionar con una base de datos de PlanetScale.

El comando build genera un schema.prisma bajo el directorio prisma con los modelos y una configuración genérica para una base de datos mysql pero el schema.prisma necesita tener los siguientes ajustes para funcionar correctamente con una base de datos de PlanetScale.

generator client {
    provider        = "prisma-client-js"
    previewFeatures = ["referentialIntegrity"]
}

datasource db {
    provider             = "mysql"
    url                  = env("DATABASE_URL")
    referentialIntegrity = "prisma"
}

Si por alguna razón tienes que reconstruir / regenerar este archivo, agrega la configuración anterior nuevamente si se está anulando.

Empuja tu repositorio a GitHub.

Previamente creaste un repositorio local clonando el repositorio de Umami. Ahora es hora de empujar tus cambios locales a un repositorio de GitHub que será usado por Vercel para crear tu proyecto.

Crea un nuevo repositorio en GitHub, con tu reponame preferido y empuja tus cambios locales a él.

git branch -M main
git remote add origin https://github.com/yourusername/reponame.git
git push -u origin main

Preparar PlanetScale

Regístrate en PlanetScale.

Puedes crear la base de datos en tu panel de control de PlanetScale (tendrás autorización para crear solo una base de datos bajo el Plan de Desarrollador) seleccionando la opción Nueva Base de Datos seguida de Crear nueva base de datos.

Alternativamente puedes crear la base de datos usando el CLI de PlanetScale con pscale database create <databasename>.

pscale database create umami

Se crea una nueva base de datos con una rama main por defecto. Esta base de datos no tiene tablas en este momento.

Podrías tener que iniciar sesión en el CLI pscale antes de crear la base de datos. Si es necesario, ejecuta el comando pscale auth login y confirma el aviso del navegador.

pscale auth login

Crear conexión a la base de datos

Necesitarás una contraseña para conectarte a la base de datos.

Asegúrate de guardar la contraseña y los otros parámetros, los necesitarás más tarde para configurar la conexión de la base de datos.

Para crear la contraseña ve al panel de control de PlanetScale, selecciona la base de datos por su nombre, y selecciona Nueva contraseña. Completa el formulario y haz clic en Generar contraseña.

Alternativamente con el CLI pscale usa el comando pscale password create <DATABASE_NAME> <BRANCH_NAME> <PASSWORD_NAME>. Como en este ejemplo:

pscale password create umami main webanalytics

Ve a tu archivo .env y agrega la variable de entorno DATABASE_URL (usa la salida de la creación de contraseña anterior) con el siguiente formato:

DATABASE_URL='mysql://<USERNAME>:<PASSWORD>@<ACCESS_HOST_URL>/<DATABASE_NAME>?sslaccept=strict'

Necesitarás crear la variable de entorno DATABASE_URL más tarde en Vercel para configurar tu entorno de producción.

Empuja el esquema de la base de datos a tu base de datos de PlanetScale usando Prisma

Prisma usará el DATABASE_URL y el prisma/schema.prisma.

npx prisma db push

El prisma db push se usa para prototipado e iteración rápida pero puede resultar en pérdida de datos si el esquema difiere. Lo estamos usando porque es un proyecto nuevo.

Para un flujo de trabajo más completo puedes necesitar usar prisma migrate y prisma db push juntos.

En este caso solo estás desplegando un esquema dado como está, sin cambios posteriores, así que npx prisma db push es suficiente.

Configura el automatically copy migration data (opcional)

Ve a la configuración de tu base de datos en PlanetScale, marca la opción Automatically copy migration data, y selecciona Prisma bajo Migration framework. No necesitamos esta configuración pero es bueno estar preparado en caso de que decidas hacer tus propios cambios y trabajar con el flujo de trabajo más complejo de PlanetScale que usa migración de datos.

Crear un usuario administrador usando la consola de PlanetScale

Ve a tu panel de control de PlanetScale, selecciona tu base de datos (haz clic), ve a Ramas, selecciona principal (haz clic), ve a la pestaña Consola y ejecuta el siguiente comando:

insert into account (username, password, is_admin) values ('admin', '$2b$10$BUli0c.muyCW1ErNJc3jL.vFRFtFJWrT8/GcR4A.sUdCznaXiqFXa', true);

Esto es necesario porque el script de la aplicación no crea el usuario administrador para una base de datos de PlanetScale. Y si creas el administrador con prisma studio la contraseña no será encriptada, así que Umami fallará al desencriptar algo desencriptado.

Puedes verificar que el usuario fue creado ejecutando la siguiente consulta SQL en la consola de PlanetScale:

select * from account;

Desplegar Umami a Vercel

Con tu repositorio de git de Umami alojado en Github y la base de datos MySQL creada en PlanetScale estás listo para desplegar la aplicación Umami a Vercel.

Dirígete a tu panel de control de Vercel, selecciona Nuevo Proyecto (haz clic), importa el repositorio umami - o como sea que lo nombres.

Esto hará la transición a la ventana Configurar Proyecto. Dejaremos la configuración de Next.js predeterminada y agregaremos la variable de entorno DATABASE_URL para el entorno de producción, con el mismo valor de conexión que creaste para tu entorno local en el archivo .env.

Finalmente Desplegar (haz clic) tu proyecto de Vercel.

Configura tu sitio web para enviar análisis web a tu instalación de Umami

Desde aquí puedes continuar con los mismos pasos descritos en el sitio web de Umami, inicia sesión y cambia la contraseña del administrador, agrega sitios web, recopila datos, etc, .

Agrega el script de Umami a un sitio web de Next.js para recopilar sus análisis web (opcional)

Crea las variables de entorno para NEXT_PUBLIC_DATA_WEBSITE_ID y NEXT_PUBLIC_SRC_UMAMI_SCRIPT en tu proyecto de Next.js con los valores proporcionados por ** Obtener código de rastreo** como se explica aquí.

El código proporcionado es algo como esto:

<script async defer data-website-id="32c7y32h-98ah-5160-j7kw-e383hj3yem38" src="https://mydomaim.com/umami.js"></script>

Puedes simplemente copiarlo como texto sin formato en tu código, pero generalmente no es recomendado.

Normalmente el script de Umami va en el head de la página. Para consideraciones de rendimiento en una aplicación de Next.js, el script de Umami va en un Script component en el archivo _app.js.

import Script from 'next/script'

export default function MyApp() {
  return (
    <>
    <Script
        strategy="afterInteractive"
        data-website-id={process.env.NEXT_PUBLIC_DATA_WEBSITE_ID}
        src={process.env.NEXT_PUBLIC_SRC_UMAMI_SCRIPT}
      />
    </>
  )
}

Conclusión

Umami puede ser configurado para funcionar con una base de datos PlanetScale compatible con MySQL, mientras retiene los beneficios de una solución de análisis web autohospedada que evita sesgo de plataforma, se enfoca en simplicidad y privacidad, y permanece gratuita.

Además, porque me interesa el lado técnico, ha sido una buena oportunidad para interactuar con alternativas de base de datos SQL como PlanetScale, ORM de Node.js como Prisma, y despliegues a Vercel.

Esta guía cubre cómo adapté el proceso de instalación de Umami para funcionar con PlanetScale.