Nginx配置HTTPS/WSS并部署Node.js項(xiàng)目

近期在做小程序的項(xiàng)目义矛，項(xiàng)目中涉及用WebSocket實(shí)現(xiàn)即時通訊咆槽。開發(fā)的時候可以勾選不校驗(yàn)域名派诬，可以只請求http與ws劳淆。但小程序上線必須使用https和wss。

1.前期準(zhǔn)備工作

配置HTTPS需要準(zhǔn)備以下三個東西

服務(wù)器
域名
SSL證書

我選購的服務(wù)器為騰訊云的windows server 2012
關(guān)于域名購買解析與SSL證書申請請直接參考（騰訊云）官方教程

域名購買：https://buy.cloud.tencent.com/domain

域名購買完成后需要解析到我們服務(wù)器的主機(jī)默赂，就是讓域名和服務(wù)器的IP地址綁定沛鸵。
云解析：https://cloud.tencent.com/document/product/302/3446

解析完成后我們再申請證書，這步需要填寫相關(guān)資料并上傳身份證缆八，通過審核后就可以下載證書曲掰，這個證書我們后面要上傳到服務(wù)器里使用。

點(diǎn)擊下載后是一個壓縮包奈辰，解壓后內(nèi)容如下栏妖，根據(jù)自己的服務(wù)器選擇相應(yīng)的證書文件夾。

我的Web服務(wù)器為IIS（IIS是微軟公司的Web服務(wù)器奖恰。主要支持ASP語言環(huán)境.）底哥，使用Nginx反向代理，至于Nginx的安裝后面再講房官。

SSL證書管理：https://console.cloud.tencent.com/ssl

2.開始折騰服務(wù)器

準(zhǔn)備工作做完后趾徽，我們登陸服務(wù)器。
在服務(wù)器里建立一個文件夾翰守，將下載的證書復(fù)制進(jìn)去孵奶。

配置本地服務(wù)器

打開服務(wù)器管理器，點(diǎn)擊添加角色和功能-選擇基于角色或基于功能的安裝-從服務(wù)器池中選擇服務(wù)器-選中web服務(wù)器-下一步-安裝

等待安裝完成即可

添加SSL證書

參考此文：https://jingyan.baidu.com/article/eb9f7b6d7f83b6869364e8a9.html

看二蜡峰、創(chuàng)建證書控制臺這部分即可

添加網(wǎng)站

首先在你的服務(wù)器上找一個文件夾了袁，創(chuàng)建index.html

點(diǎn)擊工具，選擇IIS管理器

a.png

務(wù)必選擇https湿颅，以及你上一步添加的SSL證書
（https默認(rèn)443端口载绿，http默認(rèn)80端口）

此處有個坑，選擇完物理路徑后點(diǎn)擊測試設(shè)置會發(fā)現(xiàn)授權(quán)有問題

b.png

不難解決油航，點(diǎn)擊連接為崭庸，改為特定用戶，這個用戶需要自己先添加

按win+R鍵打開運(yùn)行谊囚，輸入compmgmt.msc

d.png

右擊用戶添加即可怕享，記住用戶名和密碼，再回到連接為那設(shè)置特定用戶镰踏。
設(shè)置完成后在點(diǎn)擊測試設(shè)置*就沒問題啦

之后確定添加網(wǎng)站

添加完成后點(diǎn)擊你添加的網(wǎng)站函筋，選擇目錄瀏覽

切換到內(nèi)容試圖，右擊index.html奠伪，選擇瀏覽就可以預(yù)覽到我們的網(wǎng)頁了跌帐。

到這一步我們已經(jīng)成功的在IIS上添加了一個網(wǎng)站首懈，并且可以使用https訪問。

f.png

安裝Nginx

參考此文：https://www.jb51.net/article/120469.htm

Nginx的關(guān)鍵在于配置文件
‘配置文件為nginx安裝目錄下的 \conf\nginx.conf’
使用NotePad++編輯配置文件谨敛，重要的事情說三遍
不要用記事本究履！不要用記事本！不要用記事本佣盒！

