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

柔光的暖阳◎ 2022-09-11 01:21 269阅读 0赞

### 目录 ###

*  [前言][Link 1]
 *  [1、申请ssl证书][1_ssl]
 *  [2、修改配置文件][2]
 *  [3、配置端口转发][3]
 *  [4、Nginx 配置域名支持 WSS][4_Nginx _ WSS]
 *  [5、发现的问题][5]

--------------------

# 前言 #

项目开发差不多之后，部署到线上。总是提示网站连接不上私密连接，如图所示：![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA44CB5ZSQ5Z-O_size_20_color_FFFFFF_t_70_g_se_x_16][]

这是有的浏览器对http协议的连接认为不安全的原因，https协议更加安全，我们项目上线后也应该部署为https协议。下面整理一下我这次升级过程中遇到的问题以及是如何解决的！

--------------------

HTTPS：是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。 HTTPS协议的主要作用可以分为两种：一种是建立一个信息安全通道，来保证数据传输的安全；另一种就是确认网站的真实性。

## 1、申请ssl证书 ##

我的项目是Springboot单体项目，后台管理系统thymeleaf+layui实现的，前台vue。相当于是前台分离，后台管理是单体服务，

这次是Java项目，而且用了SpringBoot，他内部集成了tomcat，看了SpringBoot配置起来好像也不是很方便。

> *HTTPS需要SSL证书，SSL证书的申请可以在阿里云、腾讯云申请免费的证书。*  
> 不过免费的大多 都是一年的，我在这里推荐一个公共并且免费的ssl证书：Let’s Encrypt

也看过这样一篇文章：  
[http不安全？改成https试试![icon-default.png?t=L892][icon-default.png_t_L892]/images/20220829/4cdc1b8b53604bbe9173b829d503ec6d.png][http_https_icon-default.png_t_L892_icon-default.png_t_L892_https_mp.weixin.qq.com_s_PesIzC-Y-7IZn20psBKO6Q]  
还有这个：  
[SpringBoot 改造成https访问![icon-default.png?t=L892][icon-default.png_t_L892]https://blog.csdn.net/kk\_star/article/details/83273045][SpringBoot _https_icon-default.png_t_L892_icon-default.png_t_L892_https_blog.csdn.net_kk_star_article_details_83273045]  
**无一例外，这种jdk生成的证书是不安全 的，虽然实现了https访问，但是实验https访问就是为了更安全，证书都不安全我们还用他来干啥，忽悠人那**

因此就折中选择了Nginx做服务器，转发到Java项目，经过以前的几个项目，对Nginx 的基本用法和配置还是了然于胸的。

服务器上我部署了[宝塔![icon-default.png?t=L892][icon-default.png_t_L892]/images/20220829/e3fec351e9984e2b8d5d8f981301243c.png][icon-default.png_t_L892_icon-default.png_t_L892_https_www.bt.cn]面板来可视化管理系统服务器，主要是方便，宝塔上创建站点可以申请免费的Let’s Encrypt ssl证书。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hY1d4_size_16_color_FFFFFF_t_70]  
使用方式也很简单，选择域名，申请下来之后在“其他证书”页面点击保存就可以了，而且，到期还可以自动续期申请，多好！。

申请下来这个第一步算是完成了。

## 2、修改配置文件 ##

用这种方式申请ssl之后，就会在站点的配置文件下自动配置上ssl的证书路径地址等。这里我也贴出来了，并且加上了一些注释，就算用其他证书手动配置也是一样的道理：

<code> #SSL-START SSL相关配置，请勿删除或修改下一行带注释的404规则
 #error_page 404/404.html;
 # 证书文件地址
 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
 </code>

## 3、配置端口转发 ##

<code> 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;
 }
 
 </code>

这是很重要的一步，这里不配置好前台就访问不到项目。到这里没有错误的话，重启一下Nginx 现在应该是可以进行访问了。  
**另外需要注意的是，部署了ssl之后，页面上的所有请求将会自动提升为https访问，所以前台项目vue中接口地址也要都改成https访问的，还有图片地址等等**。

其中图片的话我这里用的是阿里云的OSS，OSS默认是支持https协议的，如果配置了自定义域名和cdn加速的话，需要对加速的域名也开启https协议访问，我这里的证书也是用宝塔的Let’s Encrypt申请的。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hY1d4_size_16_color_FFFFFF_t_70 1]  
并且，前台页面中用到的oss的图片路径，也要全部更改为https的访问请求路径，要不然会报一大堆的警告：

