Azure Static Web Apps 中的 API 支援與 Azure API 管理

  • 發行項

Azure API 管理 是一項服務，可讓您為現有的後端服務建立新式 API 閘道。

當您將 Azure API 管理 服務連結至靜態 Web 應用程式時，任何以 開頭 /api 的路由對靜態 Web 應用程式的要求都會在 Azure API 管理 服務中 Proxy 至相同的路由。

Azure API 管理服務可以同時連結至多個靜態 Web 應用程式。 系統會為每個連結的靜態 Web 應用程式建立API 管理產品。 新增至產品的任何 API 都可供相關聯的靜態 Web 應用程式使用。

所有 Azure API 管理定價層都可供搭配 Azure Static Web Apps 使用。

Static Web Apps 的 API 選項包括下列 Azure 服務：

如需詳細資訊， 請參閱 API 概觀 。

注意

與 Azure API 管理整合需要靜態 Web Apps 標準方案。

靜態 Web Apps 提取要求環境 不支援後端整合。

必要條件

若要將 API 管理實例連結至靜態 Web 應用程式，您必須擁有現有的 Azure API 管理 資源和靜態 Web 應用程式。

資源 描述
Azure API 管理 如果您還沒有帳戶，請遵循建立新的 Azure API 管理服務實例 指南中的 步驟。
現有的靜態 Web 應用程式 如果您還沒有帳戶，請遵循快速入門手冊中的 步驟來建立 No Framework 靜態 Web 應用程式。

範例

請考慮透過下列位置公開端點的現有 Azure API 管理 實例。

https://my-api-management-instance.azure-api.net/api/getProducts

連結之後，您可以透過 api 靜態 Web 應用程式的路徑存取相同的端點，如此範例 URL 所示。

https://red-sea-123.azurestaticapps.net/api/getProducts

這兩個 URL 都指向相同的 API 端點。 API 管理 實例上的端點必須具有 /api 前置詞，因為 Static Web Apps 會比對 對 的要求 /api ，並 Proxy 處理連結資源的完整路徑。

若要將 Azure API 管理 服務連結為靜態 Web 應用程式的 API 後端，請遵循下列步驟：

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

  2. 從導覽功能表中選取 [API ]。

  3. 找出您想要連結API 管理服務的環境。 選取連結。

  4. 在 [後端資源類型 ] 中，選取 [API 管理 ]。

  5. 在 [ 訂用帳戶 ] 中，選取包含您想要連結之 Azure API 管理服務的訂用帳戶。

  6. 在 [ 資源名稱 ] 中，選取 [Azure API 管理服務]。

  7. 選取連結。

重要

當連結程式完成時，開頭 /api 為 的路由要求會 Proxy 到您的 Azure API 管理 服務。 不過，預設不會公開任何 API。 請參閱 設定 API 以接收要求 ，以設定API 管理產品以允許您想要使用的 API。

設定 API 以接收要求

Azure API 管理具有 可定義 API 呈現方式的產品 功能。 在連結程式中，您的API 管理服務會設定為名為 Azure Static Web Apps - <STATIC_WEB_APP_AUTO_GENERATED_HOSTNAME> (Linked) 的產品。

若要讓 API 可供連結的靜態 Web 應用程式使用，請將 API 新增至產品 。

  1. 在入口網站的 API 管理 實例內，選取 [ 產品 ] 索引標籤。

  2. Azure Static Web Apps - <STATIC_WEB_APP_AUTO_GENERATED_HOSTNAME> (Linked)選取產品。

  3. 選取 [+ 新增 API ]。

  4. 選取您想要從靜態 Web Apps 公開的 API，然後選取 [選取 ] 連結。

Screenshot of the API Management Products API blade in the Azure portal, showing how to add an API to the product created for the Static Web Apps resource.

連結程式也會自動將下列設定套用至您的API 管理服務：

  • 與連結靜態 Web 應用程式相關聯的產品已設定為需要訂用帳戶。
  • 名為 Generated for Static Web Apps resource with default hostname: <STATIC_WEB_APP_AUTO_GENERATED_HOSTNAME> 的API 管理訂用帳戶會建立並限定為具有相同名稱的產品。
  • 輸入 validate-jwt 原則會新增至產品，只允許包含來自連結靜態 Web 應用程式之有效存取權杖的要求。
  • 連結的靜態 Web 應用程式會設定為在 proxy 要求至API 管理服務時包含訂用帳戶的主鍵和有效的存取權杖。

重要

變更 validate-jwt 原則或重新產生訂用帳戶的主鍵，可防止靜態 Web 應用程式將要求 Proxy 處理至API 管理服務。 連結時，請勿修改或刪除與您的靜態 Web 應用程式相關聯的訂用帳戶或產品。

若要將 Azure API 管理 服務從靜態 Web 應用程式取消連結，請遵循下列步驟：

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

  2. 找出您想要取消連結的環境，然後選取API 管理服務名稱。

  3. 選取 [取消連結 ]。

當取消連結程式完成時，開頭 /api/ 為 的路由要求將不再 Proxy 到您的API 管理服務。

注意

不會自動刪除與連結靜態 Web 應用程式相關聯的API 管理產品和訂用帳戶。 您可以從API 管理服務中刪除它們。

疑難排解

如果 API 未與針對 Static Web Apps 資源建立的API 管理 產品 相關聯，存取 /api 靜態 Web 應用程式中的路由會從 API 管理傳回下列錯誤。

{
  "statusCode": 401,
  "message": "Access denied due to invalid subscription key. Make sure to provide a valid key for an active subscription."
}

若要解決此錯誤，請設定您想要在靜態 Web Apps 內公開給為其建立的產品公開的 API，如設定 API 以接收要求 一節中所述 。

下一步

API 概觀