XAMPP 是一款易於安裝的 Apache 發行版本,其中還包含了 MariaDB、PHP 和 Perl,僅需要下載且安裝軟體,再以軟體控制面板啟動相關服務,就能輕鬆在電腦或伺服器上架設網站。我們常使用 http://127.0.0.1/dashboard/
或 http://localhost/dashboard/
進入 XAMPP 的控制面板,你會發現 XAMPP 預設並沒有 SSL 憑證,需要自行安裝才會有 HTTPS 開發測試環境。而為了方便直接用本機建立 HTTPS 開發測試環境,接著我會用圖文的方式進行教學,希望能幫助到大家!本次示範操作使用作業系統為 Windows,並參考自這篇文章。
首先請先在 C:\xampp\apache
下建立資料夾 cert
,裏頭用來放 openssl 自簽憑證的配置檔與 SSL 憑證檔。熱心人士 turtlepod 在自己的GitHub 上放了 openssl 範例配置檔與簽發憑證流程 bat 執行檔可下載修改與執行,請將這兩個檔案放入 cert
資料夾中:
▲ 用文字編輯器開啟 cert.conf 並將 {{DOMAIN}}
修改為你想使用的網域名稱,這邊就設為 test.com
。
▲ 隨後打開 make-cert.bat 執行檔,這邊會先要輸入剛剛的網域名稱,接著要填一些基本資料,可以直接鍵盤 Enter 跳過,最後會在 cert 資料夾中生成以網域名稱命名的資料夾,其中存有憑證檔案。
▲ 打開 server.crt,點「安裝憑證」以進行憑證之安裝。
▲ 存放位置選「本機電腦」,按「下一步」。
▲ 選「將所有憑證放入以下的存放區」,再點右側「瀏覽」,選取「受信任的根憑證授權單位」,最後點「確定」後按「下一步」。
▲ 點「完成」,接著視窗會關閉,憑證成功安裝至本機啦!
▲ 再來要設定 Windows hosts,來到 C:\Windows\System32\drivers\etc,用文字編輯器打開 hosts 檔案。
▲ 接著來到 C:\xampp\apache\conf\extra,用文字編輯器打開 httpd-xampp.conf,在最後加入以下內容:
# test.com
<VirtualHost *:80>
DocumentRoot "C:/xampp/htdocs"
ServerName test.com
ServerAlias *.test.com
</VirtualHost>
<VirtualHost *:443>
DocumentRoot "C:/xampp/htdocs"
ServerName test.com
ServerAlias *.test.com
SSLEngine on
SSLCertificateFile "cert/test.com/server.crt"
SSLCertificateKeyFile "cert/test.com/server.key"
</VirtualHost>
存檔後關閉,再來使用 XAMPP 控制面板重新啟動 Apache,瀏覽器也請重新啟動,這邊建議清除 DNS 快取。
▲ 最後使用設定好的網域 test.com
就能跳轉到 127.0.0.1
啦!而且還有 HTTPS 喔!瀏覽器會顯示「已建立安全連線」。
留言區 / Comments
萌芽論壇