uncategorized

Hexo+VSTS+Azure Web app 的持續整合與交付

Markdown撰寫文件的方式，大多被常用在blog撰寫，不過，其實在很多地方應用上，也可以透過這種簡易方式去架設企業KM或是一般產品或是商店的簡易型網站。撇開個人blog的應用外，其他應用上難免都會有需要多人一起協同開發或是撰寫的場境，因此，基於協同合作的模式，還是必須要對這些文件做版本控管。

Markdown只是撰寫內容的模式，還是要給它套上有質感的殼，才能出去見人，所以，選用Hexo框架來包裝Markdown內容，利用Hexo框架不僅可以省去很多在開發上的困難，另外，還有很多的Themes和外掛使用，可以避免很多麻煩。
Hexo網址：https://hexo.io

Hexo

Hexo是一個快速、簡單且強大的網誌框架。Hexo使用Markdown解析的文章，並在幾秒鐘內，透過漂亮的主題產生靜態檔案。在自己電腦環境必須先具備下列幾點，才有辦法使用Heox

* Node.js
 * Git
 * 安裝hexo-cli *npm install -g hexo-cli*

其餘關於Hexo相關操作指令與設定，可以參考Hexo網站:
https://hexo.io/zh-tw/docs/index.html

Version Control

這邊不採用Visual Studio的整合性功能，而是透過SourceTree工具來操作VSTS的GIT流程，所以，把VSTS的Git Reposity同步到本機端資料夾

如果是新專案，就初始化一個Hexo專案出來，或是把原有的Hexo專案內的檔案搬過來，初始化後的預設專案資料夾如下圖，這些資料夾都是Hexo框架的原始檔案，要發行成網站還必須編譯Hexo產生Public資料夾，在這資料夾中的內容才是可以被發佈

不過，在這邊不需要先編譯好Hexo去產生Public資料夾出來，因為這個動作會在VSTS內透過自動化方式產生Public資料夾

VSTS + Azure Web App

一旦將Hexo的Source Code或是Markdown內容跟VSTS整合後，後面要將Hexo自動化的持續部署就簡單了

建立VSTS Build流程

  1. 在VSTS的Hexo專案建立一個空白的Build流程

  2. 共使用五個Task來完成Build & Deploy工作，因為，使用是非Visual Studio專案，所以，不使用MS Build或是Visual Studio Build

  3. 第一個NPM Task中，必須安裝hexo-cli，後面才可以執行Hexo的指令

  4. 第二個NPM Task中，是你如果有用到Hexo Themes內需要安裝hexo-renderer-sass，記得須要安裝此套件，如果發現Install hexo-renderer-sass會出現錯誤，則採用Rebuild node-sass，就會成功了，當然如果你不需要這個套件，這一個Task就可以不需要執行了

  5. 因為預設在VSTS的Build環境中就會安裝好Node.js，如果沒有安裝Node.js，就必須自己安裝Node.Js套件，這樣才可以直接透過Command Line去生成Hexo網站和Markdown內容

    *. 第一個Command Line Task的`Hexo clean`指令是清除舊的網站資料

*. 第二個Command Line Task是透過`Hexo generate`指令把Markdown內容轉換成網頁

開始部署

  1. Copy Publish Artifact Task是把generate出來網站檔案，拷貝一份到部署資料夾，可以用$(Build.SourcesDirectory)找到搬過去的檔案路徑的位置 
A. Copy Root : 表示要拷貝資料夾的位置，這邊是拷貝主目錄下的public資料夾
 B. Contents : 要拷貝的檔案，這邊可以指定檔案名稱或是附檔名稱，如果你要全部
    檔案以及子資料夾就設定**\*
 C. Artifact Name:目的地的目錄名
 D. Artifact Type:在VSTS內基本上都是選擇**Server**，若是，你的build是在Local也可以選擇Share folder
  1. 最後，我們透過FTP上傳方式把檔案傳到Azure Web App中，就大功告成了，預設會找不到Uploading Using FTP Task，必須到Marketplace安裝 
A. Source Path:設定檔案存放位置，$(Build.ArtifactStagingDirectory)/Markdown/為路徑位置
 B. Remote Path : 這邊必須設定/Site/wwwroot/，這樣才會放入Azure Web的資料夾內
 C. 帳號密碼 : 帳號密碼和FTP位置設定，可以在Azure Web App Portal找到相關資訊

若是想要每次更新檔案都刪除舊有檔案，Delete Old Files就必須打勾

CI & DI

要做到當SourceTree一旦Commit後，就自動跑完這些流程，只要到triggers功能這邊將CI勾選起來就可以

就可以作到自動化編譯和部署了，不過，目前這樣狀況還不是很滿意，畢竟每次部署都需要重來一次，還是要想辦法做到可以差異化部署才可以，這樣才可以加快部署的腳步

Share