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

冴羽發表於2022-02-17

前言

《一篇帶你用 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.pemlocalhost+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,對作者也是一種鼓勵。

相關文章