跨平台本地SSL證書生成工具,本地也能優雅的調試https

2019-05-28     最美分享Coder

引言

在Web開發中我們可能會遇到調用後端服務或者Api接口,在某些場景下我們可能需要走https,一般情況下我們會直接放到線上進行這樣的測試,對我們的開發造成了很大程度上時間的浪費,因此用上這款神器即可生成本地SSL證書,供我們開發使用,它就是mkcert。

介紹

mkcert是一個簡單的零配置SSL生成工具,可以使用你喜歡的任何名稱製作本地可信賴的開發證書。生成的證書可供我們在本地需要https 的場景下使用,而且工具本身是跨平台的,支持windows、macOS和Linux。

Github地址

https://github.com/FiloSottile/mkcert

安裝

  • macOS

使用Homebrew

brew install mkcert
brew install nss # 如果你用火狐

使用MacPorts

sudo port selfupdate
sudo port install mkcert
sudo port install nss
  • Linux

在Linux首先你得安裝certutil

sudo apt install libnss3-tools
-or-
sudo yum install nss-tools
-or-
sudo pacman -S nss

然後使用Linuxbrew

brew install mkcert

或者直接源碼構建

go get -u github.com/FiloSottile/mkcert
$(go env GOPATH)/bin/mkcert

再或者你可以下載github上發布的編譯好的二進位文件

  • windows

使用Chocolatey

choco install mkcert

或者使用Scoop

scoop bucket add extras
scoop install mkcert

也可以從源碼自行構建(需要go1.10+環境)以及下載編譯好的二進位文件

使用方式

我本身是Windows系統,因此我就在windows上演示,其它系統類似,可自行嘗試

1、首先我們下載github上編譯好的二進位文件,並存放在系統文件夾的某個文件夾下,然後將它添加到系統環境變量方便我們使用,如下圖所示:

2、這裡為了演示方便,我就直接用live-server搭建一個靜態伺服器,項目目錄結構如下圖所示:

3、我們先直接啟動下我們的live-server(live-server使用方式請看我前一篇文章介紹),直接在VSCode右擊index.html,然後點擊Open with Live server,然後瀏覽器會自動打開

此時還沒有配置https,因此會有不安全的提示,我們繼續往下看

4、使用mkcert生成證書,因為我們把mkcert的二進位加入到了系統環境變量,那我們直接在項目的根目錄使用mkcert,首先執行mkcert -install,在彈出的窗口點擊是即可,然後直接一鍵命令mkcert 127.0.0.1,此時你的項目根目錄下已經有一個證書和一個私鑰文件了。

5、在項目根目錄新建一個.vscode文件夾,只能在VSCode中新建,在外面新建不了該文件夾,然後新建一個settings.json文件,內容如下

{
"liveServer.settings.https": {
"enable": true,
"cert": "E://httpsTest//127.0.0.1.pem",//證書根路徑
"key": "E://httpsTest//127.0.0.1-key.pem",//私鑰根目錄
"passphrase": "12345"
}
}

6、這個時候我們把之前的live-server重啟一下,得先停止在啟動

此時我們已經看到網站標記變成安全的了https網站了

7、我們F12打開控制台,選擇Security選項卡,查看證書,能看到證書到期時間,期限很長

總結

本文介紹了如何通過mkcert在本地生成https證書,並進行了演示,演示的非常簡單,它還可以在你的項目中配置,各個框架都有各自配置的方法,大家可以根據自己的框架進行配置,這樣你就可以在本地優雅的調試需要用到https的程序了,希望本文對你有所幫助,感謝支持!

文章來源: https://twgreatdaily.com/zh-tw/Q9ZAM2wB8g2yegNDEkdQ.html