nginx.conf文件內(nèi)容如下


http {
    
    
    # HTTPS server
    #
    server {
        listen 443;
        server_name www.xxx.com; #填寫綁定證書的域名
        ssl on;
        ssl_certificate 1_你的域名_bundle.crt; 
        ssl_certificate_key 2_你的域名.key;
        ssl_session_timeout 5m;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2; #按照這個協(xié)議配置
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;#按照這個套件配置
        ssl_prefer_server_ciphers on;
        location / {
            root   C:\web; #站點(diǎn)目錄
            index  index.html index.htm;
        }
    }

}

修改你的配置文件如上挎袜，重新啟動nginx服務(wù)顽聂，若報錯檢查先端口是否沖突肥惭，報錯試試關(guān)閉IIS里啟動的網(wǎng)站

若還報錯很可能是配置文件出錯，仔細(xì)檢查檢查紊搪。

成功重啟nginx后，便可用https訪問了

配置wss

配置wss只需要在nginx配置文件里簡單添加幾行


    map $http_upgrade $connection_upgrade {  
        default upgrade;  
        '' close;  
    }  
    upstream websocket {  
        server 119.29.196.xxx:8888;  
    }  

server {  
        listen 8888;  
        server_name www.xxx.com;
        ssl on;
        ssl_certificate 1_xxx.crt;
        ssl_certificate_key 2_xxx.key;
        ssl_session_timeout 20m;
        ssl_verify_client off;
        location / {  
            proxy_pass http://127.0.0.1:3000;  
            proxy_http_version 1.1;  
            proxy_set_header Upgrade $http_upgrade;  
            proxy_set_header Connection "Upgrade";  
        }  
    }

復(fù)制上述代碼，修改server_name压汪、ssl_certificate和ssl_certificate_key硬爆，以及upstream websocket下的IP地址，改為你的服務(wù)器IP地址

重啟nginx服務(wù)即可

WEBSOCKET_URL : wss//www.xxx.com:8888

測試wss

下面是一個簡單的控制臺websocket示例
項(xiàng)目目錄：

Node.js代碼

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function (req, res) {
  res.send('<h1>Welcome Realtime Server</h1>');
});
io.on('connection', function (socket) {
  console.log('a user connected');
  socket.on("disconnect", function () {
    console.log("a user go out");
  });
  socket.on("message", function (obj) {
    io.emit("message", obj);
  });
});
http.listen(3000, function () {
  console.log('listening on *:3000');
});

前端代碼

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <!-- <script src="http://127.0.0.1:3000/socket.io/socket.io.js"></script> -->
  <script src='./node_modules/socket.io-client/dist/socket.io.js'></script>
</head>

<body>
  <ul id="message"></ul>
  <script>
    socket = io.connect('wss://www.xinglinfengyun.xyz:8888');
    socket.emit("message", {
      "name": navigator.userAgent,
      "msg": "666666"
    });
    socket.on("message", function (obj) {
      console.log(obj);
    });
  </script>
</body>

</html>

nginx部署項(xiàng)目

將項(xiàng)目拷貝到服務(wù)器
執(zhí)行node server.js啟動項(xiàng)目

成功運(yùn)行如上圖

node.js項(xiàng)目的端口號要與Nginx配置文件中的 proxy_pass 相同

我用的都是3000端口

在瀏覽器打開index.html滞伟，打開控制臺

如上圖所示即收到了服務(wù)端的消息

到這里說明wss也配置成功了揭鳞！

總結(jié)

本次折騰涉及到的知識有域名、服務(wù)器梆奈、IIS野崇、Nginx、https亩钟、wss乓梨、node.js搭建websocket示例，這些都是我的知識盲區(qū)清酥。
學(xué)習(xí)新知識時總會畏懼抵觸扶镀，看了無數(shù)篇博文，踩了許多坑焰轻。對于如何用Nginx部署Node.js項(xiàng)目還有些疑惑臭觉，抽空再解決。