规划 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 静态 Web 应用专为托管源代码托管于 GitHub 的应用程序而设计。 创建静态 Web 应用实例时，你将登录 GitHub 并指定包含应用代码的存储库。

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

应用生成输出是应用程序的生成输出目录的相对路径。 例如，假设在 my-app 上有一个将其生成资产输出到 my-app/dist 文件夹的应用。 在这种情况下，需为此位置指定 dist。

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

GitHub 存储库包含源代码，因此需要先进行生成，然后才能发布。

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

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

将 API 与 Azure Functions 集成

如果应用需要 API，则可以将其作为存储库中的 Azure Functions 项目来实现。 API 将自动部署并由 Static Web Apps 实例托管。 生成和部署应用的 GitHub Actions 工作流会按照指定的文件夹名称在存储库中找到 API。

通常会将 API 应用放置在名为 api 或 functions 的文件夹中，不过可以将它命名为你喜欢的任何名称。

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

处理回退路由

刷新页面时出现 404 错误是因为浏览器向承载平台发送请求以提供 /products。 而服务器上不存在名为 products 的页面可提供。 幸运的是，通过创建回退路由可轻松地解决此问题。 备用路由是匹配所有未匹配页面请求到服务器的路由。

Azure Static Web Apps 支持在可选 staticwebapp.config.json 文件（位于应用的生成输出文件夹中）中定义的自定义路由规则。

可将应用配置为使用实现回退路由的规则，如以下示例中所示。该示例的文件筛选器使用了路径通配符：

{
  "navigationFallback": {
    "rewrite": "index.html",
    "exclude": ["/images/*.{png,jpg,gif,ico}", "/*.{css,scss,js}"]
  }
}

此规则告知 Azure Static Web Apps 在请求资源但未找到资源时提供 index.html，其中不包括 exclude 表达式中显示的图像和 CSS 文件。

路由文件位置

默认情况下，Azure Static Web Apps 期望 staticwebapp.config.json 文件处于 中。 如果生成过程将 staticwebapp.config.json 文件复制到 output_location，则无需执行任何其他操作。 对于大多数项目，output_location 是相对于 app_location 的。

后续步骤

那么需要执行什么操作，才能将 Web 应用发布到 Azure 静态 Web 应用？ 只需使应用处于 GitHub 存储库中即可。