nginx设置https、代理及websocket连接60s自动关闭

申请域名,首先要先备案

在这里插入图片描述

申请成功之后会提供一个压缩下载文件,如下截图

在这里插入图片描述

打开nginx目录下面有两个 SSL 证书文件

在这里插入图片描述
将这两个文件上传至

/usr/local/nginx/conf/目录下,通过ps -ef | grep nginx进行把进程关闭

然后进入源文件夹下

/usr/local/nginx-1.17.9/

执行

./configure --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module命令

然后执行make,这里不要执行make install,否则就是覆盖安装

然后备份原有已安装好的nginx

cp /usr/local/nginx/sbin/nginx /usr/local/nginx/sbin/nginx.bak

然后将刚刚编译好的nginx覆盖掉原有的nginx

cp ./objs/nginx /usr/local/nginx/sbin/

然后启动nginx,仍可以通过命令查看是否已经加入成功

cd /usr/local/nginx/sbin/

./nginx

通过以下命令查看是否安装成功

./nginx -t 如下图所示

在这里插入图片描述

最后就是修改nginx.conf文件设置cd /usr/local/nginx/conf/

vim nginx.conf

添加一下:
server {
listen 443 ssl;
server_name www.test.com; #填写绑定证书的域名
ssl_certificate www.test.com.crt;
ssl_certificate_key www.test.com.key;
ssl_session_timeout 5m;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2; #按照这个协议配置
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;#按照这个套件配置
ssl_prefer_server_ciphers on;
location / {
root html; #站点目录
index index.html index.htm;
}
}

重启nginx

cd /usr/local/nginx/sbin/

./nginx -s reload

重启 Nginx 之后,即可使用 https://www.test.com 来访问

代理

通过proxy_pass将请求地址代理到 http://test.com的80端口,可以在nginx中配置80端口的监听然后进入到前端项目
		server {
        listen 443 ssl;
        server_name test.com; #填写绑定证书的域名
        ssl_certificate test.com.crt;
        ssl_certificate_key test.com.key;
        ssl_session_timeout 5m;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2; #按照这个协议配置
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;#按照这个套件配置
        ssl_prefer_server_ciphers on;
        
		location / {
			proxy_pass http://test.com;
            proxy_redirect  off;     
            proxy_set_header        Host    $http_host;     
            proxy_set_header        X-Real-IP       $remote_addr;     
            proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;     
            proxy_set_header   Cookie $http_cookie;
            #proxy_cookie_path
            chunked_transfer_encoding       off;   
        }
     }
80端口的监听 ,进入前端项目目录test
server {
        listen       80;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        gzip  on;
        gzip_buffers 32 4K;
        gzip_comp_level 6;
        gzip_min_length 1000K;	
		location / {
            root   html/test;
            index index.html;
            try_files $uri $uri/ /index.html;
			#autoindex on;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        } 
    }
若只申请了前端域名,后端没有域名,可以在nginx中监听一个开放的端口7500,前端项目通过https://test.com:7500/api/,然后代理到后端程序所在的端口,如果有websocket通信,则要进行设置nginx支持websocket的配置
proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection “upgrade”; proxy_read_timeout 600s;#设置websocket的超时时间,默认为60s,我这里是设置了600s也就是10分钟
    server{
        listen 7500;
        server_name test.com;
        ssl on;
        ssl_certificate test.com.crt ;
        ssl_certificate_key test.com.key;
        ssl_session_timeout 5m;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2; #按照这个协议配置
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;#按照这个套件配置
        ssl_prefer_server_ciphers on;
        location / {
			proxy_pass http://localhost:7400;
			proxy_http_version 1.1;
			proxy_set_header Upgrade $http_upgrade;#开启支持websocket
			proxy_set_header Connection "upgrade";#开启支持websocket
			proxy_read_timeout 600s;#设置websocket超时时间
        }  
                   
    }
nginx改完配置后,在前端部分中的websocket也要做相应的修改,将原先的ws修改为wss ,也可以做一个轮询的机制来进行达到长连接的目的
   initWebSocket() {
      //初始化weosocket
      let userId = localStorage.getItem('userId')
      const wsuri = `wss://test.com:7500/api/imserver/${userId}`
      this.soket = new WebSocket(wsuri)
      this.soket.onmessage = this.websocketonmessage
      this.soket.onopen = this.websocketonopen
      this.soket.onerror = this.websocketonerror
      this.soket.onclose = this.websocketclose
    },
    websocketonopen() {
      //连接建立之后执行send方法发送数据
      let actions = { test: 'test' }
      this.websocketsend(JSON.stringify(actions))
    },
    websocketonerror() {
      //连接建立失败重连
      this.initWebSocket()
      console.log('WebSocket连接发生错误')
    },
    websocketonmessage(e) {
     //	TODO
    },
    websocketsend(Data) {
      //数据发送
      console.log('WebSocket连接成功', Data)
      this.soket.send(Data)
    },
    websocketclose(e) {
      //关闭
      console.log(e)
      console.log('connection closed (' + e.code + ')')
    }
轮询的机制
		 var heartCheck = {
        timeout: 55000,        //比server端设置的连接时间稍微小一点,在接近断开的情况下以通信的方式去重置连接时间。
        serverTimeoutObj: null,
        reset: function(){
            clearTimeout(this.timeoutObj);
            clearTimeout(this.serverTimeoutObj);
            return this;
        },
        start: function(){
            var self = this;
            this.serverTimeoutObj = setInterval(function(){
                if(websocket.readyState == 1){
                    console.log("发送消息保持连接");
                    websocket.send("ping");
                    heartCheck.reset().start();    // 如果获取到消息,说明连接是正常的,重置心跳检测
                }else{
                    console.log("断开状态,尝试重连");
                    initWebSocket();
                }
            }, this.timeout)
        }
    }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值