熱門文章 (Popular Post)

顯示具有 「Gulp Imp .Net Web App CI」 標籤的文章。 顯示所有文章

By :

前言

個人實作 .Net Framework 、.Net Core 持續整合流程,並整合前端佈署至CDN整體流程後,深感製作自動化流程隨著技術創新,變得越來越簡便。尤其是 .Net Core 部分,Restore, Build, Test部分都可以以自身指令執行,不需要額外引入套件與撰寫指令,只需要實作 Deploy 部份,這讓我非常的驚訝(但這部分就不在此系列贅述,而會在.Net Core系列文進行說明),也感嘆科技進步神速。

此外,這篇文章是這系列最後一篇,個人覺得後面幾篇文章表達方式比較不好,近期內會逐步修正部分內容,讓有興趣的人更容易理解,請多包涵。在此也感謝花費時間觀看此系列文章的所有人,若有觀念錯誤或建議請各位先進不吝指教。

本系列文章大概內容如下(暫定,會修改):
使用 Gulp 實作 Asp .Net Web Application 持續整合
Using gulp to implement .Net web application continuous integration
1.Gulp 基礎教學
2.流程簡介、代入參數與修改AssemblyInfo
3.透過 Gulp:nuget-runner 進行 NuGet Package Restore
4.透過 Gulp:gulp-msbuild 進行 Build project
5.透過 Gulp:gulp-nunit-runner 進行 Unit Test
6.Gulp CI Deploy (1) - 透過Gulp:robocopy 進行 Deploy
7.Gulp CI Deploy (2) - 使用 MSDeploy (WebDeploy) 進行 Deploy
8.Gulp CI IIS Management - 使用 PowerShell 變更實體路徑
9.最終篇: Team City 設定 與 Build Scripts 撰寫
   9-1 Team City Agent 相關說明
   9-2 Team City Server 簡易設定說明
   9-3 Build Scripts 撰寫
   9-4 測試結果

本系列文章使用的環境如下:
1.Visual Studio 2015 Community Update 3
2.Visual Studio Core
3.TeamCity
4.Nunit 3.2.1.0
5.NuGet 3.4.4.1321


介紹

Team City Agent 相關說明
Step 1. 開發者於 Team City 操作介面選擇 Agent 與 Branch 後,點擊 Run。
Step 2. Teamcity 觸發 Agent,執行持續整合動作。
Step 3. Team City Agent 從 Git Server 取的該 Branch 程式碼。
Step 4. 開始執行 Build Scripts,依序進行 Restroe、Build 與 Test。
Step 5. 執行 Deploy 至 Web Server 工作; Deploy 後,變更 Web Server 該網站實體路徑。

By :

前言

在gulp中執行powershell指令,變更IIS website實體路徑的實作過程,提供大家參考。若有觀念錯誤或者建議請各位先進不吝指教。

本系列文章大概內容如下(暫定,會修改):

使用 Gulp 實作 Asp .Net Web Application 持續整合
Using gulp to implement .Net web application continuous integration
1.Gulp 基礎教學
2.流程簡介、代入參數與修改AssemblyInfo
3.透過 Gulp:nuget-runner 進行 NuGet Package Restore
4.透過 Gulp:gulp-msbuild 進行 Build project
5.透過 Gulp:gulp-nunit-runner 進行 Unit Test
6.Gulp CI Deploy (1) - 透過Gulp:robocopy 進行 Deploy
7.Gulp CI Deploy (2) - 使用 MSDeploy (WebDeploy) 進行 Deploy
8.Gulp CI IIS Management - 使用 PowerShell 變更實體路徑
   8-1 流程說明
   8-2 透過Gulp 執行變更實體路徑指令
9.最終篇: Team City 設定 與 Build Scripts 撰寫

本系列文章使用的環境如下:
1.Visual Studio 2015 Community Update 3
2.Visual Studio Core
3.TeamCity
4.Nunit 3.2.1.0
5.NuGet 3.4.4.1321


介紹

