十九、使用 GitHub Actions 和 Azure 自动部署

在前一章中，我们在应用中编写了集成测试，以确保组件能够正确交互。 现在我们将部署 ASP。 使用新的持续集成(CI)/持续部署(CD)工具，GitHub Actions 将 NET Core 和 Vue.js 应用应用到 Azure 云服务中。 CI/CD 自动化了应用的构建、测试和部署，从而节省了时间并提高了应用开发的效率。

在本章中，我们将涵盖以下主题:

  • 介绍 GitHub Actions -一个 CI/CD 工具
  • 理解 GitHub 的行为
  • 了解在何处部署
  • 使用 GitHub Actions 自动部署到 Azure 应用服务

技术要求

以下是本章已完成存储库的链接:https://github.com/PacktPublishing/ASP.NET-Core-and-Vue.js/tree/master/Chapter19/。

以下是你完成本章所需要的东西:

介绍 GitHub Actions -一个 CI/CD 工具

你还记得在 CI/CD 到来之前将应用投入生产的方法吗? 当我们将应用部署到生产环境中时，需要使用复制粘贴、FTP、脚本或 SSH。 然后出现了 CI/CD，它帮助快速构建和发布应用，而无需担心手动配置和部署过程。 然后，一个名为 Hudson 的 CI/CD 工具诞生了，它最终成为 Jenkins。 最后，我们开始使用诸如 Octopus Deploy、Visual Studio Team Services、Azure DevOps 等工具进行部署，并与我们的存储库进行更好的集成。 上面提到的 CI/CD 工具为我们提供了一个单独的地方，在那里我们可以拥有我们的工具、所有代码和交付应用所需的配置。

然后 GitHub action 出现了。

了解 GitHub 操作

GitHub Actions是一个自动化软件开发工作流的平台。 CI/CD 管道是您可以使用 GitHub 操作自动化的多个工作流之一。

GitHub Actions 是一个基于 yaml 的工作流，用于获取存储库。 这个工作流可以通过 webhook 或 schedules 来触发，也可以通过手动单击按钮来启动工作流。

运行工作流的运行程序有两种形式。 你可以选择使用 GitHub 托管或者自己托管。 GitHub 托管的工作流提供了不同的操作系统，如 Ubuntu、macOS 或 Windows，它们都预先安装了软件，包括几个版本的。net Core SDK。

GitHub 操作在运行时也会生成日志。 您可以通过 GitHub 门户中提供的日志查看构建的结果。

此外，还可以使用社区构建和共享的自定义工作流。 与 Azure 团队一样，一些组织已经贡献并开发了带有不同场景的操作和工作流，供我们在工作流中作为构建块使用。

。net 应用的 GitHub 动作

那么，我们如何让。net Core 应用与 GitHub Actions 连接起来呢? 有一个针对。net 的 GitHub 动作，叫做setup-dotnet。 什么是 setup-dotnet? 它为运行器提供了一个。net CLI 环境来指定要使用的。net 版本。 我们现在可以在setup-dotnet操作中使用 GitHub 操作来在我们的工作流中选择目标版本。

我们还可以配置我们的环境来使用私有的包存储库或源。 例如，如果我们有托管为 NuGet 包、GitHub 包或 Azure DevOps 工件的库或包，我们可以通过使用动作安全地利用它们。

了解在何处部署

稍后您将看到工作流模板，使用这些模板，您不必从头开始编写工作流文件。 你可以部署到 Azure, AWS, GCP, IBM Cloud，阿里巴巴 Cloud, OpenShift 等等。

我们将专注于 Azure，因为我们使用的是 c#和。net Core。 下面是 Azure 中最常见的服务:

  • Azure 应用服务
  • Azure 的功能
  • Azure 静态 Web 应用
  • Azure Kubernetes 服务

让我们看看这些是什么以及它们的用例。

什么时候部署到 Azure App Service?

