Saltar al contenido
El ClubMODO FUTURO
EntrarCrear cuentaYa tengo cuenta

Día 4 · Publicar en internet

Publica tu app en internet

Hoy tu app sale de AI Studio y queda en una dirección propia que cualquier persona puede abrir. Gratis con GitHub y Vercel.

Mira el videoTikTok Instagram

Publícala, paso a paso

GitHub guarda el código de tu app. Vercel lo toma de ahí y lo pone en internet.

  1. Paso 1

    Guárdala en GitHub

    En AI Studio presiona el ícono de GitHub, arriba a la derecha. Conecta tu cuenta, escribe el nombre de tu app en minúsculas y elige Private para que nadie vea tu código.

  2. Paso 2

    Revisa que no haya claves a la vista

    Abre tu app en github.com. Si ves .env.example, está bien: es una plantilla vacía. Si ves .env o .env.local, tus claves quedaron guardadas ahí: crea claves nuevas en cada servicio antes de seguir.

  3. Paso 3

    Impórtala en Vercel

    Entra a vercel.com con tu cuenta de GitHub (plan Hobby, gratis). Presiona Add New, luego Project, y elige tu app. El nombre del proyecto será tu dirección: tuapp.vercel.app.

  4. Paso 4

    Agrega tus claves

    En esa misma pantalla abre Environment Variables, el espacio privado donde Vercel guarda tus claves. Pega ahí la plantilla de abajo ya completa.

  5. Paso 5

    Publícala

    Presiona Deploy y espera de 1 a 3 minutos hasta ver Ready en verde. Si no aparece ninguna publicación, entra a Deployments, presiona los tres puntos, luego Create Deployment y escribe main.

Plantilla de clavesTus claves para VercelQué claves pegar y dónde conseguir cada una.Ver y copiar

Complétala en una nota privada de tu computadora, nunca en un chat. Luego pega el bloque completo en el campo Key de Environment Variables: Vercel separa cada clave solo. Si tu archivo .env.example usa otros nombres, usa esos.

NEXT_PUBLIC_SUPABASE_URL=pega-aqui-tu-direccion-de-supabase

NEXT_PUBLIC_SUPABASE_ANON_KEY=pega-aqui-tu-llave-publica

GEMINI_API_KEY=pega-aqui-tu-llave-de-gemini

APP_URL=https://tuapp.vercel.app

Dónde conseguir cada una

  • Supabase

    NEXT_PUBLIC_SUPABASE_URL

    En la página principal de tu proyecto: la dirección que termina en supabase.co.

  • Supabase

    NEXT_PUBLIC_SUPABASE_ANON_KEY

    En API Keys: la llave pública que empieza con sb_publishable_. Nunca la que empieza con sb_secret_.

  • Gemini

    GEMINI_API_KEY

    Solo si tu app usa IA. En Google AI Studio presiona Get API key y crea una. Es privada, por eso su nombre no empieza con NEXT_PUBLIC_.

  • Tu app

    APP_URL

    Tu dirección en Vercel, sin "/" al final. Si tu app no la usa, borra esa línea.

Conecta tu dirección en Supabase

Solo si tu app tiene registro de usuarios. Así el correo de confirmación abre tu app y no una página con error.

  1. Paso 1

    Escribe tu dirección principal

    En tu proyecto abre Authentication y luego URL Configuration. En Site URL pega tu dirección completa, por ejemplo https://tuapp.vercel.app, sin "/" al final. Presiona Save.

  2. Paso 2

    Autoriza tu dirección

    En Redirect URLs presiona Add URL, pega tu dirección seguida de /** (por ejemplo https://tuapp.vercel.app/**) y guarda.

Pruébala en su dirección real

Hazlo desde tu celular, como lo haría cualquier persona.

  • Crea una cuenta con otro correo: el enlace de confirmación debe abrir tu app.
  • Usa la función principal de tu app y revisa que se guarde.
  • Recarga la página: tu sesión y tu información siguen ahí.
  • Si tienes enlaces para compartir, ábrelos en una ventana privada (incógnito).
  • Ábrela también en tu computadora: debes ver lo mismo.

Mantén tu app al día

  • Cambios

    Cada ajuste se publica solo

    Cuando cambies algo en AI Studio, presiona otra vez el ícono de GitHub para subirlo. Vercel publica la nueva versión en unos minutos.

  • Errores

    Si aparece Error en rojo

    En Deployments abre la publicación fallida, copia el texto en rojo de Build Logs y envíalo con el mensaje de rescate.

  • Claves

    Tus claves solo van en Vercel

    Nunca en el chat de AI Studio, en GitHub ni en capturas de pantalla. Si alguna quedó a la vista, créala de nuevo.

Mensaje para AI StudioMensaje de rescateExplica el error en lenguaje sencillo y lo corrige.Ver y copiar

Envíalo en el chat de tu app en AI Studio, con el texto en rojo de Vercel donde se indica. Cuando lo corrija, súbelo con el ícono de GitHub y Vercel publica de nuevo.

Publiqué mi app en Vercel y la publicación falló. Este es el error que muestra Vercel en Build Logs:

[PEGA AQUÍ EL TEXTO EN ROJO]

1. Explícame en lenguaje sencillo qué significa.
2. Si el problema está en el código, corrígelo sin cambiar el diseño ni lo que ya funciona.
3. Si el problema es una clave o una configuración de Vercel o Supabase, no toques el código: dime exactamente qué debo cambiar y dónde.
4. Nunca me pidas pegar mis claves en este chat.

Tu tarea de hoy

Publica tu app y comparte tu dirección

Cuando abra bien desde tu celular, comparte tu dirección en la comunidad. Mañana es el lanzamiento.

Ir a Vercel Compartir en El Club