[ 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 整合的簡單筆記,有什麼疑問也歡迎各位前輩提出來一起討論,謝謝~

ASP. NET Web Api 2 學習筆記

最近因為要把公司的一個 Java Web Api 的 Project,轉換成 ASP. NET Web Api 2 ,所以花了一點時間去研究一下ASP. NET Web Api 2,也特地花了錢去外面拜師求藝,就是希望可以掌握其中的精髓,以下就是對ASP. NET Web Api 2的一點心得及筆記~

一 、了解Rest

  • REST(Representational State Transfer) 表現層狀態轉換
  • Roy Thomas Fielding博士於2000年在他的博士論文中提出
  • 為了設計不同系統在網路傳遞資料而生的架構風格
  • 是一種風格而不是標準
  • 通常基於使用HTTPURI,和XML以及HTML這些現有的廣泛流行的協定和標準。

二、Restful的特色

  • 統一介面(Uniform Interface) :
  1. 以資源(Resources)為基礎 ,透過唯一的URI存取各個資源
  2. 透過Json/XML將Request/Response物件表現(Representations)出來
  • 無狀態(Stateless)  :  所有狀態都記錄在Client端,Server端不會紀錄狀態
  • 可快取(Cacheable) :回應的資料可快取,用以改善效率
  • 分層設計(Layered System) :不同層級的元件可以分工,提高擴充性
  • 客戶伺服器分離模式(Client-Server) :透過單一介面提高Client-Server互動的可見性

三、符合Restful的限制

  • 客戶伺服器分離模式(Client-Server)
  • 無狀態(Stateless)
  • 可快取(Cacheable)
  • 統一介面(Uniform Interface)
  • 分層設計(Layered System)

只要符合上述6點我們即可以說此Web Api符合Restful 風格設計(Http即是符合Restful的設計)

四、Restful Web Api的設計

  • 統一介面(Uniform Interface),來表達所使用資源    Ex :  ~/api/books
  • 將動作(Action),放在Http Method中     Ex :  Get  ~/api/books
  • 回應狀態放置於Http StatusCode 中    Ex : HTTP/1.1 201 Created

五、常用的Http Method及狀態碼

Function URI Http Method HTTP StatusCode
   新增 /books POST 201,400,401,409,500
   修改 /books/{id} PUT 204,400,401,404,409,500
   刪除 /books/{id} Delete 204,400,401,404,409,500
   查詢 /books/{id} Get 200,400,401,409,500
   清單 /books Get 200,400,401,409,500

一個好的Api設計,是可以從回傳的狀態碼,就可以看出Api成功或失敗以及失敗的原因是什麼,所以定義回傳的狀態碼是很重要的

Http Status Code 參考 : http://www.restapitutorial.com/httpstatuscodes.html

了解基本的Web Api設計風格後我們就可以來實作囉~

Step 1   在Visual Studio新增一個Web Api 2的專案

螢幕快照 2018-05-29 下午5.30.39

Step 2 新增一個ApiController => BooksController

螢幕快照 2018-05-29 下午5.35.28

Step 3 路由設定,Web Api有兩種路由設定

  1. 傳統路由:由 WebApiConfig.cs 來定義路由規則與集中管理
  2. 屬性路由:由Controller來定義Api路由

所以我們可以先打開App_Start\WebApiConfig.cs來看一下,會發現專案原本就預設把兩種路由模式都開啟了

基於設計Restful 的彈性清楚的路由結構,會比較建議使用屬性路由來設計

Step 4 於BooksController加入屬性路由設定

1. 在動作方法上加上[Route]屬性規則

2. 指定路由參數型別

3.路由參數Default Value

以上兩種會有相同的結果

4.指定路由套用順序(預設為0,數字越小表示優先權越高)

  • 先比對是否設定路由順序 ( Order ) (預設值為 0)   ex :  [Route(“api/books”)]
  • 純字串、無參數、無限制的路由 (Literal segments)  ex :  [Route(“api/books”)]
  •  有路由參數,且有套用限定詞  ex :  [Route(“api/books/{id:int}”)]
  • 有路由參數,且無套用限定詞  ex :  [Route(“api/books/{id}”)]
  • 有萬用路由參數 (Wildcard parameter) 且有套用限定詞  ex :  [Route(“{*id:int}”)]
  • 有萬用路由參數 (Wildcard parameter) 且無套用限定詞  ex :  [Route(“{*id}”)]

5.在Controller加上[RoutePrefix]

最後我們可以用PostMan實際測試一下

螢幕快照 2018-05-30 下午6.43.23

以上就是屬性路由的介紹,接下來要來實作一下也很重要的,如何去定義自己的回應內容~

Step 5  Web Api 的 Action Result,總共會有4大類

  • void : 預設回應 HTTP 204 ,不會有內容
  • IEnumerable<T> : 任意型別,預設回應 HTTP 200,自動序列化物件到 HTTP 回應主體 (自動判斷 JSON 或 XML 格式)
  • IHttpActionResult : 透過呼叫 ExecuteAsync 方法來建立 HttpResponseMessage 物件
  • HttpResponseMessage : 此為 Web API 較為底層的回應訊息物件 (可回應任意內容) 只要針對該物件的屬性寫入資料,就可以自動產生 HTTP 回應訊息

1. void => 不會有回傳內容,回傳代碼為204

用PostMan實際測試

螢幕快照 2018-05-29 下午7.11.15

2. IEnumerable<T> => 回傳任意型別,回傳代碼為200

用PostMan實際測試

螢幕快照 2018-05-30 下午6.43.23

3. IHttpActionResult => 可自定義回傳代碼及內容,較常使用

  • 可以直接呼叫System.Web.Http.Results 中的代碼類別生成回傳物件

EX :  System.Web.Http.Results.Ok(“Hello!”) => 200
System.Web.Http.Results.BadRequest(“Hello!”) => 400
System.Web.Http.Results.NotFound(“Hello!”) => 404
可參考官網的說明

用PostMan實際測試

螢幕快照 2018-05-31 下午11.49.48

4. HttpResponseMessage => 最底層物件,可回傳任意內容,有兩種建立方式

  • 透過 Request.CreateResponse 建立 HttpResponseMessage 物件

    用PostMan實際測試

    螢幕快照 2018-06-01 上午12.27.01

  • 直接建立 HttpResponseMessage 物件

    用PostMan實際測試

    螢幕快照 2018-06-01 上午12.35.48

     

以上就是Web Api設計風格,路由,回傳型態及回傳代碼的簡單介紹,因為也是初學者,所以內容如有錯誤或是需要更精進的地方也歡迎大家指教!

 

ASP. NET Web Api 2 透過 JWT 進行資料驗證

最近因專案需求開始接觸Web Api,在開發過程中為了要符合Restful中的「無狀態(Stateless)」,所以在資料驗證的部分就跟以往在Server Side判斷資料狀態的做法完全相反,必須把狀態儲存在Client端才符合Stateless,因此就開始在網路上看了一些資料,最後決定使用簡單又容易上手的JWT來做資料驗證。

JWT全名為JSON Web Token,是把資料加密後透過JSON的格式傳遞,總共分為3個部分header、payload和signature,並透過標點符號「.」將其串接起來,而這3個部分都會在前端透過Base64來解密,並且返回JSON格式的資料

  • header包含了加密演算法及token類型這兩項數據

  • payload主要是存放資料包含JWT規範的標準數據及自定義的數據

  • signature主要是存放對header 及 payload加密的簽章演算法的字符串(ex: HS256,HS512 …等)

最後再將組好的字串前面加上Bearer存放至Http Request的 header中

螢幕快照 2018-04-08 下午5.22.28

在開始時做前,可以先看一下JWT的流程圖喔~

jwt-diagram

圖片來源

  1. client 傳送帳號密碼作為驗證的資料
  2. server將帳號密碼透過自定義的key及演算法加密後組成JWT的格式回傳至client
  3. client透過base64來解密成JSON格式
  4. client send request時,在header 的 Authorization中加入bearer + token
  5. server必須使用相同的key及演算法解密驗證資料,如果沒錯即回傳client要求的資料

大致了解JWT流程之後,接下來就可以來實作囉~

step 1. 首先我們從NuGet安裝JWT的加密工具jose-jwt

螢幕快照 2018-04-11 下午5.37.11

step 2. 建立一個類別JwtAuthUtil.cs,負責產生token

螢幕快照 2018-04-11 下午5.49.29

加入此段加密產生token的程式碼

step 3. 建立一個LoginController : ApiController 帳號密碼正確的話就呼叫這個方法後回傳token

step 4. 接下來我們可以先啟動專案,用PostMan來測試一下是否有成功取得token

螢幕快照 2018-04-12 上午11.07.10

由上圖可知我們經由帳號密碼登錄已經成功取得token了~

接下來我們每個呼叫api的動作都會使用取得的token來做身份驗證,所以我們需要加入驗證token是否正確的程式碼。 由於可能會有很多隻不同功能的api,所以我們驗證的程式把它寫在request一定會經過的ActionFilter中,就不用每隻api都需要去呼叫這段程式碼,只需把不需驗證的api在裡面做排除的動作即可。

step 5. 新增一個 JwtAuthFilter 繼承 ActionFilterAttribute,並且Override OnActionExecuting這個方法,在這個方法中我們除了要驗證Token是否正確,還會判斷token時效是否過期,並且排除Login不需驗證

接著要把這隻JwtAuthFilter註冊在Global.asax.cs的Application_Start,網站啟動時才會生效

step 6. 新增一個HomeController : ApiController來簡單的測試

開啟PostMan,第一次我們測試不輸入Token,看是否會出現預期的錯誤

螢幕快照 2018-04-12 上午11.48.18

結果有出現我們自己給的Lose Token的錯誤訊息,表示Filter有成功地去驗證

接著我們輸入Token,測試是否能順利通過Filter驗證

螢幕快照 2018-04-12 上午11.54.14

如圖所示,輸入正確Token後,就成功通過Filter的驗證了~

針對Web Api使用JWT,以及使用PostMan來驗證Api的簡單介紹就到這裡,如有什麼問題也歡迎大家留言討論喔

以下附上程式碼連結供大家參考https://github.com/jimmingOu/WebApi.JWT

 

使用 TeamCity 實現 Auto Deployment ~ Asp.Net設定篇

繼上一篇設定完Asp.Net的Auto Build之後,接下來這一篇就要來介紹Deployment After Build ,Auto Deployment 這邊會透過 Visual Studio 的 Publish 來完成,所以文章的一開始我們會需要先完成 Visual Studio 的 Publish

step 1.  在設定Visual Studio Publish之前,我們必須在IIS上安裝Web Deploy的相關軟件才能設定成功,所以一開始我們先來安裝Web Deploy

透過下圖的「取得新的網頁平台元件」來安裝Web Platform

螢幕快照 2018-03-20 上午11.48.21

點選安裝即可

螢幕快照 2018-03-20 上午11.50.37

安裝完成後IIS介面就會多出一個Web Platform的選項,如下圖

螢幕快照 2018-03-20 上午11.56.03

step 2. 點選Web platform來安裝Web deploy的相關軟件

在右上方搜尋Web deploy,接著安裝下圖紅匡處的3個軟件

螢幕快照 2018-03-20 下午12.01.13

安裝完成後就會發現Server那一層多了一些選項

螢幕快照 2018-03-23 下午6.08.58

Application也多了一個項目

螢幕快照 2018-03-23 下午6.09.14

step 3 點選Sever那一層的Management Service,啟動remote connection

螢幕快照 2018-03-26 下午12.19.14

螢幕快照 2018-03-23 下午6.13.17

ps. 記得先stop才能修改喔,修改後也記得start

step 4 在Application點選IIS Manager Permission,加入Server上存在的帳號(VS Publish時要用的)

螢幕快照 2018-03-23 下午6.09.14螢幕快照 2018-03-23 下午6.15.26

step 5. 將剛剛設定的帳號jim加入網站目錄下的權限,這樣才可以對這個網站存取

螢幕快照 2018-03-26 下午1.52.39螢幕快照 2018-03-26 下午1.52.54

step 5. 記得打開Webdeploy 預設的port : 8172

螢幕快照 2018-03-26 下午12.33.24

step 7 接著我們回到Visual Studio,在專案上按右鍵 >> 發行

螢幕快照 2018-03-26 下午1.58.18

step 8 選擇IIS >> 發行

螢幕快照 2018-03-26 下午2.01.17

step 9 輸入發行相關設定後,可以驗證連線,沒問題後就可以儲存

伺服器:Server的遠端ip or DNS Name

網站名稱 :IIS上建立的網站名稱,也可使用預設的Default Web Site

使用者名稱與密碼:剛才加入Permission的帳號密碼

目的地URL : 發行後欲開啟網站的網址

螢幕快照 2018-03-26 下午2.06.53

到這邊我們已經完成從Visual Stusio發行到IIS 的設定,大家也可以發行看看是否可以成功把網站Deploy 到IIS

接下來TeamCity就準備透過剛剛的設定來幫我們Auto Deploy Web Site

step 10 我們回到TeamCity並且進入Build Step的設定畫面,點選Edit

螢幕快照 2018-03-26 下午2.19.26

step 11 在最下方的Command line parameters輸入以下內容

螢幕快照 2018-03-26 下午2.18.01

PS. PublishProfile=”CustomProfile” >> CustomerProfile 是剛才我們在建立玩發行設定檔後會產生的一隻檔案CustomerProfile.pubxml,Teamcity會透過這個設定檔來幫我們Deploy,所以這隻檔案也記得要Push到Git Server上面喔~

螢幕快照 2018-03-26 下午2.25.04

最後就可以在TeamCity上測試是否可以成功Deploy囉~

PS. 最後筆者在Deploy的時候有遇到權限不足的錯誤

螢幕快照 2018-03-26 下午2.17.31

這邊有兩種解決方式

  1. 在CustomerProfile.pubxml加入密碼<Password>myPassword</Password>

螢幕快照 2018-03-26 下午2.35.04

2 .在Build Step 的 Command line parameters加入 /P:Password=myPassword

螢幕快照 2018-03-26 下午2.37.19

以上就是TeamCity 上 Asp.net to IIS Auto Build的簡單介紹,過程如有什麼錯誤也請大家多多指教~謝謝~~~

 

使用 TeamCity 實現 Auto Build ~ Asp.Net設定篇

歷經一段時間終於把TeamCity Auto Build的部分告一段落,但是都是以Java Project來當範例,那Asp.Net有機會可以透過TeamCity來實現Auto Build嗎?答案是當然可以~接下來就為大家簡單的介紹Asp.Net在TeamCity上面的Auto Build

前情提要:

因為TeamCity會透過MSBuildTools來執行,所以如果電腦上面沒有MSBuildTools的話TeamCity Build Agent 就會有 「Unmet requirements: MSBuildTools12.0_x86_Path 」這個錯誤訊息,最快的方式建議大家可以在TeamCity的Server裝Visual Studio就可以解決這個問題囉~(Ps. 建議安裝與開發環境相同版本的Visual Studio,不然可能會有版本不相容的問題出現)

step 1. 我們一樣到Administrator下,點選Create Project

螢幕快照 2018-03-16 下午4.35.59

step 2. 接著選取Project的Repository

螢幕快照 2018-03-16 下午4.38.26

step 3. 設定好Project後會導至Build Step的頁面,系統一樣會幫我們自動偵測Build Steps,這次只要選擇Visual Studio(sln),接著點選Use Select螢幕快照 2018-03-16 下午4.41.24

step 4. 最後記得點選Edit進去確認,預設的Visual Studio的版本是否跟TeamCity Server 安裝的一樣,否則可能會Build Faild

螢幕快照 2018-03-17 下午11.26.22

螢幕快照 2018-03-17 下午11.24.44

確認完成點選Save,Auto Build的部分就完成囉~

最後Java的部分可以Auto Deployment到Tomcat,JBoss….等Server上,相對的Asp.Net的部分也可以Auto Deployment 到IIS上面,下一篇在跟大家介紹一下如何在TeamCity實作Auto Deployment~

使用 TeamCity 實現 Auto Build ~ Github設定篇

在介紹完TeamCity與BitBucket的AutoBuild之後,因為也很常用Github來作版本控管,所以也稍微研究一下Github的設定,其實跟BitBucket大同小異,接下來就簡單地跟大家介紹一下,TeamCity與Github之間的設定~

step 1. 首先我們在TeamCity上,Crete Project 選擇 From Github,這時候會跳出要求我們輸入Client ID and Client Secret 的視窗,我們就先停留在這個頁面

螢幕快照 2018-02-21 上午10.36.30

螢幕快照 2018-02-21 上午10.45.32

step 2.  接著我們需要到Github產生Client ID and Client Secret,首先我們先登入Github然後選擇右上角的Settings

螢幕快照 2018-02-21 上午10.47.33

step 3. 接著選擇Developer settings

螢幕快照 2018-02-21 上午10.47.46

step 4. 選擇OAuth Apps 然後點選 New OAuth App

螢幕快照 2018-02-21 上午10.47.57

step 5. 輸入自己定義的Application name,Homepage URL及 Authorization callback URL則可以到我們「step 1.」TeamCity 彈出的視窗上複製,填好相關資訊後就可以Register application

螢幕快照 2018-02-21 上午10.48.42

step 6. 將Github產生的Client ID and Client Secret填入TeamCity然後點選Save

螢幕快照 2018-02-21 上午11.08.13

螢幕快照 2018-02-21 上午10.45.32

step 7. 在TeamCity上點選Sign in to GitHub,之後TeamCity就會載入Github上的專案,接著就可以選擇自己想要AutoBuild的專案了

螢幕快照 2018-02-21 上午11.10.54

螢幕快照 2018-02-21 上午11.15.25

到這邊TeamCity及Github的相關設定已經完成,剩下的步驟跟BitBucket一樣,大家可以參考一下前幾篇文章,最後大家應該都還記得在BitBucket上有一個Webhook的功能可以在每次我們Push後及時通知TeamCity幫我們Build Project,當然Guthub上也有類似的功能~

接下來就跟大家介紹如何在Guthub上即時通知TeamCity Build Project

step 1. 我們先在Github上選擇我們要AutoBuild的專案,接著點選專案的Settings,然後點選Integration & services

ps. 這邊也可以使用Webhook的方式,設定上跟BitBucket差不多,所以這邊介紹的是GitHub另外提供的Integration & services,其實Integration & services也是Webhook一樣的概念,只是把一長串的Url拆成輸入介面給使用者用輸入的方式去做設定,這樣其實也增加了一些設定上的便利性

螢幕快照 2018-02-21 上午11.26.17

step 2. 點選Add services,然後選擇TeamCity

螢幕快照 2018-02-21 上午11.33.40

step 3. 接著輸入相關設定後點選Add service

Base url:TeamCity Server的網址

Build type:專案在TeamCity上的build configuration Id(參考此篇step 2

Branches:如果有指定的分之才填沒有的話就勾選 Full branch ref

Username:TeamCity上的使用者名稱

Password :TeamCity上的使用者密碼

螢幕快照 2018-02-21 上午11.44.04

 

到這邊Github上的即時通知已經完成設定接著就可以享受AutoBuild帶來的便利囉~~~以上就提供給大家參考,如有不對的地方也請大家多多指教~

使用 TeamCity 實現 Auto Build ~~進階設定篇

繼上一篇針對Bitbucket與TeamCity的設定後,我們大致上已經完成了Project整合的部分,接下來這一篇會來實作算是比較進階的設定

  • GitServer即時通知TeamCity Build Project
  • TeamCity Auto Build完成之後,幫我們Auto Deployment到 TomCat
  • 信件通知

Part 1. GitServer即時通知TeamCity Build Project 

我們這邊依樣事先用BitBucket來做測試,而我們會使用到的設定就是Webhook(意指鉤子),我們需要透過這個鉤子去通知TeamCity有新的Commit,接著我們就開始來設定

step 1. 我們一樣先登錄我們BitBucket的網頁,點選專案下面的設定,接著點選Webhooks >> Add Webhook

螢幕快照 2018-02-04 下午8.13.27

step 2. 接下來的畫面我們需要輸入TeamCity提供給外部Server呼叫的Url 格式範例,更多的Api可以參考官網的介紹

如下圖

  • <user name> : Teamcity 的帳號
  • <user password> : Teamcity 的密碼
  • <server address> : Teamcity 的url
  • <build configuration Id>: Teamcity 專案build id

範例如下

其中<build configuration Id> 大家可已到Teamcity Web ,Project > build > General Setting就可以看到build configuration Id

螢幕快照 2018-02-04 下午8.37.17

輸入完Url後我們就可以點選Save,這時候我們可以試著Push Code 到 Bitbucket ,Bitbucket就會透過Webhook的設定即時通知TeamCity程式碼有被修改,TeamCity就會自動當我們執行該Project的Build Agent,這樣的設定是不是比原本透過TeamCity本身的Trigger聰明多了呢?!

Part 2. TeamCity Auto Build完成之後,幫我們Auto Deployment到 TomCat

這個功能應該可以說是我們整合的最後一步,就是TeamCity可以幫我們自動Deploy,而這邊我們先用Tomcat來做設定

step 1. 我們先到TeamCity >> Project >> Build Step的設定,點選Add Build Step

螢幕快照 2018-02-04 下午8.58.42

step 2. 接著會到Build Step的設定頁面

  1. Runner Type : 選擇Container Depolyer
  2. Target : Tomcat Server 的 url
  3. Container Type : 選擇Tomcat的版本
  4. username : tomcat 的帳號(必須要擁有manager-script 的角色)
  5. Password : tomcat 的密碼
  6. Path to war archive : build完成後,產生的War檔位置

輸入完相關設定後就可以點選Save

螢幕快照 2018-02-04 下午9.01.02

最後我們就可以開始測試囉~~~

ps. 因為目前TeamCity只提供tomcat的container,其他的例如jboss,spring boot等…專案我們也可以透過Runner Type 選擇Command Line or SSH Upload的方式來達到Auto Deploy的目的喔!

part 3. TeamCity mail 通知

TamCity 可以幫我們Auto Build , Auto Deploy那可不可以寄信通知Build成功或失敗呢?當然是可以的喔~最後我們就來設定信件通知吧!!!

step 1. 首先我們先到Administrator的Email Notifier的設定

螢幕快照 2018-02-04 下午9.27.36

smtp server這邊是用Gmail的來設定,當然也可以自己架設一個smtp server(比較麻煩XD),我們只要準備一個gmail 帳號

  • SMTP host : smtp.gmail.com
  • SMTP port : 587
  • Send email messages from : gmail 信箱
  • SMTP login : gmail 信箱
  • SMTP password : gmail密碼
  • SMTP connection : StartTLS

設定完我們可以點選Test connection測試一下設定是否可以成功寄信喔!如果測試沒問題點選Save,到這邊我們已經完成了smtp Server的設定

step 2. 接著我們要針對使用者來設定各自的寄信規則,我們先到Teamcity的使用者設定>>Notification Rules>>Add Rules

螢幕快照 2018-02-04 下午9.43.21

接著選擇該使用者需要收到通知的專案,以及通知的狀況,選擇之後點選Save

螢幕快照 2018-02-04 下午9.47.46

最後大家就可以收到TeamCity的信件通知囉~~如此一來我們Push上去的Code就有一套很好的機制幫我們Build and Deploy如果有錯誤也可以即時寄信通知我們,這樣是不是讓我們在專案的開發上可以更得心應手呢?!

TeamCity的介紹到這一篇大概也要告一個段落了,如果有什麼錯誤的地方也請各位前輩多多指教,當然還有許多更進階的功能可以使用,如果之後有用到什麼好用的功能再上來跟大家分享喔~~~

 

使用 TeamCity 實現 Auto Build ~ BitBucket設定篇

上一篇安裝好TeamCity Server後,我們就可以來實作Project整合的部分了,而TeamCity也支援常見的Git Server( BitBucket,Github ………. ),在這篇實作的部分我是選擇BitBucket來當作我的Git Server,接下來就進入TeamCity 與 BitBucket設定的部分

step 1. 我們先登入TeamCity Web 接著點選右上角的Administrator 接著點選 Create Project

螢幕快照 2018-01-21 下午10.36.47

step 2. 接著我們選擇 From BitBucket Cloud

螢幕快照 2018-01-21 下午10.41.55

step 3. 因為還設定過BitBucket的Connection所以系統會自動幫我們導向設定Connection的頁面

螢幕快照 2018-01-22 上午10.28.45

step 4. 因為需要BitBucket的 key and secret來驗證連線,所以我們先登入BitBucket來取得key and secret ,我們點選BitBucket DashBoard左下角的BitBucket Setting

螢幕快照 2018-01-21 下午10.50.10

step 5. 接著點選OAuth

螢幕快照 2018-01-21 下午10.54.34

step 5. 點選 Add consumer

螢幕快照 2018-01-21 下午10.55.05

step 6. 填入相關資訊,選擇所需權限後點選save

ps. Callback url ,url ,Permissions可以照TeamCity Connection設定畫面上面的黃底提示填入即可

螢幕快照 2018-01-21 下午11.05.52

step 7. 回到OAuth的頁面後我們就可以看到Key and Secret

螢幕快照 2018-01-21 下午11.13.33

step 8.接著把Key and Secret填入TeamCity Connection 設定的頁面,然後點選Save

螢幕快照 2018-01-21 下午10.42.48

step 9. 接著就會回到Create Project的畫面,下面會出現Sign in to BitBucket的按鈕點選它

螢幕快照 2018-01-22 上午10.33.28

step 10. 登入BitBucket後就會出現BitBucket確認是否授權給TeamCity的頁面,我們點選Grant Access

螢幕快照 2018-01-22 上午10.33.54

step 11. 畫面回到Create Project會發現我們BitBucket上面的Project已經被載入了,接著我們就選擇我們要Build的專案

螢幕快照 2018-01-27 下午10.18.23

step 12. 接著會出現以下畫面,輸入密碼接著點選Proceed

螢幕快照 2018-01-27 下午10.32.09

step 13. 接著會出現以下畫面,點選Proceed

螢幕快照 2018-01-27 下午10.38.54

step 14.  接下來TeamCity會自動配置Build step,我們可以直接選擇TeamCity幫我們配置好的,當然也可以自己手動設定,設定好之後Use select

螢幕快照 2018-01-27 下午10.48.19

step 15. 接下來在以下畫面我們就可以看到有一個Bulid step,這時候我們可以點選上方的run執行看看

螢幕快照 2018-01-28 上午2.18.41

step 16. 接著我們可以點選上方Project選取自己專案接著點選Build,就可以看到Project Build成功或失敗囉~~~

螢幕快照 2018-01-28 上午2.38.35 螢幕快照 2018-01-28 上午2.38.55

step 17. 最後大家應該都會覺得,每一次Push Code都要自己來點選Run很不聰明,而TeamCity這邊也有提供trigger的功能可以去設定時間固定去判斷GitServer是否有新的Commit產生 ,依照下圖進入設定頁面

PS .TeamCity已經幫我們預設會有trigger了,所以我們只需要調整我們的時間即可

螢幕快照 2018-01-28 上午2.50.01

step 18. 可以選擇Globle或是選擇該專案自己的設定,這邊我們把時間設定成5秒方便測試,修改完儲存就可以囉~~這時候我們Push Code後就可以看到TeamCity會自動幫我們Build Code了~

螢幕快照 2018-01-28 上午2.50.35

PS.  下圖提供Globle的時間設定~

螢幕快照 2018-01-28 上午3.15.36

以上我們已經完成了Auto Build的設定了~但對我來說還是有美中不足的地方

例如:

  • 需要用Trigger去偵測是否有新的Commit,可否讓GitServer即時通知呢?
  • Auto Build完成之後,可以幫我們Auto Deployment到 Web Server呢?

下一篇我們就會開始實作以上兩個主題,讓我們的整合可以達到最大的效益~~

APPX 時賦科技介紹的CI整合真方便
一起獲勝吧 !

使用 TeamCity 實現 Auto Build ~ 安裝篇

因為工作上專案需求所以有機會接觸到 Java 專案整合的部分,也因此開始搜尋相關資料,最後決定使用TeamCity來實現 Java 整合,而我們想要達成的目標有下列幾項

  1. 當我們 push 至 git server 後,git server 去通知TeamCity
  2. TeamCity接收到通知後可以自動下載project 並且 build 該project
  3. 把打包好的project自動deploy到tomcat server
  4. 最後在寄信通知使用者 build 成功或是失敗

而此篇先簡單介紹TeamCity安裝的部分,如果有什麼地方有問題也請大家不吝指教

安裝環境

  • Windows 10
  • Jdk 1.8
  • TeamCity 2017.2.1( 下載連結 )
  • MS SQL 2014

安裝步驟

step 1. 開起安裝檔並且點選Next

螢幕快照 2018-01-19 下午4.27.51

step 2. 接下來幾個步驟都可以直接按下一步,安裝完之後就會出現輸入TeamCity Server 要走的 port(*可依個人習慣) 輸入完點選 next

螢幕快照 2018-01-19 下午4.35.22

step 3. 設定Build Agent(*用來執行project) ,在這個階段我們使用系統預設的可以直接點選 save

螢幕快照 2018-01-19 下午4.36.40

step 4. 接著要設定Server 及agent 的Service 帳號,在這邊我們都點選第一個就好,然後點選next

螢幕快照 2018-01-19 下午4.39.03 螢幕快照 2018-01-19 下午4.39.19

step 5.選擇在完成安裝後要啟動的Server

螢幕快照 2018-01-19 下午4.43.45

step 6. 最後點選 Finish 完成安裝

螢幕快照 2018-01-19 下午4.54.45

step 7. 在瀏覽器輸入 http://localhost:9998 >> 點選 Proceed

螢幕快照 2018-01-19 下午5.00.50

step 8. database type 的部分這邊選擇MS SQL Server,選擇之後會出現紅匡中的錯誤訊息(這是正常的因為沒有MS SQL Server JDBC的driver)

螢幕快照 2018-01-19 下午5.04.48

step 9. 我們到微軟官網下載MS SQL Server JDBC( 下載連結 ) 並且把

  • sqljdbc.jar複製到C:\ProgramData\JetBrains\TeamCity\lib\jdbc

PS. ProgramData >> 是隱藏項目,沒看到的話記得要去資料夾選項設定

螢幕快照 2018-01-19 下午5.15.31

step 10. 點選Refresh JDBC drivera ,這個時候就會出現成功載入JDBC的訊息

螢幕快照 2018-01-19 下午5.26.03

step 11.接下來我們需要到MS SQL新增一個TeamCity的資料庫

螢幕快照 2018-01-19 下午5.28.29

step 12. 接著填入資料後點選Procced就會開始建立資料庫的Table

PS. 在這邊還有可能會遇到無法連接到資料庫的問題 ,可以優先至SQL Server的組態管理員檢查TCP/IP是否有Enable

螢幕快照 2018-01-20 下午11.15.06

step 13. 建立好資料庫之後會自動導向這一個頁面>>紅匡處打勾>>點選contiune

螢幕快照 2018-01-20 下午10.09.26

step 14. 這時候就會進入要求建立一組帳號密碼的頁面,輸入完成點選creat acount

螢幕快照 2018-01-20 下午11.21.35

step 15. 最後會進入Team City Web的帳號設定頁面,到這裡Team City Server的安裝已完成

螢幕快照 2018-01-20 下午11.22.54

其實Team City的安裝並不會太複雜,只要一步一步的設定基本上是不會遇到什麼問題的,如果有遇到安裝上的問題也歡迎大家提出來一起討論

下一篇將會接著設定TeamCity 與 Git Server的連動~~~

Java Struts Web 初體驗~~~

近期因為負責的案子大多都是Java Web,所以也開始接觸了一些Java 的開源框架,也慢慢對Java有了更進一步的了解,而今天要介紹的就是Java Struts,Java Struts是一種走(MVC)架構的框架,跟之前學習過的Spring MVC在應用以及設定上其實有許多相似的地方,接下來就簡單的介紹一下Struts的Hello Worlds!!以及簡單的表單傳送~~~

  • 開發工具 : Eclipse Java Neon.3 Release (4.6.3)
  • Struts版本 : 1.3.10
  • Server : Tomcat 9.0

step 1. 先下載Structs1.3.10 ( https://struts.apache.org/download.cgi )

step 2. 接著我們先從Eclipse新增一個Dynamic Web Project

struts-1

step 3. 把剛才下載好的Struts 1.3.10( \struts-1.3.10-all\struts-1.3.10\lib ) 裡面的jar檔加入參考

  • 在專案folder上面點右,選擇Bulid Path >> Add Library

struts-2

  •  選擇User Libraries點選Next,將( \struts-1.3.10-all\struts-1.3.10\lib ) 裡面的jar檔加入

struts-3

struts-4

step 4. 到剛才下載好的Struts1.3.10,找到 struts-blank-1.3.10.war ( struts-1.3.10\apps ) 將副檔名改成*.zip 並且解壓縮 ,將裡面的檔案複製到專案的WebContent下面

struts-5

這個是一個空白的範例~可以直接使用~裡面包含了核心設定檔struts-config.xml及web.xml透過這個可以加速我們Web App的開發,這時候我們可以直接用Tomcat執行此專案如果出現下圖所示的畫面代表Struts基本設定已經成功了~

struts-6

step 5. 接下來我們打開web.xml

從web.xml中的<servlet>設定我們可以看到幾個重點

  • 負責Controller工作的是ActionServlet,理論上只要是Client Request都會經過ActionServlet來發送
  • ActionServlet會去讀取struts-config.xml這隻設定檔其中包含了Sturts的一些相關設定
  • servlet-mapping設定,ActionServlet 會去處理所有來自*.do的Request

這些就是web.xml的幾個較為重要的設定~~~

step 6. 打開struts-config.xml,顧名思義這個檔案就是Struts的核心所在了

在struts-config.xml中,透過 action-mappings 的設定,來達成Client Request與Server的溝通

  • action-mappings : 設定Request與Server Action的對應關係,path=”Hello” and  type=”com.appx.action.HelloAction”  時,當我們的Request是Hello發出時,就會使用HelloAction來處理這個Request,而forward的設定則是HelloAction執行結速後要導向的對象,一個action中可以有多個forward對象,在action中將會去對應forward上的name來尋找並返回對應ActionForward 物件,ActionServlet會根據action傳回的ActionForward來將請求轉發至指定的對象。
  • form-bean : 設定View(表單),與對應的Class,當表單被送到Server時會將表單的name,去對應form-bean是否有相同的name,如果有找到相同的name,就會將值注入該form-bean對應的Class

step 7. 由action-mappings 的設定我們可以知道,必須要有一個HelloAction來處理Hello發出的請求,而HelloAction是必須繼承org.apache.struts.action.Action且覆寫execute()

如此一來~只要是Hello發出的請求,就都會交由HelloAction來處理,當我們處理完這個Action要做的事之後,必須呼叫ActionMapping的物件,ActionMapping就會去struts-config.xml尋找是否有這個forward對象,如果有找到,Servlet就使用回傳的ActionForward將Request轉發至指定的對象。

因為我們設定的<forward name=”helloUser” path=”/pages/Hello.jsp” />因此我們在相對應得路徑中加入Hello.jsp的頁面

然後就可以啟動Server,http://localhost:8080/${web.xml的display-name}/Hello.do,就可以看到以下畫面

struts-7

這樣我們就完成了Struts 的HelloWorld!!!

另外Struts中還有一個ActionForm的應用,ActionForm可以把我們的表單以物件來表示,所以當我們在設計物件時必須繼承org.apache.struts.action.ActionForm,並且要提供getter及setter的方法,在ActionForm產生後會去與相對應的物件做比對,如果有相同的參數就會用setter將數值注入其中,以下提供簡單的ActionForm操作例子~~~

step 1. 我們先來建立表的物件 UserForm.java

ps.要記得繼承org.apache.struts.action.ActionForm才會有效果喔~~~

step 2. 在struts-config.xml加入<form-bean>設定表單名稱以及與剛剛建立的UserForm對應,並且在action中加入對應的表單名稱

step 3. 接著處理Login的Action  LoginAction.java

經過設定,我們的表單會透過ActionForm傳進來,在這裡我們還需要把ActionForm轉型成UserForm才可以使用UserForm的getter方法,經過簡單的帳號密碼驗證,我們透過forward的方式導向登入成功就導向[helloUser]的頁面,失敗就回到登入頁面並顯示登入敗的訊息~~

step 4. 最後我們要加上登入表單的頁面 LoginForm.jsp

最後我們就可以啟動Server來測是囉~~

struts-8

struts-9

到這邊ActionForm的基本應用也告段落了~~~

最後附上程式連結供大家參考喔~https://github.com/jimmingOu/StrutsWebDemo/