如果您遇到以下问题，请考虑使用 Azure App Service:

  • 当你有一个 web 应用来自任何编程语言和框架，或 ASP.NET 剃须刀页面，ASP.NET MVC，或者 asp.net.NET Web API，甚至服务器端 Blazor
  • 当您希望部署专用的高性能应用或可伸缩应用时
  • 当你想要更多的控制和配置的环境没有得到整个虚拟机或一个完整的操作系统,因为应用服务具有丰富的特性集,如槽,VNet 支持和 Azure Active Directory,等等,是建立

什么时候部署到 Azure 功能?

Azure Functions是 Azure 无服务器架构空间的一部分。 那么，什么时候应该考虑部署到 Azure 函数?

  • 当您想要运行小型的无状态任务时，您可以使用无服务器架构在 Azure 中运行函数。 然而，还有一些有状态的和持久的函数，它们允许我们运行复杂的场景。
  • 当你想要一个带有触发器和绑定的事件驱动架构; 例如，将 blob 文件放到 Azure Storage 容器中。

什么时候部署到 Azure 静态 Web 应用?

Azure Static Web Apps，或Azure SWA，是 Azure 中的新服务，允许您拥有一个静态站点。 那么，什么时候应该考虑部署到 Azure 静态 Web 应用?

  • 当你根本不需要一个服务器来托管你的前端应用
  • 当你使用 Blazor WebAssembly 应用

现在让我们看看 Azure Kubernetes Service，简称 AKS。

什么时候部署到 Azure Kubernetes 服务?

Azure Kubernetes 服务或AKS是来自 Azure 的托管 Kubernetes 服务。 那么，您应该在什么时候考虑将部署到 Azure Kubernetes 服务?

  • 当您在容器编排方面没有任何专业知识，但您想使用容器进行部署
  • 当你想要使用 Kubernetes 扩展和管理 Docker 容器或其他基于容器的应用

这些是部署到 Azure 时的选择。

因此，GitHub Actions 是快速设置 CI/CD 和 GitHub 存储库的一个很好的解决方案，用于构建和部署。NET Core 应用。 GitHub 提供了工作流、GitHub 门户内的运行器和可查看的日志，让我们的生活更轻松。 每当我们想要部署 ASP 时，我们都有大量可用的自定义工作流.NET Core 应用到 Azure 或其他类型的应用到其他已知的云服务。

现在，让我们将转移到下一节，以部署一个 ASP.NET Core Web API withProgressive Web App(PWA)Vue.js TypeScript App。

使用 GitHub Actions 自动部署到 Azure 应用服务

在最后一节中，我们将部署一个 ASP.NET Core 5 和 Vue.js 应用，尝试使用 GitHub 操作自动部署到 Azure 应用服务。

ASP.NET Core 5 应用将是一个 Web API 项目，而 Vue.js 应用将使用 TypeScript 构建，以显示我们可以在项目的csproj文件中添加一个 TypeScript 编译器。 我们还将把 Vue.js 应用转换为 PWA。 如果您还不熟悉 PWAs，那么 PWA 是一个具有移动应用特性的 web 应用。 PWAs 可以安装在桌面或移动设备上，并且可以离线运行。

我们将使用现有的 ASP.NET Core 和 Vue 应用简化部署到 Azure 使用 GitHub 行动。 这里的目标是尝试部署，并只关注 GitHub Actions 和应用服务，这是本章的主要主题。

