如何在 Visual Studio Team Service 設定自動建置及佈署

Posted by Ryan Tseng on 2017-10-04

前言

還記得以前在進行專案的時候,開發到一個段落客戶會要求看目前開發的狀況,我們通常都會手動的去做建置以及佈署的動作,這樣的動作對各位來說一天做個三次五次還可以,不過只要你一天需要做個二十幾次,你可能就會覺得很浪費時間。

今天這篇的主題就是帶著大家怎麼樣透過 Visual Studio Team Service (aka VSTS) 來幫助我們做到自動建置以及自動部署,讓各位的生命浪費在美好的事物上(Coding)。

前置準備

一開始我們必須先建立一個空白的 Git 倉儲。

建立成功之後將空白的 ASP.NET MVC 專案推送至剛剛建立好的倉儲

最後檢查一下 Code 頁籤中,程式碼已成功被 Push 至遠端倉儲

建置 (Build)

我們先建立一個 Build Definition 定義檔

選用空白的樣板(也可以選擇現有的 ASP.NET 樣板,這邊因為要測試所以使用空白範本)

在目前版本的 VSTS 設定上面,我們可以點選 Phase 右方的 + 號,並且依照步驟在右方能夠選擇想加入的工作項目,按下 Add 該工作項目就能夠加入至左方的 Phase 中

先來看一下我們建置所安排的幾個工作項目

  1. 套件還原
  2. 建置
  3. 執行單元測試
  4. 打包檔案並上傳至 VSTS

對應的步驟就如下圖所示

接下來會稍微解釋一下建置裡面的 MSBuild Arguments

以下這邊是與圖片內完全相同的參數,各位可以直接參考(如果各位是選用內建的 ASP.NET Template,這些參數應該已經內建在上面了)

1
/p:DeployOnBuild=true /p:WebPublishMethod=Package /p:PackageAsSingleFile=true /p:SkipInvalidConfigurations=true /p:PackageLocation="$(build.artifactstagingdirectory)\\"

要注意 $(...) 這種形式的字串,它其實是一個預先設定好的變數,表示 Task 在執行的時候,它會被取代為原本它代表的字串,而 $(build.artifactstagingdirectory) 在微軟提供的文件其代表的涵義如下

The local path on the agent where any artifacts are copied to before being pushed to their destination. For example: c:\agent_work\1\a

這邊額外提供微軟的 Build Variables 文件給大家參考

另外,因為我們在這個範例中是透過 VSTS 來幫我們進行佈署,所以我們需要將這個檔案透過 Publish Artifact 這個工作項目,來幫我們把檔案上傳至 VSTS,讓他能夠被後續的 Release 流程給取得。

  • Path to Publish (我們要將什麼資料夾整個上傳至 VSTS)

    • $(build.artifactstagingdirectory)\\
  • Artifact Name (要將建置並包裝完成的 Artifact 發布到什麼資料夾底下)

    • drop
  • 整個設定完成之後我們可以點選右上角的 Save & queue 來實際執行我們安排好的建置工作項目

  • 點選 Save 之後會跳出視窗,可以讓我們選擇想要使用的 Agent (VSTS 預設都是使用雲端的 Agent,如果讀者想了解如何使用非雲端的 Agent 可以參考 這裡),我們就直接點選一次 Queue 嘗試著先手動執行我們的建置步驟。
  • 排入佇列之後我們可以直接點選它的提示訊息進入到執行中的項目
  • 在裡面可以看到自己安排的建置流程當中,目前執行的狀況如何,也能夠從這裡看到很完整即時的資訊。
  • 確保建置流程都能夠順利結束之後我們需要有一個 Trigger 能夠讓我們在程式碼 Push 至遠端 Git 的時候,能夠觸發整個建置的動作(這邊可以依照自己團隊建立分支的狀況進行調整,以下圖片僅展示在 master 分支有新的 push 推送時,能夠觸發建置的動作)
  • 接下來我們就能夠在分支有專案成員 push 到遠端的時候觸發自動建置,前半段算是告一段落

佈署 (Release)

在我們的專案能夠透過版本控制的更動自動觸發建置之後,接下來就要繼續進行佈署的設定

  • 首先依照步驟點選至 Release 頁籤,並且新增一個 Release Definition
  • 這次和建置相同,選擇空白的樣板
  • 選擇完樣板之後會出現如下畫面,我們要選擇從哪裡取得要佈署的 Package
  • 再來設定要怎麼觸發 Release 這個動作
  • 接下來設定佈署的工作流程
  • 進入到工作流程之後,我們選用 Command Line 工具並加入 Phase 當中
  • 接下來在 Command Line 的設定項目中,我們要先選擇預設的工作目錄(可直接定位至 drop 資料夾,就不用自行透過指令切換好幾層的目錄)
  • 這邊需特別講解,在建置步驟時產出在 drop 資料夾中的檔案,其中包含一個 *.cmd 的檔案,其實這個檔案是一個批次檔,內部它會自行呼叫 MsDeploy.exe 幫助我們完成佈署,但它還是需要下一些參數,如下圖

實際參數詳列如下

  • Tool
1
RyanDemo1001.deploy.cmd
  • Arguments
1
/y "/m:https://[站台網址]:443/MsDeploy.axd?Site=[站台名稱]" -allowUntrusted /u:"[佈署帳號]" /p:"$(DeployPassword)" /a:Basic "-enableRule:DoNotDeleteRule -setParam:name='IIS Web Application Name',value='[站台名稱]'"

上方使用中括號所包起來的參數,皆可以透過佈署設定檔案取得。

  • 最後我們要將上方的 $(DeployPassword) 變數,設定到我們的變數區,這樣就不會直接寫在佈署的參數當中,增加一點安全性。
  • 添加完成之後,這個變數會在執行工作流程時被取代掉,接下來我們就試跑一次整個佈署的工作流程是否能夠正常執行
  • 最後檢查我們的站台是否已經正常被佈署至 Azure 的 App Service 當中

大家自行嘗試的時候請在最後自己嘗試修改一點程式碼,然後推送到 Repository 上面,讓它引發建置及佈署的流程,看看是否整個建置及佈署的流程都已經成功的自動化了呢?往後各位只需要將注意力集中在撰寫程式上面即可,在前面花時間摸索的設定,在未來將會替各位或是團隊節省不少的手動作業時間。