[ C# Web Angular 6 ]使用 TeamCity 實現 Auto Deployment ~ 進階篇

最近因公司新專案要求,決定使用 Angular 6 ,經過一番努力終於成功把 Angular 6 成功的加入 C# 專案中,接著以為可以很順利的把 Angular 6 加入 Teamcity CI 中 ,卻意外的也花了不少時間,所以就把安裝設定的流程筆記下來,也供大家參考

Step 1. 

要使用Angular 2 以上,必須先在本機安裝 node js 以及 typescript ,相對的我們也需要在TeamCity的Server上安裝,以下提供載點

Step 2.

接著開始在 TeamCity 上設定 Auto Build ,這個部分原本打算用比較偷懶的方式,直接把Angular 6 的 node_modules 加入專案中並且 Push 到 Git Server上面,可是檔案真的太大了,過程中一直不太順利,所以後來還是決定在 TeamCity Build 之前 ,再去Install node_modules ,所以這一個部分我們需要再 TeamCity 的 Build Step 加上一段Command 的指令

螢幕快照 2018-09-09 下午3.48.59

螢幕快照 2018-09-09 下午3.50.14

  • Runner type : Command Line
  • Working directory : 選擇Web專案的目錄
  • Command script : npm install 他會去讀取Web專案下的package.json並安裝angular 的 module

Step 4.

接著再加一個Build Step 用來Build Project以及Publish to IIS

這段的詳細設定可以參考之前的文章 :

螢幕快照 2018-09-09 下午4.00.01

Step 5.

到這一步基本上已經完成設定了,但是因為我沒有把node_modules加入專案中

螢幕快照 2018-09-09 下午4.12.32

在.csproj的專案檔中就不會去產生node_modules,所以相對的TeamCity在Publish時也不會把 node_modules Publish 到我們 IIS Web 的目錄下,這時候在瀏覽器開啟網頁時就會發現少了很多JS檔案 ,接著下一個步驟我們就要來解決這個問題

Step 6.

如果沒有把node_modules 加入專案中,在Publish時就不會被複製到 IIS Web 目錄下,所以這邊的解決方式是在 Publish 的設定檔中,加入一段設定,跟 MSBuild Tools 説哪一個資料夾也要Publish 上去

  • 開啟Publish設定檔

螢幕快照 2018-09-09 下午4.22.10

  • 在<Project>前面加入以下設定

螢幕快照 2018-09-09 下午4.26.06

接著就可以把這一段直接Push到 Git Server上面,等 TeamCity Run 完之後就會發現node_modules已經成功的被複製到IIS中了

以上就是Angular 6與 TeamCity 整合的簡單筆記,有什麼疑問也歡迎各位前輩提出來一起討論,謝謝~