好的，让我们开始:

  1. 创建一个名为Travel的文件夹，然后使用命令行进入Travel文件夹，并运行以下dotnetCLI 命令:

    dotnet new sln

  2. Create a webapi project by running the following command:

    dotnet new webapi –name WebUI

    将创建一个名为WebUI的项目。

  3. Add the project to the .NET solution:

    dotnet sln add WebUI/WebUI.csproj

    web 项目现在在 IDE 中可见。

  4. Go to the WebUI project directory:

    cd WebUI

    在WebUI项目中，我们将在这里创建我们的 Vue.js 应用。

  5. Run the following vue CLI command:

    vue create client-app

    前面的命令将启动vueCLI 来搭建 Vue.js 项目。

  6. 选择手动选择功能选项，然后添加TypeScript、PWA、Router。

  7. 取出绒毛，按进入，然后选择版本3.x。 然后，敲击键盘上的Enter键几次，为其余配置选择默认设置。

  8. We rename the client-app folder inside the WebUI project to ClientApp.

    如果你熟悉 ASP。 asp.net Angular 和 asp.net.NET React 模板，您将在 SPA 文件夹的命名中注意到模板和ClientApp命名约定。

  9. After renaming the folder of the Vue app, let's update WebUI.csproj of the project with the code from the following GitHub repository: https://github.com/PacktPublishing/ASP.NET-Core-and-Vue.js/tree/master/Chapter19/Travel/WebUI/WebUI.csproj.

    上面链接中的代码类似于Travel.WebApi项目的csproj文件。 唯一的区别是我们在TargetFramework属性下面添加了三个额外的属性，如下所示:

    <TypeScriptCompileBlocked>true</    TypeScriptCompileBlocked>     <TypeScriptToolsVersion>Latest</    TypeScriptToolsVersion>     <IsPackable>false</IsPackable>

    TypeScriptCompileBlocked被设置为true来帮助我们调试 Vue TypeScript 应用。

    TypeScriptToolsVersion针对的是最新的 TypeScript 版本。

    设置为false的IsPackable将不会打包项目。

  10. Next, we update the Startup.cs file for the WebUI project with the code from the following link: https://github.com/PacktPublishing/ASP.NET-Core-and-Vue.js/tree/master/Chapter19/Travel/WebUI/Startup.cs.

    前面链接中的代码也很简单，可以帮助我们快速部署应用。 它是一个简单的 Web API 项目，将VueCliMiddleware与SpaStaticFiles服务一起导入。

  11. Next, we run the following command inside the WebUI project:

    dotnet run

    前面的命令将构建并运行后端和前端应用。 您应该会看到webpack进度达到100%，如下截图所示:

    Figure 19.1 – Vue app build and running

    图 19.1 - Vue 应用的构建和运行

    图 19.1 显示应用正在运行，没有任何问题。 您还可以检查https://localhost:5001以查看应用是否正在运行。

  12. Publish the project to your own GitHub account and put it in a private repository. After publishing your Travel project to GitHub, go to the Actions tab menu on your project's repository page.

    您应该看到如图 19.2 所示的建议工作流，以及用于部署、持续集成和其他步骤的其他工作流。 这些工作流程将使我们的生活更轻松:

    Figure 19.2 – Cloud services in GitHub s

    图 19.2 - GitHub 操作中的云服务

  13. 现在，在. net部分下的上单击设置此工作流。 不要点击提交，因为我们将不配置我们的工作流; 我们将让 Azure App Service 为我们做这件事:

Figure 19.3 – Sample ready-made workflow

图 19.3 -现成工作流示例

图 19.3 之前的是我们可以调整的预先配置的工作流。

现在让我们检查工作流文件。

工作流文件语法

让我们学习工作流文件的基本语法，以了解如何编写工作流的配置。

optional name属性是描述工作流正在做什么的地方。

on是声明事件的地方。 这里已经有了push和pull_request事件。 push每次有人推送到主分支时触发作业，pull_request每次使用主分支创建pull请求时再次触发作业。 一个很好的例子是测试我们的应用，以确保 pull 请求是可合并的。 您可以通过https://docs.github.com/en/actions/reference/events-that-trigger-workflows查看更多事件的详细解释和用法。

现在让我们来谈谈工作。 作业包含称为步骤的任务序列。

工作

工作是一组行动。 可以在工作流文件中定义一个或多个作业; 例如，一个为build，一个为test，另一个为deploy。 作业可以是任意的，比如工作流的名称。 该示例运行在ubuntu-latest上，它是运行在 GitHub 上的代理。 第一步或任务是actions/checkout@v2，它在运行构建或测试之前检出代码。

actions/checkout@v2中的动作路径意味着它是 GitHub 中托管的预定义动作之一。 这是惊人的，因为我们不需要自己创造行动。 但是等等，还有更多。 您可以访问https://github.com/actions查看包含您可能需要的所有操作的不同存储库的列表。 您还可以查看操作文档(带有一些代码示例的https://docs.github.com/en/actions)。

