blog banner

(四)申請&設定SSL 靠Let’s encrypt簡單搞定

上一篇中,完成了DDNS的設定,已經可以藉由網域名稱讓他人攻擊造訪你的網站,但是美中不足的是,僅完成了HTTP連線,還缺少HTTPS連線的相關設定,這對下一個主題:用Wordpress簡單架設購物網站,會有一些影響與不便,所以還是稍微辛苦點把它完成。

先說結論,有懶人自動完成SSL設定的套件(請參考:https://github.com/PKISharp/win-acme)
但是為了深入淺出,這邊還是按部就班的來完成設定。

步驟1.首先到SSL For Free網址生成必要的憑證,進入網站後,在網址輸入你的網域名稱(如下圖),本篇範例是:xiang666.ddns.net,輸入完後直接按下右邊綠色[Create Free SSL Certificate]按鈕

步驟2. 接著畫面會來到要求驗證網域所有權的選擇頁面,這裡提供三種方式,就選中間的[Manual Verrification ] 手動設定,簡單完成就好。

步驟3. 按下 [Manual Verrification ] 後會展開手動驗證方式的說明,基本上看看就好,只要上一篇的步驟有成功完成基本上都不會有問題,直接按下最下方綠色[Manually Verify Domain]按鈕

步驟4. 接著又會展開新的驗證步驟,從這裡開始要有點耐心的來完成,基本上不難,大都是複製貼上修修改改的小事情:
先點選第1項的 Download File #1 超連結,下載驗證用的檔案。

可以看到這個檔案沒有副檔名,且檔名是一長串雜湊值/亂碼

步驟5. 接著開啟檔案總管到第一篇 最後面提到的網頁資料目錄,請依照你的安裝目錄進入到”htdoc“的資料夾內,並且新增一個名稱為”.well-known”的資料夾(*注意:前面一定要有一個點 .)
本篇範例位置為: C:\Bitnami\wampstack-7.1.26-0\apache2\htdocs

相信很多人會在這個步驟卡住,因為windows的設計無法直接新增名稱開頭為” . “的資料夾,這時候就要進入Windows命令列來新增, 請按下鍵盤的”Win田(開始功能鍵)+R”,然後輸入cmd,開啟Windows命令視窗。(或者也可以按下”Ctrl + X”,然後點選Windows PowerShell)

在命令視窗中輸入以下指令,以建立 “.well-known”資料夾
mkdir c:\Bitnami\wampstack-7.1.26-0\apache2\htdocs\.well-known
【說明】
mkdir:是Windows建立目錄指令,後面”要空一格”再輸入要建立目錄的位置+名稱
位置:c:\Bitnami\wampstack-7.1.26-0\apache2\htdocs\  (*請以你的安裝路徑為主)
名稱:.well-known (不要忘記前面的”.”)
*這裡有個小技巧,在輸入目錄位置時,只要Key前面一兩個字母然後按下”Tab”鍵就可以自動把剩下的字補齊。

按下Enter按鍵後,即可回到剛剛的檔案總管,在”htdocs“目錄裡就會看到一個名稱為”.well-known”的資料夾。

步驟6. 接著就比較簡單了,進入 “.well-known” 目錄,直接於檔案總管內新增一個名稱為”acme-challenge”的資料夾

本篇範例中” acme-challenge ” 資料夾完整路徑如下:
C:\Bitnami\wampstack-7.1.26-0\apache2\htdocs.well-known\acme-challenge
然後把剛剛下載的驗證檔按(檔名是一長串亂數的那個)直接剪下貼上到 ” acme-challenge ” 資料夾內

複製完後,回到SSL For Free的網頁,並且看到第5項有一條綠色常常的網址,點下去就會看到剛剛複製到” acme-challenge ” 資料夾內的驗證檔內容。只要網頁畫面有顯示一串亂碼就表示可以通過驗證。

步驟7. 繼續回到SSL For Free的網頁, 進行第7項:點擊最下方[Download SSL Certificate]按鈕下載專與於你的SSL憑證。(☐I have my own CSR 這個”不用”打勾)

按下後,稍微等一下憑證就會自動生成,可以看到總共有三個項目:
Certificate
Private Key
CA Bundle
恩…密密麻麻,這裡先不管這麼多,直接往下捲動頁面

步驟8. 看到[Download All SSL Certificate Files]按鈕後,點擊下載憑證,下載的檔案是一個zip壓縮檔:sslforfree.zip

步驟9. 把解壓縮出來的檔案(有三個:certificate.crt、private.key
、 ca_bundle.crt)存在一個名為”sslforfree“的資料夾

步驟10. 然後把整個”sslforfree“資料夾剪下貼上到
C:\Bitnami\wampstack-7.1.26-0\apache2\conf 目錄下

步驟11. 接著就是重頭戲了!要啟用Apache HTTPS和相關模組設定,聽起來好像很困難!?
其實很簡單,設定幾乎都寫好了,只要手動開啟就可以了。

到檔案總管目錄下: C:\Bitnami\wampstack-7.1.26-0\apache2\conf
找出檔案:” httpd.conf “,並且使用「記事本」開啟編輯,如下圖,
將這一行(幾乎在文件內容的最下方可以找到)
#Include conf/extra/httpdssl.conf
前面的”#”刪掉,修改成
Include conf/extra/httpdssl.conf
存檔並關閉即可。
【說明】
在設定文件裡,開頭有”#”的表示被註解起來了,不會有作用,這裡所做的修改就只是允許
載入” httpdssl.conf “這份文件的內容/設定值。

步驟12. 既然有新載入” httpdssl.conf “這份文件,根據經驗法則,就一定有東西需要修改,
到檔案總管目錄下: C:\Bitnami\wampstack-7.1.26-0\apache2\conf\extra
找出檔案:” httpdssl.conf “,並且使用「記事本」開啟編輯,如下圖,

在內容前段左右可以看到有一行
Listen 443
修改成(Server IP:443 *這裡的Server IP是指該電腦的區網IP喔!)
Listen 192.168.1.66:443
或者直接加上#註解起來 (不推薦,但是如果等等真的出問題再這樣處理)
#Listen 443

接著找到這行<VirtualHost default:443>再往下幾行可以看到
ServerName 的設定
改成
ServerName xiang666.ddns.net:443
【說明】
ServerName+空格+網域名稱:443

再往下捲,找到
SSLCertificateFile設定
改成
SSLCertificateFile “C:/Bitnami/wampstack-7.1.26-0/apache2/conf/sslforfree/certificate.crt”
【說明】
SSLCertificateFile+空格+”+路徑+/+certificate.crt+”
路徑就是剛剛剪下貼上的sslforfree資料夾的位置

繼續往下捲,找到
SSLCertificateKeyFile設定
改成
SSLCertificateKeyFile “C:/Bitnami/wampstack-7.1.26-0/apache2/conf/sslforfree/private.key”

最後了~找到
SSLCertificateChainFile設定
改成
SSLCertificateChainFile “C:/Bitnami/wampstack-7.1.26-0/apache2/conf/sslforfree/ca_bundle.crt”
存檔離開~終於~~~令新手感到最困惑且緊張的階段完成了!
(如果還有不清楚的地方,歡迎來信詢問!)

步驟13. 修改完相關設定後,要重新啟動Apache Server才會套用新設定,在這之前請再次確認防火牆Port 443是設定開通且正確的。(請參考第二篇)

步驟14. 進行Apache Server重啟
按下Windows開始按鈕,找到”Bitnami WAMP Stack Manager Tool”,點擊開啟

切換到”Manager Servers”欄位,並且點擊[Reatart All]按鈕,重啟所有服務,重啟後顯示綠燈狀態表示一切正常!

步驟15. 馬上開啟瀏覽器來驗證看看是不是真的成功,請輸入
https://加上你的域名網址,注意:是https,不是http
範例如下:
https://xiang666.ddns.net
成功的話就會再瀏覽器的網址列前面看見中國古拳法的奧義"鎖"
以上就是SSL憑證與HTTPS設定的流程,很簡單吧!

【補充說明】
Let’s Encrypt 提供的 SSL 憑證雖然是免費的,但是有使用效期 (90天),可於任何時間點重新申請新的憑證,新的憑證校期就是申請日起算 90 天。
使用效期和 SSL 相關的狀態可以透過以下網址查驗:
https://www.ssllabs.com/ssltest/analyze.html
進入網站後,在 Hostname: 輸入你的網址 ( 例如 xiang666.ddns.net ),然後按下[Submit]送出即可開始查驗,查驗過程需要一點時間,跑到 100% 完成,如下圖:

可以從 Valid until項目查得到期日

另一個好用的線上 SSL 檢測工具:
https://www.websiteplanet.com/zh-hans/webtools/ssl-checker
這個網站除了提供 SSL-Checker 線上檢測工具外,還有提供很多常用的檢測工具,有興趣的朋友可以前往該站使用。

既然有HTTP Server、能跑PHP+MySQL、有自己的Domain而且還具備SSL憑證能通過HTTPS連線了,不蓋個購物車吸金一下實在對不起自己!那麼下一篇就接著來介紹目前最火紅的架站平台「Wordpress」吧!這邊預告一下教學階段:
一. WordPress 下載與安裝
二. WordPress 外觀版型替換
三.購物車套件 WooCommerce 安裝與基本設定
四.線上刷卡金流申請(以綠界科技為範例)
五.結合三大超商取貨付款(以綠界科技為範例)

敬請期待!