###### tags: `Workshop` `Azure DevOps` `AKS` `MTC 2021`
# Hands-on : Azure DevOps Service (Azure Kubernetes Service)
In this workshop you would learn how to accerlate developing K8S web on Azure Kubernetes Service.

[TOC]
## 尚未擁有 Azure DevOps Service 組織的使用者
<!-- - 參考 [初次使用 Azure DevOps Service，申請教學](https://hackmd.io/@mtcazuredev/H1V508unO) 建立新的組織 -->
- 如需申請免費試用，請參考 [Azure DevOps Service 免費試用申請](https://hackmd.io/W10Lp86YR2SnPtlrFyalMw?view)

## 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 `時刻表查詢`和 `搭車提醒`
- 填寫完成
### Sprint 及 task 規劃
- 選擇左邊欄位中的 **[Backlogs]**
- 透過 **[+ New Work Item]** 再新增一個`DevOps Workshop` 的 PBI
- 點選右上角的拉霸圖示，選擇 Side Pane 下的 **[Planning]**

- 拖曳 `即時動態查詢` 這個 PBI 到右邊的 **[Sprint 1]**
- 點選 **[Sprint 1]** 跳轉到 Sprint 的頁面
- 點選頁面上方 **[Taskboard]**
- 可以看到變成敏捷看板的視角，並且是在 Sprint 1 這個週期中
- 在 `DevOps Workshop` PBI 的欄位點選 **[+]** 來新增以下 :
- `修改首頁標題`
- `練習 Azure Board`
- `建置 build pipeline`
- `建置 release pipeline`
- 在 `即時動態查詢` 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]** 即可儲存

## 2/ 版本控制
### 匯入範例程式碼
- 點選左方欄位 Repo 底下的 **[Files]**，選擇上方的repo name，點選 **[+New repository]**
- 將 **Repository Name** 填寫成 `mslearn-aks-workshop-ratings-api`，並將 **[Add a README]** 的勾取消，再點選 **[Create]**
- 複製該 repo 連結

<!-- - 點選畫面中 **[Import]** 的按鈕，並複製以下連結貼到 **[Clone URL]** 中，完成後點選 **[Import]**

    https://github.com/MicrosoftDocs/mslearn-aks-workshop-ratings-api.git

- 顯示正在進行匯入
 -->

- 回到 Azure Cloud Shell，索引到 api 的程式碼

    cd ~/aks-lab/mslearn-aks-workshop-ratings-api/

- 將新增的檔案添加盜版控中

    git add .
    git commit -m "add k8s config"

- 完成後會出現以下顯示

- 將遠端儲存庫設定到本機 git 中

    git remote add devops https://<organization name>@dev.azure.com/<organization name>/<project name>/_git/mslearn-aks-workshop-ratings-api

- 輸入以下指令可確認已成功設定

    git remote -v

- 開始推送至 Azure Repo

    git push devops master

- 視窗會顯示詢問密碼

    Password for 'https://[e-mail]':

- 回到 Azure DevOps Service，點選右上角的圖示，並選擇 Personal Access Token
- 點選 **[+New Token]**，完成資訊的填寫
- 將 token 複製起來，並記在記事本中(一旦關閉則會消失)
- 回到 Azure Cloud Shell 並將 token 貼上 (貼上後不會顯示任何東西)
- 同樣的步驟再執行一遍，再新增一個 repository 將 **Repository Name** 填寫成 `mslearn-aks-workshop-ratings-web`，並上傳 **mslearn-aks-workshop-ratings-web** 資料夾裡的程式碼

    cd ~/aks-lab/mslearn-aks-workshop-ratings-web/
    git add .
    git commit -m "add k8s config"
    git remote add devops https://<organization name>@dev.azure.com/<organization name>/<project name>/_git/mslearn-aks-workshop-ratings-web
    git push devops master

<!--
### 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 上，已經更新為剛剛的修改的版本
-->
<!-- - 完成後會看到成功畫面並且跳轉到匯入的程式碼
-->
## 3/ 建立 Build Pipeline
### 建立程式碼的第一條 Build Pipeline
- 選擇左方選單列中 Pipelines 下的 **[Pipelines]**，點選 **[Create Pipeline]**
- 選擇畫面下方說明文字中的 **[Use the classic editor]**
- 選擇 `mslearn-aks-workshop-ratings-api` 的 repository
- 在右上方的搜尋欄位尋找 `docker`，找到 **Docker Container**，點選 **[Apply]**
- 選到 Build an image，完成內容
- **Azure Subscription** : **<建立 ACR 資源時使用的訂閱>**
- **Azure Container Registry** : **<建立的 ACR 名稱>**
- **Image Name** : `$(Build.DefinitionName):$(Build.BuildId)`
- 勾選 **Include Latest Tag**
- 選到 Push an image，完成內容
- **Azure Subscription** : **<建立 ACR 資源時使用的訂閱>**
- **Azure Container Registry** : **<建立的 ACR 名稱>**
- **Image Name** : `$(Build.DefinitionName):$(Build.BuildId)`
- 勾選 **Include Latest Tag**

- 選擇上方列表的 **[Triggers]** tab，將畫面右方的 [Enable continuous integration] 打勾
- 在 Path filters 下選擇 **+Add**，選擇 **Exclude**，並在後方欄位填上 `ratings-api-deployment.yaml`
- 完成後修改 pipeline 名稱為 `ratings-api`，點選上方的 **[Save & queue]** ，選擇 **[Save & queue]** 後在跳出的視窗點選 **[Save and run]**
- 點選 New pipline 再新增一條提供 web container 建置，同樣的步驟再重複一遍完成
- 選擇畫面下方說明文字中的 **[Use the classic editor]**
- 選擇 `mslearn-aks-workshop-ratings-web` 的 repository
- 在右上方的搜尋欄位尋找 `docker`，找到 **Docker Container**，點選 **[Apply]**
- 選到 Build an image，完成內容
- **Azure Subscription** : **<建立 ACR 資源時使用的訂閱>**
- **Azure Container Registry** : **<建立的 ACR 名稱>**
- **Image Name** : `$(Build.DefinitionName):$(Build.BuildId)`
- 勾選 **Include Latest Tag**
- 選到 Push an image，完成內容
- **Azure Subscription** : **<建立 ACR 資源時使用的訂閱>**
- **Azure Container Registry** : **<建立的 ACR 名稱>**
- **Image Name** : `$(Build.DefinitionName):$(Build.BuildId)`
- 勾選 **Include Latest Tag**
- 選擇上方列表的 **[Triggers]** tab，將畫面右方的 [Enable continuous integration] 打勾
- 在 Path filters 下選擇 **+Add**，選擇 **Exclude**，並在後方欄位填上 `ratings-web-deployment.yaml`
- 完成後修改 pipeline 名稱為 `ratings-web`，點選上方的 **[Save & queue]** ，選擇 **[Save & queue]** 後在跳出的視窗點選 **[Save and run]**

## 4/ 建立 Release Pipeline
- 在左方選單列選擇 Pipelines 下的 **[Release]**，進入後點選 **[New Pipeline]**
- 找到 **[Deploy to a Kubernetes cluster]**，點選 **[Apply]**
- 將 Stage name 更改為 `Prod`，完成後點選 **[X]** 關閉視窗
- 點選 Artifact 進行添加，點選 6 more artifact types 可以找到 Azure Container Registry
- 選擇 **Azure Container Registry**，選擇 `ratings-web` 的container repository，並完成如下圖設定後點選 **[Add]**
- 點選剛剛建立的 artifact 右上角的閃電符號，將 Continuous deployment trigger 的按鈕勾選改為 enable
- 在 Tag Filter 中設定上 `^latest$`

- 再添加一個 artifact，並選擇 Azure Repo 來取得 K8S 的設定檔，一樣選擇 `mslearn-aks-workshop-ratings-web` 的程式碼，完成後點選 **Add**
- 選擇 `Prod` stage 內的 **[1 job, 1 task]**
- 在 **Kubernetes Service Connection** 的欄位旁邊點選 **[+NEW]** 以增加新的 K8S 連線
- Authentication method 選擇 Azure Subscription
- Azure Subscription 選擇建立 AKS 的訂閱
- Cluster 選擇建立的 AKS
- Namespace 設定 `ratingsapp`
- 將 **Use cluster admin credentials** 做勾選
- Service connection name 自行設定
- 設定 Kubectl task
- Namespace : `ratingsapp`
- Command : delete
- Arguments : `deployment ratings-web --namespace ratingsapp`

- 點選 **[+]** 添加新的 task，搜尋 `kubectl` 找到該 task 點選 **[add]**
- 設定剛剛添加的 Kubectl task
- Namespace : `ratingsapp`
- Command : apply 並勾選 Use Configuration
- Configuration type 選擇 File path，在下方的 file path 點選 […] 瀏覽先前撰寫的 K8S 設定檔，選擇到 `ratings-web-deployment.yaml`
- 完成

### 細節調整
- 在 Prod 的 stage 中點選左邊的人頭，在跳出的視窗中將 **[Pre-deployment approvals]** 改為 **[Enabled]**，並在 **[Approvers]** 欄位中選擇自己，完成後點選 **[X]** 關閉視窗
- 將上方 All Pipelines > **[New release pipeline]** 修改為 `Release to AKS`
- 點選右上角 Save
- 接著選擇 **[Create Release]**
- 在跳出的視窗中點選 **[Create]**
- 視窗上方會有一則訊息，點選 **[release 1]**，可以查看目前部屬進度

### 允許部署、確認可以成功部屬且網站顯示正常
- 點選 prod 的 stage 後選擇 Approve
- Release Pipeline 顯示完成
- 瀏覽到你既有的網站確認網站依然顯示正常
## 5/ 實際更新上版一次
- 回到 Azure Repo > Files > mslearn-aks-workshop-ratings-web

- 修該 **ratings-web-deployment.yaml** 的第 16 行，將 tag `v1` 改為 `latest`

- 點選 **[Edit]** 修改 src/components/Home.vue 檔案的第 10 行添加上今日日期，修改完成後點選 **[Commit]**

        <div class="row at-row flex-center flex-middle">
          <div class="col-lg-24">
            <h1 class="super-header">2021/09/29 - {{subtitle}}</h1>
          </div>
        </div>

- **[Work items to link]** 欄位選擇先前建立的 `將首頁標題添加今天日期` task
- 此時回到 **[Pipeline]** 發現 pipeline 已自動執行
- 待 build pipeline 執行完成後回到 release pipeline 會發現已自動啟動部署流程
- 確認網頁有顯示今日日期

## 6/ 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 內建立的)

## 7/ 清除資源
- 點選左方選單列表中的 **[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/)
- [Azure DevOps 中預設的環境變數](https://docs.microsoft.com/zh-tw/azure/devops/pipelines/build/variables?view=azure-devops&tabs=yaml)