繁體中文（台灣）
處理本地 HTTPS 開發
探索如何在你的開發工作流程中實現本地 HTTPS，使用 Mkcert 等工具以及為 Express.js 和 Next.js 提供的步驟指南。
Sijie
Developer
Developer
探索如何在你的開發工作流程中實現本地 HTTPS，使用 Mkcert 等工具以及為 Express.js 和 Next.js 提供的步驟指南。
在開發網頁應用程式時，特定情境即使在本地環境下也需要 HTTPS。無論是你要整合安全的第三方 API、測試只能在 HTTPS 上運作的功能（如 service workers 和 HTTP/2），還是複製生產環境條件以確保無縫部署，HTTPS 都變得至關重要。此外，某些瀏覽器 API，如地理位置、推送通知和憑證管理，都需要安全的環境才能有效運行。
例如，Logto OSS 預設需要 HTTPS，除了 localhost，在這種情況下，學習在本地開發設置 HTTPS 可以節省你的時間。本文將指導你設置本地開發的 HTTPS，介紹如 Mkcert 這樣的工具來簡化過程。
localhost 和 HTTPS 相關功能的角色localhost 是一個特殊的域名，可以處理許多只能在 HTTPS 上運行的功能，比如 service workers、安全 cookies、HTTP/2 和其他瀏覽器 API 等，可以在 http://localhost:xxxx 正常執行，所以你可能不總是需要本地 HTTPS，先嘗試使用 localhost 吧！
如之前在這篇文章中介紹過，Cloudflare 隧道可以輕鬆地將你的本地服務透過 HTTPS 暴露到網際網路上。
這兩個選擇都無法解決你的問題？那麼讓我們設置本地 HTTPS。在接下來的步驟中，我們假設本地的域名是 example.com。
在開始之前，確保目標域名解析到了你的本地機器上，這可以透過更新 hosts 檔案來完成。打開 Linux/macOS 的 /etc/hosts 或 Windows 的 C:\Windows\System32\drivers\etc\hosts，並添加以下行：
HTTPS 最重要的一點就是憑證。在生產環境中，這可以透過工具如「Let's encrypt」或向你的服務提供商購買憑證來完成。但在本地開發中，我們可以直接生成憑證。
Mkcert 是一個簡單的零配置工具，可以生成本地信任的開發憑證並可以使用你喜歡的任何名稱。
首先，按照官方指南在 macOS 上安裝 mkcert：
對於 Windows 和 Linux，請查看此連結。
現在 mkcert 已經可以使用，運行此命令以生成本地 CA 並將根憑證存儲在你的系統信任存儲中。要了解有關「CA」和憑證的更多資訊，請查看 Cloudflare 的文檔。
然後，生成一個本地 SSL 憑證
這會在你的目錄中創建 example.com.pem 和 example.com-key.pem 檔案。
憑證檔案準備就緒後，你現在可以在你的應用中啟用 HTTPS。與在生產環境中，通常由 Nginx 這樣的反向代理處理 HTTPS，不同的是，在本地開發中，我們可以直接在網頁應用程式中設置。我們以 Express 為例。
用以下程式碼創建一個簡單的 Express 伺服器：
運行應用程式，然後訪問 https://example.com 觀看你的安全 Express 應用程式運行效果。
Logto OSS 預設需要 HTTPS，除了 localhost，如果你想用其他域名在本地運行 Logto，你需要設置本地 HTTPS。
mkcert 生成兩個 .pem 文件，將它們放在一個目錄中。HTTPS_CERT_PATH 和 HTTPS_KEY_PATH 來啟用 HTTPS，查看此連結以了解更多。設置本地開發的 HTTPS 並不如看起來那麼複雜。在Mkcert等工具的幫助下，生成信任的本地憑證變得既快速又簡便。雖然 localhost Bold 經常能處理許多只能在 HTTPS 上運行的功能，但有時候你需要完整的 HTTPS 支持，這篇指南將幫助你達成這一目標。無論你是在測試 API、使用 Logto OSS 還是簡單地複製生產環境條件，遵循這些步驟將確保你能進行安全、無縫的開發。