练习 - 创建回退路由

  • 4 分钟

现在可创建回退路由，使用户可以成功导航到应用。

拉取最新代码

Azure 静态 Web 应用将一个 GitHub Actions 工作流文件添加到了在上一个练习中选择的分支。 首先，你要通过从 Git 中拉取代码来获取此文件。

通过执行以下步骤，从 Git 拉取代码更改：

  1. 在 Visual Studio 中打开 ShoppingList 解决方案。

  2. 从 GitHub 拉取最新更改。

    显示从 GitHub 提取更改的位置的屏幕截图。

现在，你可以在 Windows 资源管理器的 .github/workflows 文件夹中查看工作流文件（该文件不属于 Visual Studio 解决方案）。

创建路由规则

在发布应用之前，需要创建包含回退路由的路由规则。

创建 staticwebapp.config.json 文件

如果项目中还没有 staticwebapp.config.json 文件，则可以按照以下步骤创建一个：

  1. 在 Visual Studio 中，右键单击“客户端”项目中的 wwwroot 文件夹。

  2. 选择“添加”->“新项”。

  3. 从可用模板中选择“JSON 文件”，将其命名为 staticwebapp.config.json，然后按 Enter。

创建 staticwebapp.config.json 后，对其进行更新，使其包含以下回退路由：

{
  "navigationFallback": {
    "rewrite": "index.html",
    "exclude": ["/_framework/*", "/css/*"]
  }
}

将更改推送到 Git

现在，保存更改并提交到本地 Git 存储库。 接下来，将这些更改推送到 GitHub。

尝试回退路由

GitHub Actions 工作流会生成并部署你的应用。

在浏览器中转到存储库并监视 GitHub 操作的进度。 请按照以下步骤查看进度：

  1. 选择“操作”菜单。

  2. 在“工作流”菜单下，选择“Azure Static Web Apps CI/CD”工作流项。

  3. 在右侧的操作运行中选择最新（顶部）链接。

  4. 选择“生成并部署作业”链接。

可以在 GitHub 操作生成并发布 Web 应用和 API 时，查看其进度。

应用重新部署后，浏览到该应用。 请注意，URL 会显示 /products。 现在，按 F5 刷新浏览器，以测试回退路由。 得益于路由规则中的回退路由，你的应用应成功重载！