将一个存储库上的 Azure 静态 Web 应用程序与另一个存储库上的 API 连接起来

Posted 2023-05-06

【中文标题】将一个存储库上的 Azure 静态 Web 应用程序与另一个存储库上的 API 连接起来

【英文标题】：joining an azure static web app on one repository with the API on another repository

【发布时间】：2022-01-17 11:59:52

【问题描述】：

我构建了一个静态 Web 应用程序，html 页面位于我的一个存储库中。我构建了 API，它位于另一个存储库中。我如何将两者联系起来？我可以把两者联系起来吗？还是应该在 API 存储库中构建一个新的静态 Web 应用？

【问题讨论】：

请提供足够的代码，以便其他人更好地理解或重现问题。

【参考方案1】：

您可以使用“将您自己的函数引入 Azure 静态 Web 应用”将现有的 Azure Functions 应用链接到 Azure 静态 Web 应用资源。

例子

考虑现有的 Azure Functions 应用，该应用通过以下位置公开端点。

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

链接后，您可以通过静态 Web 应用程序中的 api 路径访问同一端点，如本示例 URL 中所示。

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

两个端点 URL 都指向同一个函数。

链接现有的 Azure Functions 应用

在关联现有 Functions 应用之前，您首先需要调整静态 Web 应用的配置。

在工作流中将 api_location 值设置为空字符串 ("") 配置文件。

在 Azure 门户中打开您的静态 Web 应用实例。

从“设置”菜单中，选择“功能”。

从环境下拉列表中，选择生产。

在 Functions 源标签旁边，选择 Link to a Function app。

从订阅下拉列表中，选择您的 Azure 订阅名称。

从 Function App 下拉列表中，选择现有的名称 要链接到静态 Web 应用的函数应用。

选择链接按钮。

部署 您负责为您的 Azure Functions 应用设置部署工作流。

查看步骤和更多信息here