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

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

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

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

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

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

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

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

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

点击「验证」，会呈现：

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

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

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

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

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

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

接下来咱们要做的就是将下载的证书文件上传到 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

接下来咱们批改 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

对于本来的 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;
        }
}

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

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

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

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

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

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

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

前言

1. 购买证书

1.1 购买证书

1.2 创立证书

1.3 证书申请

2. 装置证书

2.1 下载证书

2.2 上传证书

2.3 批改配置

2.4 http 重定向

2.5 开启端口

2.6 验证

系列文章