使用 Azure Static Web Apps 开发数据 API

  • 7 分钟

静态 Web 应用是网站设计中非常流行的概念。 它们由直接发送到用户浏览器的内容组成，这些内容无需在服务器上执行任何代码。 静态 Web 应用由 HTML 和 CSS 组成。 它们通常还包括在客户端而不是在服务器上执行的 JavaScript 代码。 Web 开发人员通常会发现静态 Web 应用：

  • 可以使用 Bootstrap、Jekyll 和 AngularJS 等框架快速开发。
  • 易于缩放，因为服务器上没有状态更改。
  • 鼓励将用户界面代码与后端功能分离。

Azure Static Web Apps 是 Azure 中的一项服务，有助于人们更轻松地编码和将静态 Web 应用部署到 Azure 进行生产。 Azure Static Web Apps 通过监视 GitHub 或 Azure DevOps 中的代码存储库支持持续部署。 当你对网站代码进行更改并将更改推送到存储库时，Azure Static Web Apps 会发现此更改，然后自动生成新站点并将其部署到 Azure。 你的更改将立即可供用户使用。

显示 Azure 静态 Web 应用如何简化从存储库部署静态 Web 应用的示意图。

由于数据 API 生成器 (DAB) 用于与 Azure Static Web Apps 无缝配合工作，因此可以轻松地在此服务中托管数据库 API。 只需使用配置文件来向 DAB 告知 Azure Static Web Apps 实例并将其部署到存储库。 Azure Static Web Apps 将托管 API，而用户可以开始调用其方法。

创建静态 Web 应用

首先导航到 Azure 门户 并选择“ 创建资源”。 在搜索栏中，输入“静态 Web 应用”。 显示“静态 Web 应用”卡时，请选择它，然后选择“创建”。

接下来，选择“订阅”，然后选择现有资源组或创建新的资源组。 在“名称”文本框中，输入应用的描述性名称。 需要选择“计划类型”。 对于个人项目，可以使用“免费”计划，而对于生产应用，建议使用“标准”计划。

显示如何在 Azure 门户中完成向导以创建静态 Web 应用的屏幕截图。

在“部署详细信息”下，指定包含应用的存储库类型。 需要登录到 GitHub 或选择 Azure DevOps 中的存储库和分支。 最后，通过选择“查看 + 创建”来查看设置，然后选择“创建”以完成该过程。

创建数据 API 生成器配置文件

若要将数据库 API 部署到 Azure Static Web Apps，必须正确创建 DAB 配置文件。 可以使用以下两个命令行工具完成此任务：

  • swa：使用此 CLI 初始化新的 DAB 配置文件。
  • dab：使用此 CLI 将一个或多个数据库添加到文件。

在开始之前，请将 GitHub 存储库克隆到本地计算机，或使用 GitHub Codespaces 在 GitHub 中打开命令提示符。

  1. 若要初始化存储库根文件夹中的 DAB 配置文件，请运行以下命令。

    swa db init --database-type "<database-type>"

    将 <database type> 替换为你的数据库服务器。 例如，如果数据库托管在 Azure SQL 数据库中，请使用 mssql。 如果它位于 MySQL 中，请使用 mysql。

  2. 若要将数据库添加到配置文件，请运行以下命令。

    dab add "<database-name>" --source "<schema>.<table>" --permissions "anonymous:*" -config "swa-db-connections/staticwebapp.database.config.json"

    将 <database-name> 替换为描述性名称，将 <schema>.<table> 替换为数据库中的架构和表名。

这些步骤在名为 swa-db-connections/staticwebapp.database.config.json 的存储库中创建配置文件。 在将更改提交到存储库之前，请查看此文件。

配置与数据库的连接

若要在静态 Web 应用中配置与数据库的连接，请先在 Azure 门户中打开静态 Web 应用。 导航到“设置”部分，然后选择“数据库连接”。 在“生产”下，选择链接现有数据库。 选择适当的数据库类型、资源组和数据库名称。 最后，选择首选的身份验证类型并链接数据库。

注意

建议使用系统分配的托管标识或用户分配的托管标识进行身份验证，因为连接字符串不包含授权密钥。

验证对 API 的访问权限

若要验证对 API 的访问权限，请先打开在 Azure 门户中创建的静态 Web 应用。 导航到“概要”部分，然后选择用于浏览网站的 URL。 在浏览器的地址栏中，将 /data-api 添加到 URL，然后按 Enter 键。

应会看到一个页面，指示 DAB 容器正常。 若要从数据库浏览实体，请将 /data-api/rest/ 追加到 URL。 这会发送 HTTP GET 请求并显示 JSON 响应。