使用mkcert輔助，以HTTPS模式開發網頁

Reginna Chao

8 min readMar 27, 2022

有時會遇到開發部分功能會需要HTTPS模式才能啟用，這時就需要了解如何在開發時啟用HTTPS。

這篇是寫給有基礎開發知識的技術人員，因此如果不曉得什麼是HTTPS、SSL、TLS，建議先補基礎知識；以及要知道如何使用命令提示字元（終端機、CMD）安裝套件、Mac需要安裝Xcode等。

什麼功能會需要HTTPS

需要確認安全性的功能，例如：

Facebook JavaScript SDK
第三方OAuth2
網頁呼叫原生分享（見另一篇文章）
信用卡欄位自動填入功能：「如果您要求任何種類的個人資訊或信用卡資料，確保是透過 SSL 提供頁面。否則對話方塊中將警告使用者，他們的資訊可能不安全。」（見Google說明）

安裝與使用

Step 1. 安裝 mkcert

macOS

官方提供兩種方法：

使用 Homebrew：

brew install mkcert
brew install nss # if you use Firefox

使用 MacPorts：

sudo port selfupdate
sudo port install mkcert
sudo port install nss # if you use Firefox

Windows

安裝 Chocolatey （如果尚未安裝），使用 cmd.exe 執行（以系統管理員身分執行）

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

2. 使用 Chocolatey 安裝，使用 cmd.exe 執行（以系統管理員身分執行）

choco install mkcert

Step 2. 本機產生憑證檔案

// 安裝
mkcert -install// 移除安裝
mkcert -uninstall

macOS：檔案會安裝於 /Users/***/Library/Application Support/mkcert

Windows：檔案會安裝於 C:\Users\User\AppData\Local\mkcert（※路徑為：C:\Users\<computername>\AppData\Local\mkcert）

Step 3. 專案產生檔案

於專案資料夾使用 cmd.exe 執行：
※為了要讓手機測試可以使用，一定要寫 IP 位置（依照電腦網路設定調整）。

mkcert localhost 127.0.0.1 192.168.x.xxx ::1

※「192.168.x.xxx」調整為電腦IP，找電腦IP：
macOS：系統偏好設定 > 網路>狀態
Windows 10：設定 > 網路和網際網路 > 內容 > 屬性 > IPv4 位址

會於資料夾產生檔案 localhost.pem、localhost-key.pem。

※+3：表示除了設定 localhost 之外，另外設定3個網址項目。專案設定時，要配合檔案名稱作變更。

mkcert 命名規則（自動）

Step 4. 專案設定

Webpack Dev Server 設定

devServer: {
  host: 'my-project.dev',
  https: {
      key: fs.readFileSync('./my-project.dev-key.pem'),
      cert: fs.readFileSync('./my-project.dev.pem'),
  }
},

Gulp 使用 BrowserSync 設定（使用 BrowserSync 1.3.0 以上的版本）

// gulpfile.jsbrowserSync.init({
  ...
  https: {
    key: "localhost-key.pem",
    cert: "localhost.pem"
  }
});

Nuxt 設定

// nuxt.config.jsconst fs = require('fs');
const path = require('path');
server: {
  https: {
    key: fs.readFileSync(path.resolve(__dirname, 'localhost-key.pem')),
    cert: fs.readFileSync(path.resolve(__dirname, 'localhost.pem')),
  },
},

成功以 HTTPS 模式開啟 localhost：

HTTP 則無法開啟 localhost 專案：

瀏覽器安全性問題

Firefox
Firefox 需要設定憑證：
設定 > 隱私權與安全性 > 憑證 > 檢視憑證 > 憑證機構 > 匯入 rootCA.pem

手機安裝憑證

為了要以 HTTPS 開啟電腦的 localhost ，要先將憑證安裝到手機。
※手機一定要設定密碼鎖，如Pin碼、圖形鎖才能安裝。

rootCA.pem：「安裝與使用」中，Step2 所產生的「本機產生憑證檔案」。

iOS

將 rootCA.pem 檔案儲存到裝置（AirDrop、Email或其它方式）
設定 > 一般 > 描述檔 > 選擇剛下載的描述檔 > 安裝

3. 設定 > 一般 > 關於本機 > 憑證信任設定 > 開啟方才安裝的描述檔

※Apple官方說明開啟憑證方式
※已知Bug：earlier versions of mkcert ran into an iOS bug, if you can’t see the root in “Certificate Trust Settings” you might have to update mkcert and regenerate the root.