Implementación e iteración

  • Implementa tu MVP en una URL de producción activa utilizando Vercel.
  • Añade limitación de velocidad para proteger tus rutas API contra el uso indebido.
  • Configure el registro estructurado para supervisar sus funciones de IA tras el lanzamiento.
  • Verifica la seguridad de tu aplicación con DevTools.
  • Evalúa la preparación de tu aplicación para la producción utilizando una lista de verificación previa al lanzamiento.
  • Aplicación de producción en vivo: tu MVP implementado en una URL HTTPS pública que cualquiera puede visitar.
  • Un MVP depurado y probado en un repositorio GitHub.
  • Autenticación de usuarios con inicio de sesión, registro y protección de rutas API. 
  • Un proyecto Supabase con almacenamiento configurado 
  • Pruebas de usuario con retroalimentación en tu aplicación.

De MVP a 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 ahora mismo, solo pueden usarla las personas que tienen tu enlace de vista previa de Codespaces, y ese enlace desaparece cuando tu Codespace deja de funcionar.

Esta unidad lleva tu aplicación MVP de «funciona en mi ordenador» a «cualquier persona 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 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.

Persistencia

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

Costo

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

Elección de una plataforma de implementación

Ha estado ejecutando su aplicación en Codespaces, un entorno de desarrollo al que solo usted puede acceder. En esta actividad, la implementará en Vercel, una plataforma que aloja aplicaciones web y le proporciona una URL pública permanente.

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

Plataforma

Complejidad de la configuración

Nivel gratuito

Ideal para

Vercel

Simple (se conecta a GitHub)

100 GB de ancho de banda, 100 horas sin servidor

Aplicaciones React/Next.js con rutas API

Implementación de Google AI Studio

Muy sencillo (con un solo clic)

Requiere facturación de Google Cloud (300 $ de crédito gratuito para nuevos usuarios).

Aplicaciones creadas íntegramente en AI Studio

Adorable / Bolt

Simple (alojamiento integrado)

Limitado, varía según la plataforma.

Prototipos rápidos sin GitHub

Netlify

Simple (se conecta a GitHub)

100 GB de ancho de banda

Sitios estáticos, backends más sencillos

Ferrocarril / Render

Medio

Nivel gratuito limitado

Aplicaciones full-stack con bases de datos

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

Para la mayoría de vosotros, youapp tiene un backend, y Vercel lo gestiona bien. Su MVP no es solo un conjunto de páginas estáticas, sino que tiene rutas API del lado del servidor que llaman a Groq u otras API LLM, se conectan a Supabase y posiblemente llaman a otras API. Las funciones sin servidor de Vercel gestionan el código backend automáticamente. Plataformas como Netlify funcionan bien para aplicaciones más sencillas, pero requieren más 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 lo vuelve a implementar automáticamente cada vez que envías cambios, el mismo flujo de trabajo de Git que has estado utilizando a lo largo de este programa.

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

Vercel gestiona automáticamente la configuración de producción y la seguridad. Hay muchos aspectos de la implementación que requieren una configuración significativa. Vercel gestiona automáticamente una buena parte de estos 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, se implementan automáticamente al pulsar y ofrecen generosos niveles gratuitos. La diferencia es que Vercel gestiona las rutas API backend de forma inmediata, mientras que Netlify requiere que reestructures el código de tu servidor en su formato específico «Netlify Functions». Para tu aplicación MVP, Vercel es la opción más sencilla y también la más completa.

¿Qué pasa si mi aplicación utiliza otros marcos?

Next.js: Si tu aplicación es un proyecto Next.js, Vercel fue creado por los creadores 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é activa en su infraestructura. Pregunta a tu coach si es mejor migrar a Vercel o permanecer en el alojamiento integrado de la plataforma.

Python (Flask, Streamlit, FastAPI): El nivel gratuito de Vercel no admite backends de Python. Pregunta a tu tutor sobre Railway o Render como plataformas alternativas. Railway (railway.app) ofrece un nivel 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.

Qué gestiona Vercel

Vercel se encarga automáticamente de gran parte del trabajo pesado relacionado con la infraestructura. A continuación se detallan las responsabilidades:

VERCEL

  • Mantenga su aplicación segura con HTTPS (conexiones cifradas)
  • Bloqueo del tráfico malicioso antes de que llegue a su aplicación
  • Hacer que tu aplicación sea rápida para los usuarios de todo el mundo
  • Mantener tu aplicación funcionando las 24 horas del día, los 7 días de la semana, sin necesidad de 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.
  • Mostrando mensajes de error amigables. Sin esto, los usuarios ven errores técnicos confusos cuando algo falla.
  •  

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

  1. Servidor frontend, probablemente React
  2. Servidor backend, probablemente Express.

Esta es una configuración de desarrollo normal que funciona bien para la compilación y la depuración.

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

  1. Tus archivos frontend (HTML, CSS, JavaScript de npm run build) son servidos por 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 su 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 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 para cada solicitud.

Para que esto funcione, Vercel necesita que tu aplicación Express se exporte desde el archivo y se coloque donde Vercel pueda encontrarla. Lo configurarás 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. Estás añadiendo una capa de configuración de implementación, no reescribiendo tu aplicación.

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

ACTIVIDAD 1

Prepárese para implementar su aplicación con Vercel

