XAMPP設定Https開發環境,一鍵openssl自簽SSL憑證,配置 Apache Localhost

開發者通常都會在本地端電腦建立一個 localhost 的伺服器來模擬遠端生產環境或測試環境的狀態,進行相關程式碼的開發、測試,而 https 安全網站目前成為主流,為盡可能接近遠端伺服器,勢必本地端伺服器也需要安裝SSL憑證,筆者本地開發環境使用的是 XAMPP,所以本文主要是議介紹 XAMPP 的 https 配置,本文主要是「方便」開發為目地,而非「安全」為目地,介紹如何開發環境中設定SSL憑證,這僅適用於開發環境,切記 ! 不適用於正式生產環境。

本文 XAMPP版本為:XAMPP 7.4.8 ( Windows 64bit )

openssl 自簽憑證

本文使用的 XAMPP 版本已自帶 openssl 所以無需再另外安裝 openssl

準備工作

在 XAMPP 中的 Apache 根目錄中建立一個名為 ssl 子目錄,這目錄用來存放之後產生出來的證書檔案,目錄絕對路徑可能長得像下方這樣

複製 openssl 配置檔範例

openssl 自簽憑證需要一個配置檔,熱心網友 Adrian Suter 在 Github 上已經寫好配置檔範本,我們在剛建立的 ssl目錄中,建立一個名為 cert-template.conf 的檔案,並貼上下方範本網址中的代碼

複製 make-cert.bat 範例

熱心網友 Adrian Suter 在 Github 把 openssl 簽發憑證的流程寫成 Windows bat 檔案,簡化操作流程,克服指令障礙,非常佛心,如果配置檔配置正確,Enter,Enter,Enter一鍵就可以完成指定域的SSL憑證簽發,非常方便,開啟下方連結,並於上述的 ssl 目錄中建立一個名為 make-cert.bat 的檔案,並貼上下方網址中的代碼

執行make-cert.bat

執行 make-cert.bat 前,請確保 cert-template.conf 已同一目錄

執行 make-cert.bat,要求輸入要簽發的網域( 以 example.com 為例 )
輸入 example.com 按 Enter

再來會要求填入一些相關資料,不理它直接Enter、Enter、Enter下去就好,沒有輸入會帶預設值,因為本文介紹只是方便開發用的,不是正式環境使用,所以這些資訊並不必是真實的

當看到請按任意鍵繼續的文字,代表已經完成,下圖就是完成的截圖

此時 ssl 目錄就會多一個 example.com 的子目錄

開啟 example.com 目錄,裡面應該會有 server.crt 及 server.key 這兩個檔案,這就是憑證檔案,如果看到這兩個檔案,恭喜~憑證簽發完成! 這做法非常簡單

Windows 安裝憑證

openssl 自簽憑證沒有信任組織背書,仍會被瀏覽器標示為不安全,需要在 Windows 手動安裝信任此憑證,打開 server.crt 如下圖,按下「安裝憑證」按鈕

會跳出憑證匯入精靈,存放位置選「本機電腦」,下一步

選擇「將所有憑證放入以下存放區」,按憑證存放區的「瀏覽」按鈕

選擇「受信任的根憑證授權單位」,確定

下一步

按「完成」按鈕以完成憑證匯入

看到此彈跳視窗即匯入完成

設定 httpd-vhosts.conf

檔案位置:C:\xampp\apache\conf\extra\httpd-vhosts.conf
設定 XAMPP 的虛擬主機設定

設定 Hosts

檔案位置:C:\Windows\System32\drivers\etc
在檔案最下方加入下方這一行,將網域指向本機,流量就不出站了

完成設定

完成上述動作,再來就是要測試是否可以正常運行,在這之前先完成幾個步驟

  1. Ping 網域是否正確指向 127.0.0.1
  2. 重新啟動 XAMPP
  3. 暫時關閉防毒軟體及防火牆
  4. 清除 Windows DNS快取
  5. 清除瀏覽器 DNS 快取
  6. 瀏覽器關閉後重新開啟

