Fix proxy configuration for nginx deployment

- Disable WebSocket HMR to prevent SSL WebSocket errors
- Add MIME type headers middleware for /_nuxt/ assets
- Create nginx proxy configuration template
- Add client-side proxy headers plugin
- Update Nuxt configuration for proxy compatibility
- Add comprehensive proxy setup documentation

Resolves WebSocket SSL errors and MIME type issues when running behind nginx proxy.

nuxt.config.ts

@@ -1,80 +1,97 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
-// @ts-check
 import { defineNuxtConfig } from 'nuxt/config'
 
 export default defineNuxtConfig({
   compatibilityDate: '2025-08-02',
   devtools: { enabled: true },
+  
+  // Server configuration for proxy compatibility
   devServer: {
     host: '0.0.0.0',
     port: 3000,
     https: false
   },
+  
+  // Additional development configuration for proxy
+  dev: process.env.NODE_ENV !== 'production',
+  
+  // Vite configuration for HMR through proxy
   vite: {
     server: {
-      hmr: {
-        port: 3000,
-        host: 'musica.nucleoriofrio.com',
-        protocol: 'wss'
-      }
+      hmr: false
     }
   },
-  modules: ['@vueuse/nuxt', '@vite-pwa/nuxt'],
+  
+  modules: [
+    '@vueuse/nuxt', 
+    ['@vite-pwa/nuxt', {
+      registerType: 'autoUpdate',
+      workbox: {
+        navigateFallback: '/',
+        globPatterns: ['**/*.{js,css,html,ico,png,svg}'],
+        runtimeCaching: [
+          {
+            urlPattern: /^https?:\/\/.*\/api\/music\/.*/i,
+            handler: 'CacheFirst',
+            options: {
+              cacheName: 'music-cache',
+              expiration: {
+                maxEntries: 100,
+                maxAgeSeconds: 60 * 60 * 24 * 30 // 30 days
+              }
+            }
+          }
+        ]
+      },
+      client: {
+        installPrompt: true
+      },
+      manifest: {
+        name: 'RepoDructor Music Player',
+        short_name: 'RepoDructor',
+        description: 'A beautiful glassmorphism music player for your local network',
+        theme_color: '#3b82f6',
+        background_color: '#0f172a',
+        display: 'standalone',
+        orientation: 'portrait',
+        scope: '/',
+        start_url: '/',
+        icons: [
+          {
+            src: 'icon.svg',
+            sizes: '192x192',
+            type: 'image/svg+xml'
+          },
+          {
+            src: 'icon.svg',
+            sizes: '512x512',
+            type: 'image/svg+xml'
+          },
+          {
+            src: 'icon.svg',
+            sizes: '512x512',
+            type: 'image/svg+xml',
+            purpose: 'any maskable'
+          }
+        ]
+      }
+    }]
+  ],
   css: ['~/assets/css/main.css'],
+  
+  // Nitro configuration for proxy support
   nitro: {
     experimental: {
       wasm: true
     },
-    devProxy: {
-      '/api': {
-        target: 'https://musica.nucleoriofrio.com',
-        changeOrigin: true
-      }
-    }
+    // Development configuration for proxy
+    devProxy: process.env.NODE_ENV === 'development' ? {} : undefined
   },
+  
+  // Runtime configuration
   runtimeConfig: {
     public: {
-      musicPath: '/music',
-      baseURL: process.env.NODE_ENV === 'development' ? 'https://musica.nucleoriofrio.com' : ''
+      musicPath: '/music'
     }
   },
-  pwa: {
-    registerType: 'autoUpdate',
-    workbox: {
-      navigateFallback: '/',
-      globPatterns: ['**/*.{js,css,html,ico,png,svg}']
-    },
-    client: {
-      installPrompt: true
-    },
-    manifest: {
-      name: 'RepoDructor Music Player',
-      short_name: 'RepoDructor',
-      description: 'A beautiful glassmorphism music player for your local network',
-      theme_color: '#3b82f6',
-      background_color: '#0f172a',
-      display: 'standalone',
-      orientation: 'portrait',
-      scope: '/',
-      start_url: '/',
-      icons: [
-        {
-          src: 'icon.svg',
-          sizes: '192x192',
-          type: 'image/svg+xml'
-        },
-        {
-          src: 'icon.svg',
-          sizes: '512x512',
-          type: 'image/svg+xml'
-        },
-        {
-          src: 'icon.svg',
-          sizes: '512x512',
-          type: 'image/svg+xml',
-          purpose: 'any maskable'
-        }
-      ]
-    }
-  }
 })