使用mkcert輔助,以HTTPS模式開發網頁
有時會遇到開發部分功能會需要HTTPS模式才能啟用,這時就需要了解如何在開發時啟用HTTPS。
安裝與使用
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個網址項目。專案設定時,要配合檔案名稱作變更。
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.
Android
- 將
rootCA.pem
檔案儲存到裝置 (雲端硬碟、Email或其它方式) - 設定 > 安全性> 加密和憑證(憑證儲存空間) > 從裝置記憶體或SD卡安裝(從SD卡安裝) > 選擇方才下載的檔案 > 安裝
※注意:不能從「下載項目」尋找,全部檔案會顯示灰色無法點擊。一定要從裝置本機的路徑尋找,裝置 > Download之類。)
安裝後,連接開發電腦的IP位置:
※手機必須使用相同的網路環境下才可以IP連線。
結語
前端框架在安裝上可能會遇到各種坑,可以參考網路上其他人的分享。
如果喜歡這篇技術分享,歡迎留言或分享出去!
感謝閱讀到最後的你。