流程說明
在進行 Deploy 的過程中,應該會有許多人覺得為什麼需要另開一個實體資料夾,放置新的版本程式碼,而不適直接佈署到目前的實體資料夾。 在實作過程中,有經驗部門主管曾經提醒在 Deploy 過程中,容易導致線上使用者在這端期間中顯示錯誤訊息。雖然我曾經想過能貼出維護公告,再進行停機,但過去維護公家機關內部系統的經驗,臨時的維護公告(如:hotfix)常常沒辦法知會所有使用者,導致效果不彰;又何況是一個對外的系統,一些簡易錯誤的修正版本更新可能就造成使用者,認為系統不穩定的負面印象。 

By :

前言

在上一篇,我們透過 Gulp Robocopy 套件進行網站佈署,而本篇我們將使用微軟的
Web Deploy 進行網站佈署。不同於 Robocopy ,網頁伺服器目標資料夾需要開放編
輯權限(若開放所有使用者讀寫權限,可能有些安全性的疑慮),Web Deploy 則是使
用Windows Service (透過 port 8172) 協助進行佈署。
理所當然,因為是第一次使用CI流程,過程中遇到許多IT問題,這此也一併記錄下
來,提供各位與未來自己設置的時候參考使用,若有觀念錯誤或者建議請各位先進
不吝指教。


本系列文章大概內容如下(暫定,會修改):

使用 Gulp 實作 Asp .Net Web Application 持續整合
Using gulp to implement .Net web application continuous integration
1.Gulp 基礎教學
2.流程簡介、代入參數與修改AssemblyInfo
3.透過 Gulp:nuget-runner 進行 NuGet Package Restore
4.透過 Gulp:gulp-msbuild 進行 Build project
5.透過 Gulp:gulp-nunit-runner 進行 Unit Test
6.Gulp CI Deploy (1) - 透過Gulp:robocopy 進行 Deploy
7.Gulp CI Deploy (2) - 使用 MSDeploy (WebDeploy) 進行 Deploy
   7-2 流程說明
   7-2 前置作業 : 安裝 Web Deploy

   7-3 透過 Gulp 使用 powershell 執行MSDeploy
   7-4 問題排除
8.Gulp CI IIS Management - 使用 PowerShell 變更實體路徑
9.最終篇: Team City 設定 與 Build Scripts 撰寫

本系列文章使用的環境如下:
1.Visual Studio 2015 Community Update 3
2.Visual Studio Core
3.TeamCity
4.Nunit 3.2.1.0
5.NuGet 3.4.4.1321


介紹

流程說明
重要1. 確認於Web Server上有安裝Web deploy套件,並啟動服務。
重要2. 確認你的帳號是administrator,或者有授予權限的 user 帳號(此篇不討論,另外講)。

By :

前言

執行完 Restore, Build, 與 Test 後,接下來進行的工作是 Deploy。Deploy 實作的方法有許多
種,並沒有哪一種方法是最正確的。在這系列文章中我們使用 robocopy 與web deploy 兩個
套件完成這項工作。無論使用哪一個套件,都有些限制與前置作業需要進行。

Robocopy 使用上相當簡便,但 Team City Agent 必須"找得到"要佈署的伺服器,透過分享資
料夾與設定權限的方式,將程式複製過去後完成佈署。如同第一篇我們所顧慮的,複製期
間若沒有實行關機,進行操作的使用者可能會收到錯誤訊息,故我們將不直接將資料傳輸
到目前運作版本的資料夾內,而是使用建立新版本資料夾後,更改實體路徑的方式,降低
系統運作中發生錯誤的機會。
若有觀念錯誤或者建議請各位先進不吝指教。

本系列文章大概內容如下(暫定,會修改):

使用 Gulp 實作 Asp .Net Web Application 持續整合
Using gulp to implement .Net web application continuous integration
1.Gulp 基礎教學
2.流程簡介、代入參數與修改AssemblyInfo
3.透過 Gulp:nuget-runner 進行 NuGet Package Restore
4.透過 Gulp:gulp-msbuild 進行 Build project
5.透過 Gulp:gulp-nunit-runner 進行 Unit Test
6.Gulp CI Deploy (1) - 透過Gulp:robocopy 進行 Deploy
   6-1 Windows 前置設定作業
   6-2 Gulp 設定與進行 Deploy
