使用 mkcert 建立開發用的憑證

發表於 Disqus：

前言：

好久沒更新技術文章，近期因為公司組識架構又要調整，產品單位進行人力縮減，對於自己去留的決定又開始感到些許迷茫，畢竟我也36歲即將步入中年，說不擔心是騙人的，從出社會後，好像一直都是在為工作、為家庭而活，想那麼多也沒有用，不如利用交接工作的空檔來寫篇技術文章轉換一下心情好了。

mkcert 是什麼？

對於前端開發人員來說，對於網頁使用 https 協定應該不陌生，因為現在網頁基本都是 https 開頭的了，好像很少會看到 http，目前應該只剩下在開發環境才會使用到。那兩者有什麼差別呢？簡單來說 https 是安全的超文本傳輸協議，使用SSL/TLS協議對資料進行加密，確認 C/S 兩端的安全性。

如果開發人員有需要建構 https 網站的需要，不免就需要先取得合法的憑證才能夠進行設定，但正規的憑證是需要花錢購買的，如果要自己手動透過 OpenSSL 建立自我簽署的憑證，也需要對於憑證有一定的理解，這時候使用 mkcert 可以很快速的協助開發人員建立個人或是單位內通用的憑證。

建立開發用憑證

1 安裝方式

On macOS, use Homebrew

1
2
brew install mkcert
brew install nss

On ubuntu

1
2
3
4
sudo apt install libnss3-tools
curl -JLO "https://dl.filippo.io/mkcert/latest?for=linux/amd64"
chmod +x mkcert-v*-linux-amd64
sudo cp mkcert-v*-linux-amd64 /usr/local/bin/mkcert

其他系統可以參考 mkcert 的說明
https://github.com/FiloSottile/mkcert?tab=readme-ov-file#installation

2 使用 mkcert 指令建構 RootCA

1
mkcert -install

上述指令會在本機產生一個根憑證，這個是根憑證頒發機構（CA）的公鑰憑證，當然這個機構是自己 XD，可以用來頒發SSL簽證使用。

使用下述指令可以查看根憑證的安裝位置

1
mkcert -CAROOT

切換到 CAROOT 位置可以看到，包含一組公鑰和私鑰

1
rootCA-key.pem  rootCA.pem

3 產生 https 需要使用的憑證，使用 -key-file 和 -cert-file 參數指定憑證的檔名，後面在接下提供 domain。

1
mkcert -key-file vite-key.pem -cert-file vite.pem localhost 127.0.0.1 ::1

輸出結果，可以看到按照提供的網站名稱生成証書。

1
2
3
4
5
6
7
8
Created a new certificate valid for the following names 📜
 - "localhost"
 - "127.0.0.1"
 - "::1"

The certificate is at "vite.pem" and the key at "vite-key.pem" ✅

It will expire on 3 October 2026 🗓

我們簡單的使用 vite 來測試憑證看看

使用 chrome 測試 https 連線狀況

使用 firefox 測試 https 連線狀況

從 macOS 上測試，本機瀏覽器都可以識別自簽開發用的簽證。

如果有其他人員或是電腦也想使用此憑證，因此根憑證是自己產生的，記得將根憑證的公鑰 rootCA.pem 複制到其他電腦上進行安裝。