[指南] 運用 Mkcert 簡易在本地端實現 HTTPS 連線 ( VSCode ) @地瓜大的飛翔旅程

章節連結

內容

步驟

參考資料

前端網頁開發上，常會遇上需要用 https 來進行串接其他第三方服務的場景。若是使用 http 的話，會容易被瀏覽器本身的安全性防護問題給卡住，造成開發上的痛點。這邊筆記下簡單利用 Mkcert 再搭配 VS Code 的 Live Server 套件設定，來達成本地端的 https。

內容

步驟

1. Mac 使用者建議使用 homebrew 來進行安裝。先假設你已經成功安裝 homebrew 後，輸入 brew install mkcert
2. 輸入 mkcert -install 來建立一個 local 端的憑證頒發機構
3. 接著視你的情況來頒發本地開發的憑證。這邊以 localhost 為例，那就是 mkcert localhost。接著你就會在根目錄下，產生 localhost-key.pem 和 localhost.pem 兩個檔案。
4. 打開 VSCode，並在 Live Server 設定內，加上以下內容：

{
    "liveServer.settings.port": 3333,
    "liveServer.settings.host": "localhost",
    "liveServer.settings.donotVerifyTags": true,
    "liveServer.settings.donotShowInfoMsg": true,
    "liveServer.settings.https": {
        "enable": true,
        "cert": "/Users/<USER_NAME>/localhost.pem",
        "key": "/Users/<USER_NAME>/localhost-key.pem",
        "passphrase": ""
    }
}