记一次网站全站http升级为https的过程，websocket ： ws升级为wss遇到的问题等

ssl_certificate /www/server/panel/vhost/cert/admin.xxx.com/fullchain.pem;

ssl_certificate_key /www/server/panel/vhost/cert/admin.xxx.com/privkey.pem;

协议配置

ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;

ssl_ciphers EECDH+CHACHA20:EECDH+CHACHA20-draft:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5;

ssl_prefer_server_ciphers on;

ssl_session_cache shared:SSL:10m;

ssl_session_timeout 10m;

add_header Strict-Transport-Security “max-age=31536000”;

error_page 497 https://$host$request_uri;

#SSL-END

3、配置端口转发

---

location / {

配置代理转发主机名

proxy_set_header Host $host;

在服务器上获得用户的真实ip

proxy_set_header X-Real-IP $remote_addr;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

proxy_set_header X-Forwarded-Proto $scheme;

配置转发的ip地址和端口号

proxy_pass http://127.0.0.1:8082/;

proxy_set_header X-Forwarded-Port $server_port;

}

这是很重要的一步，这里不配置好前台就访问不到项目。到这里没有错误的话，重启一下Nginx 现在应该是可以进行访问了。

另外需要注意的是，部署了ssl之后，页面上的所有请求将会自动提升为https访问，所以前台项目vue中接口地址也要都改成https访问的，还有图片地址等等。

其中图片的话我这里用的是阿里云的OSS，OSS默认是支持https协议的，如果配置了自定义域名和cdn加速的话，需要对加速的域名也开启https协议访问，我这里的证书也是用宝塔的Let’s Encrypt申请的。

并且，前台页面中用到的oss的图片路径，也要全部更改为https的访问请求路径，要不然会报一大堆的警告：

Mixed Content: The page at ‘＜URL＞‘ was loaded over HTTPS, but requested an insecure frame ‘＜URL＞‘…

4、Nginx 配置域名支持 WSS

---

由于我的项目中使用了websocket协议，后台使用https协议的话会使ws协议报错，

Websocket使用 ws 或 wss 的统一资源标志符，类似于 HTTP 或 HTTPS ，其中 wss 表示在 TLS 之上的 Websocket ，相当于 HTTPS 了。如：

ws://example.com/chat

wss://example.com/chat

默认情况下，Websocket 的 ws 协议使用 80 端口；运行在TLS之上时，wss 协议默认使用 443 端口。其实说白了，wss 就是 ws 基于 SSL 的安全传输，与 HTTPS 一样样的道理。

如果你的网站是 HTTPS 协议的，那你就不能使用 ws:// 了，浏览器会 block 掉连接。

所以这个时候，需要Nginx 配置域名支持 WSS，

不用废话，直接在配置 HTTPS 域名位置加入如下配置：

location /websocket {

proxy_pass http://backend;

proxy_http_version 1.1;

proxy_set_header Upgrade $http_upgrade;

proxy_set_header Connection “upgrade”;

}

这样就完成了，在 HTTPPS 下以域名方式连接 WebSocket ，可以开心的玩耍了。

稍微解释一下 Nginx 配置

Nginx 自从 1.3 版本就开始支持 WebSocket 了，并且可以为 WebSocket 应用程序做反向代理和负载均衡。

WebSocket 和 HTTP 协议不同，但是 WebSocket 中的握手和 HTTP 中的握手兼容，它使用 HTTP 中的 Upgrade 协议头将连接从 HTTP 升级到 WebSocket，当客户端发过来一个 Connection: Upgrade 请求头时，Nginx 是不知道的，所以，当 Nginx 代理服务器拦截到一个客户端发来的 Upgrade 请求时，需要显式来设置 Connection 、 Upgrade 头信息，并使用 101（交换协议）返回响应，在客户端和代理服务器、后端服务器之间建立隧道来支持 WebSocket。

当然，还需要注意一下，WebSockets 仍然受到 Nginx 缺省为60秒的 proxy_read_timeout 的影响。这意味着，如果你有一个程序使用了 WebSockets，但又可能超过60秒不发送任何数据的话，那你要么需要增加超时时间，要么实现一个 ping 的消息以保持联系。使用 ping 的解决方法有额外的好处，可以发现连接是否被意外关闭。

5、发现的问题

---

nginx反向代理部署springboot项目报404无法加载静态资源：

由于我的后台管理系统是springboot单体项目，上面有给前台提供的接口服务，这个时候接口可以访问了，但是我的后台管理缺打不开了！！！。报错情况如下图所示：

很明显是静态资源无法访问了，

这就奇了怪了，为这个问题可花费了我不少时间检查各种配置，

检查上面端口转发，域名配置，springboot静态资源加载问题等等，

依然是不能访问。

没办法，出去呼吸下新鲜空气，

再回来看配置就发现Nginx下面还有这样一段配置，

location ~ .*.(js|css)?$

{

expires 12h;

error_log /dev/null;

access_log off;

}

然后再想想，这不是我项目里的静态资源没有被转发代理到我的项目端口下面么。于是：

改成如下配置，问题解决！

location ~ .*.(js|css)?$

{
最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最后写上我自己一直喜欢的一句名言：世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它