共用方式為

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

  • 發行項

藉由將 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 Apps 資源上啟用企業級邊緣

  1. 移至Azure 入口網站中的靜態 Web 應用程式。

  2. 選取 左側功能表中的 [企業級邊緣 ]。

  3. 核取標示為 [啟用企業級邊緣 ] 的方塊。

  4. 選取 [儲存]。

  5. 選取 [ 確定 ] 以確認儲存。

    啟用此功能會產生額外費用。

必要條件

建立 Azure Front Door

  1. 登入 Azure 入口網站。

  2. 從首頁或 Azure 功能表，選取 [+ 建立資源 ]。 搜尋 Front Door 和 CDN 設定檔 ，然後選取 [ 建立 > Front Door 和 CDN 設定檔]。

  3. 在 [比較供應專案] 頁面上，選取 [ 快速建立 ]，然後選取 [ 繼續] 以建立 Front Door 。

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

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

    注意

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

  5. 選取 [檢閱 + 建立]，然後選取 [建立]。 建立程式可能需要幾分鐘的時間才能完成。

  6. 完成部署後，選取 [前往資源]。

  7. 新增條件 。

停用驗證工作流程的快取

注意

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

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

新增條件

  1. 從 Front Door 的 [設定] 下 ，選取 [ 規則集 ]。

  2. 選取新增。

  3. 在 [ 規則集名稱] 文字方塊中，輸入 [安全性 ]。

  4. 在 [ 規則名稱] 文字方塊中，輸入 NoCacheAuthRequests 。

  5. 選取 [ 新增條件 ]。

  6. 選取 [ 要求路徑 ]。

  7. 選取 [ 運算子 ] 下拉式清單，然後 選取 [開始使用]。

  8. 選取 [值 ] 文字方塊中的 [ 編輯 ] 連結。

  9. 在文字方塊中輸入 /.auth ，然後選取 [ 更新 ]。

  10. 從 [ 字串轉換] 下拉式清單中選取任何選項。

新增動作

  1. 選取 [ 新增動作] 下拉式清單 。

  2. 選取 [ 路由組態覆寫 ]。

  3. 在 [ 快取] 下拉式 清單中選取 [已停用 ]。

  4. 選取 [儲存]。

將規則與端點產生關聯

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

  1. 從您的 Front Door 中，選取 [規則集 ]，然後選取 [ 未關聯的 連結]。

    Screenshot showing selections for Rule set and Unassociated links.

  2. 選取您要套用快取規則的端點名稱，然後選取 [ 下一步 ]。

  3. 選取 [ 關聯 ]。

    Screenshot showing highlighted button, Associate.

複製 Front Door 識別碼

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

  1. 從 Front Door 中，選取 左側導覽上的 [概觀 ] 連結。

  2. 複製標示 為 Front Door 識別碼 的值，並將其貼到檔案中以供日後使用。

    Screenshot showing highlighted Overview item and highlighted Front Door ID number.

更新靜態 Web 應用程式組態

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

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

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

  1. 將下列區段新增至組態檔，將流量限制為僅使用 Front Door：

    "networking": {
  "allowedIpRanges": ["AzureFrontDoor.Backend"]
}

  2. 若要定義哪些 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 主機名稱。

  3. 針對您應用程式中的所有安全路由，新增 "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