最後打開瀏覽器,開啟所設定的網域,正常網址前方應該是不會出現「不安全」字樣,應該會出現鎖頭圖標,點擊網址前方鎖頭圖標,會顯示「已建立安全連線」的小視窗,如果有看到代表已經設定成功囉

如果沒看到也可以再嘗試一下多清除幾次瀏覽器的快取,或關閉瀏覽器再開啟,我發現瀏覽器這部分似乎有快取,有時設定成功卻仍顯示不安全,所以可以特別去注意這部分,若還是不行就重新操作一遍,或瀏覽文章下方參考連結參考原文

檢視或刪除已信任憑證

當我們完成階段性任務,不需要再使用開發環境某一個域的憑證時,可以參考下面這篇來刪除憑證

Windows 刪除已信任的https憑證、管理憑證

參考資料

https://shellcreeper.com/how-to-create-valid-ssl-in-localhost-for-xampp/
https://a091234765.pixnet.net/blog/post/403840004
https://gist.github.com/turtlepod/3b8d8d0eef29de019951aa9d9dcba546#file-cert-conf
https://www.cnblogs.com/kidsitcn/p/10561979.html
https://odan.github.io/2017/10/29/installing-an-ssl-certificate-under-apache-xampp.html

[……]

閱讀更多

XAMPP 換成 WAMP Server 安裝教學

XAMPP 一直來都是我裝在自己電腦中模擬開發環境使用,最大的優點的優點就是非常簡單,在 Windows 一鍵安裝完 MySQL、PHP、PHPMyAdmin,甚至連 Filezilla Server 都可以一次裝到好,省去逐一安裝及配置的時間,又有友善的介面可以開啟這些Server,實在是非常方便。

那麼方便幹嘛換,嘿對,隨時代的更迭,PHP、MySQL、Apache 都會釋出新版本,以 PHP來說 PHP5 到 PHP7 就是一個明顯陣痛過程,部分程式需要重構,但並非所有程式都會上PHP7,然而XAMPP雖然方便但它只安裝一種 PHP 版本,如果我裝 PHP7 的版本就無法開啟 PHP5 時期的程式,這是忽然要改 PHP5 的程式變成沒有這樣的開發環境了

我相信 XAMPP 一定有辦法手動去安裝舊版本的 PHP ,但一定免不了手動安裝及配置,在切換過程中也會需要一些設定,會搞得有一點不優雅,所以如果有更好的解決方案,為何不嘗試呢?想開發什麼版本就切換到哪個版版,WAMP Server 正好有這優點,聽起來是不是很棒呢,開始試試看吧

開始之前準備

安裝新環境時都要有個好習慣,記得先備份好之前的 XAMPP 檔案,還有匯出資料庫,天知道等下安裝後會發生什麼事,至少都還有還原的機會

下載 Wamp Server

官網下載:https://www.wampserver.com/en/

等一下!!! 這什麼瀏覽器?! IE11 為什麼會開啟骨灰級的瀏覽器,阿我也不知道,不行不行這我受不了,於是我把它改回我慣用的 Chrome,不然我心裡過不去阿

至於怎麼改呢?可以參考我另一篇文章

WAMP Server change default Browser to Chrome

控制面板

WAMP Server 開啟後,在 Windows 右下角常駐程式會出現這個 icon ,相關控制功能都在這邊

更改語言

接著滑鼠指標在 icon 的上按「右鍵」,「右鍵」「右鍵」是「右鍵」,就會出現相關設定選單,其中有一個 Language 的選單,但當然不是只有俄文拉,WAMP 內建一堆語言。

再來就是 WAMPP

相容 WAMP 最酷的地方

身為一個 PHP 程序員,電腦裝個幾個版本的 PHP 也是很正常的,在 WAMP 中可以允許我們切換不同版本的 PHP 就在這邊,就這麼簡單,基本的功能面板都在這邊,除此之外還提供很多好用的工具,這就要自己慢慢完囉

相容 XAMPP 不必卸載

最後,XAMPP 與 WAMP Server 的環境都是分別獨立的,連資料庫都是,只要不要同時開啟,基本上兩者都可以使用

[……]

閱讀更多