教學課程：設定 Azure Static Web Apps 的 CDN

文章
10/03/2024

藉由將 Azure Front Door 新增為靜態 Web 應用程式的 CDN，您可以受益於安全的進入點，以快速傳遞 Web 應用程式。

使用靜態 Web Apps 時，您有兩個選項可與 Azure Front Door 整合。您可以藉由啟用企業級邊緣，將 Azure Front Door 與靜態 Web Apps 的受控整合，將 Azure Front Door 新增至靜態 Web 應用程式。或者，您可以在靜態 Web 應用程式前面手動設定 Azure Front Door 資源。

請考慮下列優點，以判斷哪一個選項最符合您的需求。

企業級邊緣提供：

零設定變更
沒有停機時間
自動管理的 SSL 認證和自訂網域

手動 Azure Front Door 設定可讓您完全控制 CDN 設定，包括有機會：

依各個來源限制流量
新增 Web 應用程式防火牆（WAF）
跨多個應用程式路由
使用 Azure Front Door 的更進階功能

在本教學課程中，您將瞭解如何將 Azure Front Door 新增至靜態 Web 應用程式。

必要條件

已為靜態 Web 應用程式設定自訂網域，並將存留時間 (TTL) 設定為小於 48 小時。
透過 Azure Static Web Apps 所部署、且使用標準主控方案的應用程式。

移至 Azure 入口網站中的靜態 Web 應用程式。
選取 左側功能表中的 [企業級邊緣 ]。
核取標示為 [啟用企業級邊緣] 的方塊。
選取 [儲存]。
選取 [確定] 以確認儲存。

啟用此功能會產生額外成本。


az extension add -n enterprise-edge

az staticwebapp enterprise-edge enable -n my-static-webapp -g my-resource-group

必要條件

具有有效訂用帳戶的 Azure 帳戶。免費建立帳戶
Azure Static Web Apps 網站。建置您的第一個靜態 Web 應用程式
Azure Static Web Apps Standard 和 Azure Front Door Standard / Premium 方案。如需詳細資訊，請參閱靜態 Web Apps 定價
請考慮使用企業級邊緣來加快頁面載入速度、增強的安全性，以及全域應用程式的優化可靠性。

建立 Azure Front Door

登入 Azure 入口網站。
從首頁或 Azure 功能表選取 [+ 建立資源]。搜尋 Front Door 和 CDN 配置檔，然後選取 [建立>Front Door 和 CDN 配置檔]。
在 [比較供應專案] 頁面上，選取 [ 快速建立]，然後選取 [ 繼續] 以建立 Front Door。

在 [ 建立 Front Door 配置檔 ] 頁面上，輸入或選取下列設定。

設定	值
訂用帳戶	選取 Azure 訂閱。
資源群組	輸入資源組名。此名稱通常是靜態 Web 應用程式所使用的相同組名。
資源群組位置	如果您建立新的資源群組，請輸入最接近您的位置。
名稱	輸入 my-static-web-app-front-door。
層	選取 [標準]。
端點名稱	輸入 Front Door 主機的唯一名稱。
原始類型	選取 [靜態 Web 應用程式]。
原點主機名稱	從下拉式清單中選取靜態 Web 應用程式的主機名。
快取功能	核取 [ 啟用快取] 複選框。
查詢字串快取行為	選取 [使用查詢字串]。
壓縮	選取 [ 啟用壓縮]
WAF 原則	如果您想要啟用此功能，請從下拉式清單中選取 [新建] 或選取現有的 Web 應用程式防火牆原則。

注意

當您建立 Azure Front Door 設定檔時，您必須從建立 Front Door 所在的相同訂用帳戶中選取來源。

選取 [檢閱 + 建立]，然後選取 [建立]。建立程式可能需要幾分鐘的時間才能完成。
完成部署後，選取 [前往資源]。
新增條件。

停用驗證工作流程的快取

注意

快取到期、快取金鑰查詢字串和原始群組覆寫動作已被取代。這些動作仍然可以正常運作，但您的規則集無法變更。在變更規則集之前，將這些覆寫取代為新的路由組態覆寫動作。

新增下列設定，以停用 Front Door 的快取原則，以嘗試快取驗證和授權相關頁面。

新增條件

從 Front Door 的 [設定] 底下，選取 [規則集]。
選取 [新增]。
在 [ 規則集名稱] 文本框中，輸入 [安全性]。
在 [ 規則名稱] 文本框中，輸入 NoCacheAuthRequests。
選取 [ 新增條件]。
選取 [ 要求路徑]。
選取 [運算符] 下拉式清單，然後選取 [開始使用]。
選取 [值] 文字框中的 [編輯] 連結。
在文字框中輸入 /.auth ，然後選取 [ 更新]。
從[ 字串轉換] 下拉式清單中選取任何選項。

