使用Visual Studio Team Services持续集成（一）——构建ASP.NET Core

落日映苍穹つ 2022-05-31 14:49 349阅读 0赞

# 使用Visual Studio Team Services持续集成（一）——构建ASP.NET Core #

## 概述 ##

持续集成(CI)是将代码尽可能频繁地集成到共享仓库中的过程。在代码集成期间，构建中断或测试失败可以及时地通知代码中的错误。

当许多开发人员在复杂的软件项目上进行协作时，将代码的不同部分集成在一起可能是一个漫长而不可预测的过程。但是，如果持续地构建和部署项目，可以使这个过程更加高效和可靠。

Visual Studio Team Services简化了应用程序的[持续集成][Link 1]过程，无论目标平台是什么，或者使用的是什么语言，VSTS Team Build允许:

*  在Linux，Mac和Windows上构建
 *  使用私有的或托管的（Azue）构建代理
 *  为Android、iOS、Java、.NET等应用使用多平台构建代理
 *  与工作、测试、编码、构建和发布的无缝集成
 *  通过实时构建状态跟踪构建

## 前置条件 ##

要完成这个实验室需要：

*  Visual Studio Team Services 账户.如果没有，需要[创建][Link 2]一个。
 *  Visual Studio 2017 或更高版本
 *  可以使用[Visual Studio team Services Demo Data generator][] Visual Studio team Services帐户提供预先定义的项目数据。在本动手实验请使用***My Health Clinic***模板。

如果没有使用VSTS Demo Data Generator，可以从GitHub仓库中复制代码。

## 练习1：构建ASP.NET Core ##

ASP.NET Core是一个用于构建web和云应用程序的精简和可组合框架。这里将展示如何自动构建**HealthClinic ASP.NET Core**应用程序。

如果使用演示生成器提供的项目，那么构建定义应该自动创建。可以在不添加或修改任务的情况下了解在VSTS中构建管道是如何工作的。否则，可以按照以下步骤创建一个新的构建定义。

### 任务1：创建新的构建定义 ###

#### 1.从VSTS帐户概述页面，选择团队项目。 ####

#### 2.点击**Build and Release**选项卡并选择**Builds** ####

#### 3.点击**New**创建构建定义 ####

![这里写图片描述][SouthEast]

#### 4.可以从选择一个模板开始，该模板将添加一组任务，为正在构建的应用程序应用典型的设置，或者从一个空白的过程开始，从头开始构建。有一个用于构建ASP.NET应用的模板。接下来将使用它。选择**ASP.NET Core (PREVIEW)**并单击apply应用构建定义的模板。 ####

![这里写图片描述][SouthEast 1]

#### 5.如您所见，该模板已经应用了一组典型的关注构建ASP.NET core应用程序的任务。在很多情况下，可能不需要做任何其他事情，仅仅是指向正确的repo和branch就可以了。在这种情况下，需要对构建进行一些定制。选择**Get sources**任务。可以从各种源(包括GitHub、SVN或任何其他Git仓库库)获取代码，但是由于在VSTS项目本身中有对应的代码，所以选择这个项目。如果没有指向正确的仓库和分支，请更改它 ####

![这里写图片描述][SouthEast 2]

#### 6.下一个任务**Restore**不需要更改 ####

#### 7.保存构建定义——将它命名为MHC.Web.CI ####

My Health Clinic web应用程序依赖于节点组件和其他的库。需要添加任务来下载和安装这些包，然后才能构建。在接下来的任务中，我们将看到如何将任务添加到构建定义中。

### 任务2：添加构建任务 ###

从团队项目中删除未使用的repo，以组织项目的源代码。

#### 1.选择**Add Task**之后选择**Package**查找与该类别相关的任务，选择**npm**并点击**Add**。将其放置到**Build**任务后 ####

![这里写图片描述][SouthEast 3]

#### 2.将工作文件夹更改为**src/MyHealth.Web**。该项目有一个json文件，npm安装命令通过他知道需要安装哪些包 ####

![这里写图片描述][SouthEast 4]  
*接下来，您需要运行bower来安装web包。可以使用**Command Line/Shell Script**工具运行**Bower**命令，但是更好的方法是使用Bower任务。这个任务不是现成的，需要从市场上安装。*

从另一个选项卡，导航到市场上的[Bower extension page][]并安装它。当完成返回到正在编辑构建定义的选项卡时，关闭该选项卡。

#### 1.保存构建定义并刷新页面。应该在*Package*选项卡下看到**Bower**任务。选择该任务并单击**Add**。 ####

![这里写图片描述][SouthEast 5]

