目錄
1）為什么要配置SSL證書？
2）為什么阿里云OSS自定義域名也要配置SSL證書？
3）為什么WebSocket會報錯呢？
?解決方法
一、配置網(wǎng)站ssl證書
二、阿里云OSS自定義域名如何配置SSL證書?
三、websocket失效后如何從ws換成wss
1）為什么要配置SSL證書？
SSL證書是數(shù)字證書的一種，類似于駕駛證、護照和營業(yè)執(zhí)照的電子副本。因為配置在服務(wù)器上，也稱為SSL服務(wù)器證書。
SSL證書通過在客戶端瀏覽器和web瀏覽器之間建立一條SSL安全通道（Secure socket layer(SSL)，對傳送的數(shù)據(jù)進行加密和隱藏；確保數(shù)據(jù)在傳送中不被改變，保證數(shù)據(jù)的完整性，現(xiàn)已成為該領(lǐng)域中全球化的標(biāo)準(zhǔn)。由于SSL技術(shù)已建立到所有主要的瀏覽器和WEB服務(wù)器程序中，因此，僅需安裝服務(wù)器證書就可以激活該功能了，即通過它可以激活SSL協(xié)議，實現(xiàn)數(shù)據(jù)信息在客戶端和服務(wù)器之間的加密傳輸，可以防止數(shù)據(jù)信息的泄露，保證了雙方傳遞信息的安全性，而且用戶可以通過服務(wù)器證書驗證他所訪問的網(wǎng)站是否是真實可靠。
如今，大型正規(guī)網(wǎng)站隨處可見均配置了SSL證書，以https協(xié)議進行交互，如阿里巴巴、京東、淘寶、百度等等，所以如果網(wǎng)站需要走向市場，就必須配置SSL證書。
?2）為什么阿里云OSS自定義域名也要配置SSL證書？
因為在https的網(wǎng)站中，大部分瀏覽器是會限制訪問http的，需要客戶許可后才能進行訪問，大大影響使用體驗及網(wǎng)站效果。
3）為什么WebSocket會報錯呢？
因為在https下應(yīng)該使用wss協(xié)議做安全鏈接，而不是ws，且wss下不支持ip地址的寫法，只能寫成域名形式，如下圖：
let ws = new WebSocket('ws://127.0.0.1:8081');
let wss = new WebSocket('wss://www.test.com');?解決方法
一、配置網(wǎng)站ssl證書
（一）申請證書
證書申請 - FreeSSL.cn一個提供免費HTTPS證書申請的網(wǎng)站??
1、這里因為是教學(xué)，所以選擇3個月的就好了?
?2、然后依次單擊”訂單管理-申請證書“；
3、因為是個人用，選一個非商業(yè)證書免費的就可以了?；
?4、這里的通用名稱，最好把項目的域名及阿里云OSS的自定義域名一起放進去，共用一個SSL，不然你就要重復(fù)這一個步驟，然后提交申請；
?5、點擊”獲取驗證信息“，可以看到3個關(guān)鍵信息，依次將這3個信息，到【阿里云-域名解析-添加記錄】中，對應(yīng)粘貼進去保存即可，耐心等待證書簽發(fā)下來，需要10幾分鐘后。
?
6、簽發(fā)成功后，點擊右側(cè)【證書操作-下載證書】，因為阿里云OSS是nginx類型的，剛好我的項目也是nginx代理的，所以下載nginx版本的。?
?
?（二）配置站點
?下載后會有兩個文件，一個是PEM文件，一個是KEY文件，在寶塔面板中，選擇對應(yīng)站點，點擊【SSL】選項，先在【當(dāng)前證書】中將下載的2個文件對應(yīng)復(fù)制粘貼上去，然后提交，再點擊【證書夾】，點擊【部署】即可。這時候你的網(wǎng)站就會變成https了。
二、阿里云OSS自定義域名如何配置SSL證書?
?如果前面SSL證書域名沒有帶上這個自定義的子域名，就需要重新走一遍前面的申請證書流程
?然后再去【阿里云OSS控制臺--對象存儲--Bucket--Bucket配置--域名管理】中，點擊【證書托管】
依次點擊【上傳SSL證書--上傳證書】，然后將對應(yīng)文件上傳，點擊保存即可。上傳完成后，就可以選擇該證書，一般要等幾分鐘才會生效。
三、websocket失效后如何從ws換成wss
第一步，前端訪問地址要做修改為wss連接。
let wss = new WebSocket('wss://你的域名/ws');第二步，直接使用wss的話，因為我的端口不是443，所以需要nginx轉(zhuǎn)發(fā)一下；修改nginx的配置文件proxy_pass指向的是真實的端口。
location /ws{
proxy_pass http://120.XX.X.XXX:8082;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}?第三步，這樣就算能一切恢復(fù)正常，但是wss有一個機制，1分鐘內(nèi)連接沒有任何操作會自動關(guān)閉前端的連接，所以需要一個心跳機制來維持連接，這里就不詳細(xì)介紹了。
備注：如果wss獲取用戶的ip會因為nginx的代理原因，拿到的是自己服務(wù)器的ip地址，如需真實用戶的ip的地址，可以在上一步中添加兩行代碼：文章來源：http://www.zghlxwxcb.cn/news/detail-468223.html
location /ws{
proxy_pass http://120.XX.X.XXX:8082;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
#返回用戶真實ip
proxy_set_header X-real-ip $remote_addr;
proxy_set_header X-Forwarded-For $remote_addr;
}然后在wss服務(wù)端，通過如下代碼，獲取真實用戶ip文章來源地址http://www.zghlxwxcb.cn/news/detail-468223.html
// 獲取ip地址
const ip = req.headers['x-real-ip'] || req.connection.remoteAddress到了這里，關(guān)于配置域名SSL證書、阿里云OSS自定義域名的SSL證書，以及解決配置后WebSocket報錯問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
