如何將Azure DevOps中的程式碼釋出到Azure App Service中
標題：如何將Azure DevOps中的程式碼釋出到Azure App Service中
作者：Lamond Lu
背景
最近做了幾個專案一直在用Azure DevOps和Azure App Service, 每次都要從零開始搭建從Azure DevOps向Azure App Service釋出程式碼的環境，由於步驟比較繁瑣，每次都會忘記其中幾個步驟，所以在此總結一下，已備後續再次使用。
Azure DevOps和Azure App Service
Azure DevOps
Azure DevOps其實就是以前的Visutal Studio Team Services Online, 提供了專案管理和原始碼管理的功能。你可以將專案原始碼程式碼託管到Azure DevOps，並使用它的Build Pipeline將程式碼釋出指定的伺服器或者App Service中。
Azure App Service
App Service使用Azure中的一種重要服務，使用者使用它可以快速構建、部署和縮放在任何平臺上執行的企業級Web應用、移動應用和API應用。當你需要部署專案的時候，你不需要搭建任何環境，只需要將程式碼釋出到App Service即可, Azure會為你準備好程式執行的環境。
另外App Service提供了許多運維的功能，比如備份，縮放，日誌，你只需要進行簡單配置就可實現許多複雜的功能。
如何將Azure DevOps中的程式碼釋出到Azure App Service中？
為了演示如何將Azure DevOps中的程式碼釋出到Azure App Service中，我們首先在Azure DevOps中建立一個新的程式碼庫，程式碼庫中只有一個index.html檔案，程式碼如下
<html> <head></head> <body>Hello World!</body> </html
第一步：新增一個Azure App Service
為了部署我們的專案，我們首先需要在Azure Portal中建立一個App Service.
這裡我們將當前Web應用起名為LamondTest, 後續我們就可以使用http://LamondTest.azurewebsites.net的域名來訪問我們的應用。
第二步： 在Azure AD中新增一個App Registration
為了將Azure Devops中的程式碼釋出到Azure App Service中，我們需要在Azure AD中註冊一個App。
我們可以從左側選單中選擇Azure AD, 然後選擇App Registration, 你就能看到如下頁面
點選+New application registration
這裡我給這個Application命名為DeploymentApp, 然後Application type選擇Web app / API。
因為我們這個Application只是來輔助釋出專案的，所以Sign-on URL對我們不是很重要，所以我就隨便用了度孃的URL.
建立成功之後，你會看到一下介面
這裡比較重要的是Application ID, 你需要將它記下來，以便後續操作使用
第二步：建立訪問應用使用的Key
如果你完成上一步操作之後，不要關閉面板，繼續點選面板中的Settings按鈕。
選擇API ACCESS -> Keys
新增一個TestKey, 並設定永不過期，Value值可以任何設定一個，儲存之後這個Value值儲存成一串金鑰，這裡這串金鑰需要儲存一下，以備後續使用。
第三歩： 為DeploymentApp分配Contributor角色
為了藉助DeploymentApp釋出程式碼，我們需要將LamondTest這個App Service的Contributor角色分配給DeploymentApp.
這裡我們可以通過LamondTest -> Access Control(IAM) -> Add role assignment新增角色，並儲存
第四步：獲取TenantId和SubscriptionId
除了前面的Application ID和金鑰，我們還需要找到當前Azure的Tenant Id和Subscription Id
Tenant Id
我們可以從 Azure Active Directory -> Properties 中查詢到Directory ID, 這裡Directory ID即我們所需的Tenant Id
Subscription Id
Subscription Id，即訂閱Id, 我們可以在Subscription模組中找到它
第五步：建立Azure Resource Manager
前面四步都是在Azure Portal中的操作，後面的所有操作都是在Azure DevOps中來操作
首先我們需要來新增Azure Resource Manager, 我們可以通過Project Settings -> Service connections -> +New service connections -> Azure Resource Manager來開啟新增介面
點選use the full version of the service connection dialog
這裡Subscription ID和Tenant ID就是第四步中獲取到的2個ID，Service principal client ID和Service principal key分別就是第二步中的Application ID和金鑰。
注意：這裡Subscription name必須輸入正確，通常來說都是Pay-As-You-Go, 如果不同，你可以根據你自己的Azure Subscription name來替換。
這裡我將這個連線命名為LamondTestConnection。
點選OK之前我們可以通過Verify connection來嘗試連線，連線成功會返回一個Verified狀態圖示
第六步：建立Build Pipeline
當前面操作都完成之後，我們就可以開始建立Build Pipleline了
我們可以通過Pipelines -> Builds -> New Pipeline開啟新增Build Pipleline介面。
這裡我們需要選擇程式碼來源Azure Repos Git， 然後選擇我們之前建立的原始碼倉儲HelloWorld, 點選Continue
然後選擇Empty Job
在Pipeline管理頁面中，點選加號，選擇Azure App Service Deploy
選擇Azure App Service Deploy: LamondTest, 設定Azure subscription為LamondTestConnection, 並選擇App Service name為LamondTest
最後將Package or folder設定為$(System.DefaultWorkingDirectory)
最後點選Save & Queue, 我們的程式碼就會自動釋出到之前定義好的App Service中
最後我們使用瀏覽器訪問https://lamondtest.azurewebsites.net/, 網頁程式碼就正確顯示了
附加： 啟用持續整合
Azure DevOps的Build Pipeline還支援持續整合，我們可以設定每天定時釋出或者每次check-in都觸發程式碼釋出，我們可以修改剛才建立的Build Pipeline.
在Triggers頁籤中，我們可以啟用Enable continous integration.
在下面的Branch Filter中，你可以設定監控的程式碼分支。
現在我們去修改之前的index.html.
<html> <head></head> <body>Hello Continuous Integration!</body> </html
然後簽入程式碼。
現在我們返回Azure DevOps的Build Pipleline介面，你會發現程式碼開始自動釋出了
釋出成功之後，我們重新用瀏覽器訪問https://lamondtest.azurewebsites.net/, 新的程式碼已經啟用了
這說明我們的程式碼持續整合配置成功了。