#### 2.选择**Bower**任务并更改*Bower JSONPath*指向MyHealth.Web 文件夹下的bower.json文件。 ####

![这里写图片描述][SouthEast 6]

#### 3.接下来需要gu\*\*重点内容**lp任务。选择\*\*Add Task**，并查找**Gulp from the \*\*Build**部分，将其添加到构建定义中。 ####

![这里写图片描述][SouthEast 7]

#### 4.更改*Gulp file path*指向MyHealth.Web文件夹下的的gulp文件。 ####

![这里写图片描述][SouthEast 8]

#### 5.其余的任务不需要任何更改。已经准备好运行该构建。可以使构建作为一个持续集成*（Continuous Integration）*构建运行，以便在分支上的每个签入都会触发其运行。稍后我们将在实验室中看到。现在，我们将手动运行它。 ####

#### 6.选择**Save & queue**来保存构建定义并立即对构建进行排队。如果已经保存了构建定义，从菜单中选择**Queue**。 ####

![这里写图片描述][SouthEast 9]

#### 7.需要选择要运行此构建的构建代理。可以选择在一个前提代理上运行构建，或者使用托管在Azure上的代理。我们将使用**Hosted VS2017**代理，因为它拥有.NET core框架和构建应用程序所需的所有其他组件。 ####

![这里写图片描述][SouthEast 10]

#### 8.将看到构建等待寻找代理运行。它可能需要几分钟，并且一旦得到一个代理，构建就会开始执行。当构建运行时，可以实时看到输出日志。如果需要进行更深入的分析，还可以后续下载日志。 ####

![这里写图片描述][SouthEast 11]

#### 9.完成所有步骤之后，可以在顶部选择构建编号*（Build number）*以获得运行的详细信息。**Summary**选项卡显示了运行的摘要，包括谁触发了它，在什么时间，获取了哪些代码和提交，相关的工作项，测试等等。 ####

![这里写图片描述][SouthEast 12]

#### 10.**Timeline**视图将帮助您找出运行的每个任务的时间。如果构建定义包含发布任务，如果有任何文件被发布，可以从**Artifacts**选项卡中找到它。 ####

![这里写图片描述][SouthEast 13]  
我们将了解构建中如何处理变量、设置不同的触发器机制等等。

## 动手实验 ##

