使用 GitHub Actions 发布 API

3 分钟

你已将 API 添加到 Web 应用，并且它们都在本地运行。现在可将 API 和应用发布到 Azure 静态 Web 应用。

创建 Azure Static Web Apps 实例并要求它监视主分支时，系统会为你生成 GitHub 操作。 GitHub Action 侦听存储库主分支的更改，当它检测到提交或对主分支的拉取请求时，它会生成并发布应用。

在创建 Azure Static Web Apps 资源时，你可能会记得，你为 API 提供了文件夹位置。你提供了默认值 api。不过，由于目前在 api 文件夹中没有 API，因此 Azure 静态 Web 应用不会尝试发布 API。

现在，一切都发生了变化。

GitHub 操作配置

文件夹 .github/workflows 包含 GitHub 操作文件。该文件包含 Web 应用、API 和生成项目的位置设置。创建 Azure Static Web Apps 资源时选择的位置现在处于此文件中，如此处所示：

app_location: 'angular-app' # App source code path
api_location: 'api' # Api source code path - optional
output_location: 'dist/angular-app' # Built app content directory - optional

app_location: 'react-app' # App source code path
api_location: 'api' # Api source code path - optional
output_location: 'build' # Built app content directory - optional

app_location: 'svelte-app' # App source code path
api_location: 'api' # Api source code path - optional
output_location: 'public' # Built app content directory - optional

app_location: 'vue-app' # App source code path
api_location: 'api' # Api source code path - optional
output_location: 'dist' # Built app content directory - optional

api_location 设置为指向 api 文件夹中的 API 的正确值。

触发 GitHub 操作

GitHub 操作已准备好在检测到对主分支进行的更改后，便生成并发布 Web 应用和 API。若要触发 GitHub Action，可以直接提交，也可以创建对主分支的拉取请求。在主分支上检测到的更改将触发 GitHub Action，以在你的实时网站的同一个 URL 上发布应用。

预览 URL

有时，你要在发布到实时网站之前在暂存站点中查看更改。 Azure Static Web Apps 使你可以通过预览 URL 预览更改。可以通过对 GitHub 操作所监视的分支创建拉取请求来创建预览 URL。实时网站不会受到影响。而是会创建应用的新暂存版本。如果你返回并在 GitHub 上检查拉取请求，则会看到在“对话”选项卡中发布了暂存版本的链接。

下表显示了 Azure Static Web Apps 如何将你的应用发布到不同的 URL。应用会发布到一个 URL，而对同一个分支进行的拉取请求会发布到另一个 URL。

源	说明	URL
主分支	实时网站 URL	`https://purple-rain-062d03304.azurestaticapps.net/`
拉取请求 #5	预览 URL	`https://purple-rain-062d03304-5.azurestaticapps.net/`

你当前在 api 分支中工作。从 api 分支向主分支发出拉取请求。针对主分支创建拉取请求时，GitHub 操作会将应用发布到预览 URL。

工作流完成生成和部署应用后，GitHub 机器人会向拉取请求添加注释，其中包含预生产环境的 URL。可以选择此链接来查看暂存更改。

接下来，你创建一个拉取请求并访问你的应用的暂存版本。

使用 GitHub Actions 发布 API

GitHub 操作配置

触发 GitHub 操作

预览 URL

反馈