Nginx 配置 WebSocket 时遇到的问题总结

最近在项目开发中发现，应用的HMR无法正常使用了，下面记录下我本次解决该问题的一些经验总结

原因排查

首先是控制台有个socketjs-node的请求404，下面还有一些devserver无法连接的提示：

error

然后根据错误提示在网上查了一下相关的解决方案，没有查到什么有用的信息，所以去create-react-app仓库中查找了一下该提示，大致看了一下相关源码（create-react-app/webpackHotDevClient.js at master · facebook/create-react-app）：

webpackHotDevClient.js

那么问题就是在这里了，实际上webpack devServer就是借助webSocket来实现的，而上面的socketjs-node请求404了，自然devServer也无法正常使用

产生原因

那么上面之前devServer都是好使的，为何现在突然不能正常使用了呢？我找了一个devServer正常的环境，对比一下这个socketjs-node请求有何异同，发现这个socketjs-node请求是要带上启动的端口才能正常发送，而我们的项目中做了Nginx代理，这个这个请求在80服务器上肯定是没有的，所以能将改请求从默认服务器代理到webpack devServer启动的端口即可成功解决

另外，之前在项目中的publicPath是默认的/，也是因为改了此处，导致了请求404，所以如果使用create-react-app等脚手架时，可能会在其他地方使用到publicPath，所以在无必要的情况下，尽量不要去改动改配置，如果能理解这些配置，根据修改也无所谓

publicPath

解决方案

借助 devServer 请求转发

我首先想到的就是，使用webpack devServer提供的请求转发功能来讲socketjs-node请求正确代理，我在代理中加了代理的配置：

devServer proxy

添加完成后，发现这些代理根本没生效，原来是pubilcPath被修改导致无法正常使用此处的代理配置，那么就只好去Nginx中进行代理设置了

Nginx 代理

对于Nginx，我也不太熟悉，只能参照着写了，下面是我添加的配置：

Nginx Proxy

经过此番配置后，重新启动，发现有了新的错误：

websocket error

网上查阅了一下该错误，找到了一个解决方案，详情可查看下面的链接：

应该是webSocket连接在Nginx中配置还需要设置一些其他的请求头，在上面配置的基础上添加如下代码：

{
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection "upgrade";
}

重新启动Nginx后，webSocket请求可以正常发送，并且项目的devServer和HMR重新正常使用

shuangmianxiaoQ / study-note