Tiempo estimado: 30 minutos

  1. Ve a GitHub y navega hasta tu repositorio MVP.
  2. Debes fusionar todo tu trabajo de las unidades anteriores en la rama principal antes de realizar la implementación. Fusiona todas las ramas abiertas y confirmadas. 
  3. Asegúrate de estar en la rama principal.
  4. Haga clic en Códigoy, a continuación, haga clic en Crear espacio de código en la rama principal si no tiene un espacio de código para su rama principal. Es posible que ya tenga un espacio de código para otras ramas, pero abra uno nuevo desde la rama principal.
  5. Espera a que se cargue el entorno Codespace.

NOTA: En el pasado, hemos realizado explícitamente cualquier actualización de nuestro repositorio en una nueva rama. La actualización de la rama principal aquí es intencionada porque Vercel supervisa la rama principal para las implementaciones automáticas, y ese trabajo preparatorio realizado directamente en la rama principal es aceptable en este caso específico, ya que no estamos cambiando la lógica de la aplicación, solo añadiendo archivos de configuración.

JavaScript tiene dos sistemas diferentes 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 ahora es el enfoque recomendado.
El código de exportación en su servidor Express debe coincidir con el sistema que utilice su proyecto: export default app para ES Modules o module.exports = app para CommonJS. Si utiliza el incorrecto, se interrumpirá la implementación.

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

Así es como se puede saber:

  1. Comprueba tu package.json este campo: json”type”: “module”
    Si esa línea está presente, estás utilizando módulos ES.
  2. Si no aparece o dice «tipo»: «commonjs», estás utilizandoCommonJS.
  3. Otra forma de comprobarlo es mediante las declaraciones de importación en la parte superior de servidor.js.
    • Los módulos ES tienen el siguiente aspecto:
      import express from ‘express’
      import dotenv from ‘dotenv’
    • CommonJS tiene el siguiente aspecto:
      const express = require(‘express’)
      const dotenv = require(‘dotenv’)
  4. Probablemente también haya una declaración de exportación al final de tu código:
    • Módulos ES:
      export default app
      CommonJS:
      module.exports = app

Comprueba y anota qué norma estás utilizando.

Como probablemente hayas estado ejecutando tu aplicación en el entorno GitHub Codespace, es probable que tenga dos procesos separados para el frontend y el backend. 

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

Vercel necesita una estructura diferente.

  • sirve tus archivos frontend compilados desde una CDN.
  • ejecuta tus rutas 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 permanece igual.

Abre Copilot Chat en tu espacio de código y utiliza un comando similar a este:

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

Objetivo: Configurar mi proyecto para que Vercel pueda servir el frontend y ejecutar las rutas 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 React con Vite (npm run dev). La terminal 2 ejecuta el backend Express (npm run dev) en un puerto independiente.

Estoy implementando en Vercel, que sirve archivos estáticos desde el resultado de la compilación y convierte Express en una función sin servidor.

Realice los siguientes 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: [if ES_MODULES: export default app o COMMONJS: module.exports = app]. Mantén el app.listen() existente para el desarrollo local.
  1. VERCEL CONFIG: Cree un archivo vercel.json en la raíz del proyecto con:

   {

     «rewrites»: [

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

     ]

   }

  1. PACKAGE.JSON: Asegúrate de que existen estos scripts:
    • «dev» debe ejecutar tanto el frontend como el backend para el desarrollo local (se puede utilizar 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 frontend las URL codificadas 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. PROXY DE VITE: 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 }

     }

   }

Por cada actualización, muéstrame lo que has cambiado.

  1. Revisa lo que genera Copilot. A continuación se explica qué hace cada cambio y por qué es importante.

Vercel busca funciones sin servidor en el 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.

Tu línea app.listen() permanece: Vercel la ignora en producción, pero aún la necesitas para el desarrollo local en Codespaces.

Tu archivo de servidor debería terminar con algo como:

				
					// 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 le indica a Vercel cómo enrutar las solicitudes. Todas las solicitudes a /api/* se dirigen a tu aplicación Express. Todo lo demás se dirige a los archivos frontend creados. El archivo completo tiene solo 5 líneas.

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

Si tu interfaz tiene fetch(‘http://localhost:3000/api/recommendations’), esto no funcionará en Vercel porque no hay 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.

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

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

Hay varios cambios que deben realizarse en el archivo package.json.

  • scripts — La ruta del script del servidor se actualiza desde servidor/servidor.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 anteriormente se encontraban en server/package.json deben trasladarse al paquete raíz package.json , ya que ya no existe un paquete de servidor independiente.
  • «tipo»: «módulo» — puede haber sido añadido o ya estaba 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"
},

Tenga en cuenta la línea «build:». Esto puede cambiar, dependiendo de su configuración:

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

 

Esto es lo que GitHub Copilot nos mostró que hizo:

Te ayudaré a preparar tu aplicación Express.js + React para su implementación en Vercel. Empezaré por explorar la estructura de tu proyecto para comprender la 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 5 cambios necesarios ya están implementados!

Resumen de la configuración actual ✅

1. ARCHIVO DEL SERVIDOR ✅

Tu index.js está correctamente configurado:

  • Ubicado en el directorio api/, tal y como lo requiere Vercel.
  • Hasta ahora exporta la aplicación con la aplicación de exportación predeterminada (módulos ES).
  • Incluye app.listen(PORT) para 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á configurado correctamente:

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

