使用 Cloudflare 幫你的網站掛上 SSL 憑證與 CDN

程式技術

之前曾經寫過一篇文章介紹如何使用 Certbot,幫自己的網站向 Let's Ecncrypt 申請免費的 SSL 憑證。

幫網站掛上 HTTPS,使用 Certbot 向 Let's Encrypt 申請憑證

用這種方式幫網站掛上憑證可以說是簡單又快速,而且還能從中理解數位憑證機構 (Certificate Authority,簡稱 CA) 是如何透過 DNS-01 考驗,確認你是網域名的擁有者並頒發憑證。

雖然這個方法已經很懶人了,但可惜還不夠 🤣。本篇文章會簡單介紹,如何使用 Cloudflare 來幫自己的網站掛上 SSL 憑證,除此之外,我們還可以使用 Cloudflare 提供的 CDN 服務來加快網站的讀取速度。

將你的網域交給 Cloudflare 託管

如果要使用 Cloudflare 幫你的網站掛上憑證,就必須把你的網域交給 Cloudflare 來託管,這樣才能在 Cloudflare 中管理你的 DNS 紀錄。

使用 Cloudflare 之前,請先註冊一個 Cloudflare 帳號。

首先我們在 Cloudflare 註冊一個網域,點選畫面上的 Add site。

2023_03_12_16_08_24_6a41156dd3fd.png
點選畫面上的 Add site

註冊一個你想託管的網域名稱。

2023_03_12_16_09_48_1255894e7283.png
註冊你擁有的網域名稱

網域註冊之後,Cloudflare 會請你選擇一個付費方案,選擇免費即可。

2023_03_12_16_13_57_66159920965e.png
個人小專案可以當個免費仔

之後就是設定你的 DNS 紀錄,可以在這邊把主機的 IP 加到 DNS 的 A 紀錄。

2023_03_12_16_18_46_34fc3ee1fbdc.png

最後就是設定網域的 Name Server,Cloudflare 會提供你兩組 Name Server 的網域。

2023_03_12_16_21_53_2cd64a2a0f16.png

我們需要到網域供應商那裡修改 Name Server 的設定

以 AWS Route 53 為例。需要到 Route53 → Registered domains → Add or edit name servers 修改。

2023_03_12_16_25_05_fbc1838f614b.png

修改完成之後需要等待一段時間等待設定生效。

接下來 Cloudflare 會問你要不要開啟以下的功能,基本上為了安全與網站體驗,建議全部開啟。

  • Automatic HTTPS Rewrites:如果訪問的是 HTTP,會自動轉到 HTTPS。
  • Always use HTTPS:永遠使用 HTTPS。
  • Brotli:使用 Brotli 壓縮加快網站的載入速度。

幫你的網站掛上 SSL 憑證 … 已經好了!?

當我們將網域成功的交給 Cloudflare 託管,基本上 Cloudflare 就會自動幫我們的網站加上憑證,我們什麼都不用做。

這個時候訪問網站,就會發現網站已經掛上了 SSL 憑證。

2023_03_12_16_51_18_eadf44371f28.png
真是太神奇了,Cloudflare

但先不要高興得太早,因為此時憑證是屬於 Flexible SSL 模式,什麼意思呢?

我們之所以可以什麼都不做就掛上 SSL 憑證,是因為當用戶使用瀏覽器訪問網站時,中間會先經過 Cloudflare 的反向代理 (reverse proxy),所以前半段的傳輸,Cloudflare 可以幫我們做加密。

可以使用 dig 指令查看網域的 A 紀錄,你會發現顯示的 IP 與你設定的不同,A 紀錄會先導向至 Cloudflare 的 IP‧

2023_03_12_17_00_56_76232a51d837.png
只有用戶到 Cloudflare 這前半段的傳輸有加密

但後半段,Cloudflare 到網站主機的傳輸則是非加密的。

如果網站是純靜態網站,沒有任何敏感資料傳輸的話,Flexible SSL 其實綽綽有餘,你可以快速的幫你的網站掛上憑證。

但假如是動態網站 (例如有會員系統,需要輸入密碼登入),Flexible SSL 其實非常不安全,因為你的敏感資料有一段時間會在網路上裸奔。

為了安全,我們需要將網站的 SSL 模式修改成 Full (strict) 模式。

使用 Full (Strict) SSL 模式

首先先產出一個 Cloudflare 認證的憑證,到 Cloudflare 控制台,選擇你管理的網域,然後至  SSL/TLS → Origin Server 頁面。

點選 Create Certificates。

2023_03_12_17_34_03_6894ac44f9ea.png

設定你的金鑰的類型,金鑰期限,以及對應的網域,如果你的網域是 example.com,就可設定 example.com*.example.com

*.example.com 中的 * 為萬國字符 (wildcard),代表任何子網域也包含在內,如 doc.example.com 或是 hello.world.example.com 等。

設定完成之後你就會拿到 pem 與 key 檔案,可以根據你的網域名來儲存這兩個檔案,例如 example.com.pemexample.com.key

接下來將這兩個檔案上傳到你的主機上,如果你是使用 Nginx,在 Nginx 的設定檔案中開啟 SSL 連線,並使用剛剛產生的檔案。

ssl_certificate /etc/cert/example.com.pem;
ssl_certificate_key /etc/cert/example.com.key;

完成之後就可以到 Cloudflare 控制台,選擇你管理的網域,然後至  SSL/TLS → Overview 頁面,將 SSL 的模式切換成 Full (strict)。

2023_03_12_17_41_26_6ea1eba8039c.png

試著訪問你的網站,如果一切正常的話,就代表 Full (strict) 模式已經成功開啟了!

使用 CDN 加速你網站的讀取速度

先來聽聽 ChatGPT 介紹什麼是 CDN。

什麼是 CDN ?

CDN (Content Delivery Network) 是一種通過將資料分發到全球各地的伺服器來加速網站元素的載入速度的技術。

當一個網站使用 CDN 時,它會將網站的靜態資源複製到多個位於全球各地的伺服器上。當使用者訪問該網站時,他們將從最接近他們地理位置的伺服器上下載靜態資源,從而減少了下載時間和延遲,提高了網站的響應速度和可用性。

Cloudflare 會自動把我們網站的靜態資源 (例如 css 與 js 檔案),上傳到他們的伺服器中,之後當用戶訪問我們的網站時,就會根據地理位置,自動從最近的 Cloudflare 伺服器上下載資源,而非我們的網站主機。

這麼做除了可以加快網站的讀取速度,也能減輕網站主機的負載。

我們可以做個簡單的檢查,在我們的網站上打開瀏覽器的開發者工具,找出網站載入的 JS 檔案,可以發現這些資源的 IP 是來自 Cloudflare,而非網站主機。

2023_03_12_17_53_46_1876f229a2fb.png

對於因興趣而搭建的個人小網站 (例如部落格),Cloudflare 是非常不錯的選擇,本次介紹就到這邊,謝謝你的閱讀。 😄

參考資料

sharkHead
written by
sharkHead

持續努力中的後端打工仔,在下班後喜歡研究各種不同的技術。稍微擅長 PHP,並偶爾涉獵前端開發。個性就像動態語言般隨興,但渴望做事能像囉嗦的靜態語言那樣嚴謹。

7 則留言
訪客

想請問 Cloudflare有提供免費的憑證使用,您所指的是指免費的憑證嗎?

sharkHead sharkHead (已編輯)

Hi

Cloudflare 免費提供傳輸過程所需要的憑證。只是 Full SSL 模式需要你多幾個步驟,手動去跟 Cloudflare 申請一個免費憑證並放置在你的 Server 上。

如果你有多個網域需要託管,只要依照上面的步驟新增並修改域名註冊商那邊的 Name Server 即可。

注意域名註冊商是你買域名的地方 (例如 AWS Route53 或是 GoDaddy),而買到的域名你可以交給其他廠商進行託管 (例如 Cloudflare)

訪客

您好 想詢問如果要從Cloudflare的這個邊緣憑證功能轉回到Let's Encrypt或是外購的憑證時,需要怎樣的處理? 只需要刪除Origin Certificates與關閉 Always use HTTPS就可以了嗎?還是連Automatic HTTPS Rewrites都需要關閉?還有其他的步驟或是功能需要修改或注意的嗎?

謝謝您

sharkHead sharkHead (已編輯)

Hi~

如果你有自己的憑證,應該可以將其上傳到 Cloudflare 的邊緣憑證,其他部分應該完全一樣才對。不需要關閉 Always use HTTPS。

不過在邊緣憑證中使用自己的憑證或是訂購進階憑證,都是 Cloudflare 的付費會員功能。

因為我不是很確定,也許你可以參考這個系列文章

訪客

Sir 謝謝您的指導,試過後發現其實Always Use HTTPS與Automatic HTTPS Rewrites不需要關閉,站台直接強制安裝憑證就可以了。 測試安裝憑證後把瀏覽器清空記錄與Cookie後再重新瀏覽,就會以自己的憑證進行連線了。

sharkHead sharkHead

讚辣~

感謝你的分享!

訪客

您好 另外想詢問多域名的做法是有那裡不一樣呢?

新增留言
編輯留言