Azure 靜態 Web Apps 搭配 Azure Functions 時的 API 支援

前端 Web 應用程式通常會針對資料和服務呼叫後端 API。 根據預設,Azure Static Web Apps 會透過 Azure Functions 提供內建無伺服器 API 端點。

靜態 Web Apps 中的 Azure Functions API 支援兩種可能設定,視主控方案而定

  • 受控函式:根據預設,靜態 Web 應用程式的 API 是由與某些限制相關聯的 Azure Static Web Apps 所管理及部署的 Azure Functions 應用程式。

  • 攜帶您自己的函式:您可以選擇 性地提供任何方案類型的現有 Azure Functions 應用程式 ,其中包含 Azure Functions 的所有功能。 使用此設定時,您必須負責處理 Functions 應用程式的個別部署。

下表對比使用Managed和現有函式之間的差異。

功能 Managed 函式 自備函式
存取 Azure Functions 觸發程式和系結 僅限 HTTP 全部
支援的 Azure Functions 運行時間1 Node.js 12
Node.js 14
Node.js 16
Node.js 18 (公開預覽)
.NET Core 3.1
.NET 6.0
.NET 7.0
Python 3.8
Python 3.9
Python 3.10
全部
支援的 Azure Functions 主控方案 耗用 耗用
進階
專用
整合式安全性 ,可直接存取使用者驗證和角色型授權數據
路由整合 ,可 /api 安全地將路由提供給 Web 應用程式,而不需要自訂 CORS 規則。
分散式函式 (預覽) 適用於後端計算的動態全域散發。
Durable Functions 程式設計模型
受控識別
Azure App 服務 驗證和授權令牌管理
Azure Static Web Apps 外部提供的 API 函式
金鑰保存庫 參考

1 若要在 Managed 函式中指定執行時間版本,請將組態檔新增至前端應用程式並設定 apiRuntime 屬性。 支援受限於 Azure Functions 語言執行平臺支持原則

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

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

注意

分散式函 式可搭配Managed函式使用。 分散式函式會自動將您的受控函式分散到高要求負載的區域。

組態

API 端點可透過 api 路由提供給 Web 應用程式。

Managed 函式 攜帶您自己的函式
修正路由時 /api ,您可以控制 Managed Functions 應用程式的原始碼資料夾位置。 您可以編輯存放庫 .github/workflows 資料夾中的工作流程 YAML 檔案來變更此位置 /api路由的要求會傳送至您現有的 Azure Functions 應用程式。

疑難解答和記錄

只有在您新增 Application Insights 時,才能使用記錄。

Managed 函式 攜帶您自己的函式
在靜態 Web 應用程式上啟用 Application Insights,以開啟記錄功能。 在 Azure Functions 應用程式上啟用 Application Insights,以開啟記錄功能。

條件約束

除了靜態 Web Apps API 條件約束之外,下列限制也適用於 Azure Functions API:

Managed 函式 攜帶您自己的函式
  • 觸發程式和系結僅限於 HTTP
  • Azure Functions 應用程式必須位於 Node.js 12、Node.js 14、Node.js 16、Node.js 18(公開預覽)、.NET Core 3.1、.NET 6.0、Python 3.8、Python 3.9 或 Python 3.10 中。
  • 某些應用程式設定是由服務管理,因此運行時間會保留下列前置詞:
    • APPSETTING_、AZUREBLOBSTORAGE_、AZUREFILESSTORAGE_、AZURE_FUNCTION_、CONTAINER_、DIAGNOSTICS_、DOCKER_、FUNCTIONS_、IDENTITY_、MACHINEKEY_、MAINSITE_、MSDEPLOY_、SCMSITE_、SCM_、WEBSITES_、WEBSITE_、WEBSOCKET_、AzureWeb
  • 服務會在內部使用某些應用程式標籤。 因此,保留下列標記:
    • AccountId、EnvironmentId、FunctionAppId
  • 您必須負責管理 Functions 應用程式部署。

下一步