Vite项目部署到AWS EC2后出现WebSocket连接失败、服务丢失报错如何解决

问题原因 #

你遇到的报错是Vite开发模式下的热重载（HMR）Websocket连接失败导致的，生产环境本身不应该出现该报错，问题基本出在部署流程错误或者配置未区分环境。

解决方案 #

• 首先检查部署流程
  禁止在生产环境直接运行npm run dev，该命令启动的是本地开发服务器，内置了热重载、未压缩代码等开发专用逻辑，不适合线上使用。
  正确生产部署流程为：

  1. 执行npm run build，Vite会自动将项目编译为可直接托管的静态资源，输出到项目根目录的dist文件夹内
  2. 使用Nginx、Apache、Caddy等生产级Web服务器托管dist目录的静态资源即可，不要使用vite preview（也就是npm run serve）作为线上服务，该命令仅用于本地预览打包结果，不满足生产环境的稳定性、性能要求。

• 如果已经执行打包流程仍出现该报错，补充Vite配置
  在项目根目录新建/修改vite.config.js文件，明确区分开发/生产环境的HMR配置：

  export default {
    server: {
      // 仅开发环境开启HMR热重载
      hmr: process.env.NODE_ENV === 'development'
    },
    // 若项目部署在域名子路径下，可修改base配置为对应子路径，例如base: '/recorder/'
    base: '/'
  }
  

  修改配置后重新执行npm run build部署即可。

• Firebase相关检查
  确认Firebase配置已区分开发和生产环境，不要把本地开发阶段绑定localhost的配置带到生产环境，同时检查EC2实例的安全组规则是否已开放80（HTTP）、443（HTTPS）端口，且Web服务器的反向代理配置无规则冲突。

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