第二步使用名为setup-dotnet的操作，它是此操作列表中的另一个存储库。 这个操作实际上是用文件中定义的dotnet的特定版本准备环境。 与 Jenkins 不同的是，你不需要在 GitHub Actions 中指定你想在环境中安装或配置任何东西。

如您所注意到的，您通过在 use 中定义操作来使用操作。 要运行命令，可以使用run属性。 在示例工作流,build的一步,也称为构建的步骤,触发dotnet build --no-restore命令,一步test,也被称为【显示】测试步骤,运行dotnet test --no-build --verbosity normal命令。****

所有的步骤都是在流程中的相同环境中完成的，在此流程中签出代码，安装 dotnet 版本，然后在相同的环境中调用dotnet build和dotnet test。

继续，现在让我们在 Azure Portal 中创建一个 Azure 应用服务。

在 Azure 门户中创建 Azure App Service 实例

我们将创建一个 AzureApp Service 实例，这样我们就可以轻松地将应用部署到 Azure 上:

  1. Go to Azure App Service in https://portal.azure.com/#home:

    Figure 19.4 – Creating an App Service instance in Azure

    图 19.4 -在 Azure 中创建一个 App Service 实例

    前面的图 19.4显示了我们将要创建的 App Service 实例的详细信息。 我们将使用代码和。net 5 运行时发布应用。 点击Create按钮，添加配置后您将看到这个按钮。

  2. Now go to the Azure App Service instance that has been created and click on Deployment Center:

    Figure 19.5 – The deployment center of App Service

    图 19.5 - App Service 部署中心

    图 19.5 显示CI/CD 未配置。 让我们通过进入设置来配置 CI/CD。

  3. Add the private GitHub repository you created earlier:

    Figure 19.6 – Adding the private GitHub repository

    图 19.6 -添加私有 GitHub 存储库

    图 19.6 显示了我们如何添加之前创建的私有。net 项目。 我们也使用。net 5 作为运行时。

  4. Then, click Preview file to see the workflow:

    Figure 19.7 – Workflow YAML configuration file

    图 19.7 -工作流 YAML 配置文件

    图 19.7 显示了 App Service 为我们创建的工作流 YAML 配置文件中的五个步骤。 由于 YAML 配置文件是代码或存储库的一部分，所以我们不应该将纯文本凭证放在文件中。 我们可以使用占位符来引用秘密。 稍后我将向您展示这些秘密在 GitHub 中的位置。

  5. 现在点击Save并进入项目的 GitHub 存储库。

  6. Let's check out the Actions tab to see whether App Service could add the workflow file:

    Figure 19.8 – Workflow run

    图 19.8 -工作流运行

    图 19.8显示了一个带有绿色图标的工作流，这意味着在等待几秒钟后，应用已经成功构建并部署。

  7. Let's click the workflow to see the jobs summary:

    Figure 19.9 – Summary of jobs

    图 19.9 -作业汇总

    图 19.9 显示了工作流的状态和总持续时间。

  8. Now let's click on build-and-deploy to see the steps associated with the workflow job:

    Figure 19.10 – A build-and-deploy workflow job

    图 19.10 -构建和部署工作流作业

    图 19.10 显示了工作流作业的五个步骤。 步骤如下:

    运行 actions/checkout@master

    设置。net Core

    Build with dotnet

    dotnet publish

    部署到 Azure Web App

    您还会注意到，在运行配置文件的 5 个步骤之前和之后还有一些步骤。

  9. Now go to App Service and click the Overview menu:

    Figure 19.11 – App Service overview

    图 19.11 - App Service 概述

    图 19.11展示了 App Service 的概述。

  10. Now click the Browse link that will redirect us to the application's URL. You should see that Vue.js is running in the browser:

    Figure 19.12 – Vue.js + TypeScript App

    图 19.12 - Vue.js + TypeScript App

    图 19.12 显示了我们之前创建的Vue.js + TypeScript App。

  11. Let's check out the end of the URL bar to see whether we can install the application:

    Figure 19.13 – The installable PWA Vue.js app

    图 19.13 -可安装的 PWA Vue.js 应用

    图 19.13显示 Vue.js 应用是可安装的，这意味着它是一个 PWA 应用，并且仍然可以在离线模式下工作。

  12. 现在，转到 GitHub 知识库的设置标签，然后点击秘密菜单:

