將您自己的函式導入 Azure Static Web Apps

Azure Static Web Apps 提供 API 整合，可讓您建置相依于資料與服務的後端 API 的前端 Web 應用程式。 這兩個 API 整合選項包括：受控函式，並自備後端。 如需這些選項差異的詳細資訊，請參閱概 觀 。

本文示範如何將現有的 Azure Functions 應用程式連結至 Azure Static Web Apps 資源。

注意

與 Azure Functions 的整合需要靜態 Web Apps 標準方案。

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

必要條件

若要將函式應用程式連結至靜態 Web 應用程式，您需要有現有的 Azure Functions 資源和靜態 Web 應用程式。

資源	描述
Azure Functions	如果您還沒有 Azure Functions 指南中的步驟，請遵循開始使用 Azure Functions 指南中的 步驟。
現有的靜態 Web 應用程式	如果您還沒有帳戶，請遵循快速入門手冊中的 步驟來建立 No Framework 靜態 Web 應用程式。

範例

請考慮透過下列位置公開端點的現有 Azure Functions 應用程式。

https://my-functions-app.azurewebsites.net/api/getProducts

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

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

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

連結現有的 Azure Functions 應用程式

從靜態 Web Apps 資源中移除受控函式（如果有的話）

在建立現有 Functions 應用程式關聯之前，您必須先調整靜態 Web 應用程式的組態，以移除受控函式。

1. 將值設定 api_location 為工作流程組態 檔中的 空字串 （ "" ）。

將 Azure Functions 應用程式連結至靜態 Web Apps 資源

1. 在 Azure 入口網站 中 開啟靜態 Web Apps 實例。

2. 從 [設定 ] 功能表中，選取 [API ]。

3. 從 [生產] 資料 列中，選取 [連結 ] 以開啟 [ 連結新的後端] 視窗。

   輸入下列設定。

   設定	值
   後端資源類型	選取 [ 函式應用程式 ]。
   訂用帳戶	選取您的 Azure 訂用帳戶名稱。
   資源名稱	選取 Azure Functions 應用程式名稱。
   後端位置	選取 Azure 函式的插槽名稱。

4. 選取連結。

Azure Functions 應用程式現在會對應至 /api 靜態 Web 應用程式的路由。

重要

連結現有的 Functions 應用程式之前，請務必將工作流程組態檔中的 值設定 api_location 為空字串 （ "" ）。 此外，呼叫會假設外部函式應用程式會保留預設 api 路由前置詞。 許多應用程式都會在 host.json 中移除 此前置詞 。 請確定前置詞已就緒于組態中，否則呼叫會失敗。

部署

您必須負責設定 Azure Functions 應用程式的部署工作流程 。

取消連結 Azure Functions 應用程式

從靜態 Web Apps 取消連結 Functions 應用程式

若要從靜態 Web 應用程式取消連結函式應用程式，請遵循下列步驟：

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

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

3. 找出您要取消連結的環境，然後選取函式應用程式名稱。

4. 選取 [取消連結 ]。

當取消連結程式完成時，開頭 /api 為 的路由要求不再 Proxy 到您的 Azure Functions 應用程式。

注意

為了避免不小心將函式應用程式公開給匿名流量，不會自動刪除連結程式所建立的識別提供者。 您可以從函式應用程式的驗證設定中刪除名為 Azure Static Web Apps （Linked） 的識別提供者。

從 Azure Functions 資源移除驗證

若要讓 Azure Functions 應用程式接收匿名流量，請遵循下列步驟來移除識別提供者：

1. 在Azure 入口網站中，流覽至 Azure Functions 資源。

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

3. 從識別提供者 清單中 ，刪除與靜態 Web Apps 資源相關的識別提供者。

4. 選取 [移除驗證] 以移除驗證 ，並允許匿名流量傳送至 Azure Functions 資源。

您的函式應用程式現在能夠接收匿名流量。

安全性條件約束

• 驗證和授權： 如果現有的 Functions 應用程式尚未設定驗證和授權原則，則靜態 Web 應用程式具有 API 的獨佔存取權。 若要讓 Functions 應用程式可供其他應用程式存取，請新增另一個識別提供者，或變更安全性設定以允許未經驗證的存取。

  注意

  如果您在連結的 Functions 應用程式中啟用驗證和授權，則必須使用 Azure App 服務 驗證和授權提供者第 2 版。

• 必要的公用協助工具： 現有的 Functions 應用程式不需要套用下列安全性設定。

  • 限制 Functions 應用程式的 IP 位址。
  • 透過私人連結或服務端點限制流量。

• 函式存取金鑰： 如果您的函式需要 存取金鑰 ，則必須提供從靜態應用程式呼叫 API 的金鑰。

限制

• 單一靜態 Web 應用程式只能使用一個 Azure Functions 應用程式。
• api_location工作流程組 態 中的值必須設定為空字串。
• 靜態 Web Apps 提取要求環境不支援。
• 雖然您的 Azure Functions 應用程式可能會回應各種觸發程式，但靜態 Web 應用程式只能透過 Http 端點存取函式。

下一步

新增 API