> Mixed Content: The page at ‘＜URL＞‘ was loaded over HTTPS, but requested an insecure frame ‘＜URL＞‘…  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hY1d4_size_16_color_FFFFFF_t_70 2]

## 4、Nginx 配置域名支持 WSS ##

由于我的项目中使用了websocket协议，后台使用https协议的话会使ws协议报错，  
![在这里插入图片描述][20210424180834273.png]

> 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 域名位置加入如下配置：

<code>location /websocket {
 proxy_pass http://backend;
 proxy_http_version 1.1;
 proxy_set_header Upgrade $http_upgrade;
 proxy_set_header Connection "upgrade";
 }
 </code>

这样就完成了，在 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单体项目，上面有给前台提供的接口服务，这个时候接口可以访问了，但是我的后台管理缺打不开了！！！。报错情况如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hY1d4_size_16_color_FFFFFF_t_70 3]  
很明显是静态资源无法访问了，

这就奇了怪了，为这个问题可花费了我不少时间检查各种配置，  
检查上面端口转发，域名配置，springboot静态资源加载问题等等，  
依然是不能访问。

没办法，出去呼吸下新鲜空气，  
再回来看配置就发现Nginx下面还有这样一段配置，

<code> location ~ .*\.(js|css)?$
 {
 expires 12h;
 error_log /dev/null;
 access_log off; 
 }
 </code>

然后再想想，这不是我项目里的静态资源没有被转发代理到我的项目端口下面么。于是：  
改成如下配置，问题解决！

<code> location ~ .*\.(js|css)?$
 {
 # expires 12h;
 # error_log /dev/null;
 # access_log off; 
 
 #解决反向代理无法访问js,css
 proxy_pass http://127.0.0.1:8082;
 proxy_set_header Host $host;
 proxy_set_header X-Real-IP $remote_addr;
 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 expires 12h; 
 }
 </code>

*有时候人那，不能一直坐在那，多出去走走，说不定第二天醒来昨天困扰一晚上的bug梦里就给解决了呢！*中间还发现一些小问题，就不记录了。

[Link 1]: https://blog.csdn.net/MacWx/article/details/116092204?utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-1.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-1.no_search_link#_6
[1_ssl]: https://blog.csdn.net/MacWx/article/details/116092204?utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-1.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-1.no_search_link#1ssl_21
[2]: https://blog.csdn.net/MacWx/article/details/116092204?utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-1.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-1.no_search_link#2_46
[3]: https://blog.csdn.net/MacWx/article/details/116092204?utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-1.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-1.no_search_link#3_66
[4_Nginx _ WSS]: https://blog.csdn.net/MacWx/article/details/116092204?utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-1.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-1.no_search_link#4Nginx__WSS_91
[5]: https://blog.csdn.net/MacWx/article/details/116092204?utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-1.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-1.no_search_link#5_122
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA44CB5ZSQ5Z-O_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/4293fd72c79944d09d97568350e916dd.png
[icon-default.png_t_L892]: https://csdnimg.cn/release/blog_editor_html/release1.9.1/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=L892
[http_https_icon-default.png_t_L892_icon-default.png_t_L892_https_mp.weixin.qq.com_s_PesIzC-Y-7IZn20psBKO6Q]: /images/20220829/4cdc1b8b53604bbe9173b829d503ec6d.png
[SpringBoot _https_icon-default.png_t_L892_icon-default.png_t_L892_https_blog.csdn.net_kk_star_article_details_83273045]: /images/20220829/bd96127fed834f24b61d8dfd749ef2e7.png
[icon-default.png_t_L892_icon-default.png_t_L892_https_www.bt.cn]: /images/20220829/e3fec351e9984e2b8d5d8f981301243c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hY1d4_size_16_color_FFFFFF_t_70]: /images/20220829/af34bd2d5cf24832ac9c4b40132348c1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hY1d4_size_16_color_FFFFFF_t_70 1]: /images/20220829/85162a3ea2774c3ca1f7a424749c724c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hY1d4_size_16_color_FFFFFF_t_70 2]: /images/20220829/b7fe3faf22a34ab19eba4c0f32fbcb18.png
[20210424180834273.png]: /images/20220829/92ce271f8ed34b7d8c13fe21c33c5684.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hY1d4_size_16_color_FFFFFF_t_70 3]: /images/20220829/7eb7656406d240babda2c883c61d2772.png