新增動作

選取 [ 新增動作] 下拉式清單 。
選取 [ 路由組態覆寫]。
在 [快取] 下拉式清單中選取 [已停用]。
選取儲存。

將規則與端點產生關聯

現在已建立規則，請將規則套用至 Front Door 端點。

從您的 Front Door 中，選取 [規則集]，然後選取 [未關聯的連結]。
選取您要套用快取規則的端點名稱，然後選取 [ 下一步]。
選取 [+ 建立關聯]。

複製 Front Door 識別碼

使用下列步驟來複製 Front Door 實例的唯一標識碼。

從 Front Door 中，選取 左側導覽上的 [概觀 ] 連結。
複製標示 為 Front Door 識別符 的值，並將其貼到檔案中以供日後使用。

更新靜態 Web 應用程式組態

若要完成與 Front Door 的整合，您需要更新應用程式組態檔以執行下列功能：

僅透過 Front Door 限制月臺的流量
僅從 Front Door 實例限制月臺的流量
定義哪些網域可以存取您的網站
停用安全路由的快取

開啟網站的staticwebapp.config.json檔案，並進行下列變更。

將下列區段新增至組態檔，將流量限製為僅使用 Front Door：
```
"networking": {
  "allowedIpRanges": ["AzureFrontDoor.Backend"]
}
```
若要定義哪些 Azure Front Door 實例和網域可以存取您的網站，請新增區 forwardingGateway 段。
```
"forwardingGateway": {
  "requiredHeaders": {
    "X-Azure-FDID" : "<YOUR-FRONT-DOOR-ID>"
  },
  "allowedForwardedHosts": [
    "my-sitename.azurefd.net"
  ]
}
```
首先，將您的應用程式設定為只允許來自 Front Door 實例的流量。在每個後端要求中，Front Door 會自動新增 X-Azure-FDID 包含 Front Door 實例識別碼的標頭。藉由將靜態 Web 應用程式設定為需要此標頭，它會限制 Front Door 實例的流量。在組態檔的 forwardingGateway 區段中，新增 requiredHeaders 區段並定義 X-Azure-FDID 標頭。將取代 <YOUR-FRONT-DOOR-ID> 為您稍早設定的 Front Door 識別碼 。

接下來，將 Azure Front Door 主機名（而非 Azure Static Web Apps 主機名）新增至 allowedForwardedHosts 數位。如果您的 Front Door 實例中已設定自訂網域，也請將這些網域包含在此清單中。

在此範例中，將取代 my-sitename.azurefd.net 為您網站的 Azure Front Door 主機名。

針對您應用程式中的所有安全路由，新增 "Cache-Control": "no-store" 至路由標頭定義來停用 Azure Front Door 快取。

{
    ...
    "routes": [
        {
            "route": "/members",
            "allowedRoles": ["authenticated", "members"],
            "headers": {
                "Cache-Control": "no-store"
            }
        }
    ]
    ...
}

透過此組態，您的月臺已無法再透過產生的 *.azurestaticapps.net 主機名來使用，但只能透過 Front Door 實例中設定的主機名來使用。

考量

自定義網域：現在 Front Door 正在管理您的網站，您就不再使用 Azure Static Web Apps 自定義網域功能。 Azure Front Door 有個別的程式可新增自定義網域。請參閱將自定義網域新增至 Front Door。當您將自定義網域新增至 Front Door 時，您必須更新靜態 Web 應用程式組態檔以將其包含在 allowedForwardedHosts 清單中。
流量統計數據：根據預設，Azure Front Door 會設定可能會影響流量統計數據的健康情況探查。您可能想要編輯健康情況探查的預設值。
提供舊版：當您將更新部署到靜態 Web 應用程式中的現有檔案時，Azure Front Door 可能會繼續提供舊版的檔案，直到其存留時間到期為止。清除受影響路徑的 Azure Front Door 快取，以確保提供最新的檔案。

清除資源

如果您不想再使用本教學課程中建立的資源，請刪除 Azure Static Web Apps 和 Azure Front Door 實例。

下一步

新增 API

分享方式：

教學課程：設定 Azure Static Web Apps 的 CDN

必要條件

在靜態 Web Apps 資源上啟用企業級邊緣

必要條件

建立 Azure Front Door

停用驗證工作流程的快取

新增條件

新增動作

將規則與端點產生關聯

複製 Front Door 識別碼

更新靜態 Web 應用程式組態

考量

清除資源

下一步

意見反映

更多資源