3. PAQUETE.JSON ✅

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

  • ✅ El script «dev» se utiliza simultáneamente para ejecutar tanto el backend como el frontend.
  • ✅ «build» está configurado como «vite build» para el frontend de React.
  • ✅ El campo «motores» requiere un nodo >= 18.0.0.
  • ✅ Todas las dependencias del backend (express, cors, dotenv, @google/genai) se encuentran en el archivo root package.json.
  • ✅ concurrently está correctamente configurado para ejecutar npm run server y npm run client juntos.

4. COMPROBACIÓN DE URL ✅

No se han encontrado URL codificadas. Tu interfaz utiliza correctamente:

5. PROXY VITE ✅

Tu vite.config.ts tiene el proxy configurado:

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

Qué significa esto

¡Tu proyecto está listo para implementarse en Vercel ahora mismo! Cuando lo envíes a Vercel:

  1. Vite integrará tu interfaz React en /dist.
  2. Vercel 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 las llamadas a la API de Gemini funcionarán a la perfección.

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

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

  1. Comprueba tu código en busca de todas tus variables VITE. Estas deberían estar en tu raíz .env en tu espacio de código de desarrollo.
  2. Añadir un archivo .env a la carpeta raíz y vuelve a añadir esos archivos. En nuestro caso, eran:
				
					VITE_SUPABASE_URL=
VITE_SUPABASE_KEY=
VITE_DEVELOPMENT_URL=

VITE_DEVELOPMENT_URL debe configurarse con la URL de tu espacio de código github.dev para realizar pruebas aquí. Cuando llegues a la configuración de Vercel, actualizarás la URL de tu aplicación Vercel.

  1. Comprueba que TODAS las variables de entorno del backend estén en los secretos de tu espacio de código. No puedes añadirlas a la raíz .env porque quedarán expuestas.
  1. Instalar dependencias: npm install (instala simultáneamente las dependencias concurrentes y de backend)
  2. npm run dev iniciará los servidores frontend y backend.
  3. Prueba:
    • carga de la página
    • El inicio de sesión funciona.
    • La función de IA responde
  4. Si todo funciona localmente, ya estás listo para implementar.
  5. Sigue trabajando con LLM para asegurarte de que todo esté listo para la implementación de Vercel.
  1. Confirma los cambios y envíalos a la rama principal.
  2. Combina todos los cambios para que tu rama principal esté actualizada en Github.

Ahora que ya 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. Ve a vercel.com.
  2. Haga clic en «Registrarse».
  3. Selecciona Continuar con GitHub. Esto conecta Vercel a la misma cuenta de GitHub donde se encuentra tu código MVP.
  4. Autoriza a Vercel para acceder a tus repositorios de GitHub.

No se requiere tarjeta de crédito. El nivel Hobby gratuito es más que suficiente para tu MVP.

  1. Desde el panel de control de Vercel, haz clic en Añadir nuevo → Proyecto.
import screenshot in vercel dashboard
  1. Busca tu repositorio 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 GitHub con Vercel.

choosing github repository in vercel dashboard

Vercel detecta automáticamente el tipo de proyecto y rellena la configuración de compilación.

  1. Vercel suele estar en lo cierto, pero comprueba que la configuración coincida con tu proyecto.

Si tu proyecto tiene...

Marco preestablecido

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 compilación

.siguiente

server.js + carpeta public/

Otros

(vacío o personalizado)

público

react-scripts en package.json

Crear aplicación React

react-scripts build

construye

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

  1. Si Vercel detectó el marco incorrecto, haz clic en Configuración de compilación y salida para anularlo.

    El comando de compilación y el directorio de salida son los dos campos más importantes. Si no estás seguro, comprueba qué produce 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 deben configurarse en Vercel, no en tu código.

  1. En la pantalla de configuración del proyecto, haga 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:escriba cada nombre de clave y pegue su valor uno por uno.
  3. Asegúrate de añadir todas las claves que necesita tu aplicación, tanto las variables de entorno frontend como backend.

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

    Esto es lo que nos parece:

Nota: Cuando aprendas a añadir pagos en unidades posteriores, 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. Haga clic en «Deploy» (Implementar).

    Vercel extrae su código de GitHub, instala las dependencias, compila su aplicación y le asigna una URL. Este proceso tarda entre 1 y 3 minutos. Puede ver los registros de compilación en tiempo real.
congralations message in vercel

Cuando termine, Vercel puede mostrarte una pantalla de confirmación con un enlace para navegar al panel de control de Vercel.

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

  1. tu URL 
  2. Lista de verificación que puede comenzar a seguir para aplicar las recomendaciones sobre mejores prácticas que veremos en pasos posteriores.
  3. Panel de observabilidad que veremos más adelante.
  4. Panel de análisis que también veremos más adelante.
vercel dashboard overview

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

Puedes abrir la URL de producción en cualquier lugar, así que ábrela en tu teléfono para verificar quenuestra 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 esto:
      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 prueba:

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

Si algo no funciona, consulte la sección de resolución de problemas que aparece a continuación. Los errores de compilación son normales 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 computadora y que intenten crear una cuenta y utilizar una función de tu aplicación.

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

¿Quieres un dominio personalizado? Por defecto, la URL de tu aplicación se generará automáticamente como tu-nombre-de-aplicación.vercel.app. Pero si quieres una URL con tu marca, como tutormatch.app, consulta el desafío opcional al final para obtener una guía paso a paso sobre cómo hacerlo. También puedes intentarlo tú mismo siguiendo la guía de Vercel en la lista de verificación de implementación.

