部署 - 前端部署https服务，并配置安全证书

项目中要实现跨tab复制 剪切 粘贴，所以涉及到操作剪切板的操作，选用了navigator.clipboard，但是该api有必须在https的服务下才能用，所以就需要把项目部署城https服务。
vue-cli中可以配置webpack达到启动https服务的效果，但是一直会有不安全的提示：
这多膈应人啊，搞他！

所以就搞起了安全证书。

获取安全证书

前提，首先要有个域名，然后在SSL for free生成免费的安全证书，按照提示完成申请，这里不再具体说明，最后下载生成的安全证书。
拿到的有ca_bundle.crt、certificate.crt和private.key三个文件。

nginx配置服务

这一步主要需要三个东西：

1. nginx：直接在官网下载即可；
2. 资源包：开发的程序build的dist包；
3. 安全证书：上一步下载到的安全证书；

nginx

官网下载，注意区别系统，不同的系统下载的内容有所区别。

下载到本地之后，得到以下文件结构(Windows)：

找到 conf/nginx.conf 文件，里面可以看到有 http 和 server 配置项，我们需要的是https服务，所以讲一下配置 server：
1. server.name: 就是服务的访问地址，配上准备好的域名。
2. ssl_certificate: 配置下载好的证书certificate.crt所在路径。
3. ssl_certificate_key: 配置和证书一起的ssl_certificate_key所在路径。
4. root: 配置location下的root，这个就是项目打包后的dist包地址， 我这里是直接把dist包铐进了nginx的同级目录里。

    server {
        listen       443 ssl;
        server_name  abc.test.def.fun;

        ssl_certificate      D:\\abc\\certificate.crt;
        ssl_certificate_key  D:\\abc\\private.key;

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

        ssl_ciphers  HIGH:!aNULL:!MD5;
        ssl_prefer_server_ciphers  on;
		
		
        location / {
		    proxy_set_header Content-Security-Policy    upgrade-insecure-requests;
            root   dist;
            index  index.html index.htm;
        }
    }

配置好后可在该目录用nginx.exe -t来看看是否配置正确：

最后在浏览器输入域名在看看：

舒服了。。。

踩坑

看网上各种导入安全证书，就也在浏览器导入了安全证书，在大佬贾同学的更正下才知道，其实在nginx中配置好证书后，根本不需要再手动往本地导入证书了，浏览器浏览的时候会自动下载该网站对应的证书的。真是不懂机关瞎捣鼓，又一次因为不了解就用导致的对知识点的错误认知。丢脸。
(所以，贾同学是怎么知道这篇博客的，难道公司网络识别为数据泄露了吗… 。_ 。)

第一次因为域名和证书上的不一致，导致怎么配都显示‘不安全’，奔溃！换了个域名，好了。
证书显示颁发给 *.abc.test.def
第一次域名：aaa.bbb.abc.test.def ——这是错的

第二次域名： aaabbb.abc.test.def —— 舒服了

顺便把贾同学分享的资料链接也放一下好了，方便有的同学学习:

• 证书链-Digital Certificates

以前对这块毫无了解，第一次搞，也是折腾了蛮久，内容也许有不准确的，欢迎指正。

最后感谢贾同学。