Figure 19.14 – s secrets

图 19.14 -动作秘密

图 19.14 显示了我们可以安全地保存应用的敏感密钥和秘密的位置。

现在让我们测试 GitHub Actions 的 CI/CD 能力和我们已经设置的工作流。

测试 GitHub Actions 的 CI/CD 能力和工作流

这里，我们将来看看我们的 CI/CD 配置和 GitHub Actions 中的设置是否满足我们的需求:

  1. 运行git pull命令将 GitHub 存储库中的更改转移到本地机器上。

  2. Update the Welcome to Your Vue.js + TypeScript App text or message like so:

    Figure 19.15 – Edited HelloWorld msg props

    图 19.15 -编辑 HelloWorld 的 msg 道具

    图 19.15 显示了Home.vue文件中HelloWorld组件编辑后的msg道具。

  3. Next, we commit and push your changes to the master. Go to GitHub Actions to see that the workflow was triggered. Wait for the build and deploy job to finish:

    Figure 19.16 – Testing CI/CD

    图 19.16 -测试 CI/CD

    图 19.16 显示 CI 功能正在工作，几秒钟后 CD 功能也在工作。

  4. Open a new tab in the browser and go to the web app's URL to see that the changes we made in the application are now reflected on the internet:

    Figure 19.17 – Showing the updated Vue.js + TypeScript app

    图 19.17 -显示更新后的 Vue.js + TypeScript 应用

    图 19.17显示了修改后的单词和表情符号。

  5. 现在，转到{yourSubDomain}.azurewebsites.net/weatherforecast查看 Web API 的WeatherForecast端点是否可以响应 JSON 数据:

Figure 19.18 – Response from the WeatherForecast endpoint

图 19.18 -来自天气预报端点的响应

图 19.18 显示WeatherForecast端点以 JSON 格式的数组响应。

Vue.jsTypeScript 和 asp.net 的控制器.NET CoreWeb API 项目使用 GitHub Actions 在 CI/CD 中正常工作。

现在让我们总结一下所学到的东西。

总结

这是一个包装。 以下是本章的一些要点。 您了解了 GitHub 操作是什么，以及使用 GitHub 操作可以多么容易地部署。 您了解了部署到 Azure 应用服务、Azure 功能、Azure SWA 和 Azure AKS 的正确时间和用例。 您还学习了如何使用 GitHub 操作部署到 Azure App Service，包括工作流的 YAML 配置、可用的操作和 CI/CD。

你已经走了这么远了。 谢谢你完成了这本书，我为你和你学习新工具和新事物的热情感到骄傲。 如果你的项目需求与你从书中学到的问题和解决方案相匹配，你可以将你在这里学到的知识应用到一个项目中。

该课程已经教你如何构建一个 ASP.NET Core 应用和 Vue.js 应用，像一个高级开发人员，把的价值给你的客户或客户。

我建议你的下一步是买一本关于独立 ASP 的新书.NET Core 或 Vue.js 主题来巩固你从本书中学到的知识。

我们代表整个 Packt 团队和编辑，祝愿您在事业和生活的各个阶段都一切顺利。

这就跟你问声好！

我是 Devlin Duldulao, ASP 的作者.NET Core 和 Vue.js。 我真的希望您喜欢阅读这本书，并发现它对提高您在 ASP 中的生产力和效率有用.NET Core 和 Vue.js。

如果你能在 Amazon 上留下一篇评论，分享你对 ASP 的想法，这将对我(和其他潜在的读者!) NET Core 和 Vue.js。

您的评论将帮助我了解这本书的优点，以及未来版本中需要改进的地方，所以非常感谢。

最好的祝愿,

Devlin 巴西兰 Duldulao

版权属于：月萌API www.moonapi.com，转载请注明出处

本文链接：https://www.moonapi.com/news/30313.html