Solución de problemas

Haga clic en cada problema a continuación para mostrar la posible solución.

Haga clic en la implementación fallida y lea los registros de compilación.

Causas comunes:

  • Dependencia faltante en package.json
  • un error tipográfico en una ruta de importación
  • un script de compilación que falta.

Ejecuta primero npm run build en Codespaces y, si falla localmente, también fallará en Vercel.

Probablemente tu archivo de servidor no está exportando la aplicación Express.

Añadir:

  • exportar aplicación predeterminada; para (módulos ES) o
  • module.exports = app; for (CommonJS)

al final de tu archivo de servidor en el api/ .

Este es el problema de implementación más común.

  1. Ve al proyecto Vercel → Configuración → Variables de entorno.
  2. Verifique que cada nombre de clave coincida exactamente con lo que espera su código (distingue entre mayúsculas y minúsculas).

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

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

Es posible que su servidor Express tenga un puerto codificado.

Cambia app.listen(3000) por app.listen(process.env.PORT) y asegúrate de que PORT está incluido en tus variables de entorno.

Tienes URL codificadas en tu interfaz (como http://localhost:3001/api/…).

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

Las rutas relativas evitan por completo los problemas de CORS.

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

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

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

Falta una dependencia en package.json.

Ejecute npm install en Codespaces y envíe el archivo package-lock.json actualizado a la rama principal.

Verifica 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 compilación en la configuración de Vercel no coincide con la ubicación donde npm run build coloca 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 vercel.json existe en la raíz del proyecto (lo creaste en la Actividad 1).

Si las rutas API siguen sin funcionar, prueba a añadir una sección de compilaciones:

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

Con Fluid Compute (habilitado de forma predeterminada en los nuevos proyectos), 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, considera simplificar el mensaje 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, aprendiste sobre las ramas para organizar tu trabajo. Ahora las ramas tienen consecuencias reales: enviar a main significa que tu aplicación en vivo cambia al instante.

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

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

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

Un mal empujón rompe tu aplicación en vivo para todos los usuarios.

ACTIVIDAD 3

Prueba de implementación automática

Tiempo estimado: 15 minutos

  1. Ve a GitHub y navega hasta tu repositorio MVP.
  2. Haga clic en el menú desplegable principal situado en la parte superior izquierda del repositorio y vea todas las ramas.
  3. Crear una nueva rama.
  4. Puedes llamarlo: test-auto-deploy
  5. Crea un nuevo espacio de código para esta rama y ábrelo.
  1. Realiza cualquier pequeño cambio visible, como actualizar el texto de un encabezado o un botón, para poder comprobar fácilmente que ha funcionado. 

Actualizaremos el título de la página de «TutorMatch» a «TutorMatch – PRUEBA DE DESPLIEGUE AUTOMÁTICO».

Lo encontramos en el archivo App.jsx . 

  1. Confirma tu cambio en Codepsace con un mensaje descriptivo y envíalo a tu rama test-auto-deploy.
  2. Vuelve a GitHub. Deberías ver un botón que te indica que se ha realizado un envío.
  3. Haga clic en el botón para crear una solicitud de extracción o simplemente vaya a la pestaña Solicitudes de extracción.  
  1. Añadir un título y una descripción
  2. Haga clic en Crear solicitud de extracción.
  3. Haga clic en «Merge pull request» (Combinar solicitud de extracción) y confirme.

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 de Vercel.

Esperemos que no haya conflictos y que puedas fusionar correctamente la solicitud de extracción.

  1. Ve a tu panel de control de Vercel.
  2. Haga clic en Implementaciones para su proyecto.

Deberías poder ver dos nuevas filas:

    • Uno que muestra una vista previa de un cambio realizado.
    • Uno para la compilación de producción. La compilación de producción puede tener el estado «en compilación» o «listo».
      Una vez que esté «listo», puede ir a su URL y ver los cambios realizados.
  1. Una vez que termine, actualiza tu URL en vivo para ver el cambio.

No queremos un título con «TESTING DEPLOYMENT». Aunque Vercel ofrece una opción de reversión, seguirá buscando el repositorio de GitHub y extraerá 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.
  2. Confirma y envía el cambio.
  3. Crea una solicitud de extracción y fusiona.
  4. Comprueba de nuevo en Vercel que el título ha vuelto a cambiar al original. 

Proteja su aplicación para la producción

A lo largo del programa, has ido incorporando progresivamente medidas de seguridad en tu aplicación, tales como:

  • Almacenamiento de claves API en GitHub Secrets (manteniéndolas fuera de tu código y del historial de confirmaciones)
  • Realizar llamadas API desde el lado del servidor (manteniendo la clave completamente fuera del navegador) 
  • Añadir autenticación de usuario con Supabase para que solo los usuarios que hayan iniciado sesión puedan acceder a tu aplicación.
  • Se ha añadido seguridad al middleware de la API para que nadie más que tu aplicación pueda realizar llamadas a la API. 

Estas son protecciones importantes, pero no lo cubren todo.

Un usuario autorizado de la aplicación aún podría escribir un script que llame a tu función de IA 500 veces en un minuto, agotando todos tus créditos de API de Groq / Gemini / Hugging Face o, lo que es peor, costándote mucho dinero. 

O tu clave API podría caducar y, sin un manejo seguro de errores, tus usuarios verían un mensaje sin formato que sería muy técnico en lugar de un mensaje útil.

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

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

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. manejo seguro de errores: sustitución de errores técnicos por mensajes fáciles de entender para el usuario.

Hay diferentes formas de añadir limitación de velocidad. A continuación se muestra una comparación entre ellas:

Enfoque

Cómo funciona

Compromiso

En memoria (límite de velocidad expreso)

Las tiendas solicitan recuentos en la memoria de su servidor.

Fácil de configurar. Se restablece cuando se reinician las funciones sin servidor. Detecta abusos rápidos.

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

Las tiendas cuentan con una base de datos independiente que se mantiene tras los reinicios.

Más fiable en condiciones de tráfico intenso, pero requiere configurar y pagar un servicio adicional. 

También es la más compleja, pero la recomendamos encarecidamente si tienes muchos usuarios.

Middleware de borde

Bloquea las solicitudes en el borde de la red de Vercel antes de que lleguen a tu código.

Respuesta más rápida, pero requiere aprender un patrón de codificación diferente (Vercel Edge Runtime).

Para su 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 su aplicación crece más que la competencia y necesita una limitación de velocidad que nunca se reinicie, actualizar 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 navega hasta tu repositorio MVP.
  2. Haga clic en el menú desplegable principal situado en la parte superior izquierda del repositorio y vea todas las ramas.
  3. Crear una nueva rama.
  4. Puedes llamarlo: add-security (u otro nombre descriptivo).
  5. Crea un nuevo espacio de código para esta rama y ábrelo.

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

  1. Abre Copilot Chat en tu espacio de código y utiliza este comando:

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

Objetivo: Añadir limitación de velocidad para evitar el abuso de la API en mis rutas.

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

Límite de API por usuario: Límite de 5 solicitudes por minuto por usuario. Devuelve el 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 nos generó en nuestro 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 piezas 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 cuántas solicitudes se permiten por ventana. Para nuestra aplicación = 5
    Copilot puede generar estas variables como límite o máximo 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, espere un momento».

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

  1. Inicie su aplicación en Codespaces (npm run dev) y obtenga una vista previa en una pestaña del navegador. 
  2. Inicie sesión y navegue hasta su función de IA.
  3. Haga clic en el botón de la función de IA más de 20 veces seguidas rápidamente.
  4. Deberías ver «Demasiadas solicitudes. Por favor, espera un momento» después de alcanzar el límite.
  5. Espere un minuto y vuelva 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 velocidad en memoria se restablece cuando se reinician las instancias. Esto es adecuado para el tráfico MVP. Puede detectar abusos rápidos, como alguien que hace clic en un botón 50 veces.

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

El manejo seguro de errores muestra a los usuarios un mensaje amigable mientras se registran los detalles técnicos en el servidor. No estás eliminando los mensajes de error, solo los rediriges para que los atacantes no puedan verlos.

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

Ayúdame a añadir un manejo de errores listo para producción a mi API Express.js.

Reemplazar los mensajes de error sin formato por respuestas seguras y fáciles de usar.

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

Envuelve los controladores de rutas en try/catch. Registra los errores completos con console.error() en el lado del servidor. Envía a los usuarios el mensaje «Algo salió mal. Inténtalo de nuevo». Mantén cualquier error de la API de Groq que sea útil para el usuario sin mostrar ningún detalle interno.

  1. Revisa el código generado.

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

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

Los errores conocidos, como los fallos de las API Groq o Gemini, reciben mensajes específicos y útiles en su lugar.

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

  1. Busca el código del servidor que llama a la API de Groq (u otro LLM). 
  2. Cambia GROQ_API_KEY (o la variable equivalente) a GROQ_APIKEY. 
  3. Prueba tu función de IA.
  4. Debería aparecer un mensaje de error indicando que la API ha fallado. NO debería aparecer un seguimiento de pila.
  5. Comprueba tu terminal. Los detalles completos del error deberían estar registrados allí.
  6. Cambia el código de nuevo a GROQ_API_KEY y vuelve a intentarlo para asegurarte de que vuelve a funcionar.
  1. En tu espacio de código, confirma los cambios en la limitación de velocidad y el manejo de errores con un mensaje descriptivo.
  2. Envía a tu rama add-security.
  3. Ve a GitHub. Deberías ver un banner que te sugiere crear una solicitud de extracción.
  4. Haga clic en Comparar y solicitud de extracción.
  5. Añade un título que describa tus cambios (por ejemplo, «Añadir limitación de velocidad y gestión segura de errores»).
  6. Haga clic en Crear solicitud de extracción.
  7. Revisa los cambios, luego haz clic en «Merge pull request» (Combinar solicitud de extracción) y confirma.
  8. Ve a tu panel de control de Vercel. Deberías ver una nueva implementación creándose automáticamente.

Una vez finalizada la implementación, compruébelo en su URL activa.

  1. Inicie sesión y utilice la función de IA con normalidad. Debería funcionar.
  2. Haga clic rápidamente más de 20 veces en la función de IA. Al final debería aparecer el mensaje «Demasiadas solicitudes».
  3. Espera un momento, vuelve a intentarlo. Debería funcionar normalmente.

Solución de problemas

A continuación, se indican algunos problemas que pueden surgir al añadir seguridad a la aplicación. Haga clic en cada problema para ver cómo puede resolverlo.

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

Ejecute npm install express-rate-limit en la terminal de Codespace y envíe los archivos package.json y package-lock.json actualizados.

Las funciones sin servidor pueden reiniciarse entre solicitudes. El limitador de velocidad sigue funcionando contra el abuso de disparos rápidos (muchas solicitudes en rápida sucesión). Este es el comportamiento esperado para un MVP.

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

Supervisión de su aplicación

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

  1. Configura la supervisión para que puedas ver qué ocurre tras el lanzamiento.
  2. Verifique que su seguridad realmente funciona. No se limite a darlo por sentado.

Las llamadas de IA son diferentes de las solicitudes API habituales porque tienen un coste por llamada, requieren un tiempo variable y pueden generar resultados inesperados. Un registro estándar de «solicitud realizada con éxito» no indica si la respuesta de la IA fue útil, cuánto tiempo esperó el usuario ni cuánto costó la llamada. El registro estructurado captura estos detalles para que puedas responder a esas preguntas desde tu panel de control de Vercel.

Panel de control de Vercel 

Tu panel de control de Vercel es tu ventana al rendimiento de tu aplicación en producción. Navega hasta tu proyecto en vercel.com y explora tres áreas.

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

vercel deployment panel

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

Haga 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. Utilice los filtros de la izquierda para limitar la búsqueda por código de estado (buscar todos los errores 500), por ruta (ver solo solicitudes de IA) o por intervalo de tiempo.

También puede hacer clic en el botón «Live» para ver los registros en tiempo real. Esto resulta útil cuando está probando su aplicación y desea ver lo que ocurre en el servidor al hacer clic.

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

vercel logs panel

La sección Observación va más allá de los registros individuales y muestra patrones en todas las solicitudes: qué rutas son más lentas, cuáles tienen las tasas de error más altas y cómo cambia el rendimiento de las funciones con el tiempo.

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

Los planes Observability Pro y Plus desbloquean consultas personalizadas y 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 borde
  • Invocaciones de funciones Vercel
  • Solicitudes de API externas
  • Enrutamiento de invocaciones de middleware
  • Solicitudes de puerta de enlace de IA
vercel observability panel
ACTIVIDAD 5

Supervisar, verificar y lanzar

Tiempo estimado: 25 minutos

  1. Ve a GitHub y navega hasta tu repositorio MVP.
  2. Haga clic en el menú desplegable principal situado en la parte superior izquierda del repositorio y vea todas las ramas.
  3. Crear una nueva rama.
  4. Puedes llamarlo: add-monitoring(u otro nombre descriptivo).
  5. Crea un nuevo espacio de código para esta rama y ábrelo.

Lo primero que hay que saber sobre las llamadas de IA en producción es cuánto tiempo tardan. Un usuario que espera 15 segundos puede 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 AI de Express.js.

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

Mi ruta de IA está en [index.js] y llama a la API de Groq. Estoy implementando en Vercel.

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

  1. Inicie su aplicación en Codespaces y active una llamada de IA.
  2. Comprueba la salida de tu terminal para ver el registro del tiempo de respuesta.
  3. No lo implemente todavía. Añadirá más registros en el siguiente paso y lo implementará una vez.

Ahora amplíe su código de sincronización para capturar la imagen completa. Los registros estructurados utilizan el formato JSON, por lo que puede buscarlos y filtrarlos en el panel de control de Vercel. Solicite a Copilot que genere el código necesario.

Reemplazar el console.log básico por registros JSON estructurados que pueda buscar en el panel de control de Vercel.

Ya tengo un contenedor de sincronización que mide el tiempo de respuesta (responseTime) de mi llamada a la API Groq.

Registre un objeto JSON por cada llamada a la IA utilizando console.log(JSON.stringify(data)) con:
timestamp (ISO),
action name,
inputLength (número de caracteres, no contenido),
responseTime (ms),
success (verdadero/falso),
error (mensaje o nulo)

Ejemplo (para TutorMatch): 

Cuando un estudiante busca recomendaciones de tutores, el registro podría tener este aspecto. Tu aplicación tendrá nombres de acciones diferentes. Adáptate a lo que haga tu función de IA.

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

Cada campo tiene un propósito específico:

  • marca de tiempo: permite correlacionar los problemas notificados por los usuarios («se rompió a las 3 de la tarde») 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 grandes pueden indicar un uso indebido. El registro de la longitud (no del contenido) protege la privacidad del usuario.
  • responseTime: le ayuda a detectar problemas de rendimiento antes de que los usuarios se quejen. Los tiempos constantes superiores a 10 segundos pueden requerir atención.
  • Éxito: te indica tu tasa de fallos de IA de un vistazo. El 5 % es normal, el 50 % es una crisis.
  • error: cuando las llamadas fallan, el mensaje de error le indica el motivo sin necesidad de reproducir el problema.
  1. Vuelve a ejecutar tu aplicación en Codespace.
  2. Activar una llamada de IA.
  3. Comprueba el terminal para el registro JSON.

Ahora confirma y despliega juntos los cambios en la sincronización y el registro estructurado:

  1. Confirma los cambios en el registro con un mensaje descriptivo.
  2. Envía a tu rama de supervisión de adiciones.
  3. Ve a GitHub. Deberías ver un banner que te sugiere crear una solicitud de extracción.
  4. Haga clic en Comparar y solicitud de extracción.
  5. Añade un título que describa tus cambios.
  6. Haga clic en Crear solicitud de extracción.
  7. Revisa los cambios, luego haz clic en «Merge pull request» (Combinar solicitud de extracción) y confirma.
  8. Ve al panel de control de Vercel y confirma que se inicia una nueva implementación en la pestaña Implementaciones.
  9. Una vez finalizada la implementación, abra su aplicación en vivo, inicie sesión y active 2-3 llamadas de IA.
  10. Ve a Vercel → Logs y busca tus entradas JSON estructuradas.
  11. Verifique que los campos timestamp, action, responseTime y success aparezcan correctamente.
  12. Cada entrada del registro debe aparecer como filas. Haga clic en la flecha para expandir y ver sus campos JSON.
  13. Si ve [Objeto objeto] en lugar de JSON, actualice su código para utilizar console.log(JSON.stringify(logData)) en lugar de console.log(logData).

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

Vercel ofrece un servicio gratuito de análisis web que realiza un seguimiento de las visitas a la página y los datos de los visitantes. La configuración 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 Vercel.
  2. Haga clic en la pestaña «Analítica ».
  3. Haga clic en Habilitar para análisis web.
  1. Si aún tienes tu rama de supervisión de anuncios, abre el espacio de código asociado. De lo contrario, crea una nueva rama para tu repositorio y abre un nuevo espacio de código.
  2. En tu espacio de código, 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ñadir import { Analytics } desde ‘@vercel/analytics/react’import a App.jsx
      • Add <Analytics /> as a component inside your App.jsx return, typically just before the closing tag.
    • Para aplicaciones HTML/JS simples, sigue las instrucciones que muestra Vercel después de hacer clic en «Habilitar
      Commit».
  4. Confirma, envía y fusiona tus cambios. La próxima implementación comenzará a recopilar datos.

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

El plan Hobby incluye 2500 eventos al mes de forma gratuita (a partir de febrero de 2026), más que suficiente para un MVP. Tras la configuración, podrás ver cuántas personas visitan tu aplicación, qué páginas ven y de dónde proceden.

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

  1. Abre tu aplicación implementada (la URL .vercel.app, no tu Codespace) en el navegador.
  2. Presiona F12 para abrir DevTools (o haz clic con el botón derecho en Inspeccionar).
  3. Cambie a la pestaña Red.
  4. Borrar el registro de red (hacer clic en el icono de borrar).
  5. Inicie sesión en su aplicación y utilice la función de IA.
  6. Observe cómo aparecen las solicitudes de red.

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

Comprobación 1: ¿Están ocultas tus claves API?

Haga clic en la solicitud que activa su función de IA.

  1. La URL de solicitud debe dirigir a SU backend: https://your-app.vercel.app/api/ai-query. NO debe dirigir directamente a api.groq.com ni a ninguna API externa. Si lo hace, su frontend está llamando directamente a la API de IA y su clave API podría quedar expuesta.
  2. Haga clic en la pestaña «Headers» (Enc abezados ) y consulte los encabezados de solicitud. Su clave API de Groq NO debe aparecer en ningún encabezado. Su backend realiza la llamada externa desde el 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, deténgase. Tu clave está expuesta y cualquiera que inspeccione tu sitio puede robarla. Vuelve a tu código y asegúrate de que todas las llamadas a API externas se realicen en el lado del servidor.

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

Autorización: Portador eyJhbGciOiJIUzI1NiIs…

Este es el token de sesión de Supabase que envía su interfaz. Demuestra que la solicitud proviene 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 está llamando a getSession() e incluyendo el token en cada solicitud de API.

  1. Mantén DevTools abierto en la pestaña Red.
  2. Pulsa rápidamente el botón de la función de IA más de 10 veces.
  3. Observe la pestaña Red: las primeras solicitudes deberían devolver el estado 200 (éxito).
  4. Después de alcanzar el límite, las solicitudes deben devolver el 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 200 sin limitación de velocidad, es posible que la función sin servidor se haya reiniciado entre solicitudes. Intente hacer clic más rápido. El limitador de velocidad funciona mejor contra ráfagas 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 tienen niveles gratuitos con límites. Conocer esos límites evita cargos inesperados.

Configura alertas de facturación cuando sea posible. Algunos planes gratuitos no te permiten configurar alertas hasta que no contrates 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 exceden los límites de ancho de banda o de funciones

Dónde comprobarlo: Panel de control de Vercel → Uso

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

Supabase

Nivel gratuito: base de datos de 500 MB, almacenamiento de archivos de 1 GB, 50 000 usuarios activos mensuales.

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

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

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

API de Groq

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

Coste: Llamadas API de gran volumen que superan el nivel gratuito

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

Alerta de facturación – Vaya a Configuración → Facturación → Límites en su consola Groq.

Lista de comprobación previa al lanzamiento

Antes de compartir tu aplicación con el mundo, revisa esta lista de verificación. Está organizada en tres grupos: ¿funciona tu aplicación?, ¿es segura? y ¿puedes ver lo que sucede después del lanzamiento?

✅ ¿Funciona?

  •  La URL en vivo se carga correctamente.
  •  Funcionamiento del inicio de sesión y el registro (crear cuenta, iniciar sesión, cerrar sesión)
  •  La función de IA funciona en producción después de iniciar sesión.
  •  La aplicación funciona en otro dispositivo o navegador (comparte la URL con un compañero de equipo para verificarlo).

✅ ¿Es seguro?

  •  Las claves API NO son visibles en la pestaña Red de DevTools.
  •  El encabezado de autorización está presente en las solicitudes de API. 
  •  La limitación de velocidad se activa tras solicitudes rápidas. 
  •  Las variables de entorno se configuran en Vercel, no están codificadas en tu código.

✅ ¿Puedes ver lo que está pasando?

  •  Los registros JSON estructurados aparecen en la pestaña Registros de Vercel cuando se activa una llamada de IA.
  •  Análisis web habilitado
  •  Se han comprobado los paneles de control de costes de Vercel, Supabase y Groq.

Si algún elemento falla, arréglalo antes de compartir tu URL.

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

Solución de problemas

Asegúrate de utilizar console.log() en las rutas API del lado del servidor, no en el código del lado del cliente. Los registros del lado del cliente aparecen 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, considera añadir un mensaje de carga y dividir la solicitud.

Con Fluid Compute (habilitado de forma predeterminada en los nuevos proyectos), 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 tu backend. 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 implementación y unas cuantas visitas a la página. Espera unos minutos después de habilitar y visitar tu sitio web.

Tu aplicación está disponible en your-app-name.vercel.app. Esto funciona para la competencia, para las pruebas de los usuarios y para tu presentación. Pero si quieres que tu aplicación parezca un negocio real, un dominio personalizado marca la diferencia. tutormatch.app transmite profesionalidad de una forma que tutormatch-mvp.vercel.app no lo hace.

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

ACTIVIDAD 6

(OPCIONAL) - Conectar un dominio personalizado

Tiempo estimado: 15 minutos

Elige una de estas opciones para obtener tu propio dominio.

Opción

Costo

Proceso

Paquete para desarrolladores estudiantes de GitHub

Registrador de dominios

Si tienes un correo electrónico escolar, 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 otros) y dominios .tech.

