前端網頁開發上，常會遇上需要用 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 設定內，加上以下內容：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
{ "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": "" } } |
5. 接著你就可以成功在 localhost 使用 https 了
參考資料
1. mkcert：讓你在 localhost 開發也能用 https
2. Mkcert – 在 localhost 掛 HTTPS 神器
3. 使用 mkcert 在本地端實現 HTTPS（以 Node.js, Nuxt.js, Vue Cli 及 create-react-app 為例）
