使用 GitHub 和 Azure 构建和部署 (CI/CD) Angular 应用程序

本文向您展示了如何设置 CI/CD 管道，以便在 GitHub 中构建 Angular 应用程序并部署到 Azure。

最新的更新可以在这里找到 原文。

此项目是使用 Angular 和 .NET Core Web API 启动应用程序 作为起点构建的。

API 设置

首先要做的是设置您的 API 以在 Azure Web App 中运行

关于在 Azure 中设置 API 的几点说明，首先确保配置到位

对于 Azure SQL，请确保允许其他 Azure 服务访问它。单击“设置服务器防火墙”

并允许访问

设置静态 Web App

下一步是在 Azure 中设置 Static Web App，它将托管您的 Angular 应用程序。 在撰写本文时，Azure Static Web App 是免费的，因为它处于预览模式。 预览模式结束后，将产生相关费用。 只要转到 Azure 并创建 Static Web App 资源

在部署详细信息中，向 GitHub 存储库进行身份验证，然后选择您的 Angular 代码所在的存储库和分支。 选择 Angular 作为构建预设，并输入以下内容

• 应用程序位置 – 这是您的 Angular 应用程序在您的 GitHub 存储库中的位置。 就我而言，Angular 代码位于 ui 文件夹中。
• API 位置 – 在这里，您可以指定 API 项目的位置。 就我而言，我已经在另一个 Web App 中托管了 API，所以我将其留空。
• 输出位置 – 这是 Angular 构建产品的位置。 默认情况下，当您运行“ng build”时，它将位于 dist 文件夹中。

创建资源后，Azure 将在您的 GitHub 存储库的 .github/workflows 文件夹下创建一个构建定义文件

然后，Github 将启动构建和部署，您可以在 Github 中的 Actions 选项卡中看到工作流程开始

就我而言，第一次没有成功。 单击工作流程显示它正在尝试构建 api 文件夹中的内容，这是不需要的

事实证明，即使在设置 Azure Static Web App 时未在 API 位置 字段中输入任何内容，它仍然在构建定义中添加了字符串“api”

只需将 api_location 更新为空字符串，它就可以成功构建并自动部署到 Azure

以下显示了在 Azure 中运行的 Angular 应用程序

不要忘记在 Azure 中 API 的配置中允许 CORS

就这些了。 构建成功后，每次您签入新代码时，GitHub 将构建应用程序并部署到 Azure。

有关如何在 GitHub 中配置 构建和部署操作的更多详细信息，请查看此处的文档。