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

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

![Cloudflare vs. Azure App Service](https://stwillblogassets.blob.core.windows.net/files/images/external/user-images.githubusercontent.com/930844ee69ce73538193-208938302-e7c8e6b8-154f-47d2-b481-026bf246bd17.png)

-   調整 App Service 的 Configuration (應用程式設定)
    
    設定路徑：`App Service > [Settings] Configuration > General settings > HTTPS Only`
    
    設定值：`Off`
    
    ![image](https://stwillblogassets.blob.core.windows.net/files/images/external/user-images.githubusercontent.com/2b8072a115a0cfc8f53a-208934359-fc161f18-97cf-4a7c-82c1-f4a1340cbf03.png)
    
    我有個網站原本是設定為 `On`，結果設定好之後，網站就完全連不上了，因為網站進入了無止盡的 HTTP 重新導向 (HTTP Redirection)！
    
    你可以從 Cloudflare 的 SSL/TLS 的 Overview 頁面看到以下設定，預設值為 `Flexible`，你可以從這張圖上發現，從 Cloudflare 連到 Origin 的網路是**未加密的 HTTP 連線**！因此，如果 Azure Web App 遇到 HTTP 的流量就要轉址到 HTTPS 的話，不就意味著永遠都在 HTTP 301 重新導向了！😅
    
    ![image](https://stwillblogassets.blob.core.windows.net/files/images/external/user-images.githubusercontent.com/9bbb5f91e2946c77268f-208929592-1049a735-88f3-4cc6-9776-a8b4094626cb.png)
    
    > 如果從 Cloudflare 連到 Origin 的網路連線要走 HTTPS 的話，就要選擇 `Full` 或 `Full (strict)` 才行！
    
-   調整 App Service 的 Custom domains (自訂域名)
    
    設定路徑：`App Service > [Settings] Custom domains`
    
    點擊 `Add custom domain` 新增一個「自訂域名」
    
    ![image](https://stwillblogassets.blob.core.windows.net/files/images/external/user-images.githubusercontent.com/3a9ba2872c5670ed911b-208933093-89d45dd8-e4d1-4ff2-b373-80401ea866b4.png)
    
    請記得你的 DNS 只能用 `TXT` 記錄進行驗證!
    
    ![image](https://stwillblogassets.blob.core.windows.net/files/images/external/user-images.githubusercontent.com/3f82cb0bbe9f144d86c3-208933458-9c71e698-fd6d-4ecb-a521-0a02652fa77a.png)
    
    > 當你驗證域名成功，這個 `TXT` 紀錄就可以刪除了！
    
-   調整 App Service 的 Networking 設定，限制僅 Cloudflare 的 IP 可以存取該網站
    
    設定路徑：`App Service > [Settings] Networking > Inbound Traffic > Access restriction`
    
    設定值：`On` (加入 Cloudflare 所有的 [IP Ranges](https://www.cloudflare.com/zh-tw/ips/) 清單)
    
    ![image](https://stwillblogassets.blob.core.windows.net/files/images/external/user-images.githubusercontent.com/00c2226ba5f589f2b4f8-209050178-1313b661-7cfd-48e5-b09f-1a5acc83fd03.png)
    
    > 注意: 記得要定時回來更新 IP 清單，因為 IP 每隔幾年還是有可能會變動的！🔥
    
-   到 Cloudflare 的 DNS 新增一筆 `CNAME` 紀錄，並啟用 `Proxy status` 選項，這樣就有 CDN 可以用了！
    
    ![image](https://stwillblogassets.blob.core.windows.net/files/images/external/user-images.githubusercontent.com/e8d13b9962c25865f048-208931965-289daa3e-cc25-4db6-a994-ef735ea01d48.png)
    

### 相關連結

-   [Proxy status · Cloudflare DNS docs](https://developers.cloudflare.com/dns/manage-dns-records/reference/proxied-dns-records/)
-   [IP Ranges | Cloudflare](https://www.cloudflare.com/zh-tw/ips/)