【52ABP实战教程】-- Devops如何用VSTS持续集成到Github仓库！

xiaowei

“ 工欲善其事，必先利其器。磨刀不误砍柴工！”

• 管理工具会VSTS。
  
  / a" W) t  o6 D* n/ C

4 ^3 g  E/ _* H. u5 l

• 代码管理会用GITHUB。
  
  

6 s" _* v. c) g7 k

• 服务器会用Azure。
  
  
  
  

    所有的东西都是利用现有服务。不会说自己从虚拟机开始玩。我们就专注于写代码。

什么是VSTS？
" u8 U& r" N4 x! S* Z

VSTS的全称是Visual Studio Team System。

: _' Z% G9 r+ e" n$ Q

$ d: b* S" [3 P, E, a介绍VSTS之前先说下TFS(Team Foundation Server)。

4 y% w7 q% b! i5 J* V: e7 w; q1 r

TFS是微软推出的一款ALM（Application Lifecycle Management)软件生命周期管理工具。通过它你可以从代码管理->代码版本管理->项目管理->持续集成->自动发布->自动测试等一系列软件生命周期在内的全家桶功能。

) I( y+ t, c& Q! i

VSTS（Visual Studio Team System）是基于SaaS（多租户）化TFS的云产品。

8 a( @! [1 f: r. g" {) b( m" r3 F听了之后是不是感觉很强大。

. N* q% S- g( q$ R

关于Github
" c  a! G+ i% |, v+ d% [" s
1 y" |2 F+ U7 x% x7 n4 W( z

Git 是由 Linux 之父 Linus Tovalds 为了更好地管理linux内核开发而创立的分布式版本控制／软件配置管理软件。

6 S8 n5 k) {# b' `4 n+ aGitHub是一个通过Git进行版本控制的软件源代码托管服务，由GitHub公司（曾称Logical Awesome）的开发者Chris Wanstrath、PJ Hyett和Tom Preston-Werner使用Ruby on Rails编写而成。

8 Q2 i6 X3 u/ Q) A0 x' b+ d, R

( @, Z1 y- Y3 Z2 l2 v$ a

先上一张图

  S0 u& |3 \) ^; {7 a; y1 M3 y

图片来自知乎。

4 }0 w7 O4 K. G& _. D+ Q6 T4 |( p7 {) ~$ E

为什么会有这个需求。

5 S& ~8 h1 W5 y6 U9 Q/ h( R9 v4 ~

目前Github作为一个全球最大的码（tong）农（xing）交友社区。也是最大的开源社区，但是它没有自动部署，在导航篇的时候我们说了。我们是一个，通过开源实际项目的方式给大家一个良好的体验。

) W( |! b: r, R* _! q$ A- s

/ L* `: A/ ]: @/ s2 j6 }6 |3 R涉及到的技术也会用微软全家桶的方式来进行开发的。

( W6 T9 V6 F) l3 P

恭喜VSTS开通香港节点
2 N9 l# j( q$ @* m- C2 C  C9 g% b
# S% u& Z8 P3 P  ~- K
; P  i+ x) p6 f+ _/ m& f% W9 X

没有香港节点也就是东亚区域之前呢，大家只能从 美国中部、加拿大中部、西欧、印度南部、澳大利亚东部、巴西南部这几个节点选择账户所在区域。

1 J$ R- p1 {0 X- C

$ X; K1 I9 n* ]3 o" c- Q" e这些节点都有一个特点，对我们国家不怎么友好。按照 Julia 的说法，我们国家强大的防火墙。恩恩。

! Y- B5 U' P. i* T在11月2日的微软科技大会上，微软研发部门的全球副总裁潘正磊女士宣布了微软研发云VSTS将于2017年底前落地中国香港。然后在10号的时候VSTS的老大布雷恩就宣布开通了VSTS在香港的节点。

% b( c1 I* ~1 R; ?8 p这意味在大陆使用微软全家桶的速度， 蹭蹭噌的加速了。

9 s" l3 r/ V/ }0 t$ U

好了，闲话少叙。开始干吧！

: B( x7 v+ Y( {* ^+ T3 _( C$ {

注册VSTS
+ Z8 D$ w5 [+ ]  ^

首先你要有一个微软邮箱，没有自己去注册。

1 g' K+ K" P# E- ?# f8 T

0 o  ?' i/ c7 a+ ~2 \然后打开https://app.vsaex.visualstudio.com/me?mkt=zh-CN 新建账户。
( T+ _; H* C3 J, H) X- Z9 C

) {1 H) Q; r6 h- @  `5 E1 \0 X

image.png

这里的所在地一定要选择东亚，因为其他地区的速度慢。

5 \. J" E* \' B+ B$ M

正文
: c/ h8 C+ m5 X! E$ M& [

我们现在开始做一些正经事。

4 R: i3 I9 ~; |1 H$ C5 E

• 首先创建一个新项目
  
  
  
  image.png
  
  ! {2 X# F8 v; B, f* w

5 L# I2 x+ z8 V  n8 ^& C

• 创建完毕后，进入项目。
  
  
  
  image.png
  
  6 e3 O# ?; O1 x

• 在Build And Release 菜单栏下的Builds中，选择新建一个“Empty process” 。
  ' l; Z0 q/ Y5 F4 I6 n你可以给这个任务创建一个名字，然后这里有几个队列，我们选择"Hoste vs2017"的队列
  
  2 f. q# f: B4 e5 M3 ~  f
  
  image.png
  
  

• 然后选择“Get Sources” ，选择github。
  
  9 |- x% H# l8 ^
  
  image.png
  
  
  这里需要你的github账户授权，这里你可以选择用网页授权还是用个人密钥授权。
  我们采用Authorize using OAuth，然后这里请注意，弹窗很容易被拦截。
  这里你要允许弹出。
  
  
  
  image.png
  
  授权成功后，可以看到你github中仓库的信息。
  3 P6 M+ l' x1 M, P. Q
  
  image.png
  
  

: e5 A' [, r9 L
- y2 _/ p* N& c! a

• 然后选择菜单栏上的“Triggers”触发器按钮。打开触发器，
  
  
  
  image.png
  
  

• 选择Options配置下信息。
  
  9 a, R" K" A8 I6 K$ R
  
  image.png
  
  # @/ G. U0 H; J/ J7 H
  最后，右上角“Save& queue”保存。
  
  
  
  保存信息
  
  

  r! `/ d8 {) D) o! u; P
! k! f4 c6 K0 o) k

• Build number format 是指创建生成的生成码。你可以试试。
  
  

至此整个功能配置已经完毕了。

使用VSTS给github的README 文件创建构建状态

7 _% i$ b% D! K& H6 M0 h

构建完毕了，我们来看看怎么让逼格显得稍微高大上点。打开我们的github项目。

2 r# x9 ^" Y4 |

image.png

5 S1 U1 ?. \; |+ L% r) |1 L5 y: b

以上效果图！！！

" E% f4 `1 a! f: J) w- Q9 ^0 q( v; s

链接地址：https://github.com/ltm0203/aspnetcore

我们在VSTS中为项目创建一个自定义的通知消息，方法是利用VSTS的构建生成的URL，利用markdown的语法来完成。

, I6 a9 `3 A$ _4 I! Q$ Q

• 首先在打开你的github，导航到你所在的仓库，这里我们使用的是aspnetcore项目中。
  
  , M1 b. F, ?) S) p# O: Z9 ?

• 创建一个README.md的文件。
  
  

• 然后将vsts中生成的徽章标记链接，粘贴到README.md文件中即可。
  代码段：
  
  , a1 Z* d0 }1 {' K

/ n7 q" {& m/ q% A. N0 t[<img src="https://ltm0203.visualstudio.com/_apis/public/build/definitions/06667c49-f49d-4e3b-8eda-1ee96b1914c7/1/badge">](https://51abp.visualstudio.com/_ ... 48d80437520/1/badge)

( q  |' t3 F+ @6 r) f

vsts中生成的徽章URL：

7 {5 V$ I3 c4 C; c  j& ?

+ S( [7 z8 @* {

徽章URL.png

) Q: k& T1 x+ L& }  P

; E5 R4 p2 B6 m- _% {  |% V" Y

• 在github项目中的"Setting"中，打开webhooks，可以看到你绑定的webhook。每次对GitHub仓库的提交都会触发VSTS中的构建。
  
  

* v, [; D6 n! y

• 我们返回到vsts中，打开build。可以看到我们创建的队列。
  
  # |6 @; c% R/ }
  
  image.png
  
  
  这里可以看到更加详细的统计信息，你编译的次数，状态，每次提交的信息等等。
  
  ! Y& `5 F0 }* c

实际开发呢？


. G9 b) f& n  d

在实际开发的项目中，我们更多的时候，是一个几个功能写好了才提交一次，而当前的情况每个文件发生变化就编译一次，这稍微有点不合理。我们通过对队列任务这里你可以随意取一个名字的进行修改，让项目编译更加的合理。修改为每提交一次才编译。

6 `! @+ ]9 G1 b4 B: A

• 打开VSTS，点击“Build & Release”，再点击“Builds”，找到任务名称“这里你可以随意取一个名字”，然后点击“Edit”按钮。
  
  7 p  I* \0 S% j8 Y; O3 d

• 点击‘Trigger’.修改起来也很简单。。
  
  7 Q8 `3 n  U0 q
  
  看这里.png
  
  
  修改为如图所示即可。
  
  

5 h3 {3 r( X4 N: ^! j+ ]- V

• 然后点击Save & queue,再点击Save。
  
    t) k- x% e% m) A, v2 K% U

总结

1 u4 Y6 H! T+ F7 e$ h* L- H: b

以上就是利用Vsts自动编译构建项目的完成，然后在github项目中看到项目的构建状态！

# ^" ?' t; F: ?5 z  |% l

! q: E$ |/ s! G1 g" I" d6 r# B9 _核心是为了解决帮助大家在开发过程进行的日常编译问题。自动化构建。

' i4 o- E: L" U2 j# g

VSTS的整体功能肯定不止这么一点，在后面的日子内，我会带着大家慢慢玩！

8 t. i3 p% C& ?) K

6 E( r7 t- D1 O: E) x6 ?2 x# R

原创：梁桐铭