简介

2 分钟

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

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

什么是 Azure 静态 Web 应用？

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

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

静态 Web 应用通常使用诸如 Angular、React、Svelte 或 Vue 之类的库和框架来生成。这些应用包括组成应用程序的 HTML、CSS、JavaScript 和图像资产。在使用传统 Web 服务器体系结构时，这些文件和所有所需的 API 终结点同时被从一台服务器提供。

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

Azure Static Web Apps 的模型是你恰好获得所需内容，不多不少。

静态应用概述。

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

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

可选 API

Azure Static Web Apps 非常适用于提供纯静态内容，但它还对在其后需要 API 的静态 Web 应用提供了强大支持。你可以使用，也可以不使用 API 来托管静态 Web 应用。

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

主要功能

全局分布式 Web 托管将静态内容（如 HTML、CSS、JavaScript 和图像）放置在距离用户更近的位置处。
由 Azure Functions 提供的集成 API 支持。
顶级的 GitHub 和 Azure DevOps 集成，存储库的更改会触发构建和部署。
可自动续订的免费 SSL 证书。
用于预览拉取请求的唯一预览 URL。
使用多个提供程序的内置身份验证。

学习目标

在本模块中，你将使用 Azure Static Web Apps 的用户身份验证功能创建、修改和部署 Web 应用和 API。

选择自己的路径

本模块提供了四种可供选择的示例应用程序变体：Angular、React、Svelte 和 Vue。 Azure Static Web Apps 的强大之处是所有这些变体都可“正常工作”。

起始代码包括四个应用和你将使用的 API 的起点。

├ angular-app  👈 The Angular client app
├ api          👈 The API server app
├ react-app    👈 The React client app
├ svelte-app   👈 The Svelte client app
└ vue-app      👈 The Vue client app

你的职责

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

使用 GitHub Actions 从 GitHub 存储库自动生成 Web 应用和 API，并将它们部署到 Azure。
修改 Web 应用以添加登录和注销按钮，并显示当前已登录用户的相关信息。
修改 Web 应用和 API，阻止未经身份验证的用户，且只允许特定验证提供程序。
最后，你将浏览并启动应用程序，如下所示。

演示 Angular 示例应用程序的屏幕截图。

演示 React 示例应用程序的屏幕截图。

屏幕截图演示 Svelte 示例应用程序。

Vue 示例应用程序的屏幕截图。

后续步骤

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

简介