2021-10-29 利用nginx實作https的websocket轉發-有解無憂

利用nginx實作https的websocket轉發

環境描述：

web服務器為nginx，前端為一個vue專案
后端為golang專案，為前端提供api服務
域名的cname由cloudflare托管，并選擇“始終使用HTTPS”
前端需要使用websocket做實時顯示和推送

問題：

假如專案全盤使用http，則一切正常
nginx升級到https后，websocket失效，但強行使用http訪問，勉強也能用
改由cloudflare托管后，因為全盤默認為 https，所以也就無法再“勉強使用”了

解決方案：

nginx部分：修改conf組態檔
首先按照常規方式配置https，比如申請證書，設定443埠等，然后再將URL的/api 以及 /websocket 做兩個轉發，nginx.conf 檔案摘抄如下：

server {
        # cloudflare始終使用https，因此80埠不需要再設定了	
        listen       443 ssl;
        server_name  mysite.com;
        # 證書路徑：
        ssl_certificate      /cert/mysite.com.pem;
        ssl_certificate_key  /cert/mysite.com.key;

        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;

        ssl_ciphers  HIGH:!aNULL:!MD5;
        ssl_prefer_server_ciphers  on;

        location / {
            root   html;
            index  index.php index.html index.htm;
        }

        # 將https開頭的 /api 路徑轉發到8080埠 ， 
        # 比如 https://mysite.com/api/getdata 將轉為：http://127.0.0.1:8080/getdata
        location ~ /api/(.*) {
            proxy_pass http://127.0.0.1:8080/$1;
        }

        # 將https的 /websocket 轉發到 http 的 8081
        location /websocket {
            proxy_pass http://127.0.0.1:8081/;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
        }
}

golang 部分
本程式使用的是Iris Web框架，其他框架大同小異即監聽http的8080埠即可：

app.Run(iris.Addr("0.0.0.0:8080"))

Websocket這邊是這樣的：

http.HandleFunc("/", ws) //ws是你的websocket處理函式
http.ListenAndServe("0.0.0.0:8081", nil)

func ws(w http.ResponseWriter, r *http.Request) {
...
}

vue部分
專案使用axio實作ajax呼叫，只需要設定一下axio的baseURL即可：
```
axios.defaults.baseURL = 'https://mysite.com/api/'
```
在需要使用websockets的模塊，是這樣呼叫的：
```
this.ws = new WebSocket('wss://rockage.net/websocket')
```

結語：
本方案比較簡單，只是通過nginx將https請求映射成http而已，因此前后端程式無需做太多改動，

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/342163.html

標籤：其他

上一篇：聊一聊nginx負載均衡+正/反向代理+動靜分離

下一篇：Centos 7 搭建nginx 服務使得別人能夠訪問自己的個人網站