處理本地 HTTPS 開發

在開發網頁應用程式時，特定情境即使在本地環境下也需要 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 隧道#

如之前在這篇文章中介紹過，Cloudflare 隧道可以輕鬆地將你的本地服務透過 HTTPS 暴露到網際網路上。

設置本地 HTTPS#

這兩個選擇都無法解決你的問題？那麼讓我們設置本地 HTTPS。在接下來的步驟中，我們假設本地的域名是 example.com。

步驟 1：更新 hosts 檔案#

在開始之前，確保目標域名解析到了你的本地機器上，這可以透過更新 hosts 檔案來完成。打開 Linux/macOS 的 /etc/hosts 或 Windows 的 C:\Windows\System32\drivers\etc\hosts，並添加以下行：

步驟 2：生成憑證#

HTTPS 最重要的一點就是憑證。在生產環境中，這可以透過工具如「Let's encrypt」或向你的服務提供商購買憑證來完成。但在本地開發中，我們可以直接生成憑證。

Mkcert 是一個簡單的零配置工具，可以生成本地信任的開發憑證並可以使用你喜歡的任何名稱。

首先，按照官方指南在 macOS 上安裝 mkcert：

對於 Windows 和 Linux，請查看此連結。

現在 mkcert 已經可以使用，運行此命令以生成本地 CA 並將根憑證存儲在你的系統信任存儲中。要了解有關「CA」和憑證的更多資訊，請查看 Cloudflare 的文檔。

然後，生成一個本地 SSL 憑證

這會在你的目錄中創建 example.com.pem 和 example.com-key.pem 檔案。

步驟 3：在你的應用中設置 HTTPS#

憑證檔案準備就緒後，你現在可以在你的應用中啟用 HTTPS。與在生產環境中，通常由 Nginx 這樣的反向代理處理 HTTPS，不同的是，在本地開發中，我們可以直接在網頁應用程式中設置。我們以 Express 為例。

用以下程式碼創建一個簡單的 Express 伺服器：

運行應用程式，然後訪問 https://example.com 觀看你的安全 Express 應用程式運行效果。

為 Logto OSS 啟用 HTTPS#

Logto OSS 預設需要 HTTPS，除了 localhost，如果你想用其他域名在本地運行 Logto，你需要設置本地 HTTPS。

1. 設置 Logto：按照此連結在本地電腦上設置 Logto：https://docs.logto.io/docs/get-started/。
2. 準備憑證：使用 mkcert 生成兩個 .pem 文件，將它們放在一個目錄中。
3. 設置環境變量：透過 Node 提供 HTTPS_CERT_PATH 和 HTTPS_KEY_PATH 來啟用 HTTPS，查看此連結以了解更多。

總結#

設置本地開發的 HTTPS 並不如看起來那麼複雜。在Mkcert等工具的幫助下，生成信任的本地憑證變得既快速又簡便。雖然 localhost Bold 經常能處理許多只能在 HTTPS 上運行的功能，但有時候你需要完整的 HTTPS 支持，這篇指南將幫助你達成這一目標。無論你是在測試 API、使用 Logto OSS 還是簡單地複製生產環境條件，遵循這些步驟將確保你能進行安全、無縫的開發。