关于javascript:VuePress-博客优化之开启-HTTPS

前言

在《一篇带你用 VuePress + Github Pages 搭建博客》中，咱们应用 VuePress 搭建了一个博客，最终的成果查看：TypeScript4 中文文档。

留神此时，咱们的域名还是 http://ts.yayujs.com，家喻户晓，开启 HTTPS 有很多益处，比方能够实现数据加密传输等，那咱们如何开启 HTTPS 配置呢？

1. 购买证书

阿里云提供了收费证书能够应用，在每个天然年内，都能够通过 SSL 证书服务一次性申领 20 张收费证书。

1.1 购买证书

拜访云盾证书服务购买页，抉择「DV 单域名证书（收费试用）」，依照提醒下单购买（订单价格为 0 元）。

1.2 创立证书

登录 SSL 证书控制台，抉择「SSL 证书」–「收费证书」，点击「创立证书」，就会主动创立一个证书：

1.3 证书申请

在新创建的证书上，点击「证书申请」，填写以下信息：

留神收费证书绑定的域名，只能是一般域名，比方 ts.yayujs.com 或者 yayujs.com，所谓通配符域名，就是指以 *. 号结尾的域名，比方 *.yayujs.com：

留神 xxx.com 和 www.xxx.com，申请一个域名就行。

填写完后，进入申请第二步，验证信息：

点击「验证」，会呈现：

接下来提交审核，会呈现提醒：

实际上，不须要等邮件，很快证书状态就会变为「已签发」，此时就能够接着操作了。

2. 装置证书

2.1 下载证书

证书状态变为「已签发」后，点击「下载」：

而后依据 Web 服务器的类型，下载对应格局的证书文件，这里咱们抉择 Nginx 进行下载：

像我下载的就是一个名为 6982037_ts.yayujs.com_nginx 的 zip 压缩包，本地解压后，是一个文件夹，外面有两个文件：

• 6982037_ts.yayujs.com.key
• 6982037_ts.yayujs.com.pem

2.2 上传证书

接下来咱们要做的就是将下载的证书文件上传到 Web 服务器，并批改服务器的相干配置，开启 HTTPS 监听。

咱们先登上服务器，创立一个文件夹寄存证书文件：

# 登陆服务器
ssh -v root@8.141.xxx.xxx

# 进入 nginx 配置目录
cd /etc/nginx

# 创立目录寄存证书
mkdir cert

而后上传下载好的证书文件到服务器上，这里应用 Linux 的 scp 命令上传：

scp 命令的语法为：

scp [可选参数] file_source file_target

在本地起一个命令行，而后执行：

scp ~/desktop/6982037_ts.yayujs.com_nginx/6982037_ts.yayujs.com.key root@8.141.xxx.xxx:/etc/nginx/cert
scp ~/desktop/6982037_ts.yayujs.com_nginx/6982037_ts.yayujs.com.pem root@8.141.xxx.xxx:/etc/nginx/cert

再在服务器上查看是否胜利上传：

[root@iZ2ze nginx]# cd cert/
[root@iZ2ze cert]# ls
[root@iZ2ze cert]# ls
6982037_ts.yayujs.com.key  6982037_ts.yayujs.com.pem

2.3 批改配置

接下来咱们批改 Nginx 配置：

vim /etc/nginx/nginx.conf

在 http 下新建一个 server：

server {
    listen 443 ssl;
    server_name ts.yayujs.com; #替换成证书绑定的域名。ssl_certificate cert/6982037_ts.yayujs.com.pem;  #替换成已上传的证书文件的目录和名称。ssl_certificate_key cert/6982037_ts.yayujs.com.key; #替换成已上传的证书私钥文件的目录和名称。ssl_session_timeout 5m;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
    ssl_prefer_server_ciphers on;
  
      location ^~ /learn-typescript/ {alias /home/www/website/ts/;}
      location / {
        alias /home/www/website/ts/;
        index index.html;
      }
}

留神咱们批改完后，别忘了从新加载一下 nginx 配置：

systemctl reload nginx

2.4 http 重定向

对于本来的 http 申请，咱们能够写一个 rewrite 语句，重定向所有的 http 申请到 https 申请：

server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;
              rewrite ^(.*)$ https://$host$1;

        location ^~ /learn-typescript/ {alias /home/www/website/ts/;}

        location / {
          alias /home/www/website/ts/;
          index index.html;
        }
}

2.5 开启端口

阿里云服务器，默认没有开启 HTTPS 监听的 443 端口，所以咱们须要 ECS 治理控制台的「平安组」页面，凋谢 443 端口：

2.6 验证

当初，咱们拜访一下证书绑定的域名，这里是 https://ts.yayujs.com，如果网页地址栏呈现小锁标记，示意证书曾经装置胜利：

系列文章

博客搭建系列是我至今写的惟一一个偏实战的系列教程，解说如何应用 VuePress 搭建博客，并部署到 GitHub、Gitee、集体服务器等平台。

1. 一篇带你用 VuePress + GitHub Pages 搭建博客
2. 一篇教你代码同步 GitHub 和 Gitee
3. 还不会用 GitHub Actions？看看这篇
4. Gitee 如何主动部署 Pages？还是用 GitHub Actions!
5. 一份前端够用的 Linux 命令
6. 一份简略够用的 Nginx Location 配置解说
7. 一篇教你博客如何部署到本人的服务器
8. VuePress 博客优化之 last updated 最初更新工夫如何设置
9. VuePress 博客优化之增加数据统计性能

微信：「mqyqingfeng」，加我进冴羽惟一的读者群。

如果有谬误或者不谨严的中央，请务必给予斧正，非常感激。如果喜爱或者 有所启发，欢送 star，对作者也是一种激励。