配置域名SSL证书、阿里云OSS自定义域名的SSL证书，以及解决配置后WebSocket报错问题

目录

1）为什么要配置SSL证书？

2）为什么阿里云OSS自定义域名也要配置SSL证书？

3）为什么WebSocket会报错呢？

 解决方法

一、配置网站ssl证书

二、阿里云OSS自定义域名如何配置SSL证书 

三、websocket失效后如何从ws换成wss

1）为什么要配置SSL证书？

SSL证书是数字证书的一种，类似于驾驶证、护照和营业执照的电子副本。因为配置在服务器上，也称为SSL服务器证书。

SSL证书通过在客户端浏览器和web浏览器之间建立一条SSL安全通道（Secure socket layer(SSL)，对传送的数据进行加密和隐藏；确保数据在传送中不被改变，保证数据的完整性，现已成为该领域中全球化的标准。由于SSL技术已建立到所有主要的浏览器和WEB服务器程序中，因此，仅需安装服务器证书就可以激活该功能了，即通过它可以激活SSL协议，实现数据信息在客户端和服务器之间的加密传输，可以防止数据信息的泄露，保证了双方传递信息的安全性，而且用户可以通过服务器证书验证他所访问的网站是否是真实可靠。

如今，大型正规网站随处可见均配置了SSL证书，以https协议进行交互，如阿里巴巴、京东、淘宝、百度等等，所以如果网站需要走向市场，就必须配置SSL证书。

 2）为什么阿里云OSS自定义域名也要配置SSL证书？

因为在https的网站中，大部分浏览器是会限制访问http的，需要客户许可后才能进行访问，大大影响使用体验及网站效果。

3）为什么WebSocket会报错呢？

因为在https下应该使用wss协议做安全链接，而不是ws，且wss下不支持ip地址的写法，只能写成域名形式，如下图：

let ws = new WebSocket('ws://127.0.0.1:8081');
let wss = new WebSocket('wss://www.test.com');

 解决方法

一、配置网站ssl证书

（一）申请证书

证书申请 - FreeSSL.cn一个提供免费HTTPS证书申请的网站  

1、这里因为是教学，所以选择3个月的就好了 

 2、然后依次单击”订单管理-申请证书“；

3、因为是个人用，选一个非商业证书免费的就可以了 ；

 4、这里的通用名称，最好把项目的域名及阿里云OSS的自定义域名一起放进去，共用一个SSL，不然你就要重复这一个步骤，然后提交申请；

 5、点击”获取验证信息“，可以看到3个关键信息，依次将这3个信息，到【阿里云-域名解析-添加记录】中，对应粘贴进去保存即可，耐心等待证书签发下来，需要10几分钟后。

 

6、签发成功后，点击右侧【证书操作-下载证书】，因为阿里云OSS是nginx类型的，刚好我的项目也是nginx代理的，所以下载nginx版本的。 

 

 （二）配置站点

 下载后会有两个文件，一个是PEM文件，一个是KEY文件，在宝塔面板中，选择对应站点，点击【SSL】选项，先在【当前证书】中将下载的2个文件对应复制粘贴上去，然后提交，再点击【证书夹】，点击【部署】即可。这时候你的网站就会变成https了。

二、阿里云OSS自定义域名如何配置SSL证书 

 如果前面SSL证书域名没有带上这个自定义的子域名，就需要重新走一遍前面的申请证书流程

 然后再去【阿里云OSS控制台--对象存储--Bucket--Bucket配置--域名管理】中，点击【证书托管】

依次点击【上传SSL证书--上传证书】，然后将对应文件上传，点击保存即可。上传完成后，就可以选择该证书，一般要等几分钟才会生效。

三、websocket失效后如何从ws换成wss

第一步，前端访问地址要做修改为wss连接。

let wss = new WebSocket('wss://你的域名/ws');

第二步，直接使用wss的话，因为我的端口不是443，所以需要nginx转发一下；修改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";
    }

 第三步，这样就算能一切恢复正常，但是wss有一个机制，1分钟内连接没有任何操作会自动关闭前端的连接，所以需要一个心跳机制来维持连接，这里就不详细介绍了。

备注：如果wss获取用户的ip会因为nginx的代理原因，拿到的是自己服务器的ip地址，如需真实用户的ip的地址，可以在上一步中添加两行代码：

    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服务端，通过如下代码，获取真实用户ip

  // 获取ip地址
  const ip = req.headers['x-real-ip'] || req.connection.remoteAddress