<table> 
 <thead> 
  <tr> 
   <th align="left">类别</th> 
   <th align="left">文章名称</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">概述</td> 
   <td align="left"><a href="http://blog.csdn.net/jiangyongtao/article/details/79052211" rel="nofollow">Visual Studio Team Services 动手实验</a></td> 
  </tr> 
  <tr> 
   <td align="left">计划</td> 
   <td align="left"><a href="http://blog.csdn.net/jiangyongtao/article/details/79054714" rel="nofollow">使用Visual Studio Team Services敏捷规划和项目组合管理（一）使用团队、区域和迭代</a></td> 
  </tr> 
  <tr> 
   <td align="left"></td> 
   <td align="left"><a href="http://blog.csdn.net/jiangyongtao/article/details/79068352" rel="nofollow">使用Visual Studio Team Services敏捷规划和项目组合管理（二）VSTS中的工作项</a></td> 
  </tr> 
  <tr> 
   <td align="left"></td> 
   <td align="left"><a href="http://blog.csdn.net/jiangyongtao/article/details/79123969" rel="nofollow">使用Visual Studio Team Services敏捷规划和项目组合管理（三）使用Kanban板</a></td> 
  </tr> 
  <tr> 
   <td align="left"></td> 
   <td align="left"><a href="http://blog.csdn.net/jiangyongtao/article/details/79133049" rel="nofollow">使用Visual Studio Team Services敏捷规划和项目组合管理（四）冲刺计划和任务板</a></td> 
  </tr> 
  <tr> 
   <td align="left"></td> 
   <td align="left"><a href="http://blog.csdn.net/jiangyongtao/article/details/79133585" rel="nofollow">使用Visual Studio Team Services敏捷规划和项目组合管理（五）——组合管理</a></td> 
  </tr> 
  <tr> 
   <td align="left"></td> 
   <td align="left"><a href="http://blog.csdn.net/jiangyongtao/article/details/79199709" rel="nofollow">使用Visual Studio Team Services敏捷规划和项目组合管理（六）——VSTS仪表盘的使用</a></td> 
  </tr> 
  <tr> 
   <td align="left"></td> 
   <td align="left"><a href="http://blog.csdn.net/jiangyongtao/article/details/79205843" rel="nofollow">使用Visual Studio Team Services敏捷规划和项目组合管理（七）——流程定制 </a></td> 
  </tr> 
  <tr> 
   <td align="left"></td> 
   <td align="left"><a href="http://blog.csdn.net/jiangyongtao/article/details/79229144" rel="nofollow">Microsoft Teams 集成 (协作, 沟通 和 行为)</a></td> 
  </tr> 
  <tr> 
   <td align="left"></td> 
   <td align="left"><a href="http://blog.csdn.net/jiangyongtao/article/details/79247992" rel="nofollow">使用VSTS的Git进行版本控制（一）——复制现有仓库)</a></td> 
  </tr> 
  <tr> 
   <td align="left"></td> 
   <td align="left"><a href="http://blog.csdn.net/jiangyongtao/article/details/79247992" rel="nofollow">使用VSTS的Git进行版本控制（二）——提交保存工作</a></td> 
  </tr> 
  <tr> 
   <td align="left"></td> 
   <td align="left"><a href="http://blog.csdn.net/jiangyongtao/article/details/79248403" rel="nofollow">使用VSTS的Git进行版本控制（三）——评审历史记录</a></td> 
  </tr> 
  <tr> 
   <td align="left"></td> 
   <td align="left"><a href="http://blog.csdn.net/jiangyongtao/article/details/79248468" rel="nofollow">使用VSTS的Git进行版本控制（四）——在Visual Studio中管理分支</a></td> 
  </tr> 
  <tr> 
   <td align="left"></td> 
   <td align="left"><a href="http://blog.csdn.net/jiangyongtao/article/details/79248651" rel="nofollow">使用VSTS的Git进行版本控制（五）——从Team Services Portal管理分支</a></td> 
  </tr> 
  <tr> 
   <td align="left"></td> 
   <td align="left"><a href="http://blog.csdn.net/jiangyongtao/article/details/79284564" rel="nofollow">使用VSTS的Git进行版本控制（六）——拉取请求</a></td> 
  </tr> 
  <tr> 
   <td align="left"></td> 
   <td align="left"><a href="http://blog.csdn.net/jiangyongtao/article/details/79341109" rel="nofollow">使用VSTS的Git进行版本控制（七）——管理仓库</a></td> 
  </tr> 
  <tr> 
   <td align="left">相关资料</td> 
   <td align="left"><a href="http://blog.csdn.net/jiangyongtao/article/details/79008498" rel="nofollow">Visual Studio Team Services Demo Generator简介</a></td> 
  </tr> 
  <tr> 
   <td align="left">参考文章</td> 
   <td align="left"><a href="https://almvm.azurewebsites.net/labs/vsts/continuousintegration/" rel="nofollow">Continuous Integration using Visual Studio Team Services</a></td> 
  </tr> 
 </tbody> 
</table>

[Link 1]: https://www.visualstudio.com/en-us/docs/build/overview/
[Link 2]: https://www.visualstudio.com/
[Visual Studio team Services Demo Data generator]: http://vstsdemogenerator.azurewebsites.net/Environment/Create
[SouthEast]: /images/20220531/6a41d28faa854459a17e12508b32b640.png
[SouthEast 1]: /images/20220531/b6b82c9e1dc74078b8b0310c641a5758.png
[SouthEast 2]: /images/20220531/8d4e7aaa401c4d04a197a6ce8188d910.png
[SouthEast 3]: /images/20220531/feda8ba08fd14b599a55bc9874a1b565.png
[SouthEast 4]: /images/20220531/9d1d0371f21f40cb9f6ef4c6c127e594.png
[Bower extension page]: https://marketplace.visualstudio.com/items?itemName=touchify.vsts-bower
[SouthEast 5]: /images/20220531/7fcb7932e3954bbc8c21a3adc67d33a0.png
[SouthEast 6]: /images/20220531/d045cd473c994eb386b3873791852373.png
[SouthEast 7]: /images/20220531/551bb94a21ba4cbdaab72aae98d407af.png
[SouthEast 8]: /images/20220531/bfa232c9f5be4775b4ee884fedebd94f.png
[SouthEast 9]: /images/20220531/027061660844408899aaa13d5bdbd5cc.png
[SouthEast 10]: /images/20220531/435183b2dfbb49b692cf297dddb0557e.png
[SouthEast 11]: /images/20220531/e16b0e8d98c54949a6ebee96c7094ff9.png
[SouthEast 12]: /images/20220531/29b754bced594ff6a1e187c0b0709743.png
[SouthEast 13]: /images/20220531/8032c644d42648d68911f07e9b44d4c0.png