Lanzamiento e iteraciones

  • Implementa tu MVP en una URL de producción activa mediante Vercel
  • Añade limitación de velocidad para proteger tus rutas API contra el uso indebido
  • Configura el registro estructurado para supervisar tus funciones de IA tras el lanzamiento
  • Comprueba la seguridad de tu aplicación con DevTools
  • Evalúa si tu aplicación está lista para su puesta en marcha con una lista de comprobación previa al lanzamiento
  • Aplicación de producción en vivo: tu MVP implementado en una URL HTTPS pública a la que cualquiera puede acceder
  • Un MVP depurado y probado en un repositorio de GitHub
  • Autenticación de usuarios con inicio de sesión, registro y protección de rutas API 
  • Un proyecto de Supabase con el almacenamiento configurado 
  • Comentarios de las pruebas con usuarios incorporados a tu aplicación

Del MVP a la producción

Tu aplicación funciona. La gente la ha probado, has corregido los errores y has añadido la autenticación de usuarios. Pero, por ahora, solo pueden usarla las personas que tengan tu enlace de vista previa de Codespaces, y ese enlace desaparece cuando tu Codespace deja de ejecutarse.

Esta unidad hace que tu aplicación MVP pase de «funciona en mi ordenador» a «cualquiera en Internet puede usarla».

A lo largo de esta unidad, utilizaremos TutorMatch como ejemplo guiado, la misma aplicación de recomendación de tutores que hemos utilizado en otras lecciones. Verás cómo TutorMatch pasa de ejecutarse en Codespaces a convertirse en una URL activa a la que cualquiera puede acceder, y luego adaptarás cada paso a tu propio MVP.

Hay tres cosas que cambian cuando tu aplicación pasa de Codespaces a una URL pública:

Visibilidad

Tu aplicación se hace pública a través de una URL. Cualquiera que descubra o reciba la URL puede intentar utilizarla, no solo tu equipo.

Perseverancia

Tu aplicación debe seguir funcionando sin que tengas que iniciarla manualmente. En Codespaces, iniciabas manualmente los servidores mientras realizabas las pruebas, pero en producción, con usuarios reales, la plataforma de alojamiento mantiene tu aplicación activa automáticamente.

Coste

Cada llamada a la API de IA tiene un coste. En Codespaces, tú controlabas quién utilizaba tu aplicación (principalmente tú). Con una URL pública, incluso con autenticación de usuario y de la API, necesitas protección adicional contra el uso indebido.

Elección de una plataforma de implementación

Hasta ahora has estado ejecutando tu aplicación en Codespaces, un entorno de desarrollo al que solo tú tienes acceso. En esta actividad, la implementarás en Vercel, una plataforma que aloja aplicaciones web y te proporciona una URL pública permanente.

Hay muchas formas de implementar una aplicación web. A continuación se comparan las opciones más habituales para alguien que quiera implementar un MVP:

Plataforma

Complejidad de la configuración

Nivel gratuito

Ideal para

Vercel

Sencillo (se conecta a GitHub)

100 GB de ancho de banda, 100 horas sin servidor

Aplicaciones React/Next.js con rutas de API

Implementación de Google AI Studio

Muy sencillo (con un solo clic)

Requiere una cuenta de facturación de Google Cloud (300 $ en créditos gratuitos para nuevos usuarios)

Aplicaciones desarrolladas íntegramente en AI Studio

Adorable / Bolt

Sencillo (alojamiento integrado)

Limitado, varía según la plataforma

Prototipos rápidos sin GitHub

Netlify

Sencillo (se conecta a GitHub)

100 GB de ancho de banda

Sitios web estáticos, backends más sencillos

Ferrocarril / Render

Medio

Plan gratuito con funciones limitadas

Aplicaciones full-stack con bases de datos

Para este programa, utilizarás Vercel. He aquí el motivo:

Para la mayoría de vosotros, la aplicación cuenta con un backend, y Vercel lo gestiona muy bien. Vuestro MVP no es solo un conjunto de páginas estáticas, sino que incluye rutas de API del lado del servidor que llaman a Groq u otras API de modelos de lenguaje grande (LLM), se conectan a Supabase y, posiblemente, llaman a otras API. Las funciones sin servidor de Vercel gestionan el código del backend automáticamente. Plataformas como Netlify funcionan bien para aplicaciones más sencillas, pero requieren una mayor configuración para la lógica del lado del servidor.

Se conecta directamente a GitHub. Tu código ya está en GitHub. Vercel importa tu repositorio y vuelve a implementarlo automáticamente cada vez que subes cambios: el mismo flujo de trabajo de Git que has estado utilizando a lo largo de este programa.

No se necesita tarjeta de crédito. El plan gratuito de Vercel solo requiere la cuenta de GitHub que ya tienes.

Vercel se encarga automáticamente de la configuración de producción y de la seguridad. Hay muchos aspectos del despliegue que requieren una configuración considerable. Vercel se encarga automáticamente de gran parte de esos requisitos de configuración.

Netlify le sigue muy de cerca y una alternativa sólida si alguna vez quieres probar otra plataforma. Tanto Vercel como Netlify se conectan a GitHub, realizan la implementación automática al enviar el código y ofrecen generosos planes gratuitos. La diferencia es que Vercel gestiona las rutas de la API de backend de forma nativa, mientras que Netlify requiere que reestructures el código de tu servidor al formato específico de «Netlify Functions». Para tu aplicación MVP, Vercel es la opción más sencilla y también la más completa.

¿Y si mi aplicación utiliza otros marcos de trabajo?

Next.js: Si tu aplicación es un proyecto de Next.js, Vercel fue creado por los mismos desarrolladores de Next.js, por lo que sigue siendo una excelente opción.

Lovable o Bolt:Estas plataformas incluyen su propio alojamiento y despliegue. Es posible que tu aplicación ya esté en funcionamiento en su infraestructura. Consulta con tu mentor si es mejor migrar a Vercel o seguir utilizando el alojamiento integrado de la plataforma.

Python (Flask, Streamlit, FastAPI): El plan gratuito de Vercel no admite backends de Python. Pregunta a tu tutor sobre Railway o Render como plataformas alternativas. Railway (railway.app) ofrece un plan gratuito que admite Python: conecta tu repositorio de GitHub y Railway se encarga del resto. Los conceptos de esta unidad —variables de entorno, supervisión, gestión de errores— siguen siendo válidos, pero los pasos específicos de la plataforma serán diferentes.

De qué se encarga Vercel

Vercel se encarga automáticamente de gran parte del trabajo técnico relacionado con la infraestructura. A continuación se detalla cómo se distribuyen las responsabilidades:

VERCEL

  • Mantén la seguridad de tu aplicación con HTTPS (conexiones cifradas)
  • Bloquear el tráfico malicioso antes de que llegue a tu aplicación
  • Cómo hacer que tu aplicación sea rápida para los usuarios de todo el mundo
  • Mantener tu aplicación en funcionamiento las 24 horas del día, los 7 días de la semana, sin que tengas que iniciarla manualmente

TÚ

  • Limitar la frecuencia con la que los usuarios pueden utilizar tu función de IA. Sin límites, un solo usuario podría generar cientos de costosas llamadas a la IA
  • Mostrar mensajes de error claros y comprensibles. Sin esto, los usuarios ven mensajes técnicos confusos cuando algo falla.
  •  

En Codespaces, es posible que estés ejecutando el frontend y el backend como dos procesos independientes:

  1. Servidor front-end, probablemente React
  2. Servidor backend, probablemente Express

Esta es una configuración de desarrollo estándar que funciona bien para compilar y depurar.

Sin embargo, Vercel funciona de forma diferente a GitHub Codespaces. No ejecuta un servidor Express persistente. En su lugar, hace dos cosas:

  1. Tus archivos de interfaz (HTML, CSS y JavaScript generados con «npm run build») se sirven a través de la CDN global de Vercel. Una CDN (red de distribución de contenidos) es una red de servidores repartidos por todo el mundo que almacenan copias de los archivos estáticos de tu aplicación: HTML, CSS, JavaScript e imágenes.

Vercel busca estos archivos en el directorio de salida de la compilación (como dist/). Tu servidor de desarrollo de Vite y cualquier código express.static() no se utilizan en producción: la CDN de Vercel los sustituye por completo. Esto es normal y previsible.

  1. Tus rutas API (como /api/recommendations) se ejecutan como funciones sin servidor que se inician desde cero con cada solicitud.

Para que esto funcione, Vercel necesita que tu aplicación Express se exporte desde el archivo y se coloque en un lugar donde Vercel pueda encontrarla. Configurarás esto en las primeras actividades mediante un pequeño paso de configuración.

Sin embargo, tu código actual no necesita cambios importantes, así que no te preocupes. Lo que vas a hacer es añadir una capa de configuración de implementación, no reescribir tu aplicación.

Al final, tendrás una URL activa que podrás compartir con tus amigos, familiares e incluso con posibles clientes.

ACTIVIDAD 1

Prepárate para implementar tu aplicación con Vercel

