介绍

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 静态 Web 应用的模型是你恰好获得所需内容，不多不少。

显示应用概述静态模型的图表。

创建 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。

学习目标

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

选择自己的路径

本模块提供了四种可供选择的示例应用程序变体：Angular、React、Svelte 和 Vue。 Azure 静态 Web 应用的优势是所有这些变体都能正常工作。

初学者代码包括四个应用和稍后使用的 API 的起点。

├ angular-app  👈 The Angular client app
├ api-starter  👈 The API starter app. You use this later.
├ react-app    👈 The React client app
├ svelte-app   👈 The Svelte client app
└ vue-app      👈 The Vue client app

你将执行的操作

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

使用 GitHub Actions 从 GitHub 存储库自动生成 Web 应用并将它部署到 Azure。
使用 Azure Functions 创建 API。
修改 Web 应用以对 API 进行 HTTP 请求。
使用 GitHub Actions 从 GitHub 存储库自动生成 Web 应用并将它部署到 Azure。
最后，浏览并启动应用程序，如下图所示。

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

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

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

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

后续步骤

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

介绍