[ 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上安裝，以下提供載點

TypeScript : https://www.typescriptlang.org/
Node JS : https://nodejs.org/en/

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>前面加入以下設定

  <Target Name="CustomCollectFiles">
    <ItemGroup>
      <_CustomFiles Include="node_modules\**\*" />
      <FilesForPackagingFromProject Include="%(_CustomFiles.Identity)">
        <DestinationRelativePath>node_modules\%(RecursiveDir)%(Filename)%(Extension)</DestinationRelativePath>
      </FilesForPackagingFromProject>
    </ItemGroup>
  </Target>
  <PropertyGroup>
    <CopyAllFilesToSingleFolderForPackageDependsOn>
      CustomCollectFiles;
      $(CopyAllFilesToSingleFolderForPackageDependsOn);
    </CopyAllFilesToSingleFolderForPackageDependsOn>

    <CopyAllFilesToSingleFolderForMsdeployDependsOn>
      CustomCollectFiles;
      $(CopyAllFilesToSingleFolderForMsdeployDependsOn);
    </CopyAllFilesToSingleFolderForMsdeployDependsOn>
  </PropertyGroup>

<_CustomFiles Include="node_modules\**\*" />

<DestinationRelativePath>node_modules\%(RecursiveDir)%(Filename)%(Extension)</DestinationRelativePath>

</FilesForPackagingFromProject>

</ItemGroup>

</Target>

CustomCollectFiles;

$(CopyAllFilesToSingleFolderForPackageDependsOn);

</CopyAllFilesToSingleFolderForPackageDependsOn>

CustomCollectFiles;

$(CopyAllFilesToSingleFolderForMsdeployDependsOn);

</CopyAllFilesToSingleFolderForMsdeployDependsOn>

</PropertyGroup>

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

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

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

Facebook Comments