练习 - 使用 GitHub Actions 发布 API

  • 4 分钟

Web 应用和 API 都在本地运行。 现在可将 Web 应用和 API 发布到 Azure 静态 Web 应用。

将更改推送到 GitHub

你在上一练习中对 API 进行了更改。 按照以下步骤将这些更改提交到 API 分支并将其推送到 GitHub：

  1. 在 Visual Studio Code 中，按 F1 打开命令面板
  2. 键入并选择 Git: Commit All。 如果 Visual Studio Code 提示你自动暂存所有更改并直接提交更改，请选择“ 是”。
  3. 输入提交消息，例如 API 更改
  4. 按 F1 打开命令面板
  5. 键入并选择 Git：推送
  6. 如果系统提示你输入消息 “api”没有上游分支。是否要发布此分支？ 按 “确定 ”按钮

创建拉取请求

已将 api 分支推送到 GitHub。 你现在希望 GitHub 操作在预览 URL 中发布你的 Web 应用和 API。 那么下一步是针对主分支创建拉取请求。

  1. 打开浏览器

  2. 导航到存储库

    https://github.com/<YOUR_GITHUB_USERNAME>/my-static-web-app-and-api

  3. 选择“拉取请求”链接

  4. 选择 “新建拉取请求 ”按钮

  5. 从基本下拉列表中选择主分支

  6. 从比较下拉列表中选择 API 分支

  7. 选择“ 创建拉取请求 ”按钮

  8. 再次选择第二个 “创建拉取请求 ”按钮

GitHub 操作现已触发。

监视 GitHub 操作生成和发布

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

  1. 选择 操作 菜单
  2. 在“工作流”菜单下，选择 Azure 静态 Web 应用 CI/CD 工作流项 屏幕截图，显示如何查找正确的工作流。
  3. 选择动作运行列表中的最上面的链接。
  4. 选择“生成并部署作业”链接。

显示工作流页上的“生成和部署”按钮的屏幕截图。

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

浏览到预览 URL

GitHub作成功完成后，可以在浏览器中查看正在运行的应用。

  1. 选择“拉取请求”菜单
  2. 选择你的拉取请求
  3. 选择消息“Azure Static Web Apps:你的暂存站点已准备就绪!请在此访问”后的链接

请注意，预览 URL 包含一个连字符，后跟一个数字。 该数字与你创建的拉取请求的拉取请求编号相匹配。 对于创建的每个拉取请求，你都会获得唯一的可重复预览 URL。 该区域还用于形成预览 URL。

显示 angular Web 应用的屏幕截图。

React Web应用的屏幕截图。

屏幕截图显示 Svelte Web 应用。

屏幕截图显示 Vue Web 应用。

后续步骤

恭喜，你已创建了包含 Web 应用和 API 的第一个 Azure Static Web Apps 实例！