---

title: Azure DevOps Pipelines # 簡報的名稱
tags: Azure DevOps # 簡報的標籤

---

# Azure DevOps Pipelines

## 這篇使用 Azure Pipelines 來跑CI流程，CI流程包含以下步驟

### 1. Build Code
### 2. Run Unit Test
### 3. Static Analysis
### 4. Build Image
### 5. Push Image
### 6. Create release

## 準備一個[Node JS專案](https://github.com/ste5022424/NodeJsHello)

### 1. 將[Node JS專案](https://github.com/ste5022424/NodeJsHello) 推送至 Azure Repos




### 2. 使用 vscode 推送至 Azure Repos



### 3. 輸入遠端存放庫名稱


### 4. 輸入遠端網址


### 5. 推送



## 1. Build Code

### 1.1 New build Pipelines


### 1.2 Azure Repos Git


### 1.3 選剛剛推送的專案


### 1.4 選Node.js


### 1.7 載入預設範本

> 範本會啟動一個 ubuntu 的容器做ＣＩ


### 1.7 編輯步驟，點選右邊 Show assistant



### 1.8 npm install


## 2. Run Unit Test

### 2.1 npm test


### 2.2 Publish Test Results

> 這邊使用 jest 套件 來跑 test


> 這邊使用 junit套件 來產生 Results


### 2.3 Publish Code Coverage Results



- task: PublishCodeCoverageResults@1
  inputs:
    codeCoverageTool: 'Cobertura'
    summaryFileLocation: '$(System.DefaultWorkingDirectory)/coverage/cobertura-coverage.xml'

### 先跑一次 Unit Test 的 ＣＩ



> Tests Report


> Code Coverage Report


> 以上圖表就可以看到程式碼覆蓋率，及單元測試的成功跟失敗的結果

## 3. Static Analysis

> 此步驟會執行靜態程式碼掃描，並且將報告上傳至 [sonarcloud](https://sonarcloud.io/)

### 3.1 申請 [sonarcloud](https://sonarcloud.io/about) token



#### 1. 選 MyAccount



#### 2.產生一組token 先複製起來等等會用到


### 3.2 設定外部擴充

#### 1. 到組織 > Organization Settings > Extensions


#### 2. Browse marketplace


#### 3. 搜尋 [sonarcloud](https://marketplace.visualstudio.com/search?term=sonarcloud&target=AzureDevOps&category=All%20categories&sortBy=Relevance)



#### 4. 安裝 sonarcloud



### 3.3 連接外部資源到 sonarcloud

#### 到 Project> Project settings > Servcie connections > Create service connections


#### 1. 搜尋 sonarcloud


#### 2. 輸入 剛剛複製的 token


#### 3. 驗證 token


#### 4. 新增成功


### 3.5 回到 Pipelines > Builds > Edit


#### 1. 搜尋 sonarcloud


#### 2. Prepare Analysis Configuration


#### 3. Run code Analysis


#### 4. Publish Quality Gate Result


#### 5. Run Pipelines


#### 6. 回到 sonarcloud 就可以看到程式碼已經送到 sonarcloud


## 4. Build Image

### 1.建立 [Azure Container Registry](https://portal.azure.com/)

### 2. 搜尋 Container Registry


### 3. 建立容器登入


### 4. 這邊可以看到剛才建立的容器登錄


### 5. 回到 azure devops > Porject settings


### 6. Service connections


### 7. New service connection


### 8. 選 Azure Container Registry

### 9. 回到 Pipelines 加入 build docker



### 10. Run Pipelines


### 11. 推送成功


# 參考

* [azure.microsoft.com](https://azure.microsoft.com/zh-tw/services/devops/)
* [Set up your client's npmrc](https://docs.microsoft.com/zh-tw/azure/devops/artifacts/npm/npmrc?view=azure-devops&tabs=windows)
* [Build, test, and deploy JavaScript and Node.js apps](https://docs.microsoft.com/en-us/azure/devops/pipelines/ecosystems/javascript?view=azure-devops)