###### tags: `Workshop` `Azure DevOps` `App Service` `MTC 2021`
# Hands-on : Azure DevOps Service (.NET Core Web)
In this workshop you would learn how to accerlate developing .NET core web on Azure App Service.

[TOC]
## 尚未擁有 Azure DevOps Service 組織的使用者
- 參考 [初次使用 Azure DevOps Service，申請教學](https://hackmd.io/@mtcazuredev/H1V508unO) 建立新的組織
- 如需申請免費試用，請參考 [Azure DevOps Service 免費試用申請](https://hackmd.io/@mtcazuredev/HkaaHy2AO)
## 連結線有專案及基本設定
- 進入 [Azure DevOps Service](https://dev.azure.com/)
- 登入先前註冊的帳號
- 查看左下角 **[Organization Setting]**
- **[User]** 可以添加組織成員
- **[Permission]** > **[Project Collection Admin]** > **[Add]** 授權此成員可建立 project 的權限
- 點選 **[Billing]**，選擇 **[Set up billing]**，選擇你要扣款的 Azure 訂閱 (免費試用/MSDN 訂閱不可使用)
- 將 **[Access Level]** 更改為 Stakeholder

**<span style="color:blue">-------------------------------------------- 實作 10 分鐘 -------------------------------------------- </span>**
## 1/ 需求及專案管理
### 建立以 Scrum 為範本的新專案
- 建立新專案：**[首頁](https://dev.azure.com)** > **[+ New Project]**
- 填寫 Project Name，Visibility 選擇 **[Private]**，點開 **[Advanced]**，Work item process 選擇 **[Scrum]**
### 邀請使用者加入 Project
- 點選右上角的 [invite]
- 新增人員完整 email
- 被加入的人員將會收到 Azure DevOps 的邀請信，首次需透過信中的驗證連結加入
- 畫面下方會顯示成功添加使用者訊息
- 或在 Members 的欄位中會看到新添加的人員
### Feature 管理
- 在左方的 Boards 底下，點選 **[Work items]** 後選取 **[+ New Work Item]**，然後選擇 **[Feature]**
- 填寫 Feature 資訊，參考簡報中的專案，將標題填入 `公車動態`，可自行填寫底下欄位，完成後點選 [Save]
- 點選 **[Back to Work Items]**
- 再新增一個 Feature
- 填寫 `班次時刻表`
- 點選左邊欄位 Boards 下的 **[Boards]**，將右上角的 **[Backlog items]** 切換到 **[Features]**
- 可以看到剛剛新增的兩則功能
### Product Backlog Items (PBI) 管理
- 在 `公車動態` 的 Feature 中選取 **[...]**，選擇 **[+ Add Product Backlog Item]**
- 填寫 `即時動態查詢`
- 依照上步驟再填入`出門提醒`
- 在 `班次時刻表` 的 Featue 中依據先前步驟分別新增 PBI `時刻表查詢`和 `搭車提醒`
- 填寫完成
**<span style="color:blue">-------------------------------------------- 實作 15 分鐘 -------------------------------------------- </span>**
### Sprint 及 task 規劃
- 選擇左邊欄位中的 **[Backlogs]**
- 透過 **[+ New Work Item]** 再新增一個`DevOps Workshop` 的 PBI
- 點選右上角的拉霸圖示，選擇 Side Pane 下的 **[Planning]**

- 拖曳 `即時動態查詢` 這個 PBI 到右邊的 **[Sprint 1]**
- 點選 **[Sprint 1]** 跳轉到 Sprint 的頁面
- 點選頁面上方 **[Taskboard]**
- 可以看到變成敏捷看板的視角，並且是在 Sprint 1 這個週期中
- 在 `DevOps Workshop` PBI 的欄位點選 **[+]** 來新增以下 :
- `修改README`
- `練習 Azure Board`
- 在 `即時動態查詢` PBI 的欄位點選 **[+]** 來新增以下 task :
- `整合公車動態即時資訊API`
- `查詢欄位`
- `動態資訊呈現頁面`
- 完成填寫
- 將 `練習 Azure Board` 拖曳到 **[In Progress]** 的欄位
- 完成狀態的變更
### 工單搜索功能
- 點選左方欄位 Boards 下的 **[Queries]**，然後點選 **[+ New query]**
- 在 Work Item Type 的地方，Value 選擇 **[Task]**
- 在 State 的地方，Value 選擇 **[In Progress]**
- 點選 **[Run query]**
- 執行後的結果會顯示目前在 project 中哪些 task 狀態為 in progress
- 點選 **[Save query]**
- 完成欄位填寫，將 **[Floder]** 選擇到 **[Shared Queries]**，點選 **[OK]** 即可儲存

**<span style="color:blue">-------------------------------------------- 實作 15 分鐘 -------------------------------------------- </span>**
## 2/ 版本控制
### 匯入範例程式碼
- 點選左方欄位 Repo 底下的 **[Files]**，點選頁面中的 **[Import]**
- 複製以下連結貼到 **[Clone URL]** 中

    https://github.com/huier23/AspNetCoreSample.git

- 完成後點選 **[Import]**
- 顯示正在進行匯入
- 完成後會看到成功畫面並且跳轉到匯入的程式碼

### Pull Request 練習
- 點選頁面上方的 **[master]**，點選 **[+ New Branch]**
- 建立一個 `dev` 分支，點選 **[create]**
- 建立完成後會看到上方分支已經切換到 `dev`
- 修改 **[README]** 檔案
- 點選 **[Edit]** 可以開始修改
- 在文件中最下方填入任意文字，這邊示範填入 `## pull request teset`，然後點選右上角 **[commit]**
- 會跳出 Commit 視窗，點選 **[Search work items by ID or title]**，尋找到先前建立的 task `修改 README`，完成後點選下方的 **[Commit]**
- 點選左方選單 Repos 下的的 **[Commits]** 可以查看程式碼的歷史 commit 紀錄
- 點選左方選單 Repos 下的的 **[Branches]** 可以查看程式碼的分支紀錄
- 點選左方選單 Repos 下的的 **[Pull Request]**，點選上方通知訊息條的 **[Create a pull request]**
- 確認是從 `dev` 合併到 `master`
- 在 **[Reviewers]** 的欄位搜尋並選擇自己
- 點選 **[Create]**
- 接著會跳轉到 pull request 的 review 畫面，點選右上角的 **[Approve]**
- 點選旁邊的 **[Complete]**
- 確認 **[Delete dev after merging]** 是勾選狀態，並點選下方的 **[Complete merge]**
- 完成畫面
- 回到 **[Files]**，查看 **[README]**
- 在 master 上，已經更新為剛剛的修改的版本

**<span style="color:blue">-------------------------------------------- 實作 20 分鐘 -------------------------------------------- </span>**
## 3/ 建立 Build Pipeline
### 建立程式碼的第一條 Build Pipeline
- 選擇左方選單列中 Pipelines 下的 **[Pipelines]**，點選 **[Create Pipeline]**
- 選擇畫面下方說明文字中的 **[Use the classic editor]**
- 選擇程式碼來源及分支，這裡無須特別操作，直接可以選擇 Continue
- 找到 ASP.NET 的 pipeline task，點選 **[Apply]**
- 在畫面右方的 [**Agent Specification]** 選擇 **[Windows-2019]**
- 點選 **[Use NuGet 4.4.1]** task 將 **[Version of NuGet.exe to install]** 更改為 `5.x`
- 點選 **[Test Assemblies]** task 將 **[Test files]** 欄位的內容更改以下

    **\$(BuildConfiguration)\**\*UnitTest.dll
    !**\obj\**

- 選擇上方列表的 **[Triggers]** tab，將畫面右方的 [Enable continuous integration] 打勾
- 完成後點選上方的 **[Save & queue]** ，選擇 **[Save & queue]** 後在跳出的視窗點選 **[Save and run]**

### 紀錄 Bug
- 執行到一半會發現顯示錯誤
- 點選上方 **[Tests]** 的 tab，點選下方 **[IndexPageTest]** 後會看到 Error message 顯示為： *`Assert.AreEqual failed. Expected:<DevOps Workshop>. Actual:<Success!>.`*
- 將錯誤訊息是窗關閉，點選頁面中 **[Bug]** 的按鈕，選擇 **[Create Bug]**
- 詳細錯誤訊息已自動帶入，點選 Related Work 欄位中的 **[+ Add link]** 並選擇 **[Existing item]**
- Link Type 選擇 **[Parent]**，Work items to link 選擇剛剛建立的 **[DevOps Workshop]** PBI
- 點選 **[Save & Close]**
- 點選左方選單的 **[Sprints]** 在剛剛建立的 Bug 那欄點選 **[+]**
- 填入標題 `更正標題為 DevOps Workshop`
- 點選剛剛建立的 task ，將以下資訊填寫到 Description，然後點選 **[Save & Close]**

    修改 Controllers / HomeController.cs 將標題修正

### 修復 Bug
- 回到 Files ，點選到 *AspNetCore.Sample.Web* > *Controllers* > *HomeController.cs*

- 修改第 13 行，將原本的 "Success!" 修改為 "DevOps Workshop"

            public IActionResult Index()
            {
                ViewData["Message"] = "DevOps Workshop";

                return View();
            }

- 修改完成後點選右上方的 Commit
- **[Work items to link]** 欄位選擇先前建立的 `更正標題為 DevOps Workshop` task
- 此時回到 **[Pipeline]** 發現 pipeline 已自動執行，點選 pipeline
- 可看到有兩次執行紀錄，點選最新一次的執行紀錄
- 可以查第二次執行的內容，點選 **[Agent Job]**
- 可以查看各個 task 的 Log 細節
**<span style="color:blue">-------------------------------------------- 實作 30 分鐘 -------------------------------------------- </span>**
## 4/ 建立 Azure 上 App Service 資源
- 連結到 **[Azure Portal](https://portal.azure.com/)**
- 左方的選單列表，找到 App Service 並點選
- 點選 **[+ Create]**
- 在 Resource Group 的欄位點選 **[+ Create New]**，自行填入要命名的資源群組名稱
- 將其餘資訊填寫完成
- **Publish**: Code
- **Runtime** Stack : .NET Core 3.1 (LTS)
- **Region** : Southeast Asia
- Windows Plan (Southeast Asia) 的欄位點選 **[Create new]**，並輸入自行定義的名稱
- Sku and size 欄位點選 **[Change size]**
- 在跳出的視窗選擇 **[Production]**，規格選擇 **[S1]**
- 填選完成後點選 **[Review + Create]**
- 接下來會進入 review 的頁面，點選 **[Create]**
- 建立完成後會挑轉到資源正在建立中的頁面，先不要關閉
### 利用 App Service 建立多個部屬環境
- 建立完成後會顯示資源已建立完成，點選 **[Go to resource]**
- 點選 URL
- 確認網頁可以正常顯示
- 選擇 App Service 左方選單中 Deployment 區塊中的 **[Deployment Slots]**
- 點選上方的 [Add Slot]，將 slot 的名稱設定為 `dev`，點選 **[Add]** 添加
- 出現 *Successfully created slot 'dev'* 的訊息後，點選 **[Close]**
**<span style="color:blue">-------------------------------------------- 實作 20 分鐘 -------------------------------------------- </span>**
## 5/ 建立 Release Pipeline
### Dev 環境
- 在左方選單列選擇 Pipelines 下的 **[Release]**，進入後點選 **[New Pipeline]**
- 找到 **[Azure App Service deplotment]**，點選 **[Apply]**
- 將 Stage name 更改為 `Dev`，完成後點選 **[X]** 關閉視窗
- 選擇 `Dev` stage 內的 **[1 job, 1 task]**
- Azure Subscription 的部分選擇建立 App Service 資源時所選擇的訂閱，選擇完成後點選藍色的 **[Authorize]** 按鈕
- 等待授權完成，在 App Service name 找到剛剛建立的 App Serivce 資源
- 點選 **[Deploy Azure App Service]** 這個 task，將右邊欄位中的 **[Deploy to Slot or App Service Environment]** 打勾，Reource Group 選擇 App Service 的資源群組 (應該只會有一個)，Slot 的部分將 Production 更改為 **[dev]**
- 完成後點選右上角的 **[Save]**，點選 **[OK]**
### Production 環境
- 選擇上方列表的 **[Pipeline]** 列表
- 將鼠標移動到 **[Dev]** stage，會出現 **[+]**，點選添加一個新的 stage
- 選擇在 select a template 底下的 **[Empty job]**
- 將 stage 名稱更改為 `Production`，完成後點選 **[X]** 關閉
- 點選 Production 的 **[1 job, 0 task]**
- 點選在 Agent Job 中的 **[+]**
- 在 Add tasks 中選到 **[Deploy]**，找到 **[Azure App Service manage]**，點選 **[Apply]**
- 點選 **[Swap Slots:]** task，將欄位資訊填寫完整
- **Azure Subscription** : 建立 App Service 的訂閱
- **Action** : Swap Slots
- **App Service Name** : 建立的 App Service 名稱
- **Resource Group** : 建立的 App Service 資源群組
- **Source Slot** : Dev
- 確保 **[Swap with Production]** 打勾
- 點選右上角的 **[Save]**，然後 **[OK]**
- 點選上方列表的 **[Pipeline]**

### 細節調整
- 點選在 Artifacts 方格中的 **[+ Add an artifact]**
- **Source type** : Build
- **Source (build pipeline)** : 先前建立的 build pipeline
- 選擇完成後點選 **[Add]**
- 選則同一個方框右上角的閃電符號，在 Continuous deployment trigger 下將 **[Disable]** 更改為 **[Enable]**，完成後點選 **[X]** 關閉視窗
- 在 Dev 的 stage 中點選右邊的人頭，在跳出的視窗中將 **[Post-deployment approvals]** 改為 **[Enabled]**，並在 **[Approvers]** 欄位中選擇自己，完成後點選 **[X]** 關閉視窗
- 在 Production 的 stage 中點選左邊的人頭，在跳出的視窗中將 **[Pre-deployment approvals]** 改為 **[Enabled]**，並在 **[Approvers]** 欄位中選擇自己，完成後點選 **[X]** 關閉視窗
- 將上方 All Pipelines > **[New release pipeline]** 修改為 `Release to Azure`
- 點選到上方列表的 **[Options]**，點擊到 **[Integrations]** 的欄位，將以下兩項目打勾
- [x] Report deployment status to Work
- [x] Report deployment status to Boards
- **Dev** > Testing
- **Production** > Production
- 點選回 **[Pipeline]**
- 點選 Save
- 接著選擇 **[Create Release]**
- 在跳出的視窗中點選 **[Create]**
- 視窗上方會有一則訊息，點選 **[release 1]**，可以查看目前部屬進度
### 環境驗證及審核
- 當 Dev stage 的部署狀態變更為 *Pending approval* 時(如一直未改變狀態可點選 **[Refresh]** 更新狀態)，此時回到 **[Azure Portal](https://portal.azure.com)** 上，找到剛剛建立的資源群組，選擇 type 為 *App Service (slot)* 的 **dev** 資源
- 選擇頁面中 URL 的連結
- 顯示新的網頁已經完成部署
- 將網址列中的 `-dev` 拿掉，進入網頁
- Production 的環境尚未部屬，仍在舊的頁面
- 已確認在 Dev 環境中部署正確，回到 Azure DevOps 中點選 Dev stage 的 **[Approve]**
- 在跳出的視窗點選 **[Approve]**，然後 **[X]** 關閉
- 確認 Dev 完成
- 此時 Prodction 的狀態也會變更為 pending approval，點選 **[Approve]** 開始進行 Production 的部屬
- 確認 Production 的部署正確
**<span style="color:blue">-------------------------------------------- 實作 35 分鐘 -------------------------------------------- </span>**
## 6/ 實際更新上版一次
- 回到 **[Pipelines]**，點選先前建立的 build pipeline
- 進入後點選右上角的 **[Edit]**
- 將鼠標移動到 **[Test Assemblies]** task 按右鍵，選擇 **[Disable selected task(s)]**，點選 **[Save]**
- 回到 Sprints，在 **[DevOps Workshop]** 的 PBI 中，新增一個 task 為 `將首頁標題添加今天日期`
- 回到 Files ，點選到 *AspNetCore.Sample.Web* > *Controllers* > *HomeController.cs*
- 修改第 13 行，將原本的 "DevOps Workshop" 修改為 "DevOps Workshop - 0701"，修改完成後點選 **[Commit]**

            public IActionResult Index()
            {
                ViewData["Message"] = "DevOps Workshop - 0701";

                return View();
            }


- **[Work items to link]** 欄位選擇先前建立的 `將首頁標題添加今天日期` task
- 此時回到 **[Pipeline]** 發現 pipeline 已自動執行
- 待 build pipeline 執行完成後回到 release pipeline 會發現已自動啟動部署流程
- 根據先前的步驟進行審核及檢查的動作
- 回到 **[Sprint]** 中，`將首頁標題添加今天日期` task 查看內容，可以在 Deployment 及 Development 中看到建置及部屬的狀況
**<span style="color:blue">-------------------------------------------- 實作 20 分鐘 -------------------------------------------- </span>**
## 7/ Dashboard
- 左邊選單列中的 Overview 下點選 **[Dashboards]**，點選 **[Add a widget]**
- 選擇 **[Assign to me]**，然後點選 **[Add]**
- 可再添加 **[Deployment Status]**、**[New Work Item]**，**[Query Tile]** 或自行添加其他項目

- 完成後選擇 **[Done Editing]**
- 點選 Deployment Status 進行設定，將 size 改為 **[3x2]**，並填入 **[Build pipeline]** 和 **[Linked release pipelines]**，設定完成後點選 **[Save]**
- 點選 **[Query Tile]**，**[Select Queries]** 選擇 **[Shared Query]** > **[Task in Progress]**(先前在 query 內建立的)
**<span style="color:blue">-------------------------------------------- 實作 10 分鐘 -------------------------------------------- </span>**
## 8/ 清除資源
- 點選左方選單列表中的 **[Project Settings]**，捲到最下方有 **[Delete]** 的按鈕可以進行移除
- 到 [Azure Portal](https://portal.azure.com/)
- 找到建立的資源群組，點選頁面中的 **[Delete resource group]**，在欄位中填入資源群組的名稱，選擇 **[Delete]** 即可完成清除

## Reference
- [Sample Code (ASP .NET Core)](https://github.com/huier23/AspNetCoreSample.git)
- [HelloWorld.Lib](https://github.com/huier23/HelloWorld.Lib.git)
- [Register free Azure account](https://azure.microsoft.com/zh-tw/free/)