分類: Blog

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

[……]

閱讀更多

Clear Chrome DNS Cache

快取這種東西對一般人而言，能加快網頁開啟速度何嘗不好，對於開發人員來說可能是場噩夢，開發時常遠端環境及本地端模擬環境中切換，DNS快取常令我們不知道我正在瀏覽的是遠端環境還是本地端環境，即便我已經清除了 Windows 快取，Ping IP 也顯示正確了IP了，結果還是瀏覽到遠端的網站，後來發現 Chrome 也有 DNS 快取，本篇教大家如何用最簡單的方式清除 Chrome DNS 快取。

在Chrome網址列貼上下方網址，如下圖，就會出現 Clear host cache 按鈕，按下去就對了

https://superuser.com/a/611712

[……]

閱讀更多

MySQL 圖解 LEFT JOIN, INNER JOIN,RIGHT JOIN 的差異及範例

C.L. Moffatt 發表 Visual Representation of SQL Joins 用圖示來解釋各種 SQL Join 非常清楚，本文僅節錄MySQL常用的三種Johin方式，說明其中差異及提供使用範例，主要也是讓我自己清楚這幾種 Join 的用法，有更多Johin 需求的朋友可於文章結尾找到原文網址。

Inner Join

該查詢將返回左表（表A）中所有與右表（表B）中具有匹配記錄的記錄。

範例如下：

Left Join

無論這些記錄與右表（表B）中是否匹配，查詢都返回左表（表A）中的所有記錄及與（表B）匹配的記錄。

Right Join

無論這些記錄與左表（表A）中是否匹配，查詢都返回右表（表B）中的所有記錄及與（表A）匹配的記錄。

本文作者：C.L. Moffatt
原文網址：Visual Representation of SQL Joins

[……]

閱讀更多

比特幣如何放空、開槓桿，用合約交易買多買空放大財富

一堆專有名詞聽不懂嗎？合約交易說穿了有點像賭博，就是跟交易所對賭，就是賭大賭小這麼簡單，下好離手，你也可以賭好幾樁，一樁贏一樁輸就是沒輸沒贏，輸贏很快，賭贏了帶著籌碼換台幣，輸了就是口袋空空下賭桌，跟賭場不一樣的只有感覺好像是在投資，還有真的拿得到錢。[……]

閱讀更多

比特幣再創新高-你還不會買嗎？哥教你

睽違3年，比特幣一根長綠，終於正式突破2萬美元大關，3年以來最大的壓力終於突破了，沒頂了，預計開啟另一波牛市，而下一個目標是多少呢？10萬？100萬？[……]

閱讀更多

Google 掛了嗎？即時查詢Google服務狀態

雖然 Google 是大神，但難免也會掛、Google 服務包羅萬象，不管是生活或商務多多少少都會使用到 Google 提供的服務，常見的大概就是 Gmail、Google雲端硬碟、Google Map、Google 相簿或是YouTube， 如果當機起來還真的會造成許多不便，甚至哀號遍野

Google 掛掉拉

在寫這篇的同時，就是Google掛掉了，不管是Gmail、Youbube、Chrome、雲端硬碟通通都掛掉了，等待修復的時間有點閒來寫這篇吧。

如何判斷是 Google 掛了，還是自己的網路環境有問題呢？

除了跟地震一樣，上 Facebook 上看有沒有慘叫聲以外，Google 官方有提供一個所有產品目前服務狀態查詢的網頁，清楚標記各種產品目前是正常運行還是掛掉了，用燈號來表示目前的服務狀態、故障持續的時間，如此一來，如果您是基於 Google 提供延伸的服務，這樣才有辦法貼給客戶看，客戶才不會煩你煩到你掛掉

今天還蠻慘的耶，幾乎所有服務都掛掉了，也讓我有閒功夫在這邊打這篇文章，Google 實在是大到不能停，它當機真的算是天災了

Google 服務狀態面板

[……]

閱讀更多

Cloudflare 轉址設定兩步驟

基於種種原因，我們需要把某一個網址的所有流量轉換到另一個網址
例如：把 example.com 所有流量轉到 example.net
這時就需要用到轉址服務，好消息 Cloudflare 就可以做轉址囉
本文兩步驟教大家如何設定 Cloudflare 轉址

設定DNS紀錄

Cloudflare 頁面切換到 DNS

編輯 DNS 記錄

設定一筆 A 記錄將跟目錄指向到 Google Public DNS，IP 8.8.8.8

Cloudflare 根目錄在名稱欄位要輸入「@」

指向 Google Public DNS 只是因為該欄位必填，不知道要填什麼就填 Google 吧，當然也可以填其他 IP

編輯網頁規則

Cloudflare 轉址叫「網頁規則」，切換至「頁面規則」頁面

按下「建立頁面規則按鈕」，規則可使用萬用字元，可參考下列規則的寫法

轉址目標設定及方式可以參考下圖，按下儲存，可以測試了

這時候會把 example.com 的所有流量透過 301 轉址的方式全部轉到 example.net 囉

[……]

閱讀更多

WAMP Server change default Browser to Chrome

開啟 WAMP Sever 居然是用 IE 11 開啟，到底對不對阿，這都什麼時期的產物了，雖然直接用瀏覽器輸入網址瀏覽本地端網頁也是可行，但心裡就是有個疙瘩，來哥教你改成用你愛的瀏覽器開

修改設定檔

如果安裝路徑沒有修改的話，開啟下面這個檔案，如果安裝路徑有修改的話，自己去找這個檔案。

用你愛用的文字編輯器打開，照到該死的這一行

替換成瀏覽器執行檔位置

關閉 WAMP Server 重新開啟，SEE Chrome 出現了，開勳

[……]

閱讀更多

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 的環境都是分別獨立的，連資料庫都是，只要不要同時開啟，基本上兩者都可以使用

[……]

閱讀更多