前言

項目開發差不多之后，部署到線上。總是提示網站連接不上私密連接，如圖所示：

這是有的瀏覽器對http協議的連接認為不安全的原因，https協議更加安全，我們項目上線后也應該部署為https協議。下面整理一下我這次升級過程中遇到的問題以及是如何解決的！

1、申請ssl證書

我的項目是Springboot單體項目，后臺管理系統thymeleaf+layui實現的，前臺vue。相當于是前臺分離，后臺管理是單體服務，

這次是Java項目，而且用了SpringBoot，他內部集成了tomcat，看了SpringBoot配置起來好像也不是很方便。

HTTPS需要SSL證書，SSL證書的申請可以在阿里云、騰訊云申請免費的證書。
不過免費的大多 都是一年的，我在這里推薦一個公共并且免費的ssl證書：Let’s Encrypt

也看過這樣一篇文章：
http不安全？改成https試試
還有這個：
SpringBoot 改造成https訪問
無一例外，這種jdk生成的證書是不安全 的，雖然實現了https訪問，但是實驗https訪問就是為了更安全，證書都不安全我們還用他來干啥，忽悠人那

因此就折中選擇了Nginx做服務器，轉發到Java項目，經過以前的幾個項目，對Nginx 的基本用法和配置還是了然于胸的。

服務器上我部署了寶塔面板來可視化管理系統服務器，主要是方便，寶塔上創建站點可以申請免費的Let’s Encrypt ssl證書。

使用方式也很簡單，選擇域名，申請下來之后在“其他證書”頁面點擊保存就可以了，而且，到期還可以自動續期申請，多好！。

申請下來這個第一步算是完成了。

2、修改配置文件

用這種方式申請ssl之后，就會在站點的配置文件下自動配置上ssl的證書路徑地址等。這里我也貼出來了，并且加上了一些注釋，就算用其他證書手動配置也是一樣的道理：

  #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

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)?$
    {
        # 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; 
    }

有時候人那，不能一直坐在那，多出去走走，說不定第二天醒來昨天困擾一晚上的bug夢里就給解決了呢！

中間還發現一些小問題，就不記錄了。

如果還有錯別字，那也就這樣吧…