在本地環境配置 https 證書(mac)

HuangBingQuan發表於2024-03-25

在本地環境配置 https 證書

在使用 HTML5API 時,很多 API 只能在 https 保證安全的情況下才能開啟。這就要求我們在本地開發環境也能夠配置 https,否則你需要每次部署到配有 https 的測試環境中才能看到預覽效果,這對開發的敏捷度造成了極大的干擾。

本文和 WebApp 的內容沒有太大關係,屬於獨立內容,主要解決 HTML5 中有很多 API 需要在 https 的條件下才能生效的問題,會介紹如何在本地環境配置 https 證書。

使用 mkcert

mkcert 是一個用 GO 寫的零配置專門用來本地環境 https 證書生成的工具。
要安裝 mkcert,官方推薦的命令很簡單,使用 Homebrew 來進行安裝:

brew install mkcert

備註:HomebrewmacOS 上的軟體包的管理器,類似於大家在 Node.js 環境中熟悉的 npm

需要注意的是,目前由於國內的特殊環境,可以使用國內映象安裝。

/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

安裝完成後,執行
mkcert -install
透過 mkcert --CAROOT 可以檢視證書中心的存放位置,如下圖所示:
至此,我們的證書中心就搞定了,之後可以在具體的專案中生成證書檔案和私鑰。

在具體專案中生成證書檔案和私鑰

透過上面的步驟,我們在本機上安裝了 CA(剛才的證書中心),接下來 cd 到需要生成憑證的目錄下,透過 mkcert 命令來生成證書檔案和私鑰。
mkcert localhost 127.0.0.1
在上面的操作中,我們針對 localhost、127.0.0.13 個地址生成了證書檔案和私鑰,其中 ./localhost+21pem 就是證書檔案,./localhost+1-key.pem 就是私鑰檔案。並且這兩個檔案都有過期時間。

live server 中配置 https 環境

因為我們的專案很多時候是以 live server 的形式開啟,因此我們可以在 live server 中配置以 https 開啟專案。

在擴充套件中找到 live server 對應的配置項:
enable 修改為 true,然後填寫 certkey 的地址即可,填寫完成後最好重啟一下 vscode
配置完成後,之後使用 live server 重新開啟專案時,就會以 https 的形式來開啟專案。

相關文章