Tiempo estimado: 30 minutos

  1. Ve a GitHub y busca tu repositorio MVP.
  2. Antes de realizar la implementación, debes haber fusionado todo el trabajo de las unidades anteriores en la rama principal. Fusiona todas las ramas abiertas y confirmadas. 
  3. Asegúrate de que estás en la rama principal.
  4. Haz clic en Códigoy, a continuación, haz clic en Crear espacio de código en la rama principal si no tienes un espacio de código para tu rama principal. Es posible que ya tengas un espacio de código para otras ramas, pero abre uno nuevo desde la rama principal.
  5. Espera a que se cargue el entorno de Codespace.

NOTA: En el pasado, siempre hemos realizado las actualizaciones de nuestro repositorio en una nueva rama. En este caso, la actualización de la rama principal es intencionada, ya que Vercel supervisa la rama «main» para las implementaciones automáticas, y ese trabajo preparatorio realizado directamente en «main» es aceptable en este caso concreto, ya que no estamos modificando la lógica de la aplicación, sino que solo añadimos archivos de configuración.

JavaScript cuenta con dos sistemas distintos para compartir código entre archivos: CommonJS y ES Modules. CommonJS es el sistema más antiguo, creado para Node.js cuando JavaScript solo se ejecutaba en servidores. ES Modules es el estándar más reciente que funciona tanto en navegadores como en Node.js, y actualmente es el enfoque recomendado.
El código de exportación en tu servidor Express debe coincidir con el sistema que utilice tu proyecto: export default app para ES Modules o module.exports = app para CommonJS. Usar el incorrecto provocará un error en la implementación.

Saber esto te ayudará a indicar a Copilot cómo actualizar tu código.

Así es como se sabe:

  1. Comprueba tu package.json en busca de este campo: json”type”: “module”
    Si esa línea está presente, estás utilizando módulos ES.
  2. Si no aparece o pone «type»: «commonjs», estás utilizandoCommonJS.
  3. Otra forma de comprobarlo es fijarse en las declaraciones de importación que aparecen al principio de server.js.
    • Los módulos ES tienen el siguiente aspecto:
      import express from ‘express’
      import dotenv from ‘dotenv’
    • CommonJS se escribe así:
      const express = require(‘express’)
      const dotenv = require(‘dotenv’)
  4. Probablemente también haya una instrucción «export» al final de tu código:
    • Módulos ES:
      export default app
      CommonJS:
      module.exports = app

Comprueba y anota qué norma estás utilizando.

Dado que probablemente hayas estado ejecutando tu aplicación en el entorno de GitHub Codespaces, es probable que cuente con dos procesos independientes para el frontend y el backend. 

Uno para el frontend de React (Vite) y otro para el backend de Express. 

Vercel necesita una estructura diferente.

  • sirve tus archivos de interfaz de usuario compilados desde una CDN.
  • ejecuta tus rutas de la API Express como funciones sin servidor.

La buena noticia es que esta transición consiste principalmente en añadir archivos de configuración y unas pocas líneas de código. La lógica de tu aplicación actual no cambia.

Abre el chat de Copilot en tu Codespace y utiliza una indicación similar a esta:

Me estás ayudando a preparar mi aplicación de Express.js + React para su implementación en Vercel.

Objetivo: Configurar mi proyecto para que Vercel pueda alojar la interfaz de usuario y ejecutar las rutas de la API del backend como funciones sin servidor.

Actualmente, mi aplicación se ejecuta como dos procesos independientes en Codespaces.

La terminal 1 ejecuta el frontend de React con Vite (npm run dev). La terminal 2 ejecuta el backend de Express (npm run dev) en un puerto independiente.

Estoy realizando el despliegue en Vercel, que aloja los archivos estáticos generados durante la compilación y convierte Express en una función sin servidor.