Paquete para desarrolladores estudiantes de GitHub

~10-15 dólares estadounidenses al año

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

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

Entre 10 y 20 dólares estadounidenses al año.

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

  1. Ve a tu proyecto Vercel → Configuración → Dominios
  2. Haga clic en «Añadir dominio » y escriba su nombre de dominio (por ejemplo, tutormatch.app).
  3. Vercel muestra los registros DNS que necesitas. Verás lo siguiente:
    • Un registro A que apunta 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 DNS de tu registrador de dominios y añade los registros proporcionados por Vercel.
  5. Espere a que se propague el DNS. Esto suele tardar menos de 30 minutos, pero puede tardar hasta 48 horas.

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

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

Solución de problemas

Comprueba dos veces el registro A o el registro CNAME en la configuración DNS de tu registrador. Asegúrate de haber copiado exactamente los valores de Vercel.

Espera. Vercel proporciona 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 .vercel.app como las del dominio personalizado en la lista.

Reflexión

¡Lo has conseguido! ¡Tu aplicación 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 pensar sobre los errores, el rendimiento y el coste el hecho de saber que tu aplicación 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 codificaste y depuraste, lo protegiste con autenticación y ahora lo has lanzado al mundo. ¿Qué habilidad de este viaje te ha sorprendido más?
03