7.Gulp CI Deploy (2) - 使用 MSDeploy (WebDeploy) 進行 Deploy
8.Gulp CI IIS Management - 使用 PowerShell 變更實體路徑
9.最終篇: Team City 設定 與 Build Scripts 撰寫

本系列文章使用的環境如下:
1.Visual Studio 2015 Community Update 3
2.Visual Studio Core
3.TeamCity
4.Nunit 3.2.1.0
5.NuGet 3.4.4.1321


介紹

Windows 前置設定作業
Robocopy 是屬於資料夾與資料夾快速轉移的強大工具,透過參數的設定可以依據使用者
需求進行資料轉移。在不同電腦之間使用Robocopy,必須透過電腦名稱或者IP位置,並
將網頁伺服器的資料夾開放分享後才得以進行資料傳輸。若伺服器於不同網域、IT有所
限制或安全性疑慮的情況下,可能就不能使用 Robocopy 進行 deploy。

By :

前言

陸陸續續從 Net Framework Fake CI,轉到了 Gulp CI,繼續轉往 .Net Core + Gulp CI 的,最
後仍需要整合 Front end CI 部分,一路走來有挺身的感觸。 做持續整合就像是造橋舖鐵軌蓋
捷運,工人需要處理許多基礎建設與技術,才能讓乘客舒適又快速地到達目的地,提供遊客
更好的服務品質(自動測試、自動佈署、前端避免cache處理與自動刪除舊版程式...等),讓開
發人員專注於程式開發。
當然,不免要碎碎念一下....
建構 CI 的過程中碰了不少壁,維護需要應付許多雜事,當 CI 掛掉的時候,所有人等著
維修好的感覺真的很歡樂 ,所以請善待處理 CI 的工程師(笑)。

本篇主要說明如何使用 gulp-nunit-runner 套件進行專案測試。在使用這套件必須下載 nunit
console (如本範例使用的nunit3-console.exe) 並指定路徑,透過 nunit console 進行單元測試。
若有觀念錯誤或者建議請各位先進不吝指教。

本系列文章大概內容如下(暫定,會修改):

使用 Gulp 實作 Asp .Net Web Application 持續整合
Using gulp to implement .Net web application continuous integration
1.Gulp 基礎教學
2.流程簡介、代入參數與修改AssemblyInfo
3.透過 Gulp:nuget-runner 進行 NuGet Package Restore
4.透過 Gulp:gulp-msbuild 進行 Build project
5.透過 Gulp:gulp-nunit-runner 進行 Unit Test
   5-1 下載與設置 nunit-console
   5-2 gulp 設置與執行 unit test
6.Gulp CI Deploy (1) - 透過Gulp : Robocopy 進行 Deploy
7.Gulp CI Deploy (2) - 使用 MSDeploy (WebDeploy) 進行 Deploy
8.Gulp CI IIS Management - 使用 PowerShell 變更實體路徑
9.最終篇: Team City 設定 與 Build Scripts 撰寫

本系列文章使用的環境如下:
1.Visual Studio 2015 Community Update 3
2.Visual Studio Core
3.TeamCity
4.Nunit 3.2.1.0
5.NuGet 3.4.4.1321


介紹

下載與設置 nunit-console
Step 1. 前往 Nunit 官網, 下載 Nuint.msi 並進行安裝
            Go to Nunit, download and install Nuint.msi

By :

前言

本篇主要說明如何使用gulp-msbuild套件進行專案建置,除了在建置需注意是否安裝了
.NET Tools、 .NET Framework與相關套件,也需注意msbuild指令中的設定。個人過去
對於msbuild指令中的屬性設定較不熟悉,過程中查了資料才漸漸了解相關設定(如更
新web.config內容、產生publish資料...等),若有觀念錯誤或者建議請各位先進不吝指教。

