规划 Azure 静态 Web 应用

已完成

你的最终目标是在 Azure 中托管应用。 Azure 静态 Web 应用负责为你预配所需的所有 Azure 资源。

但是,在进行更改时需要执行一些操作来生成应用,然后才能托管应用。 这些更改可以通过对存储库提交或拉取请求来进行。 Azure 静态 Web 应用的一项重要功能是,它会设置 GitHub Actions 工作流以生成和发布应用程序。

创建 Azure 静态 Web 应用资源时,它会创建 GitHub Actions 工作流。 该工作流会立即触发,负责生成和发布应用。 每次对存储库中受监视的分支进行更改时,也会触发该工作流。

Azure 静态 Web 应用

部署 Web 应用时有两种自动化功能。 第一种自动化会预配组成应用的底层 Azure 资源。 第二种自动化是生成和发布应用程序的 GitHub Actions 工作流。

使用 Azure 静态 Web 应用将应用发布到 Web 时,可快速托管 Web 应用和可缩放 API。 你还会获得 GitHub Actions 提供的统一生成和部署工作流。

将 Static Web Apps 实例连接到 GitHub

Azure Static Web Apps 旨在托管应用程序,而源代码位于 GitHub 上。 创建静态 Web 应用实例时,你将登录 GitHub 并指定包含应用代码的存储库。

还需要在存储库中指定三个文件夹路径,以便可以自动生成和部署应用:

位置 位置示例 描述 必需
应用位置 客户端 Web 应用的源代码的位置
输出位置 wwwroot 应用的生成项目的位置
API 位置 API API 的源代码的位置

“输出位置”是应用程序的发布目录的相对路径。 例如,假设在 Client 上有一个将其生成资产输出到 bin/<build profile>/<framework>/publish/wwwroot 文件夹的应用。 在这种情况下,只需为此位置指定 wwwroot,因为发布系统负责其余前缀。

通过 GitHub Actions 从源代码到静态资产

GitHub 存储库包含源代码,而不包含静态资产,因此需要先进行生成,然后才能发布。

创建静态 Web 应用实例时,Azure 会在存储库中创建 GitHub Actions 工作流。 每次针对发布分支推送更改或创建拉取请求时,工作流都会生成应用。 此过程会将源代码转换为 Azure 提供服务的静态资产。 生成完成后,操作会部署资产。

GitHub 操作会在 .github/workflows 文件夹中添加到存储库。 可以根据需要查看或修改此文件。 创建资源时输入的设置会存储在 GitHub 操作的文件中。

将 API 与 Azure Functions 集成

如果应用需要 API,则可以将其实现为存储库中的 Azure Functions 项目,静态 Web 应用实例会自动部署和托管它。 生成和部署应用的 GitHub Actions 工作流会使用你在 API 位置路径中指定的文件夹的名称找到存储库中的 API。

如果没有 API,该怎么办? 不必担心。 如果 Azure Static Web Apps 在指示的文件夹中找不到 API,则它不会发布 API,但它仍会发布应用。

后续步骤

需要执行什么操作,才能将 Web 应用发布到 Azure Static Web Apps? 只需使应用处于 GitHub 存储库中即可。