简介

已完成

你的公司将推出一个购物列表 Web 应用。 通过该站点，客户可以添加、编辑、查看和删除其列表项。

在生成应用时，你首先要考虑的是，应用和 API 可安全地托管、全局可用且自动发布。 你决定使用可轻松提供资产和 API，而无需进行大量设置或配置的托管解决方案，而不是设置和配置 Web 服务器来处理这些问题。

什么是 Azure 静态 Web 应用？

Azure 静态 Web 应用可解决从源代码到全局可用性的所有方面的难题。

当你专注于开发应用时，Azure Static Web Apps 会自动从 GitHub 或 Azure DevOps 生成并托管该应用。

Static Web Apps 通常是使用 Blazor 等 WebAssembly 框架以及 JavaScript 框架和库生成的。 这些应用包括组成应用程序的 HTML、CSS、JavaScript 和图像资产。 在传统 Web 服务器体系结构下，从一台服务器提供这些文件以及任何所需的 API 终结点。

使用 Azure 静态 Web 应用时，静态资产与传统 Web 服务器分离，而是从在世界各地全局分布的点进行提供。 这种分发提高了提供文件的速度，因为文件在物理上离最终用户更近。 API 终结点使用无服务器体系结构进行托管，这样便完全不需要完整后端服务器。

Azure 静态 Web 应用的模型是你恰好获得所需内容，不多不少。

创建 Azure Static Web Apps 资源时，Azure 会在应用的源代码存储库中设置 GitHub Actions 或 Azure DevOps 工作流。 该工作流监视所选分支。 每次对受监视的分支推送提交或创建拉取请求时，工作流都会自动构建应用和其 API 并将这些部署到 Azure。

Azure 会托管和提供 Web 应用，同时 Azure Functions 会为后端 API 功能提供支持，该功能基于对 API 的需求提供自动扩大和缩小。

主要功能

• 全局分布式 Web 托管将静态内容（如 HTML、CSS、JavaScript 和图像）放置在距离用户更近的位置处。
• 由 Azure Functions 提供的集成 API 支持。
• 出色的 GitHub 和 Azure DevOps 集成，在每次存储库更改时触发生成和部署。
• 可自动续订的免费 SSL 证书。
• 用于预览拉取请求的唯一预览 URL

学习目标

在本模块中，你将创建、修改 Web 应用和 API，并将它们部署到 Azure Static Web Apps。

本模块提供了示例 Blazor 应用程序，以及使用 C# 编写的 API。

你将执行的操作

选择客户端应用程序后，你将：

1. 生成并运行 Blazor 应用程序。
2. 使用 Azure Functions 创建 API。
3. 修改 Web 应用以对 API 进行 HTTP 请求。
4. 使用 GitHub Actions 从 GitHub 存储库自动生成 Web 应用并将它部署到 Azure。
5. 最后，浏览并启动应用程序。

后续步骤

现在，你可能会认为需要先创建 Azure 资源，但 Azure 静态 Web 应用会记住你的日常工作流。 更自然的方法是先从 GitHub 中的代码开始，然后在 Azure 中创建资源。