logo
icon

Supabase

Una alternativa de código abierto a Firebase. Estamos construyendo las características de Firebase utilizando herramientas de código abierto de nivel empresarial.

template cover
Implementado1979 veces
EditorzeaburZeabur
Creado2024-04-03
Servicios
service icon
service icon
service icon
service icon
service icon
service icon
service icon
service icon
service icon
service icon
service icon
service icon
Etiquetas
CMSDatabaseToolAPI

Desplegando Supabase

Supabase es una alternativa popular y de código abierto a Firebase. Proporciona un conjunto de herramientas que incluye una base de datos Postgres, autenticación, APIs y almacenamiento de archivos, lo que lo convierte en una solución de backend robusta.

Zeabur simplifica el despliegue de este stack complejo. Con Zeabur, puedes lanzar una instancia de Supabase totalmente funcional (incluyendo Kong Gateway, Authentication y PostgreSQL) con un solo clic y sin configuración manual.

Lo que aprenderás

En este tutorial, te guiaremos a través de:

  1. Desplegar un stack de servicios de Supabase desde el Marketplace de Zeabur.
  2. Acceder al Dashboard de Supabase a través del Kong Gateway.
  3. Obtener tus claves de API y conectar tu aplicación.

⚠️ Limitaciones importantes:

Sin logs en la UI: La función "Logs" en Supabase Studio no funcionará (debido a la ausencia del servicio Vector). Debes revisar los logs desde el panel de Zeabur para cada servicio. Sin MCP: El servidor de AI Model Context Protocol no está incluido en esta plantilla.

Fase 1: Desplegando el servicio

Paso 1: Crear el servicio de Supabase

Zeabur ofrece un "despliegue con un clic" a través de su marketplace de plantillas.

Opción 1: Crear una instancia de Supabase desde la página del Proyecto

  1. Inicia sesión en tu Zeabur Dashboard.
  2. Haz clic en el botón "Add Service".
  3. Selecciona "Template" (Marketplace).
  4. Busca Supabase.
  5. Selecciona la plantilla Supabase. Tus servicios (incluyendo PostgreSQL, minio y Kong) comenzarán a desplegarse de inmediato.

Paso 2: Acceder al Dashboard de Supabase (Kong Gateway)

A diferencia de una base de datos independiente, Supabase en Zeabur usa un Kong Gateway para gestionar el acceso. Necesitas obtener credenciales para iniciar sesión en la UI.

  1. Ve al panel del servicio Kong dentro de tu proyecto.
  2. Ahí encontrarás el Supabase Username y el Supabase Password.
  3. Ve a la sección Domains en el lateral del panel de Kong y haz clic en la URL proporcionada.
  4. Usa las credenciales del paso 2 para iniciar sesión en el Dashboard de Supabase.

kong.png

Fase 2: Asegurar tu instancia (CRÍTICO)

⚠️ ADVERTENCIA: La plantilla se despliega con claves API por defecto para fines de demostración. DEBES generar nuevas claves antes de usarlo en producción, o cualquiera que conozca las claves por defecto podrá acceder a tu base de datos.

Paso 1: Generar nuevas claves

  1. Visita el Supabase JWT Generator.
  2. Crea un JWT_SECRET personalizado y usa la herramienta para generar:
    • Una clave anon.
    • Una clave service_role.

Paso 2: Actualizar variables de entorno de Kong

  1. Regresa al servicio Kong en Zeabur.
  2. Ve a la pestaña Variables.
  3. Actualiza los siguientes valores con tus nuevas claves:
    • JWT_SECRET: Tu secreto personalizado.
    • ANON_KEY: Tu nueva clave anon.
    • SERVICE_ROLE_KEY: Tu nueva clave service_role.

Paso 3: Reiniciar servicios

Para aplicar estos cambios de seguridad, debes reiniciar el stack:

  1. Ve a Project Settings → General.
  2. Desplázate hasta Batch Actions.
  3. Haz clic en Restart All.

Fase 3: Configuración (Auth y correo)

Por defecto, Supabase no puede enviar correos (magic links, restablecimiento de contraseña). Necesitas configurar un proveedor SMTP. Recomendamos Resend, pero cualquier proveedor SMTP funciona.

Paso 1: Configurar SMTP (correo)

  1. Ve al servicio Auth en tu proyecto de Zeabur.
  2. Ve a la pestaña Variables y agrega lo siguiente:
    • GOTRUE_SMTP_HOST: smtp.resend.com (o tu proveedor)
    • GOTRUE_SMTP_PORT: 587
    • GOTRUE_SMTP_USER: resend (o tu usuario)
    • GOTRUE_SMTP_PASS: re_123... (tu API Key)
    • GOTRUE_SMTP_ADMIN_EMAIL: noreply@yourdomain.com
    • GOTRUE_SITE_URL: https://your-project-domain.zeabur.app (el enlace al que se redirige a los usuarios)
  3. Reinicia el servicio Auth para aplicar los cambios.

Paso 2: Configurar OAuth (Google/Apple) - Opcional