本系列文章大概內容如下(暫定,會修改):

使用 Gulp 實作 Asp .Net Web Application 持續整合
Using gulp to implement .Net web application continuous integration
1.Gulp 基礎教學
2.流程簡介、代入參數與修改AssemblyInfo
3.透過 Gulp:nuget-runner 進行 NuGet Package Restore
4.透過 Gulp:gulp-msbuild 進行 Build project
   4.1 Build project
5.透過 Gulp:gulp-nunit-runner 進行 Unit Test
6.Gulp CI Deploy (1) - 透過Gulp : Robocopy 進行 Deploy
7.Gulp CI Deploy (2) - 使用 MSDeploy (WebDeploy) 進行 Deploy
8.Gulp CI IIS Management - 使用 PowerShell 變更實體路徑
9.最終篇: Team City 設定 與 Build Scripts 撰寫

本系列文章使用的環境如下:
1.Visual Studio 2015 Community Update 3
2.Visual Studio Core
3.TeamCity
4.Nunit 3.2.1.0
5.NuGet 3.4.4.1321


介紹

Build project
Step.1 輸入以下指令安裝 gulp-msbuild 套件
npm install --save-dev gulp-msbuild

By :

前言

在幾乎完成 Gulp 實作 .Net Web Application 持續整合時,正巧遇上 Visual Studio 2015
Update 3 release,開發團隊成員也陸續進行升級。因為這次是新的專案,開發初期套件
更動較頻繁,很快發現專案進行 package restore 的過程中,出現部分套件相依錯誤或者
找不到某些套件的錯誤 (猜測是 Nuget 升級的關係),個人將進行Visual Studio升級後解
決了這個問題。而CI部分下載並更換最新的 Nuget.exe 即可正常運作。
本篇文章將簡單介紹如何透過 gulp套件執行 Nuget.exe ,替專案進行 package restore。

本系列文章大概內容如下(暫定,會修改):

使用 Gulp 實作 Asp .Net Web Application 持續整合
Using gulp to implement .Net web application continuous integration
1.Gulp 基礎教學
2.流程簡介、代入參數與修改AssemblyInfo
3.透過 Gulp:nuget-runner 進行 NuGet Package Restore
   3.1  方案架構
   3.2  Package Restore
   3.3 下載與設置 NuGet.exe
   3.4 進行 NuGet Package Restore
4.透過 Gulp:gulp-msbuild 進行 Build Project
5.透過 Gulp:gulp-nunit-runner 進行 Unit Test
6.Gulp CI Deploy (1) - 透過Gulp : Robocopy 進行 Deploy
7.Gulp CI Deploy (2) - 使用 MSDeploy (WebDeploy) 進行 Deploy
8.Gulp CI IIS Management - 使用 PowerShell 變更實體路徑
9.最終篇: Team City 設定 與 Build Scripts 撰寫

本系列文章使用的環境如下:
1.Visual Studio 2015 Community Update 3
2.Visual Studio Core
3.TeamCity
4.Nunit 3.2.1.0
5.NuGet 3.4.4.1321


介紹

方案結構
這次系列文章的方案結構如下圖所示:主要為 1 個 WebAPI Project、 1 個 MVC Project 與 2 個
Test Projects,測試專案命名規則結尾為UnitTests,方便我們後續進行測試作業。
方案結構

By :

前言

本篇介紹 實作流程 與 如何安裝與使用套件 :
  1. yrags: 取得指令中的參數,包含:
               1.佈署版本號碼 (1.0.0.1)
               2.佈署的方式 (dev, qa, staging, prd... etc.)
               3.專案名稱 (WebAPI, BO... etc)
  2. gulp-dotnet-assembly-info: 更改每個專案中的 AssemblyInfo.cs 內容

本系列文章大概內容如下(暫定,會修改):

使用 Gulp 實作 Asp .Net Web Application 持續整合
Using gulp to implement .Net web application continuous integration
1.Gulp 基礎教學
2.流程簡介、代入參數與修改AssemblyInfo
   2.1 介紹
       2.1.1 工作流程
       2.1.2 Gulp 取得參數
       2.1.3 修改 AssemblyInfo
   2.2 參考資料