Realiza estos cambios:

  1. ARCHIVO DEL SERVIDOR: Mueve mi archivo del servidor Express [server.js o similar] al directorio «api/» y cámbiale el nombre a «index.js» si es necesario. Al final del archivo, añade: [si es ES_MODULES: export default app o si es COMMONJS: module.exports = app]. Mantén la función «app.listen()» existente para el desarrollo local.
  1. CONFIGURACIÓN DE VERCEL: Crea un archivo vercel.json en el directorio raíz del proyecto con:

   {

     «reescrituras»: [

       { “source”: “/api/(.*)”, “destination”: “/api” }

     ]

   }

  1. PACKAGE.JSON: Asegúrate de que estos scripts estén presentes:
    • «dev» debería ejecutar tanto el frontend como el backend para el desarrollo local (no hay problema en utilizarlos simultáneamente)
    • “build”: “vite build” (compiles the React frontend into /dist)
      Add an “engines” field: { “node”: “>=18.0.0” }
      Make sure all backend dependencies (express, cors, dotenv, [your AI SDK]) are in the root package.json, not in a separate server package.json.
  1. COMPROBACIÓN DE URL: Busca en todos los archivos del frontend las URL fijadas que contengan «localhost», «github.dev» o «127.0.0.1». Sustitúyelas por rutas relativas como «/api/recommendations» en lugar de «http://localhost:3000/api/recommendations».
  1. VITE PROXY: En vite.config.ts (o vite.config.js), añade un proxy para que el desarrollo local siga funcionando con URL relativas:

   server: {

     proxy: {

       ‘/api’: { target: ‘http://localhost:3001’, changeOrigin: true }

     }

   }

Cada vez que actualices, muéstrame qué has cambiado.

  1. Revisa lo que genera Copilot. A continuación te explicamos qué supone cada cambio y por qué es importante.

Vercel busca funciones sin servidor en la api/ . Al mover tu servidor Express allí y añadir export default app (o module.exports = app), Vercel puede importar tu aplicación Express y ejecutarla como una función sin servidor.

La línea «app.listen()» se mantiene: Vercel la ignora en el entorno de producción, pero sigue siendo necesaria para el desarrollo local en Codespaces.

El archivo de tu servidor debería terminar más o menos así:

				
					// Local development — Vercel ignores this in production
app.listen(process.env.PORT || 3000, () => {
  console.log(`Server running on http://localhost:${process.env.PORT || 3000}`);
});

// Export for Vercel serverless deployment
export default app;

Este pequeño archivo de configuración indica a Vercel cómo enrutar las solicitudes. Todas las solicitudes dirigidas a /api/* van a tu aplicación Express. Todo lo demás va a los archivos frontend generados. El archivo completo tiene solo 5 líneas.

				
					{
  "rewrites": [
    { "source": "/api/(.*)", "destination": "/api" }
  ]
}

Si tu interfaz web incluye fetch(‘http://localhost:3000/api/recommendations’), esto no funcionará en Vercel, ya que no existe localhost:3000.

Copilot debería cambiarlo a una ruta relativa, como fetch(‘/api/recommendations’). El navegador resuelve la ruta en función del dominio que aloje la página, ya sea Codespaces o tu URL .vercel.app en producción.

Si utilizas URL relativas en tu interfaz de usuario, necesitas una forma de redirigir las solicitudes a /api hacia tu servidor Express durante el desarrollo local. El proxy de Vite lo hace automáticamente.

  • Cuando tu interfaz de usuario envía una solicitud a «api/recommendations», Vite la reenvía a «http://localhost:3000/api/recommendations», donde se ejecuta tu servidor Express.
  • En el entorno de producción de Vercel, esto se gestiona mediante las reescrituras de vercel.json.

Hay que realizar varios cambios en el archivo package.json.

  • scripts — La ruta del script del servidor se ha actualizado de server/server.js a api/index.js, y es posible que el script de desarrollo se actualice para reflejar la nueva ruta
  • dependencias: todas las dependencias del backend que antes se encontraban en server/package.json deben trasladarse al paquete raíz package.json , ya que ya no hay un paquete de servidor independiente
  • «type»: «module» — puede que se haya añadido o que ya estuviera ahí
  • “engines” — { “node”: “>=18.0.0” } added for Vercel compatibility

Por ejemplo, así es como debería verse la sección de scripts:

				
					"scripts": {
  "dev": "concurrently \"vite\" \"node api/index.js\"",
  "build": "vite build",
  "preview": "vite preview",
  "server": "node api/index.js"
},

Fíjate en la línea «build:». Esta puede cambiar, dependiendo de tu configuración:

  • React + Vite (la opción más habitual de Copilot) – «build»: «vite build»
  • React con Create React App – «build»: «react-scripts build»
  • Vanilla JS (sin marco de trabajo): no se necesita ningún paso de compilación

 

Esto es lo que GitHub Copilot nos mostró que había hecho:

Te ayudaré a preparar tu aplicación de Express.js + React para su implementación en Vercel. Empezaré por analizar la estructura de tu proyecto para comprender su configuración actual.

¡Perfecto! He revisado la estructura de tu proyecto en «tutormatch-app-gemini-auth-working». Buenas noticias: tu aplicación ya está totalmente configurada para su implementación en Vercel. ¡Los cinco cambios necesarios ya están aplicados!

Resumen de la configuración actual ✅

1. ARCHIVO DEL SERVIDOR ✅

Tu archivo index.js está correctamente configurado:

  • Se encuentra en el directorio «api/», tal y como exige Vercel
  • Ya exporta la aplicación con la configuración predeterminada de exportación (módulos ES)
  • Incluye app.listen(PORT) para el desarrollo local en el puerto 3001
  • Todas las rutas Express (incluidas /api/recommendations y /api/health) están configuradas

2. CONFIGURACIÓN DE VERCEL ✅

Tu archivo `vercel.json` está correctamente configurado:

Esto le indica a Vercel que redirija todas las solicitudes /api/* a la función sin servidor.

3. PACKAGE.JSON ✅

Tu archivo package.json contiene todos los scripts y la configuración necesarios:

  • ✅ El script «dev» se utiliza para ejecutar simultáneamente tanto el backend como el frontend
  • ✅ «build» está configurado como «vite build» para el frontend de React
  • ✅ El campo «engines» requiere Node.js 18.0.0 o superior
  • ✅ Todas las dependencias del backend (express, cors, dotenv, @google/genai) se encuentran en el archivo package.json de la carpeta raíz
  • ✅ concurrent está correctamente configurado para ejecutar «npm run server » y «npm run client» a la vez

4. COMPROBACIÓN DE LA URL ✅

No se han encontrado URL fijas. Tu interfaz de usuario utiliza correctamente:

5. VITE PROXY ✅

En tu archivo `vite.config.ts` ya tienes configurado el proxy:

Esto garantiza que, durante el desarrollo local con «npm run dev», las solicitudes dirigidas a «/api» se redirijan al backend de Express.

Qué significa esto

¡Tu proyecto ya está listo para publicarse en Vercel! Cuando realices un push a Vercel:

  1. Vite generará tu interfaz de usuario de React en la carpeta /dist
  2. Vercel se encargará de servir los archivos estáticos
  3. Todas las solicitudes /api/* serán gestionadas por tu función Express en index.js
  4. Tu autenticación en Supabase y tus llamadas a la API de Gemini funcionarán a la perfección

Desarrollo local: ejecuta «npm run dev» y tanto el frontend (puerto 5173) como el backend (puerto 3000) se iniciarán automáticamente, con el proxy de Vite gestionando las llamadas a la API.

Dado que es posible que estés ejecutando un nuevo espacio de código directamente desde la rama principal, es posible que hayas perdido el archivo .env , que es local para cada espacio de código. Necesitarás que esas variables de entorno estén configuradas en el .env para poder realizar pruebas aquí en Codespaces.

  1. Revisa tu código en busca de todas las variables VITE. Estas se habrían encontrado en tu directorio raíz .env en tu espacio de código de desarrollo.
  2. Añade un .env a la carpeta raíz y vuelve a añadirlas. En nuestro caso, eran:
				
					VITE_SUPABASE_URL=
VITE_SUPABASE_KEY=
VITE_DEVELOPMENT_URL=

Para realizar las pruebas aquí, debes configurar VITE_DEVELOPMENT_URL con la URL de tu espacio de código en github.dev. Cuando llegues a la configuración de Vercel, deberás actualizarla con la URL de tu aplicación en Vercel.

  1. Comprueba que TODAS las variables de entorno del backend estén en los secretos de tu Codespace. No puedes añadirlas al archivo raíz .env , ya que quedarían expuestas.
  1. Instalar las dependencias: npm install (instala simultáneamente las dependencias y las del backend)
  2. El comando «npm run dev» iniciará tanto el servidor front-end como el back-end.
  3. Prueba:
    • carga de la página
    • El inicio de sesión funciona
    • La función de IA responde
  4. Si todo funciona correctamente en tu equipo local, ya estás listo para la implementación.
  5. Sigue trabajando con el LLM para asegurarte de que todo esté listo para el despliegue en Vercel.
  1. Guarda los cambios y envíalos a la rama principal.
  2. Incorpora todos los cambios para que tu rama principal esté actualizada en GitHub.

Ahora que has actualizado tu código para que funcione en la plataforma Vercel, ¡es hora de implementarlo!

ACTIVIDAD 2

Implementa tu aplicación en Vercel

Tiempo estimado: 30 minutos

  1. Entra en vercel.com.
  2. Haz clic en «Registrarse».
  3. Selecciona «Continuar con GitHub». Esto conecta Vercel a la misma cuenta de GitHub en la que se encuentra el código de tu MVP.
  4. Autoriza a Vercel a acceder a tus repositorios de GitHub.

No hace falta tarjeta de crédito. El plan gratuito «Hobby» es más que suficiente para tu MVP.

  1. En el panel de control de Vercel, haz clic en «Añadir nuevo» → «Proyecto»
import screenshot in vercel dashboard
  1. Busca tu repositorio de MVP en la lista y haz clic en «Importar». 

Si aún no has conectado GitHub correctamente, sigue los pasos que se indican en su documentación «Implementación de proyectos de GitHub con Vercel».

choosing github repository in vercel dashboard

Vercel detecta automáticamente el tipo de proyecto y rellena los ajustes de compilación

  1. Vercel suele funcionar correctamente, pero comprueba que la configuración se ajuste a tu proyecto.

Si tu proyecto tiene…

Configuración predeterminada del marco

Comando de compilación

Directorio de salida

vite.config.ts o vite.config.js

vite.config.ts o vite.config.js

Compilación rápida

dist

next.config.js o next.config.ts

Next.js

próxima versión

.siguiente

server.js + carpeta «public/»

Otros

(vacío o personalizado)

público

React-scripts en package.json

Crear una aplicación React

Compilación con React Scripts

construye

Así es como se ve en nuestra aplicación TutorMatch:

  1. Si Vercel ha detectado un marco de trabajo incorrecto, haz clic en «Configuración de compilación y salida» para anularlo.

    Los campos «Comando de compilación» y «Directorio de salida» son los dos más importantes. Si no estás seguro, comprueba qué genera «npm run build» localmente: busca una carpeta «dist/», «build/» o «.next/» después de ejecutarlo.

Este es el paso más importante. Tu aplicación necesita claves API para funcionar, y estas deben configurarse en Vercel, no en tu código.

  1. En la pantalla de configuración del proyecto, haz clic en «Variables de entorno».
  2. Tienes dos opciones:
    • Importar .env: haz clic en «Importar archivo .env» y selecciona tu archivo .env local. Vercel lee automáticamente todos los pares clave-valor.
    • Añadir manualmente:escribe el nombre de cada clave y pega su valor uno por uno.
  3. ¡Asegúrate de añadir todas las claves que necesita tu aplicación, tanto las variables de entorno del frontend como las del backend!

    En Codespaces, tus claves se guardaban en .env O en GitHub Secrets. En producción, se encuentran en la configuración de variables de entorno de Vercel. Se trata del mismo concepto, pero en una ubicación diferente.

    Así es como nos lo vemos:

Nota: Cuando aprendas a añadir pagos en las unidades siguientes, tendrás que volver a esta pantalla para añadir tus claves de Stripe. Por ahora, las claves que has añadido durante el desarrollo son todo lo que necesitas.

  1. Haz clic en «Deploy».

    Vercel recupera tu código de GitHub, instala las dependencias, compila tu aplicación y le asigna una URL. Esto tarda entre 1 y 3 minutos. Puedes consultar los registros de compilación en tiempo real.
congralations message in vercel

Cuando termine, es posible que Vercel te muestre una pantalla de confirmación con un enlace para acceder al panel de control de Vercel.

Adelante. Aquí encontrarás más detalles sobre tu aplicación, como

  1. tu URL 
  2. una lista de verificación que puedes empezar a seguir para conocer las recomendaciones sobre buenas prácticas que veremos en los pasos siguientes
  3. Módulo sobre observabilidad que veremos más adelante
  4. Panel de análisis que también veremos más adelante
vercel dashboard overview

La URL es la URL de producción. A diferencia de tu aplicación MVP en GitHub Codespaces, donde la URL cambiaba, aquí en Vercel tu URL seguirá siendo estática y permanecerá activa tanto si tu ordenador está encendido como apagado.

Puedes abrir la URL de producción desde cualquier lugar, así que ábrela en tu teléfono para comprobar quetu aplicación está en Internet.

¡Felicidades! 

Cuando tu aplicación se implemente en Vercel, debes indicar a Supabase que la URL de Vercel es un destino de redireccionamiento de confianza; de lo contrario, las llamadas de autenticación fallarán. Ya hemos añadido nuestro redireccionamiento de desarrollo de GitHub, pero ahora debemos añadir la URL de Vercel como redireccionamiento.

  1. Ve a tu Panel de control de Supabase → Autenticación → Configuración de URL y verás dos campos:
    1. URL del sitio: introduce aquí la URL de producción de Vercel: https://your-app.vercel.app
    2. URL de redireccionamiento: añade tanto tu URL de Vercel como la de Codespaces. Ya deberías tener la URL de tu Codespace. Puedes sustituirla por un comodín para github.dev, de modo que cualquier nuevo Codespace funcione. Borra lo que haya ahí y añade lo siguiente:
      https://your-app.vercel.app
      **https://*.github.dev/**

El comodín /** al final es importante: abarca todas las rutas, lo cual será necesario cuando añadas pagos.

Cuando incorporamos la autenticación de usuarios en Supabase, desactivamos las notificaciones por correo electrónico en Supabase. Ahora queremos volver a activarlas para el entorno de producción.

  1. Ve al panel de control de Supabase → Autenticación → Inicio de sesión/Proveedores.
  2. Activa el interruptor «Confirmar correo electrónico ».

Visita tu URL en vivo y comprueba que funciona:

  1. ¿Se carga la página correctamente? (Deberías ver la página de inicio de sesión)
  2. ¿Puedes crear una cuenta nueva e iniciar sesión?
  3. Una vez que hayas iniciado sesión, prueba la función de IA. ¿Responde?

Si algo no funciona, consulta la sección de resolución de problemas que aparece a continuación. Es normal que se produzcan errores de compilación en la primera implementación.

  1. Comparte tu URL con un compañero de equipo o un amigo.
  2. Pídeles que abran la URL en su teléfono o ordenador e intenten crear una cuenta y utilizar una de las funciones de tu aplicación.

Es la primera vez que alguien accede a tu aplicación sin que Codespaces esté en ejecución. Si funciona, tu aplicación está en funcionamiento.

¿Quieres un dominio personalizado? Por defecto, la URL de tu aplicación se generará automáticamente con un formato similar a «nombre-de-tu-aplicación.vercel.app». Pero si prefieres una URL con tu marca, como «tutormatch.app», echa un vistazo al reto opcional al final, donde encontrarás una guía paso a paso sobre cómo hacerlo. También puedes intentarlo por tu cuenta siguiendo la guía de Vercel que aparece en la lista de comprobación de implementación.

Solución de problemas

Haz clic en cada problema de la lista para ver la posible solución.

Haz clic en la implementación fallida y lee los registros de compilación.

Causas comunes:

  • Falta una dependencia en package.json
  • un error tipográfico en una ruta de importación
  • falta un script de compilación.

Ejecuta primero «npm run build» en Codespaces; si falla a nivel local, también fallará en Vercel.

Es probable que tu archivo de servidor no esté exportando la aplicación Express.

Añadir:

  • export default app; for (módulos ES) o
  • module.exports = app; for (CommonJS)

al final del archivo de tu servidor en la directorio .

Este es el problema más habitual en la implementación.

  1. Ve al proyecto de Vercel → Configuración → Variables de entorno.
  2. Comprueba que todos los nombres de las claves coincidan exactamente con lo que espera tu código (se distingue entre mayúsculas y minúsculas).

    Recuerda: las variables con el prefijo VITE_ son solo para el código del frontend.

    Las claves de la API del backend, como GEMINI_API_KEY o GROQ_API_KEY, NO deben llevar el prefijo VITE_.
  1. Ve a la pestaña «Vercel Logs» (Implementaciones → haz clic en una implementación → Registros de funciones).
  2. Busca «API_KEY no está definido» o algo similar.
  3. Si la encuentras, añade la clave que falta en las variables de entorno de Vercel.
  4. Comprueba tu directorio local (codespace) .env para ver qué claves espera tu aplicación.

Es posible que tu servidor Express tenga un puerto fijo.

Cambia «app.listen(3000)» por «app.listen(process.env.PORT) » y asegúrate de que «PORT» figure entre tus variables de entorno.

Tienes direcciones URL fijas en tu interfaz de usuario (como http://localhost:3001/api/…).

Cámbialas por rutas relativas (/api/…).

Las rutas relativas evitan por completo los problemas relacionados con CORS.

Vercel ignora `express.static()` en el entorno de producción y sirve los archivos estáticos desde el directorio de salida de la compilación.

Si faltan archivos CSS o imágenes, comprueba que estén incluidos en la carpeta dist/ después de ejecutar npm run build.

En cuanto a las imágenes, asegúrate de que estén en la carpeta carpeta public/ o importadas en tu código de React.

Falta una dependencia en package.json.

Ejecuta «npm install» en Codespaces y envía el archivo «package-lock.json» actualizado a la rama principal.

Comprueba que las URL de redireccionamiento de Supabase Auth incluyan tu nueva URL de Vercel.

Ve al panel de control de Supabase → Autenticación → Configuración de URL y añade tu URL .vercel.app.

Actualiza la URL del sitio y las URL de redireccionamiento en la configuración de Supabase Auth con tu URL de Vercel.

Mantén la URL de Codespaces en la lista para que el desarrollo siga funcionando.

El directorio de salida de la compilación que has indicado en la configuración de Vercel no coincide con la ubicación en la que «npm run build» guarda los archivos.

Comprobar:

  • Vite utiliza dist/,
  • Create React App utiliza build/.

Actualiza el directorio de salida en la configuración de compilación y salida de Vercel.

Asegúrate de que tu archivo vercel.json existe en la raíz del proyecto (lo creaste en la Actividad 1).

Si las rutas de la API siguen sin funcionar, prueba a añadir una sección «builds»:

				
					{ 
    "builds": [{ 
        "src": "api/index.js"
        "use": "@vercel/node"
    }], 
    "rewrites": [{ 
        "source": "/api/(.*)", 
        "destination": "/api" 
    }] 
}

Con Fluid Compute (activado de forma predeterminada en los proyectos nuevos), las funciones pueden ejecutarse durante un máximo de 300 segundos (5 minutos) en el plan Hobby.

Sin Fluid Compute, el límite es de 60 segundos.

Si tus llamadas a la IA siguen agotando el tiempo de espera, plantéate simplificar la solicitud o añadir un indicador de carga y un mensaje de tiempo de espera para el usuario.

Implementación automática

Al crear tu MVP con GitHub, has aprendido a utilizar las ramas para organizar tu trabajo. Ahora las ramas tienen consecuencias reales: enviar a main implica que tu aplicación en producción cambia al instante.

El flujo de trabajo habitual de producción en GitHub es el siguiente:

  • rama principal = producción. Conectada a Vercel. Cada push se implementa automáticamente.
  • ramas de características = un espacio seguro para nuevos proyectos. Experimenta aquí.

Nunca envíes código sin probar directamente a main una vez que esté conectado a tu plataforma de implementación.

Una notificación mal enviada puede provocar que tu aplicación en producción deje de funcionar para todos los usuarios.

ACTIVIDAD 3

Prueba de implementación automática

Tiempo estimado: 15 minutos

  1. Ve a GitHub y busca tu repositorio MVP
  2. Haz clic en el menú desplegable principal situado en la parte superior izquierda del repositorio y consulta todas las ramas.
  3. Crea una nueva rama.
  4. Puedes llamarlo como quieras: test-auto-deploy
  5. Crea un nuevo Codespace para esta rama y ábrelo.
  1. Realiza algún pequeño cambio visible, como actualizar el texto de un encabezado o de un botón, para que puedas comprobar fácilmente si ha funcionado. 

Actualizaremos el título de la página de «TutorMatch» a «TutorMatch – PRUEBA DE IMPLEMENTACIÓN AUTOMÁTICA».

Lo encontramos en el archivo App.jsx . 

  1. Guarda los cambios en Codepace con un mensaje descriptivo y envíalos a la rama «test-auto-deploy ».
  2. Vuelve a GitHub. Deberías ver un botón que te indica que se ha realizado una subida.
  3. Haz clic en el botón para crear una solicitud de incorporación de cambios o simplemente ve a la pestaña «Solicitudes de incorporación de cambios».  
  1. Añade un título y una descripción
  2. Haz clic en «Crear solicitud de incorporación de cambios».
  3. Haz clic en «Fusionar solicitud de incorporación de cambios» y confirma.

Una vez que confirmes la fusión en GitHub, deberías ver

  1. la historia
  2. Más información específica sobre Vercel. Esto se ha añadido debido a la integración con Vercel.

Espero que no haya conflictos y que puedas fusionar correctamente la solicitud de incorporación de cambios.

  1. Ve al panel de control de Vercel.
  2. Haz clic en «Implementaciones » de tu proyecto.

Deberías ver dos filas nuevas:

    • Uno que muestra un avance de un cambio realizado
    • Uno para la versión de producción. La versión de producción puede tener el estado «en compilación» o «lista».
      Una vez que esté «lista», puedes ir a tu URL y ver los cambios realizados.
  1. Cuando haya terminado, actualiza la URL en vivo para ver el cambio

La verdad es que no queremos un título que diga «IMPLEMENTACIÓN DE PRUEBA». Aunque Vercel ofrece una opción de reversión, seguirá consultando el repositorio de GitHub y descargando la rama principal actual, por lo que tendrás que seguir los mismos pasos para revertir el cambio.

  1. Vuelve a Codespace y cambia el título de nuevo.
  2. Guarda y envía los cambios.
  3. Crea una solicitud de incorporación de cambios y fúndela.
  4. Comprueba de nuevo en Vercel si el título ha vuelto a ser el original. 

Protege tu aplicación para su puesta en producción

A lo largo del programa, has ido incorporando medidas de seguridad en tu aplicación de forma progresiva, como por ejemplo:

  • Almacenamiento de claves API en GitHub Secrets (para mantenerlas fuera del código y del historial de confirmaciones)
  • Realizar llamadas a la API en el lado del servidor (manteniendo la clave totalmente fuera del navegador) 
  • Incorporar la autenticación de usuarios mediante Supabase para que solo los usuarios que hayan iniciado sesión puedan acceder a tu aplicación
  • Se ha añadido seguridad mediante middleware a la API para que nadie, salvo tu aplicación, pueda realizar llamadas a la API. 

Se trata de medidas de protección importantes, pero no lo cubren todo.

Un usuario autorizado de la aplicación podría escribir un script que llamara a tu función de IA 500 veces en un minuto, agotando todos tus créditos de las API de Groq, Gemini o Hugging Face o, lo que es peor, generándote un gasto considerable. 

O bien, tu clave API podría caducar y, sin un manejo adecuado de los errores, tus usuarios verían un mensaje sin procesar, muy técnico, en lugar de un mensaje útil.

Vercel protege tu aplicación a nivel de infraestructura, defendiéndola contra ataques distribuidos, sobrecargas de red y amenazas web básicas. Estos se bloquean automáticamente.

Pero Vercel no sabe que las llamadas a tus API de IA tienen un coste por llamada, ni que tus respuestas de error contienen datos internos. Se trata de cuestiones relacionadas con la aplicación que solo tú conoces y puedes resolver.

La siguiente actividad añade dos capas más de protección: 

  1. limitación de velocidad: establecer un límite al número de solicitudes que puede realizar cada usuario
  2. Gestión segura de errores: sustituir los errores técnicos por mensajes fáciles de entender

Hay diferentes formas de implementar la limitación de velocidad. A continuación se comparan:

Enfoque

Cómo funciona

Compensación

En memoria (límite de velocidad de expresión)

Las consultas a la memoria del servidor

Fácil de configurar. Se reinicia cuando se reinician las funciones sin servidor. Detecta los abusos por envíos masivos.

Almacén externo (como en la base de datos)

Almacena los recuentos en una base de datos independiente que se conserva tras cada reinicio

Es más fiable en condiciones de tráfico intenso, pero hay que configurarlo y pagar por un servicio adicional. 

También es la opción más compleja, pero la recomendamos encarecidamente cuando se tenga un gran número de usuarios.

Middleware periférico

Bloquea las solicitudes en el perímetro de la red de Vercel antes de que lleguen a tu código

Es la opción más rápida, pero requiere aprender un patrón de programación diferente (Vercel Edge Runtime)

Para tu MVP, la limitación de velocidad en memoria es la opción más práctica. Detecta los patrones de abuso más comunes (alguien que hace clic repetidamente en el botón de IA o un script que envía solicitudes rápidas) con una configuración mínima. Si tu aplicación crece más allá de la competencia y necesitas una limitación de velocidad que nunca se reinicie, pasar al almacenamiento en base de datos es el siguiente paso lógico y seguro.

ACTIVIDAD 4

Añadir limitación de velocidad y gestión segura de errores

Tiempo estimado: 20 minutos

  1. Ve a GitHub y busca tu repositorio MVP
  2. Haz clic en el menú desplegable principal situado en la parte superior izquierda del repositorio y consulta todas las ramas.
  3. Crea una nueva rama.
  4. Póngale el nombre que quiera: «add-security» (o cualquier otro nombre descriptivo).
  5. Crea un nuevo Codespace para esta rama y ábrelo.

En el entorno de producción, cualquier persona que descubra tu URL puede enviar solicitudes, incluidos scripts que realizan cientos de llamadas a la IA por minuto. La limitación de velocidad restringe el número de solicitudes que puede realizar cada usuario.

  1. Abre el chat de Copilot en tu Codespace y utiliza esta instrucción:

Función: Me estás ayudando a proteger mi aplicación Express.js para su implementación en producción.

Objetivo: Implementar un control de velocidad para evitar el uso indebido de la API en mis rutas.

Contexto: Mi aplicación utiliza Express.js con rutas de API en /api/. Ya he implementado la aplicación mediante Vercel.

Límite de la API por usuario: Límite de 5 solicitudes por minuto por usuario. Se devuelve el código de estado 429 con el mensaje «Demasiadas solicitudes. Por favor, espere un momento». 

Almacenamiento: Utiliza el almacenamiento en memoria para realizar un seguimiento de las solicitudes.

  1. Revisa el código generado. Esto es lo que se ha generado en nuestro archivo index.js .
				
					const RATE_LIMIT_WINDOW_MS = 60 * 1000
const RATE_LIMIT_MAX_REQUESTS = 5
const requestLog = new Map()

const getUserKey = (req) => {
  const forwardedFor = req.headers['x-forwarded-for']
  if (typeof forwardedFor === 'string' && forwardedFor.length > 0) {
    return forwardedFor.split(',')[0].trim()
  }

  return req.ip || req.socket?.remoteAddress || 'unknown-user'
}

const apiRateLimiter = (req, res, next) => {
  const now = Date.now()
  const userKey = getUserKey(req)
  const userTimestamps = requestLog.get(userKey) || []

  const validTimestamps = userTimestamps.filter(
    (timestamp) => now - timestamp < RATE_LIMIT_WINDOW_MS
  )

  if (validTimestamps.length >= RATE_LIMIT_MAX_REQUESTS) {
    const oldestTimestamp = validTimestamps[0]
    const retryAfterSeconds = Math.max(
      1,
      Math.ceil((RATE_LIMIT_WINDOW_MS - (now - oldestTimestamp)) / 1000)
    )

    return res
      .status(429)
      .set('Retry-After', String(retryAfterSeconds))
      .json({ error: 'Too many requests. Please wait a moment.' })
  }

  validTimestamps.push(now)
  requestLog.set(userKey, validTimestamps)
  next()
}

// Middleware
app.use(cors())
app.use(express.json())
app.use('/api', apiRateLimiter)

Deberías poder ver algunas líneas clave añadidas por Copilot. Los nombres exactos de las variables pueden variar, pero deberían ser algo así como:

  • Variable WINDOW_MS: para controlar la duración de la ventana de tiempo: 60 × 1000 = 60 000 milisegundos, lo que equivale a un minuto
  • Variable MAX_REQUESTS: para controlar el número de solicitudes permitidas por ventana. Para nuestra aplicación = 5
    Copilot puede generar estas variables como «limit» o «max» dependiendo de la versión de Express, pero ambas deberían funcionar.
  • Mensaje personalizado para cuando se alcanza el límite. Para nuestra aplicación = «Demasiadas solicitudes. Por favor, espera un momento».

Puedes probar el límite de solicitudes tanto en Codespaces como fusionando el código y probándolo después en producción. Dado que aún estamos validando la función, es mejor probarla en Codespaces. 

  1. Inicia tu aplicación en Codespaces (npm run dev) y visualízala en una pestaña del navegador. 
  2. Inicia sesión y ve a la función de IA.
  3. Pulsa el botón de la función de IA más de 20 veces seguidas.
  4. Cuando se alcance el límite, debería aparecer el mensaje «Demasiadas solicitudes. Por favor, espere un momento».
  5. Espera un momento y vuelve a intentarlo. Debería funcionar con normalidad.

Si el mensaje no aparece, puedes depurarlo en Copilot. 

NOTA: Vercel ejecuta tu backend como funciones sin servidor, por lo que el limitador de frecuencia en memoria se reinicia cada vez que se reinician las instancias. Esto es suficiente para el tráfico de un producto mínimo viable (MVP). Puede detectar abusos de tipo «disparo rápido», como cuando alguien hace clic en un botón 50 veces seguidas.

En Codespaces, los mensajes de error detallados te ayudan a depurar el código. En producción, esos mismos detalles revelan a un atacante cómo está estructurado tu código. 

Una gestión segura de los errores muestra a los usuarios un mensaje amable, al tiempo que registra los detalles técnicos en el servidor. No estás eliminando los mensajes de error, sino que simplemente los rediriges para que los atacantes no puedan verlos.

  1. Pide a Copilot que añada el manejo de excepciones con try/catch. Aquí tienes un ejemplo de solicitud:

Ayúdame a implementar un sistema de gestión de errores listo para producción en mi API de Express.js.

Sustituye los mensajes de error sin procesar por respuestas seguras y fáciles de entender.

Contexto: Mi aplicación llama a la API de Groq desde rutas de Express. En producción, no quiero que los usuarios vean trazas de pila ni detalles internos.

Envuelve los controladores de ruta en un bloque try/catch. Registra los errores completos con console.error() en el lado del servidor. Envía a los usuarios el mensaje «Ha surgido un problema. Inténtalo de nuevo». Haz que los errores de la API de Groq resulten útiles para el usuario sin mostrar detalles internos.

  1. Revisa el código generado.

    Deberías ver un bloque try/catch en el que el bloque catch registra el error completo con:

    1. console.error() (solo en el lado del servidor)
    2. un mensaje genérico para el usuario.

En cambio, los errores conocidos, como los fallos de las API de Groq o Gemini, generan mensajes específicos y útiles.

Dado que utilizamos los secretos de CodeSpace para todas nuestras claves API, realizaremos una modificación directa en nuestro código.

  1. Busca el código del servidor que llama a la API de Groq (u otro modelo de lenguaje grande). 
  2. Cambia GROQ_API_KEY (o la variable equivalente) por GROQ_APIKEY. 
  3. Prueba la función de IA.
  4. Deberías ver un mensaje de error indicando que la API ha fallado. NO deberías ver un seguimiento de la pila.
  5. Comprueba tu terminal. Allí deberían aparecer todos los detalles del error.
  6. Vuelve a cambiar el código a GROQ_API_KEY y vuelve a intentarlo para comprobar si vuelve a funcionar.
  1. En tu Codespace, guarda los cambios relacionados con la limitación de velocidad y la gestión de errores con un mensaje descriptivo.
  2. Envía los cambios a tu rama «add-security ».
  3. Ve a GitHub. Deberías ver un banner que te sugiere crear una solicitud de incorporación de cambios.
  4. Haz clic en «Comparar y enviar solicitud de incorporación de cambios».
  5. Añade un título que describa los cambios que has realizado (por ejemplo, «Añadir limitación de velocidad y gestión segura de errores»).
  6. Haz clic en «Crear solicitud de incorporación de cambios».
  7. Revisa los cambios, haz clic en «Combinar solicitud de incorporación de cambios » y confirma.
  8. Ve al panel de control de Vercel. Deberías ver cómo se está creando automáticamente una nueva implementación.

Una vez finalizada la implementación, compruébalo en tu URL de producción.

  1. Inicia sesión y utiliza la función de IA como de costumbre. Debería funcionar.
  2. Haz clic rápidamente en la función de IA más de 20 veces. Al final debería aparecer el mensaje «Demasiadas solicitudes».
  3. Espera un momento, inténtalo de nuevo. Debería funcionar con normalidad.

Solución de problemas

A continuación, te indicamos algunos problemas que pueden surgir al implementar medidas de seguridad en tu aplicación. Haz clic en cada uno de ellos para ver cómo puedes resolverlos.

Asegúrate de que el middleware se aplique a las rutas de tu API, y no solo a las rutas de archivos estáticos. El middleware «express-rate-limit» debe añadirse antes de los controladores de rutas.

Ejecuta «npm install express-rate-limit» en el terminal de tu Codespace y sube los archivos «package.json» y «package-lock.json» actualizados.

Las funciones sin servidor pueden reiniciarse entre una solicitud y otra. El limitador de frecuencia sigue funcionando para evitar el abuso por solicitudes en ráfaga (muchas solicitudes seguidas en poco tiempo). Este es el comportamiento esperado para un MVP.

Asegúrate de que tu bloque de captura envía un mensaje genérico a `res.json() ` y registra el error completo con `console.error()`. Comprueba que no haya otro controlador de errores que anule el tuyo.

Supervisión de tu aplicación

Tu aplicación ya está implementada y protegida. Antes de compartir tu URL con todo el mundo, tienes que hacer dos cosas más:

  1. Configura el sistema de seguimiento para poder ver qué ocurre tras el lanzamiento
  2. Comprueba que tu sistema de seguridad funciona realmente. No des por sentado que es así.

Las llamadas a la IA se diferencian de las solicitudes API habituales porque tienen un coste por llamada, duran un tiempo variable y pueden generar resultados inesperados. Un registro estándar que indique que «la solicitud se ha realizado correctamente» no te dice si la respuesta de la IA fue útil, cuánto tiempo esperó el usuario ni cuánto costó la llamada. El registro estructurado recoge estos detalles para que puedas responder a esas preguntas desde tu panel de control de Vercel.

Panel de control de Vercel 

El panel de control de Vercel te permite conocer el rendimiento de tu aplicación en producción. Accede a tu proyecto en vercel.com y explora estas tres secciones.

Cada implementación aparece en la lista con una marca de tiempo y un estado (correcta o fallida). Haz clic en cualquier implementación para ver el registro de compilación completo. Aquí es donde se depuran los errores de implementación. Si una compilación ha fallado, los registros te indicarán el motivo.

vercel deployment panel

Los registros del lado del servidor se muestran aquí en tiempo real. Estos muestran las solicitudes a las rutas de tu API, incluyendo la salida de la consola y los errores.

Haz clic en cualquier entrada del registro para ver los detalles: la URL de la solicitud, el código de estado de la respuesta y el tiempo de ejecución. Utiliza los filtros de la izquierda para filtrar por código de estado (buscar todos los errores 500), por ruta (ver solo las solicitudes de IA) o por intervalo de tiempo.

También puedes hacer clic en el botón «En directo» para ver los registros en tiempo real. Esto resulta útil cuando estás probando tu aplicación y quieres ver qué ocurre en el servidor a medida que haces clic.

Conservación de registros: A partir de febrero de 2026, los registros de ejecución estarán disponibles durante aproximadamente una hora en el plan Hobby (gratuito). Este tiempo es suficiente para realizar pruebas y depurar, pero los registros ya no estarán disponibles al día siguiente. Comprueba la pestaña «Registros» poco después de probar tu función de IA. 

vercel logs panel

La sección «Observabilidad» va más allá de los registros individuales y te muestra patrones en todas tus solicitudes: qué rutas son las más lentas, cuáles tienen las tasas de error más altas y cómo evoluciona el rendimiento de tu función con el tiempo.

Esta pestaña está disponible en todos los planes, incluido el plan gratuito Hobby. 

Los planes Observability Pro y Plus permiten realizar consultas personalizadas y recibir alertas de anomalías.
No lo necesitas para tu MVP; las vistas predeterminadas son suficientes. 

Vercel realiza un seguimiento de los siguientes tipos de eventos para la observabilidad:

  • Solicitudes de Edge
  • Llamadas a funciones en Vercel
  • Solicitudes a API externas
  • Enrutamiento de llamadas al middleware
  • Solicitudes de AI Gateway
vercel observability panel
ACTIVIDAD 5

Supervisar, verificar y poner en marcha

Tiempo estimado: 25 minutos

  1. Ve a GitHub y busca tu repositorio MVP
  2. Haz clic en el menú desplegable principal situado en la parte superior izquierda del repositorio y consulta todas las ramas.
  3. Crea una nueva rama.
  4. Póngele el nombre que quieras: «add-monitoring»(o cualquier otro nombre descriptivo).
  5. Crea un nuevo Codespace para esta rama y ábrelo.

Lo primero que hay que saber sobre las llamadas de IA en producción es cuánto tardan. Un usuario que tenga que esperar 15 segundos podría pensar que la aplicación no funciona.

Pídele a Copilot que te ayude a añadir el contenedor de temporización.

Quiero añadir supervisión a mi ruta de IA en Express.js.

Quiero hacer un seguimiento del tiempo que tarda cada llamada a la API de Groq en el entorno de producción.

Mi ruta de IA se encuentra en [index.js] y llama a la API de Groq. La estoy publicando en Vercel.

Registra Date.now() antes y después de la llamada a la IA. Calcula el tiempo de respuesta en milisegundos. Regístralo con console.log() incluyendo el nombre de la ruta.

  1. Inicia tu aplicación en Codespaces y activa una llamada de IA.
  2. Comprueba el registro del tiempo de respuesta en la salida del terminal.
  3. No realices la implementación todavía. En el siguiente paso añadirás más registros y realizarás la implementación de una sola vez.

Ahora amplía tu código de sincronización para obtener una visión completa. Los registros estructurados utilizan el formato JSON, lo que te permite buscarlos y filtrarlos en el panel de control de Vercel. Pide a Copilot que genere el código necesario.

Sustituir el comando básico `console.log` por registros JSON estructurados que pueda consultar en el panel de control de Vercel.

Ya tengo un envoltorio de tiempo que mide el tiempo de respuesta de mi llamada a la API de Groq.

Registra un objeto JSON por cada llamada a la IA utilizando console.log(JSON.stringify(data)) con:
(marca de tiempo, ISO),
(nombre de la acción),
(longitud de la entrada, número de caracteres, no el contenido),
(tiempo de respuesta, en milisegundos),
(éxito, true/false),
(error, mensaje o null)

Ejemplo (para TutorMatch): 

Cuando un estudiante recomendaciones de tutores, el registro podría tener este aspecto. Tu aplicación tendrá nombres de acciones diferentes. Adáptalos a las funciones de tu IA.

				
					{
  "timestamp": "2026-02-16T14:32:01Z",
  "action": "get_tutor_recommendations",
  "inputLength": 145,
  "responseTime": 2340,
  "success": true,
  "error": null
}

Cada campo tiene una función específica:

  • marca de tiempo: permite relacionar los problemas comunicados por los usuarios («se estropeó a las 15:00») con lo que ocurrió en los registros
  • acción: muestra qué funciones de IA se utilizan más y cuáles se ignoran
  • inputLength: las entradas inusualmente largas pueden indicar un uso indebido. El registro de la longitud (no del contenido) protege la privacidad del usuario.
  • responseTime: te ayuda a detectar problemas de rendimiento antes de que los usuarios se quejen. Si los tiempos superan los 10 segundos de forma habitual, puede que sea necesario prestar atención a este aspecto.
  • Éxito: te indica de un vistazo la tasa de fallos de tu IA. Un 5 % es normal, un 50 % supone una crisis.
  • error: cuando las llamadas fallan, el mensaje de error te indica el motivo sin necesidad de reproducir el problema
  1. Vuelve a ejecutar tu aplicación en Codespace.
  2. Iniciar una llamada de IA.
  3. Comprueba el registro JSON en la terminal.

Ahora confirma y despliega los cambios tanto en la sincronización como en el registro estructurado a la vez:

  1. Guarda los cambios en el registro con un mensaje descriptivo.
  2. Envía los cambios a tu rama de seguimiento de anuncios.
  3. Ve a GitHub. Deberías ver un banner que te sugiere crear una solicitud de incorporación de cambios.
  4. Haz clic en «Comparar y enviar solicitud de incorporación de cambios».
  5. Añade un título que describa los cambios que has realizado.
  6. Haz clic en «Crear solicitud de incorporación de cambios».
  7. Revisa los cambios, haz clic en «Combinar solicitud de incorporación de cambios » y confirma.
  8. Ve al panel de control de Vercel y comprueba que se ha iniciado una nueva implementación en la pestaña «Implementaciones».
  9. Una vez finalizada la implementación, abre tu aplicación en producción, inicia sesión y realiza 2 o 3 llamadas a la IA.
  10. Ve a Vercel → Registros y busca tus entradas JSON estructuradas
  11. Comprueba que los campos «timestamp», «action», «responseTime» y «success» se muestren correctamente
  12. Cada entrada del registro debe aparecer en forma de filas. Haz clic en la flecha para desplegar y ver los campos JSON.
  13. Si ves [Object object] en lugar de JSON, modifica tu código para utilizar console.log(JSON.stringify(logData)) en lugar de console.log(logData).

Recuerda que, en el plan gratuito, los registros están disponibles durante aproximadamente una hora, así que revísalos poco después de realizar la prueba.

Vercel ofrece un servicio gratuito de análisis web que registra las visitas a las páginas y los datos de los visitantes. La configuración solo lleva unos minutos y te proporciona métricas reales sobre los visitantes que puedes utilizar como referencia en la presentación de tu proyecto.

  1. Ve al panel de control de tu proyecto de Vercel
  2. Haz clic en la pestaña «Analytics ».
  3. Haz clic en «Habilitar» para la analítica web.
  1. Si aún conservas tu rama de seguimiento de adiciones, abre el espacio de código asociado. De lo contrario, crea una nueva rama en tu repositorio y abre un nuevo espacio de código.
  2. En tu codespace, instala el paquete de análisis ejecutando «npm install @vercel/analytics » en la terminal.
  3. Añade el componente de análisis a tu aplicación.
    • Si estás utilizando React o Next.js,
      • Añade la importación `import { Analytics } from '@vercel/analytics/react'` al archivo App.jsx
      • Add <Analytics /> as a component inside your App.jsx return, typically just before the closing tag.
    • Para aplicaciones sencillas de HTML/JS, sigue las instrucciones que muestra Vercel tras hacer clic en «Habilitar» en la sección«
      Commit».
  4. Guarda, envía y fusiona tus cambios. La próxima implementación comenzará a recopilar datos.

Nota: No basta con activar Analytics en el panel de control. También necesitas el paquete @vercel/analytics en tu código para que los datos se transmitan. Si te saltas los pasos 3 y 4, la pestaña «Analytics» permanecerá vacía.

El plan Hobby incluye 2.500 eventos al mes de forma gratuita (a fecha de febrero de 2026), más que suficiente para un MVP. Una vez configurado, podrás ver cuántas personas visitan tu aplicación, qué páginas consultan y de dónde proceden.

Ahora utiliza DevTools para comprobar que tu aplicación de producción es realmente segura. No des por sentado que lo es.

  1. Abre en el navegador tu aplicación desplegada (la URL .vercel.app, no tu Codespace).
  2. Pulsa F12 para abrir DevTools (o haz clic con el botón derecho del ratón y selecciona «Inspeccionar»).
  3. Ve a la pestaña «Red ».
  4. Borra el registro de red (haz clic en el icono de borrar).
  5. Inicia sesión en tu aplicación y utiliza la función de IA.
  6. Observa cómo aparecen las solicitudes de red.

Comprueba cada uno de los siguientes puntos. Estas son las tres comprobaciones de seguridad que toda aplicación implementada debe superar.

Comprobación 1: ¿Tienes ocultas tus claves API?

Haz clic en la solicitud que activa tu función de IA.

  1. La URL de la solicitud debe dirigir a TU servidor: https://your-app.vercel.app/api/ai-query. NO debe dirigirse directamente a api.groq.com ni a ninguna API externa. Si lo hace, significa que tu interfaz está llamando directamente a la API de IA y tu clave API podría quedar expuesta.
  2. Haz clic en la pestaña «Encabezados» y comprueba los encabezados de la solicitud. Tu clave API de Groq NO debería aparecer en ningún encabezado. Tu backend realiza la llamada externa del lado del servidor. El navegador nunca ve la clave.
  3. Comprueba los parámetros de consulta de la URL. No debería aparecer «?key=AIza…» en la URL.

Si tu clave API aparece en cualquier parte de la solicitud del navegador, detente. Tu clave está expuesta y cualquiera que inspeccione tu sitio web puede robarla. Vuelve a tu código y asegúrate de que todas las llamadas a la API externas se realicen en el lado del servidor.

En la misma solicitud, vuelve a mirar los encabezados de la solicitud. Deberías ver:

Autorización: Bearer eyJhbGciOiJIUzI1NiIs…

Este es el token de sesión de Supabase que envía tu interfaz de usuario. Demuestra que la solicitud procede de un usuario que ha iniciado sesión. La larga cadena de caracteres es un token web JSON (JWT), un formato estándar para transmitir información de autenticación de forma segura.

Si falta el encabezado «Authorization», vuelve a tu código de autenticación y comprueba que tu interfaz de usuario esté llamando a `getSession()` e incluyendo el token en cada solicitud de API.

  1. Mantén abiertos los DevTools en la pestaña «Red».
  2. Pulsa rápidamente el botón de la función de IA más de 10 veces.
  3. Fíjate en la pestaña «Red»: las primeras solicitudes deberían devolver el código de estado 200 (éxito).
  4. Una vez alcanzado el límite, las solicitudes deben devolver el código de estado 429 (Demasiadas solicitudes).
  5. Tu aplicación debería mostrar el mensaje «Demasiadas solicitudes. Por favor, espera un momento».

Si las más de 20 solicitudes devuelven un código 200 sin limitación de frecuencia, es posible que la función sin servidor se haya reiniciado entre una solicitud y otra. Intenta hacer clic más rápido. El limitador de frecuencia funciona mejor contra ráfagas de solicitudes muy rápidas. Para un MVP, este nivel de protección es adecuado.

Revisión de los costes de producción

Tu aplicación utiliza servicios que ofrecen planes gratuitos con límites. Conocer esos límites te evita cargos inesperados.

Configura alertas de facturación cuando sea posible. Algunos planes gratuitos no te permiten configurar alertas hasta que te pases a un plan de pago.

Vercel

Nivel gratuito – 100 GB de ancho de banda, 4 horas de CPU activa, 1 millón de invocaciones de funciones al mes

Coste – Si se superan los límites de ancho de banda o de funciones

Dónde consultarlo – Panel de control de Vercel → Uso

Aviso de facturación – Proyecto → Configuración → Uso. Revisa los límites del plan Hobby. Vercel te avisa cuando te acercas a ellos.

Supabase

Nivel gratuito – base de datos de 500 MB, 1 GB de almacenamiento de archivos, 50 000 usuarios activos al mes

Coste – Si se superan los límites de almacenamiento o de usuarios

Dónde consultarlo: Panel de control de Supabase → Configuración → Facturación

Alerta de facturación –Ve a Configuración → Facturación. Configura alertas de uso para la base de datos y el almacenamiento.

API de Groq

Nivel gratuito – Nivel gratuito con límites de velocidad (varía según el modelo)

Coste – Gran volumen de llamadas a la API más allá del nivel gratuito

Dónde consultar – Panel de control de Groq → Uso

Aviso de facturación – Ve a Configuración → Facturación → Límites en tu consola de Groq.

Lista de comprobación previa al lanzamiento

Antes de lanzar tu aplicación al mercado, revisa esta lista de comprobación. Se divide en tres apartados: si tu aplicación funciona, si es segura y si puedes ver qué ocurre tras su lanzamiento.

✅ ¿Funciona?

  •  La URL activa se carga correctamente
  •  Funciones de inicio de sesión y registro (crear cuenta, iniciar sesión, cerrar sesión)
  •  La función de IA está disponible en el entorno de producción tras iniciar sesión
  •  La aplicación funciona en otro dispositivo o navegador (comparte la URL con un compañero para comprobarlo)

✅ ¿Es seguro?

  •  Las claves API NO se ven en la pestaña «Red» de DevTools
  •  Las solicitudes de API incluyen un encabezado de autorización 
  •  Se activan los mecanismos de limitación de velocidad tras una serie de solicitudes rápidas 
  •  Las variables de entorno se configuran en Vercel, no se incluyen de forma fija en el código

✅ ¿Te das cuenta de lo que está pasando?

  •  Los registros JSON estructurados aparecen en la pestaña «Vercel Logs» cuando se activa una llamada a la IA
  •  Analítica web activada
  •  Se han comprobado los paneles de control de costes de Vercel, Supabase y Groq

Si hay algún elemento que no funciona, arréglalo antes de compartir tu URL.

Si todos los elementos superan la comprobación, tu aplicación está lista para compartir.

Solución de problemas

Asegúrate de utilizar `console.log()` en las rutas de tu API del lado del servidor, y no en el código del lado del cliente. Los registros del lado del cliente se muestran en el navegador, no en Vercel.

Utiliza `console.log(JSON.stringify(logData))` en lugar de `console.log(logData)`.

Comprueba el tiempo de respuesta en tus registros. Si supera constantemente los 10 segundos, plantéate añadir un mensaje de carga y dividir la solicitud,

Con Fluid Compute (activado de forma predeterminada en los proyectos nuevos), las funciones pueden ejecutarse hasta 300 segundos (5 minutos) en el plan Hobby. Sin Fluid Compute, el límite es de 60 segundos. Si tus llamadas de IA siguen agotando el tiempo de espera, añade un indicador de carga y un mensaje de tiempo de espera para el usuario.

Tu interfaz de usuario está llamando directamente a la API externa en lugar de pasar por el servidor. Actualiza tu interfaz de usuario para que llame a tu ruta Express (por ejemplo, /api/ai-query).

Los datos aparecerán tras la próxima actualización y unas cuantas visitas a la página. Espera unos minutos después de habilitar la función y visitar tu sitio web.

Tu aplicación ya está disponible en your-app-name.vercel.app. Esto sirve para concursos, pruebas de usuario y presentaciones. Pero si quieres que tu aplicación dé la sensación de ser un negocio de verdad, un dominio personalizado marca la diferencia. tutormatch.app transmite profesionalidad de una forma que tutormatch-mvp.vercel.app no consigue.

El plan gratuito de Vercel admite dominios personalizados sin coste adicional (hasta 50 por proyecto, con HTTPS automático). El único coste es el del propio nombre de dominio.

ACTIVIDAD 6

(OPCIONAL) - Conectar un dominio personalizado

Tiempo estimado: 15 minutos

Elige una de estas opciones para conseguir tu propio dominio.

Opción

Coste

Proceso

Paquete estudiante de GitHub para estudiante

Registrador de dominios

Si tienes una dirección de correo electrónico de tu centro educativo, puedes registrarte a través de tu cuenta de GitHub. Solicítalo en education.github.com/pack. Incluye dominios gratuitos de Namecheap (.me), Name.com (.live, .studio, .app, .dev y más de 20 dominios adicionales), así como dominios .tech.

Paquete estudiante de GitHub para estudiante

~10-15 dólares al año

Compra en Namecheap, Cloudflare o Google Domains. Los precios varían según la extensión. El dominio .com cuesta más que el .site o el .tech

Compra en Namecheap, Cloudflare o Google Domains. Los precios varían según la extensión. El dominio .com cuesta más que el .site o el .tech

~Entre 10 y 20 dólares al año

Busca y compra directamente desde tu panel de control de Vercel (Configuración → Dominios). Vercel configura el DNS automáticamente. Es la opción más sencilla si estás dispuesto a pagar.

  1. Ve a tu proyecto de Vercel → Configuración → Dominios
  2. Haz clic en «Añadir dominio » y escribe tu nombre de dominio (por ejemplo, tutormatch.app)
  3. Vercel muestra los registros DNS que necesitas. Verás una de estas dos opciones:
    • Un registro A que apunte a la dirección IP de Vercel (para dominios raíz como tutormatch.app).
    • Un registro CNAME que apunte a cname.vercel-dns.com (para subdominios como www.tutormatch.app).
  4. Ve a la configuración de DNS de tu registrador de dominios y añade los registros que te ha facilitado Vercel.
  5. Espera a que se actualice el DNS. Normalmente tarda menos de 30 minutos, pero puede llegar a tardar hasta 48 horas.

No te saltes este paso. Si lo haces, el inicio de sesión dejará de funcionar en tu dominio personalizado.

  1. Ve al panel de control de Supabase → Autenticación → Configuración de URL.
  2. Añade la URL de tu dominio personalizado (por ejemplo, https://tutormatch.app) tanto en el campo «URL del sitio » como en el de «URL de redireccionamiento».
  3. Añade también tu URL .vercel.app a la lista. Sigue sirviendo como copia de seguridad.
  1. Accede a tu dominio personalizado en un navegador. La aplicación debería cargarse mediante HTTPS (fíjate en el icono del candado).
  2. Intenta iniciar sesión. Si te redirige a la URL de Codespaces o a la URL de .vercel.app, es que te has saltado el paso 3.
  3. Prueba tu función de IA (y otras integraciones de API) para asegurarte de que todo funciona correctamente de principio a fin.

Solución de problemas

Comprueba de nuevo el registro A o el registro CNAME en la configuración de DNS de tu proveedor de registro. Asegúrate de haber copiado los valores de Vercel tal y como aparecen.

Espera. Vercel configura el SSL automáticamente una vez que se propaga el DNS, pero esto puede tardar hasta una hora.

Actualiza las URL de redireccionamiento de Supabase Auth para incluir tu dominio personalizado. Mantén tanto las URL de .vercel.app como las de tu dominio personalizado en la lista.

Reflexión

¡Bueno, lo has conseguido! ¡Tu aplicación ya está implementada y en funcionamiento! ¡Enhorabuena! Tómate unos minutos para reflexionar sobre estas preguntas:

Sunset and reflection over lake
01 Supervisión de

¿Cómo cambia tu forma de ver los errores, el rendimiento y los costes al saber que tu aplicación ya está en funcionamiento? ¿Qué es lo que supervisarías más de cerca durante la primera semana?
02

El viaje
Empezaste con una idea, creaste un prototipo, lo programaste y lo depuraste, lo protegiste con un sistema de autenticación y ahora lo has lanzado al mundo. ¿Qué habilidad de este proceso te ha sorprendido más?
03

Próximos pasos
¿A qué vas a dar prioridad ahora? ¿A nuevas funciones, a mejorar las respuestas de la IA, a mejorar el rendimiento o a las campañas de marketing dirigidas a los usuarios?

Términos clave

  • Implementación: poner tu aplicación a disposición en Internet mediante una URL permanente. A diferencia de un enlace de vista previa, una aplicación implementada permanece activa incluso cuando tu ordenador está apagado.
  • Entorno de producción: la versión activa de tu aplicación con la que interactúan los usuarios reales, a diferencia del entorno de desarrollo, donde se escribe y se prueba el código.
  • Variables de entorno (producción): las claves API y los secretos se almacenan en la configuración de tu plataforma de alojamiento, en lugar de en el código. En Vercel, se configuran en el panel de control del proyecto.
  • Implementación automática: Vercel vuelve a compilar y reimplementa automáticamente tu aplicación cada vez que envías código a tu rama principal en GitHub.
  • Limitación de solicitudes: restricción del número de solicitudes que un usuario puede realizar en un periodo de tiempo determinado. Evita el uso indebido y controla los costes de la API. 
  • Gestión segura de errores: se muestran a los usuarios mensajes de error genéricos y comprensibles, al tiempo que se registran todos los detalles técnicos en el servidor. De este modo, se evita que los detalles internos queden expuestos a posibles atacantes.
  • Registro estructurado: registro de eventos en tu aplicación en formato JSON organizado, en lugar de texto sin formato. Permite buscar, filtrar y analizar lo que ocurre en el entorno de producción.
  • Observabilidad: la capacidad de comprender lo que ocurre en el interior de una aplicación en ejecución desde el exterior, a través de registros, métricas y paneles de supervisión.
  • Funciones sin servidor: código de backend que se ejecuta bajo demanda en respuesta a las solicitudes, sin que tengas que gestionar un servidor. Vercel convierte automáticamente tus rutas de API de Express.js en funciones sin servidor.
  • Dominio personalizado: una dirección web personalizada (como tutormatch.app) de la que eres propietario y que redirige a tu implementación de Vercel, sustituyendo a la URL predeterminada .vercel.app.
  • DNS (Sistema de Nombres de Dominio): el sistema que traduce los nombres de dominio (como tutormatch.app) a direcciones IP que utilizan los ordenadores para localizar servidores. Cuando conectas un dominio personalizado, configuras los registros DNS para que apunten a Vercel.

Recursos adicionales

Implementación

Seguridad

Seguimiento

Gestión de costes

 

Contenido de la lección
cuestionario anterior
Volver al curso
Siguiente cuestionario