申请域名,首先要先备案
申请成功之后会提供一个压缩下载文件,如下截图
打开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)
}
}