3.透過 Gulp:nuget-runner 進行 NuGet Package Restore
4.透過 Gulp:gulp-msbuild 進行 Build Project
5.透過 Gulp:gulp-nunit-runner 進行 Unit Test
6.Gulp CI Deploy (1) - 透過Gulp : Robocopy 進行 Deploy
7.Gulp CI Deploy (2) - 使用 MSDeploy (WebDeploy) 進行 Deploy
8.Gulp CI IIS Management - 使用 PowerShell 變更實體路徑
9.最終篇: Team City 設定 與 Build Scripts 撰寫

本系列文章使用的環境如下:
1.Visual Studio 2015 Community Update 3
2.Visual Studio Core
3.TeamCity
4.Nunit 3.2.1.0
5.NuGet 3.4.4.1321


介紹

工作流程
整體架構為3個伺服器:Git Server、TeamCity Server 與 Web Server。
首先從 TeamCity 選擇欲佈署的 branch,Agent 會從 Git Server 擷取欲佈署 branch,接著執行指令,依序進行 restore, build, test 與 deploy 等動作,完成整個 CI 流程,如下圖所示:
workflow

By :

前言

雖然目前已經有數個持續整合的流程,且運作得相當穩定。在新的專案,Team leader 希望嘗試使用 Gulp 來進行.Net MVC Web Applicatioon 持續整合,讓我這次機會從頭到尾的撰寫持續整合流程。本系列文章使用 Gulp + Teamcity配合製作持續整合流程,中間也會詳細描述遭遇的問題與解決的方法,因為第一次嘗試,有觀念錯誤或者建議請不吝提出。

本系列文章大概內容如下(暫定,會修改):

使用 Gulp 實作 Asp .Net Web Application 持續整合
Using gulp to implement .Net web application continuous integration
1.Gulp 基礎教學
   1.1.介紹
   1.2 安裝與使用
       1.2.1 安裝與設定環境 
       1.2.2 開始使用 Gulp (Getting start with gulp)
       1.2.3 Gulp 範例程式碼
   1.3 Visual studio 2015 內使用 Gulp
   1.4 感想
   1.5 參考資料
2.流程簡介、代入參數與修改AssemblyInfo
3.透過 Gulp:nuget-runner 進行 NuGet Package Restore
4.透過 Gulp:gulp-msbuild 進行 Build Project
5.透過 Gulp:gulp-nunit-runner 進行 Unit Test
6.Gulp CI Deploy (1) - 透過Gulp : Robocopy 進行 Deploy
7.Gulp CI Deploy (2) - 使用 MSDeploy (WebDeploy) 進行 Deploy
8.Gulp CI IIS Management - 使用 PowerShell 變更實體路徑
9.最終篇: Team City 設定 與 Build Scripts 撰寫

本篇使用的環境如下:
1.Visual Studio 2015 Update 3
2.TeamCity
3.Nunit 3.2.1.0
4.NuGet 3.4.4.1321



介紹

前端任務管理工具,將前端檔案做自動化程序,程式修改後不需要重啟,gulp會自動佈署與重載瀏覽器。 Gulp 運用已經寫好的套件,加速、簡化與混淆前端開發流程。
常用的的套件如下:

gulp-watch:即時監控指定目錄下的檔案是否異動
gulp-minify-css:CSS檔案壓縮
gulp-concat:合併多個檔案
gulp-jshint:JavaScript語法檢查
gulp-uglify:JavaScript檔案壓縮

我們只簡單使用gulp-minify-css套件作為範例,以後有機會再補齊相關套件使用方法。



安裝與使用

安裝與設定環境 

Step 1.再使用 Gulp 之前,必須要先安裝nodejs,可以在https://nodejs.org/en/進行下載,安裝過程就不再贅述。

- Copyright © Duran Hsieh @ Duran 的技術冶煉廠 - Date A Live - Powered by Blogger - Designed by Johanes Djogan -