The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

將現有 Azure App Service 網站加上 Cloudflare CDN 的注意事項

最近把我的部落格改用 Cloudflare CDN 來當作網站前級,但是在設定的過程中遭遇了一些地雷。由於我的網站是放在 Azure App Service 上面,原本的設定都相當安全,像是 HTTP to HTTPS 的設定,還有一些 URL Rewrite 的設定,多年來都相安無事,但上到 Cloudflare 的時候網站就掛掉了。這篇文章我就來說說我的研究心得!

Cloudflare vs. Azure App Service

  • 調整 App Service 的 Configuration (應用程式設定)

    設定路徑:App Service > [Settings] Configuration > General settings > HTTPS Only

    設定值:Off

    image

    我有個網站原本是設定為 On,結果設定好之後,網站就完全連不上了,因為網站進入了無止盡的 HTTP 重新導向 (HTTP Redirection)!

    你可以從 Cloudflare 的 SSL/TLS 的 Overview 頁面看到以下設定,預設值為 Flexible,你可以從這張圖上發現,從 Cloudflare 連到 Origin 的網路是未加密的 HTTP 連線!因此,如果 Azure Web App 遇到 HTTP 的流量就要轉址到 HTTPS 的話,不就意味著永遠都在 HTTP 301 重新導向了!😅

    image

    如果從 Cloudflare 連到 Origin 的網路連線要走 HTTPS 的話,就要選擇 FullFull (strict) 才行!

  • 調整 App Service 的 Custom domains (自訂域名)

    設定路徑:App Service > [Settings] Custom domains

    點擊 Add custom domain 新增一個「自訂域名」

    image

    請記得你的 DNS 只能用 TXT 記錄進行驗證!

    image

    當你驗證域名成功,這個 TXT 紀錄就可以刪除了!

  • 調整 App Service 的 Networking 設定,限制僅 Cloudflare 的 IP 可以存取該網站

    設定路徑:App Service > [Settings] Networking > Inbound Traffic > Access restriction

    設定值:On (加入 Cloudflare 所有的 IP Ranges 清單)

    image

    注意: 記得要定時回來更新 IP 清單,因為 IP 每隔幾年還是有可能會變動的!🔥

  • 到 Cloudflare 的 DNS 新增一筆 CNAME 紀錄,並啟用 Proxy status 選項,這樣就有 CDN 可以用了!

    image

相關連結

留言評論