规划 Azure 静态 Web 应用

5 分钟

你的最终目标是在 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 并指定包含应用代码的存储库。

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

位置	位置示例	描述	必需
应用位置	/	Web 应用的源代码的位置	是
应用生成输出位置	dist	应用生成输出的位置（相对于应用位置）	否
API 位置	api	API 的源代码的位置	否

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

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

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

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

GitHub 操作会在 .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 文件处于 output_location 中。如果生成过程将 staticwebapp.config.json 文件复制到 output_location，则无需执行任何其他操作。对于大多数项目，output_location 是相对于 app_location 的。

应用程序的 staticwebapp.config.json 文件位于 angular-app/src/assets 文件夹中。

staticwebapp.config.json 文件位于 react-app 文件夹中。

staticwebapp.config.json 文件位于 svelte-app/public 文件夹中。

staticwebapp.config.json 文件位于 vue-app/public 文件夹中。

后续步骤

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