Guía de Self-Hosting con Supabase Externo

Tu Configuración

VITE_SUPABASE_URL=https://efximdysssnbnncuxleh.supabase.co
VITE_SUPABASE_PUBLISHABLE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImVmeGltZHlzc3NuYm5uY3V4bGVoIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjY4OTQ5MTEsImV4cCI6MjA4MjQ3MDkxMX0.vhvdeSc1v_ScNMOpj51hxAaZmU5wQuSL_d-inbfcn0Q
VITE_SUPABASE_PROJECT_ID=efximdysssnbnncuxleh

Paso 1: Clonar el Repositorio

git clone https://github.com/TU_USUARIO/TU_REPO.git
cd TU_REPO
npm install

Paso 2: Configurar Variables de Entorno

Para desarrollo local

Crea un archivo .env.local en la raíz del proyecto:

VITE_SUPABASE_URL=https://efximdysssnbnncuxleh.supabase.co
VITE_SUPABASE_PUBLISHABLE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImVmeGltZHlzc3NuYm5uY3V4bGVoIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjY4OTQ5MTEsImV4cCI6MjA4MjQ3MDkxMX0.vhvdeSc1v_ScNMOpj51hxAaZmU5wQuSL_d-inbfcn0Q
VITE_SUPABASE_PROJECT_ID=efximdysssnbnncuxleh

Para Vercel

  1. Ve a tu proyecto en Vercel Dashboard

  2. Settings → Environment Variables

  3. Agrega cada variable:

Variable
Valor

VITE_SUPABASE_URL

https://efximdysssnbnncuxleh.supabase.co

VITE_SUPABASE_PUBLISHABLE_KEY

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

VITE_SUPABASE_PROJECT_ID

efximdysssnbnncuxleh

Para Netlify

  1. Ve a tu sitio en Netlify Dashboard

  2. Site settings → Environment variables

  3. Agrega las mismas variables

Paso 3: Desplegar en Vercel (Recomendado)

Opción A: Desde la CLI

Opción B: Desde el Dashboard

  1. Ve a vercel.com/new

  2. Importa tu repositorio de GitHub

  3. Framework Preset: Vite

  4. Configura las variables de entorno

  5. Click "Deploy"

Paso 4: Desplegar Edge Functions

Las Edge Functions deben desplegarse en tu proyecto Supabase:

Paso 5: Configurar Secrets en Supabase

Ve a Supabase Dashboard → Settings → Edge Functions → Secrets y agrega:

Secret
Descripción

CLERK_PUBLISHABLE_KEY

Tu clave pública de Clerk

CLERK_SECRET_KEY

Tu clave secreta de Clerk

GEMINI_API_KEY

API key de Google Gemini

OPENAI_API_KEY

API key de OpenAI

LIVEBLOCKS_SECRET_KEY

Clave de Liveblocks

HUBSPOT_ACCESS_TOKEN

Token de HubSpot (si usas)

PIPEDREAM_CLIENT_ID

Client ID de Pipedream

PIPEDREAM_CLIENT_SECRET

Secret de Pipedream

PIPEDREAM_PROJECT_ID

Project ID de Pipedream

Paso 6: Configurar Autenticación en Supabase

Configurar URLs de redirección

  1. Ve a Supabase Dashboard → Authentication → URL Configuration

  2. Configura:

    • Site URL: https://tu-app.vercel.app

    • Redirect URLs:

      • https://tu-app.vercel.app

      • https://tu-app.vercel.app/*

      • http://localhost:5173 (para desarrollo)

Paso 7: Migrar Base de Datos

Si aún no has ejecutado la migración:

  1. Ve a Supabase Dashboard → SQL Editor

  2. Ejecuta el contenido de docs/migration/01-schema-migration.sql

  3. Exporta datos con las queries de docs/migration/02-data-export-queries.sql

  4. Importa los datos en tu nuevo proyecto

Verificación Final

Checklist

Test de la aplicación

  1. Abre tu URL de Vercel/Netlify

  2. Prueba el login/registro

  3. Crea un presupuesto de prueba

  4. Verifica que se guarda en la base de datos

Troubleshooting

Error: "Invalid API key"

  • Verifica que VITE_SUPABASE_PUBLISHABLE_KEY esté correctamente configurado

  • Asegúrate de que las variables estén en el entorno de build

Error: "CORS"

  • Agrega tu dominio a las URLs permitidas en Supabase

  • Dashboard → Authentication → URL Configuration → Redirect URLs

Edge Functions no responden

  • Verifica que los secrets estén configurados

  • Revisa logs en Dashboard → Edge Functions → Logs

Clerk no funciona

  • Actualiza las URLs en tu dashboard de Clerk

  • Agrega tu nuevo dominio como "Allowed origins"

Comandos Útiles

AnteriorGuía Completa de Migración a Supabase ExternoSiguienteScript de Migración de Storage

Última actualización