Documentación

Guía completa para implementar y gestionar tu portafolio fotográfico Galleria.

Introducción

Galleria es un sitio web moderno de portafolio fotográfico construido con React 19, TypeScript, Express 5 y SQLite. Presenta entrega de imágenes optimizada, panel de administración, seguimiento de análisis y diseño responsivo.

Enlaces rápidos

Configuración de Google OAuth SSO

Habilitar el inicio de sesión único de Google OAuth para una autenticación segura y sin contraseña en su panel de administración de Galleria.

Paso 1: Crear un proyecto de Google Cloud

  1. Ir a la Consola de Google Cloud
  2. Crear un nuevo proyecto o seleccionar uno existente
  3. Navegar a APIs y Servicios → Credenciales
  4. Hacer clic en Crear credenciales → ID de cliente OAuth
  5. Si se solicita, configure primero la pantalla de consentimiento de OAuth

Paso 2: Configurar el cliente OAuth

  1. Seleccionar aplicación web como tipo de aplicación
  2. Agregar su dominio a Orígenes JavaScript autorizados:
    https://yourdomain.com
  3. Agregar la URL de callback a URIs de redirección autorizados:
    https://yourdomain.com/api/auth/google/callback
  4. Hacer clic en Crear y guardar sus credenciales

Paso 3: Configurar en la configuración de Galleria

  1. Iniciar sesión en su panel de administración de Galleria
  2. Navegar a Configuración → Google OAuth
  3. Ingresa tu ID de cliente de Google
  4. Ingresa tu secreto de cliente de Google
  5. Haz clic en Guardar para habilitar SSO de Google OAuth

Conversión automática de usuarios: Los usuarios existentes con direcciones de correo electrónico coincidentes se convertirán automáticamente a la autenticación de Google OAuth. Pueden iniciar sesión con Google inmediatamente después de que OAuth esté configurado.

Consejo de seguridad: Solo agrega direcciones de correo electrónico de confianza como usuarios administradores. Puedes gestionar el acceso de los usuarios desde el panel de administración después de la configuración inicial.

Configuración de OpenObserve Analytics

OpenObserve proporciona potentes análisis de registros y monitoreo en tiempo real para tu sitio web de Galleria con capacidades de geo-enriquecimiento.

Paso 1: Instala OpenObserve con Docker

Ejecuta OpenObserve usando Docker Compose:

Paso 2: Crea una cuenta de servicio

  1. Accede a OpenObserve en http://localhost:5080
  2. Inicia sesión con tus credenciales de administrador
  3. Navega a Configuración → Cuentas de servicio
  4. Haz clic en Crear cuenta de servicio
  5. Dale un nombre (por ejemplo, "galleria-analytics") y asigna los permisos apropiados
  6. Copia el token de API generado para uso posterior

Paso 7: Configurar Galleria

  1. Inicie sesión en su panel de administración de Galleria
  2. Navegue a Configuración → Analítica
  3. Ingrese su URL de OpenObserve (por ejemplo, http://localhost:5080)
  4. Ingrese su ID de Organización
  5. Ingrese su Nombre de Flujo (sitio web)
  6. Ingrese su Nombre de Usuario (del Paso 2)
  7. Ingrese su Contraseña (el token de cuenta de servicio del Paso 2)
  8. Haga clic en Guardar para habilitar la analítica de OpenObserve

¡Éxito! Su analítica ahora incluirá datos geo-enriquecidos con ciudad, región, país, ISP y coordenadas para todos los visitantes.

Codificación de Video por Hardware

Galleria admite codificación de video acelerada por hardware para un procesamiento de video de 5 a 10 veces más rápido utilizando su GPU.

Hardware Compatible

GPUs NVIDIA (NVENC)

Soporte de Docker y nativo

Intel Quick Sync (QSV)

Soporte solo nativo

GPUs AMD (AMF)

Soporte nativo únicamente

Apple VideoToolbox

solo nativo de macOS

Habilitar codificación de hardware

  1. Ve al Panel de Administración → Configuración → Calidad de Video
  2. Activa "Transcodificación de Hardware"
  3. El procesamiento de video ahora utilizará aceleración de GPU cuando esté disponible

Despliegue en Producción

Usando PM2

Para despliegue en producción sin Docker:

npm run build
npm install -g pm2
pm2 start ecosystem.config.cjs
pm2 save
pm2 startup

Despliegue Automatizado: Haz un push a la rama master y GitHub Actions despliega automáticamente tus cambios.

Ayuda a Mejorar Esta Documentación

¿Encontraste un error o quieres contribuir a la documentación? ¡Agradecemos las contribuciones!

Contribuir en GitHub