Para habilitar Google Login, agrega estas variables al servicio Auth:

  • GOTRUE_EXTERNAL_GOOGLE_ENABLED: true
  • GOTRUE_EXTERNAL_GOOGLE_CLIENT_ID: your-google-client-id
  • GOTRUE_EXTERNAL_GOOGLE_SECRET: your-google-secret
  • GOTRUE_EXTERNAL_GOOGLE_REDIRECT_URI: https://your-project.zeabur.app/auth/v1/callback

Nota: Asegúrate de reemplazar your-project.zeabur.app por tu dominio real.

Paso 3: Probar el correo (manual)

Una vez que el servicio se reinicie, verifica la configuración disparando un signup manualmente desde tu terminal:

curl -X POST "https://your-project.zeabur.app/auth/v1/signup" \
  -H "Content-Type: application/json" \
  -H "apikey: YOUR_ANON_KEY" \
  -d '{
    "email": "test@example.com",
    "password": "yourpassword"
  }'

Resultados esperados:

  • Recibes una respuesta JSON 200 OK.
  • Llega un correo de verificación a test@example.com (revisa spam).

Solución de problemas de correo

  • Redirect URI Mismatch: Asegúrate de que GOTRUE_SITE_URL coincida exactamente con tu dominio desplegado.
  • SPF/DKIM: Si usas un dominio personalizado, asegúrate de que tus registros DNS cumplan los requisitos de tu proveedor SMTP para evitar rechazos.
  • Entrega: Los primeros correos suelen ir a spam; "calienta" tu dominio o márcalo como "no es spam".

Fase 4: Conectar con Supabase

Requisito previo: Obtener tus claves API

Crucial: No copies las claves desde el dashboard de Supabase Studio, ya que puede mostrar claves por defecto antiguas.

  1. Ve al servicio Kong en Zeabur → Variables.
  2. Copia tu ANON_KEY y la URL de tu dominio.

Opción 1: Conectar tu frontend/app

Mejor para: Conectar tu proyecto de Lovable o una aplicación web estándar.

Para habilitar la comunicación entre tu aplicación frontend y tu backend de Supabase, debes configurar variables de entorno en tu base de código.

  1. Crea o abre tu archivo .env en la raíz del proyecto.

  2. Agrega las credenciales encontradas en el paso de Requisito previo:

    VITE_SUPABASE_URL=[your-project-url]
VITE_SUPABASE_ANON_KEY=[your-anon-key]

Opción 2: Sincronizar el esquema de base de datos (CLI)

Mejor para: Desarrolladores que empujan cambios locales de base de datos a la instancia de producción.

Puedes empujar tu esquema local a Supabase usando la cadena de conexión.

  1. Obtener la cadena de conexión: Ve al panel del servicio PostgreSQL (parte del stack de Supabase) en tu dashboard de Zeabur.

  2. Copiar: Copia la cadena de conexión de PostgreSQL.

    PostgreSQL Connection String

  3. Ejecutar: Ejecuta el siguiente comando en tu terminal (asegúrate de tener instalado Supabase CLI):

    supabase db push --db-url "[your-supabase-postgresql-connection-string]" --debug

Fase 4.5: Conectar tu app (entre servicios)

Cuando despliegues tu aplicación en Zeabur junto con Supabase, debes inyectar las credenciales en el entorno de despliegue.

La forma manual

  1. Ve a la configuración de tu App Service en Zeabur.
  2. Haz clic en el botón Configurable (o ve a la pestaña Variables).
  3. Agrega las siguientes variables:
    • VITE_SUPABASE_URL: Pega la URL de tu proyecto.
    • VITE_SUPABASE_ANON_KEY: Pega tu clave pública anon.

Pista: Asegúrate de que archivos de credenciales como .env estén listados en tu .gitignore para evitar filtraciones de secretos.

Fase 5: Configuración avanzada (Opcional)

Agrega estas variables a los servicios específicos para habilitar funciones avanzadas.

1. Hooks avanzados de Auth (servicio Auth)

Agrega estos valores a las variables del servicio Auth para disparar funciones Postgres en eventos específicos:

  • Custom Access Token Hook:
    • GOTRUE_HOOK_CUSTOM_ACCESS_TOKEN_ENABLED=true
    • GOTRUE_HOOK_CUSTOM_ACCESS_TOKEN_URI=pg-functions://postgres/public/custom_access_token_hook
  • MFA Verification Hook:
    • GOTRUE_HOOK_MFA_VERIFICATION_ATTEMPT_ENABLED=true
    • GOTRUE_HOOK_MFA_VERIFICATION_ATTEMPT_URI=pg-functions://postgres/public/mfa_verification_attempt
  • Password Verification Hook:
    • GOTRUE_HOOK_PASSWORD_VERIFICATION_ATTEMPT_ENABLED=true
    • GOTRUE_HOOK_PASSWORD_VERIFICATION_ATTEMPT_URI=pg-functions://postgres/public/password_verification_attempt

2. Asistente de IA en Studio (servicio Studio)

Habilita el asistente de SQL con IA en el dashboard agregando esto a las variables del servicio Studio:

  • OPENAI_API_KEY=your-openai-api-key

3. Ajustes de seguridad (servicio Auth)

  • GOTRUE_EXTERNAL_SKIP_NONCE_CHECK=true (Útil para Google Sign In en mobile)
  • GOTRUE_MAILER_SECURE_EMAIL_CHANGE_ENABLED=true (Forzar verificación de correo en cambios de email)