VSTS - VSTS Build - Node.js 前篇

01 December 2015 — Written by Sky Chang

#Azure #VSTS #CI/CD #JavaScript #Release Management #Node.js

前言

在上一篇了解了 new Build 後，我們這篇就來實際使用 Build 來佈署 Node.js 看看。

而開始前，我們先來看一下我們的環境，目前小弟的 Source Code 是放在 GitHub 上，而我希望透過 VSTS 的 Build ，來將我的 Node.js 佈署到 Azure Web Site，而這篇文章，可以達到這個目的。

另外，在開始之前，有一些事情概念的事情需要注意。

因這篇是使用 Node.js 所以可能比較看不出來 CI 的效果，但有興趣朋友，後續可以在接 Test ，目前這篇並不會談到 Node.js 的自動測試，另外，在這篇，後續則是直接 Deploy 到 Azure ，也暫時不會談到 Release Management ，這篇是初階的引導班，未來會在講該怎麼和 Release Management 整合。

環境需求

因使用 Node.js 5.0.0 版本，所以要自行建立 Build Agent，請參考上一篇文章建立 Build Agent

因為要佈署到 Azure，請於 Build Agent 這台 Server 安裝 Azure PowerShell

因為要使用 VSTS 的 Build 功能，請先建立一個 Team 專案，亦可以參考上一篇

設定流程

一開始，我們要先設定 Build 的流程，也就是設定一步接著一步的步驟。

這邊，我們先在 Build 的選單下，按下 + 鈕，透過此按鈕，來新增新的 Build 定義。

接著，我們可以看到，官方已經提供了許多樣板，但很不幸的，Node.js 不在預設樣板裏面，所以我們先選擇空的，等下我們在自己新增。

接下來，選擇 source 來源，我們這邊當然就是選擇 GitHub，而 Default Agent queue 則讓我們選擇，要使用哪一個 Agent Pool，還記得嗎?，上一篇我們將我們自己的 Build Agent 放到 Default 這個 pool 裡面，所以這邊我們就選擇使用 Default；最後，如果你希望簽入到 GitHub 的時候，就自動觸發此 Build ，那就要勾選最下面的選項。

完成之後，我們持續設定，接下來，我們要加入好幾個步驟，第一個步驟就是 npm install ，畢竟應該不會有人把 package 也放到版控吧...所以當我們取下 source code 的時候，第一步就是先 npm install，如下圖。

注意，這邊 UI 沒設計好，所以你按下 Add 的時候，感覺沒啥反應，但其實已經在背後增加了一個流程了，如果不小心按太多次，等下在移除流程即可。

當 npm install 完後，該做甚麼事情哩??..當然就是透過 gulp ( or grunt ) 來進行 Node.js 的流程處理。 ( 如果不知道甚麼是 gulp 的朋友可以參考這篇)

當該捆綁，轉換等等的過程都好了之後，下一步要做甚麼呢??，當然就是要發佈到 Azure WebSite，所以最後一步驟，就是把 Azure Web Site 流程加上去。

完成後如下圖，而這代表甚麼，這代表著當我們執行 Build 的流程，也就是說，當我們從 GitHub 下載完 Source Code 之後，會先執行 npm install ，來將欠缺的 package 給裝上去，接著，會執行 gulp 來跑流程，看是要將 ES6 、或是 TypeScript 轉成標準的 JavaScript ，又或著是打包 js 、 CSS 等流程，甚至我們還要在 gulp 設定壓縮成 package.zip ，來給 Azure PowerShell 上傳；最後一個步驟，當然就是使用 Azure PowerShell，將剛剛壓縮好的 Package.zip 傳到 Azure 上，並且進行佈署。

所以，這裡的每一個流程，我們都可以自行的組合，已完成我們所需要的功能。