Files
amayo/AmayoWeb/FRONTEND_DEPLOYMENT.md
2025-12-01 18:59:48 +00:00

2.3 KiB

Deployment Instructions - Frontend Update

Problema Resuelto

El botón de "Login with Discord" estaba usando una ruta relativa /auth/discord que en producción se convertía en https://docs.amayo.dev/auth/discord (frontend) en lugar de https://api.amayo.dev/auth/discord (backend).

Cambios Realizados

1. LoginView.vue

// ANTES:
<a href="/auth/discord" class="discord-btn">

// DESPUÉS:
<a :href="discordAuthUrl" class="discord-btn">

// Script agregado:
const apiUrl = import.meta.env.VITE_API_URL || 'http://localhost:3000'
const discordAuthUrl = `${apiUrl}/auth/discord`

2. .env

# ANTES:
VITE_API_URL=http://localhost:3000

# DESPUÉS:
VITE_API_URL=https://api.amayo.dev

Pasos para Deployment en Servidor

# 1. Ir al directorio del frontend
cd /home/shnimlz/amayo/AmayoWeb

# 2. Asegurarse de que .env tiene la URL correcta
cat .env
# Debe mostrar: VITE_API_URL=https://api.amayo.dev

# 3. Instalar dependencias (si es necesario)
npm install

# 4. Hacer build de producción
npm run build

# 5. Copiar archivos built al directorio de Nginx
sudo cp -r dist/* /var/www/docs.amayo.dev/

# 6. Verificar permisos
sudo chown -R www-data:www-data /var/www/docs.amayo.dev

# 7. Reiniciar Nginx (opcional)
sudo systemctl reload nginx

Verificación

  1. Abre https://docs.amayo.dev en modo incógnito
  2. Click en "Continue with Discord"
  3. Deberías ser redirigido a: https://api.amayo.dev/auth/discord
  4. Luego a Discord OAuth page
  5. Luego de vuelta a: https://api.amayo.dev/auth/callback
  6. Finalmente redirigido a: https://docs.amayo.dev/dashboard
  7. Verifica que la sesión persiste al hacer refresh

Troubleshooting

Si sigue redirigiendo incorrectamente:

  1. Verifica que el build usó la variable correcta:

    grep -r "api.amayo.dev" /var/www/docs.amayo.dev/assets/*.js
    
  2. Limpia cache del navegador completamente

  3. Verifica que el archivo .env tiene la URL correcta ANTES de hacer npm run build

Si aparece error de CORS:

  • El backend ya tiene configurado CORS para https://docs.amayo.dev
  • Verifica en DevTools → Network que las requests tengan Access-Control-Allow-Origin header