XAMPP 設定本地端 (localhost) SSL(https) 方法 10 步驟

XAMPP 為例,在開發網站時,往往會使用到本地端(localhost)來做測試主機
像我就會把線上 WordPress 的網站資料轉移到本地來開發
但常常因為網域證書(SSL)的問題而顯得有點麻煩

本篇用比較簡易的方式,一步一步照著做就可以讓本地端的證書設定完成

XAMPP 設定本地端 (localhost) SSL(https) 方法 10 步驟 - Barry 隨手寫

我這邊使用的方式,是直接把 localhost 這個網域成為設定的證書,這樣一來所有本地端的網址,只要前綴是 localhost 通通都可以生效
如果想要完整用自訂的網址,只要修改一下執行的證書內容,重新匯入新產生的證書就可以了


1. 下載兩個檔案,分別是 bat(執行檔) 和 conf(組態設定檔),透過 bat 將 conf 設定的參數產生 SSL 證書

SSL Generate for Windows

如果要更改網域,請把 .conf 中兩處的 localhost 直接改成你的完整網域,不含 https 並且將 .bat 的 set domain=”localhost” 改成 set /p domain=”Enter Domain: “,這樣產生時你再輸入你要設定的網域即可

(.bat 檔案內有註解,切換過來就好)

2. 將檔案放入 C:\xampp\apache\crt

(該路徑是預設 XAMPP 的系統路徑,若有安裝在別處請記得修改)

XAMPP SSL apache cert

3. 執行 .bat 並且在命令視窗直接連續按下 Enter 即可

(因為有設定好預設值,參數都在 .conf)

XAMPP SSL bat run

4. 系統會產生一個 localhost(你的網域) 資料夾,點擊進入該資料夾

XAMPP 設定本地端 (localhost) SSL(https) 方法 10 步驟 - Barry 隨手寫
XAMPP 設定本地端 (localhost) SSL(https) 方法 10 步驟 - Barry 隨手寫

5. 點擊 server.crt 執行【安裝憑證】

XAMPP 設定本地端 (localhost) SSL(https) 方法 10 步驟 - Barry 隨手寫

6. 開啟憑證匯入精靈,存放位置選擇【本機電腦】並按下【下一步】

XAMPP SSL install 2

7. 手動選擇憑證存放區為【受信任的根憑證授權單位】並按下【下一步】

XAMPP SSL install 5
XAMPP SSL install 4

8. 匯入完成

XAMPP SSL install done

9. 在 XAMPP .conf 中最底下增加網域設定

(C:\xampp\apache\conf\extra\httpd-xampp.conf)

P.s. 如果 htdocs 資料夾路徑與網域有變更,記得更改設定

## localhost
 <VirtualHost *:80>
     DocumentRoot "C:/xampp/htdocs"
     ServerName localhost

     ServerAlias *.localhost

     RewriteEngine On
     RewriteCond %{HTTPS} off
     RewriteRule (.*) https://%{SERVER_NAME}/$1 [R,L]
 </VirtualHost>
 <VirtualHost *:443>
     DocumentRoot "C:/xampp/htdocs"
     ServerName localhost

     ServerAlias *.localhost
     SSLEngine on
     SSLCertificateFile "crt/localhost/server.crt"
     SSLCertificateKeyFile "crt/localhost/server.key"
 </VirtualHost>

10. 現在你就可以直接用 https 開啟你本地(localhost)的網站囉!

(若 Apache 正在執行中,記得停用重啟,才會生效)

XAMPP SSL OK

參考資料

How to Create Valid SSL in localhost for XAMPP

相連文章

臉書留言

一般留言

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *