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

程式技術
sharkHead

之前曾經寫過一篇文章介紹如何使用 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,並偶爾涉獵前端開發。個性就像動態語言般隨興,但渴望做事能像囉嗦的靜態語言那樣嚴謹。

0 則留言