VuePress 部落格優化之開啟 HTTPS

冴羽發表於2022-01-17
Vue優化HTTP

前言

在 《一篇帶你用 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，對作者也是一種鼓勵。

相關文章