Nuxt+Nginx部署WebSocket连接异常问题修复请求

将Nuxt应用部署在/backoffice路径下，配置了Nginx反向代理与Nuxt相关配置，但访问/backoffice页面时，浏览器控制台出现WebSocket连接错误，尝试修改Vite HMR配置后未解决问题，需修复该错误。

当前配置 #

1. Nginx 配置（nginx.conf） #

map $http_upgrade $connection_upgrade {
    default upgrade;
    '' close;
}

server {
    listen 127.0.0.1:880 ssl http2;

    server_name example.domain.com;

    ssl_certificate /etc/ssl/example.crt;
    ssl_certificate_key /etc/ssl/example.key;
    port_in_redirect off;

    location ~ /_nuxt {
        proxy_redirect                      off;
        proxy_set_header Host               $host;
        proxy_set_header X-Real-IP          $remote_addr;
        proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
        proxy_read_timeout                  1m;
        proxy_connect_timeout               1m;
        proxy_pass                          http://127.0.0.1:3000;  
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $connection_upgrade;
        proxy_cache_bypass $http_upgrade;
    }

    # My application is running at /backoffice
    location /backoffice {
        proxy_redirect                      off;
        proxy_set_header Host               $host;
        proxy_set_header X-Real-IP          $remote_addr;
        proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
        proxy_read_timeout                  1m;
        proxy_connect_timeout               1m;
        proxy_pass                          http://127.0.0.1:3000;  
    }
    
   # php page
    location / {
    try_files $uri $uri/ /index.php?$args;
    }
}

2. Nuxt 配置（nuxt.config.ts） #

import { fileURLToPath } from 'node:url'

export default defineNuxtConfig({
  app: {
    head: {
      title: 'BackOffice',
    },
  },

  devtools: {
    enabled: true,
  },

  vite: {
    define: { 'process.env': {} },
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('.', import.meta.url)),
        '@core': fileURLToPath(new URL('./@core', import.meta.url)),
      },
    },
  },

  hooks: {
    'vite:extendConfig'(viteInlineConfig) {
      viteInlineConfig.server = {
        ...viteInlineConfig.server,
      };
    },
  },

})

3. package.json 配置 #

{
  "scripts": {
    "dev": "nuxt dev --host 127.0.0.1 --port 3000",
    "build": "node --max-old-space-size=4096 node_modules/nuxt/bin/nuxt.mjs build",
    "preview": "nuxt preview",
    "start": "HOST=127.0.0.1 PORT=3000  node .output/server/index.mjs"
  },
  "dependencies": {
    "nitropack": "^2.9.6",
    "vue": "^3.3.4"
  
  },
  "devDependencies": {
    "@nuxt/devtools": "latest",
    "@nuxtjs/device": "^3.1.1",
    "@pinia/nuxt": "^0.5.1",
    "nuxt": "^3.11.2",
    "vite": "^5.2.11",
    "vite-plugin-vuetify": "1.0.2",
    "vue": "^3.3.8"
  }
}

错误信息 #

WebSocket connection to 'wss://example.domain.com/_nuxt/' failed:
Uncaught (in promise) DOMException: Failed to construct 'WebSocket': The URL 'wss://localhost:undefined/_nuxt/' is invalid.

已尝试的方案 #

修改nuxt.config.ts中的Vite HMR配置，但未解决问题：

hooks: {
  'vite:extendConfig'(viteInlineConfig) {
    viteInlineConfig.server = {
      ...viteInlineConfig.server,
      hmr: {
         protocol: 'wss',
         clientPort: 443,
      };
    },
  },
}

问题根源在于Nuxt应用未配置基础路径，且WebSocket（HMR）的代理与客户端配置不匹配，需同时调整Nginx和Nuxt的配置：

1. 修改 Nuxt 配置（nuxt.config.ts） #

指定应用基础路径，并正确配置Vite HMR的客户端地址：

import { fileURLToPath } from 'node:url'

export default defineNuxtConfig({
  app: {
    head: {
      title: 'BackOffice',
    },
    // 配置应用的基础路径，与Nginx代理的路径一致
    baseURL: '/backoffice/'
  },

  devtools: {
    enabled: true,
  },

  vite: {
    define: { 'process.env': {} },
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('.', import.meta.url)),
        '@core': fileURLToPath(new URL('./@core', import.meta.url)),
      },
    },
    // 配置HMR参数，匹配Nginx的访问地址
    server: {
      hmr: {
        protocol: 'wss',
        host: 'example.domain.com',
        port: 880, // 对应Nginx监听的端口
        clientPort: 880
      }
    }
  },

  // 移除多余的hooks配置，直接在vite.server.hmr中配置即可
})

2. 修改 Nginx 配置 #

调整代理规则，确保路径正确传递，同时修正WebSocket代理逻辑：

map $http_upgrade $connection_upgrade {
    default upgrade;
    '' close;
}

server {
    listen 127.0.0.1:880 ssl http2;

    server_name example.domain.com;

    ssl_certificate /etc/ssl/example.crt;
    ssl_certificate_key /etc/ssl/example.key;
    port_in_redirect off;

    # 代理Nuxt的静态资源与HMR路径，包含backoffice下的_nuxt路径
    location ~ ^/(backoffice/_nuxt|_nuxt) {
        proxy_redirect off;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_read_timeout 1m;
        proxy_connect_timeout 1m;
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $connection_upgrade;
        proxy_cache_bypass $http_upgrade;
    }

    # 代理/backoffice路径，末尾加/确保完整路径传递到Nuxt
    location /backoffice {
        proxy_redirect off;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_read_timeout 1m;
        proxy_connect_timeout 1m;
        proxy_pass http://127.0.0.1:3000/backoffice/;
    }
    
   # php page
    location / {
        try_files $uri $uri/ /index.php?$args;
    }
}

3. 验证修改 #

• 重启Nginx服务：sudo nginx -s reload
• 重启Nuxt开发服务：npm run dev
• 访问https://example.domain.com:880/backoffice，检查控制台是否还有WebSocket错误

内容的提问来源于stack exchange，提问作者TrentOster