VuePress 部落格如何開啟本地 HTTPS 訪問

冴羽發表於2022-02-17
VueHTTP

前言

在 《一篇帶你用 VuePress + Github Pages 搭建部落格》中，我們使用 VuePress 搭建了一個部落格，最終的效果檢視：TypeScript 中文文件。

如果我們在本地執行專案，執行地址類似於http://localhost:8080/learn-typescript/，以 http 開頭，這在大部分時候都滿足了需要，但有的時候，比如相容 PWA，就需要以 https 開頭，那我們如何在本地使用 https 地址呢？

開啟 HTTPS

在 VuePress 官方文件裡，我們並沒有搜到直接的答案，但我們可以在 StackOverflow 搜到一個回答，其實可以直接在 config.js新增：

module.exports = {
  devServer: {
    https: true
  }
}

我們試一下，訪問地址，會出現不安全提示：

我們點選 「高階」裡的 「繼續前往localhost（不安全）」，可以訪問到頁面，只是位址列會顯示一個“不安全”：

HTTPS 原理

想想確實如此，我們都沒有 SSL 證照，怎麼就能判斷為安全連線呢？​

那如何才能讓瀏覽器判斷為安全連線呢？我們先簡單複習一下 HTTPS 的原理：

首先是 CA，英文全稱：Certificate Authority，中文翻譯為：數字證照認證機構，是負責發放和管理數字證照的權威機構，是受到信任的第三方機構。電腦系統、瀏覽器裡會內建 CA 頒發的根證照。

然後是 HTTPS 建立的過程，當客戶端向服務端發起一個 HTTPS 連線的時候，伺服器會將自己的證照發給客戶端，證照中包含公鑰，客戶端會尋找是否有這個證照籤發的 CA 的根證照，如果有，再對證照進行解密驗證，防止證照被篡改，如果通過，客戶端會生成一個隨機串，然後使用伺服器證照中的公鑰進行加密，然後傳送給伺服器，伺服器利用私鑰進行對這個密文進行解密，得到隨機串，然後兩端使用這個隨機值進行加密通訊。

所以對於伺服器來說，需要有兩個東西，一個是包含公鑰的伺服器證照，一個是私鑰。

對於客戶端來說，則需要 CA 根證照。

mkcert

為了實現本地 HTTPS 連線，我們可以藉助 mkcert 這個工具來實現證照的配置：

mkcert 是一個用於建立本地信任的開發證照的便捷工具。在本地開發環境中使用真實的CA（Certificate Authority，證照頒發機構）簽發的證照，是非常困難的，特別是對於像 example.net、localhost 或者 127.0.0.1 這樣的主機來說，使用真實的CA簽發的證照是不可能的。在這樣的情況下，自簽發的證照可能是唯一的選擇。mkcert 可以生成自簽發的證照，並把本地 CA 安裝到系統根證照庫中。

1. 安裝 mkcert

brew install mkcert

2. 建立本地 CA

mkcert -install

生成後，在 Mac 中，我們可以通過 「鑰匙串訪問」檢視到這個證照：

3. 生成證照

mkcert localhost 127.0.0.1

這會在當前目錄下生成兩個證照檔案：localhost+1-key.pem 和 localhost+1.pem，其中 localhost+1.pem就是服務端證照，localhost+1-key.pem就是私鑰。​

4. 修改 config.js

然後我們將這兩個檔案拷貝到 config.js 檔案的同級目錄裡，然後修改 config.js：

const fs = require('fs')
const path = require('path');

module.exports = {
    devServer: {
        https: true,
        key: fs.readFileSync(path.resolve(__dirname, './localhost+1-key.pem')),
        cert: fs.readFileSync(path.resolve(__dirname, './localhost+1.pem'))
  }
}

5. 重新執行專案

然後重新執行專案，你就會看到：

如果證照顯示有效，但依然顯示不安全連線，瀏覽器重啟或者開一個隱私視窗試試。

系列文章

部落格搭建系列是我至今寫的唯一一個偏實戰的系列教程，預計 20 篇左右，講解如何使用 VuePress 搭建、優化部落格，並部署到 GitHub、Gitee、私有伺服器等平臺。本篇為第 22 篇，全系列文章地址：https://github.com/mqyqingfeng/Blog

微信：「mqyqingfeng」，加我進冴羽唯一的讀者群。

如果有錯誤或者不嚴謹的地方，請務必給予指正，十分感謝。如果喜歡或者有所啟發，歡迎 star，對作者也是一種鼓勵。

相關文章