Próximos pasos
¿Qué será tu próxima prioridad? ¿Nuevas funciones, mejores respuestas de IA, mejoras en el rendimiento o marketing dirigido a los usuarios?

Términos clave

  • Implementación: hacer que tu aplicación esté disponible en Internet en una URL permanente. A diferencia de un enlace de vista previa, una aplicación implementada permanece activa incluso cuando el 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): claves API y secretos almacenados en la configuración de tu plataforma de alojamiento en lugar de en tu código. En Vercel, estos se configuran en el panel de control del proyecto.
  • Implementación automática: Vercel reconstruye y vuelve a implementar automáticamente tu aplicación cada vez que envías código a tu rama principal en GitHub.
  • Limitación de velocidad: restricción del número de solicitudes que un usuario puede realizar en un periodo de tiempo determinado. Evita abusos y controla los costes de la API. 
  • Gestión segura de errores: devuelve mensajes de error genéricos y fáciles de entender a los usuarios, al tiempo que registra todos los detalles técnicos en el servidor. Evita que los detalles internos queden expuestos a posibles atacantes.
  • Registro estructurado: registra los eventos de tu aplicación como datos JSON organizados en lugar de texto sin formato. Permite buscar, filtrar y analizar lo que ocurre en producción.
  • Observabilidad: la capacidad de comprender lo que ocurre dentro de su aplicación en ejecución desde el exterior, a través de registros, métricas y paneles de control.
  • Funciones sin servidor: código backend que se ejecuta bajo demanda en respuesta a solicitudes, sin necesidad de gestionar un servidor. Vercel convierte automáticamente tus rutas API Express.js en funciones sin servidor.
  • Dominio personalizado: una dirección web personalizada (como tutormatch.app) que usted posee y que apunta a su implementación de Vercel, sustituyendo 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 encontrar servidores. Cuando conectas un dominio personalizado, configuras los registros DNS para que apunten a Vercel.

Recursos adicionales

Despliegue

Seguridad

Supervisión

Gestión de costes

 

Contenido de la lección
Cuestionario anterior
Volver al curso
Próxima prueba