練習 - 設定您的 Azure DevOps 環境

已完成

在本節中,您將確保 Azure DevOps 組織設定完成,以完成本課程模組的其餘部分。 您還會建立要部署的 Azure App Service 環境。

若要完成這些工作,您可以:

  • 新增使用者,以確保 Azure DevOps 可以連線到您的 Azure 訂用帳戶。
  • 設定本課程模組的 Azure DevOps 專案。
  • 在 Azure Boards 上,將本課程模組的工作項目移至 [執行中] 資料行。
  • 使用 Azure Cloud Shell 中的 Azure CLI 來建立 Azure App Service。
  • 建立管線變數,以定義您 App Service 環境的名稱。
  • 建立可讓 Azure Pipelines 安全地存取 Azure 訂用帳戶的服務連線。

將使用者新增至 Azure DevOps

若要完成此課程模組,必須擁有自己的 Azure 訂用帳戶。 您可以免費開始使用 Azure。

您不需要 Azure 訂用帳戶就能使用 Azure DevOps,但是在這裡您將使用 Azure DevOps 部署至 Azure 訂用帳戶中存在的資源。 若要簡化流程,請在同一 Microsoft 帳戶下,登入您的 Azure 訂用帳戶和 Azure DevOps 組織。

若您使用不同的 Microsoft 帳戶登入 Azure 和 Azure DevOps,請在您用於登入 Azure 的 Microsoft 帳戶下,將使用者新增至您的 DevOps 組織。 如需詳細資訊,請參閱將使用者新增至您的組織或專案。 當您新增使用者時,請選擇 [基本] 存取層級。

然後登出 Azure DevOps。 然後在您用來登入 Azure 訂用帳戶的 Microsoft 帳戶下再次登入。

取得 Azure DevOps 專案

您必須設定 Azure DevOps 組織,以完成本課程模組的其餘部分。 您可以藉由執行在 Azure DevOps 中建立專案的範本來完成這項工作。

此學習路徑中的課程模組是一連貫的進程,讓您跟著 Tailspin Web 小組完成其 DevOps 旅程。 為方便學習,每個課程模組皆有相關聯的 Azure DevOps 專案。

執行範本

執行範本以設定您 Azure DevOps 組織中的所有項目。

從 Azure DevOps 示範產生器網站中,遵循下列步驟以執行範本:

  1. 選取 [登入] 並接受使用條款。

  2. 在 [建立新專案] 頁面上,選取 Azure DevOps 組織。 然後輸入專案名稱,例如 Space Game - web - Functional tests

    Screenshot of Creating a project through the Azure DevOps Demo Generator.

  3. 選取 [是,我要派生此存放庫]。 然後選取 [授權]

  4. 選取 [建立專案]

    執行範本需要花一些時間。

  5. 選取 [瀏覽至專案],前往您在 Azure DevOps 中的專案。

重要

此課程模組中的清除您的 Azure DevOps 環境頁面包含重要的清除步驟。 執行清除有助於確保您不會用盡可用的建置時間。 請務必執行清除步驟,即使您未完成此課程模組亦然。

設定專案的可見度

一開始,GitHub 上 Space Game 存放庫的分支會設定為公用,而 Azure DevOps 範本所建立的專案設為私人。 GitHub 上的公用存放庫可供任何人存取,而私人存放庫只能存取您,以及您選擇與其共用的人員。 同樣地,在 Azure DevOps 上,公用專案會提供非驗證使用者的唯讀存取權,而私人專案則要求使用者獲得存取權,並經過驗證才能存取服務。

目前,為了本課程模組的目的,不需要修改任何這些設定。 不過,對於您的個人專案,您必須判斷您想要授與其他人的可見度和存取權。 例如,如果專案是開放原始碼,則您可以選擇將 GitHub 存放庫和 Azure DevOps 專案設為公用。 如果專案是專屬的,則您通常會將 GitHub 存放庫和 Azure DevOps 專案設為私人。

稍後,您可能會發現下列資源有助於判斷哪一個選項最適合您的專案:

將工作項目移至 [執行中]

在此部分中,您會將 Azure Boards 中與本課程模組相關的工作項目指派給您自己。 您也可以將工作項目改為 [正在進行] 狀態。 實際上,您的小組會在每個短期衝刺 (或工作反覆項目) 開始時建立工作項目。

以這種方式指派工作,您將取得據以展開工作的檢查清單。 如此,小組中的其他成員即可了解您正在處理的工作,以及剩下多少工作。 其也可協助小組對「進行中的工作」( WIP) 強制執行限制,以避免小組一次處理太多工作。

回想一下,小組已選定目前短期衝刺的下列主要問題:

A screenshot of Azure Boards, showing the tasks for this sprint.

注意

在 Azure DevOps 組織內,工作項目會依序編號。 在您的專案中,指派給每個工作項目的數目可能與您在這裡看到的不一樣。

在這裡,您會將第三個項目 [自動化品質測試] 移至 [執行中] 資料行。 然後將自己指派給工作項目。 [自動化品質測試] 與自動化 Space Game 網站的 UI 測試相關。

設定工作項目:

  1. 從 Azure DevOps 中,移至 Boards,然後從功能表中選取 [Boards]

    A screenshot of Azure DevOps showing the location of the Boards menu.

  2. 在 [自動化品質測試] 工作項目上,選取卡片底部的向下箭號。 然後,將工作項目指派給您自己。

    A screenshot of Azure Boards showing the location of the down arrow.

  3. 將工作項目從 [待辦事項] 資料行移至 [正在進行] 資料行。

    A screenshot of Azure Boards, showing the card in the Doing column.

在本課程模組結束時,您會在完成工作之後,將卡片移至 [完成] 資料行。

在本機設定專案

在這裡,您會在 Visual Studio Code 中載入 Space Game 專案、設定 Git、在本機複製您的存放庫,並設定上游遠端存放庫,讓您可以下載起始程式碼。

注意

如果您已在本機設定 mslearn-tailspin-spacegame-web-deploy 專案,則您可以移至下一節。

開啟整合式終端

Visual Studio Code 隨附整合式終端。 在這裡您可以從命令列編輯檔案和工作。

  1. 啟動 Visual Studio Code。

  2. 在 [檢視] 功能表上選取 [終端]

  3. 在下拉式清單中,選取 Git Bash。 如果您熟悉的是其他慣用的 Unix 殼層,則請改為選取該殼層。

    A screenshot of Visual Studio Code showing the location of the Git Bash shell.

    在終端機視窗中,您可以選擇安裝在系統上的任何殼層。 例如,您可以選擇 Git Bash 或 PowerShell 或其他殼層。

    此處,您會使用 Git Bash (Git for Windows 的一部分),以便輕鬆執行 Git 命令。

    注意

    在 Windows 上,如果您看不到 Git Bash 列為選項,則請確定您已安裝 Git,然後重新啟動 Visual Studio Code。

  4. 執行 cd 命令,以瀏覽至您要使用的目錄。 視需要選擇您的主目錄 (~) 或不同目錄。

    cd ~
    

設定 Git

如果您剛開始使用 Git 和 GitHub,首先必須執行幾個命令,將您的身分識別與 Git 建立關聯,並向 GitHub 進行驗證。 如需詳細資訊,請參閱設定 Git

您至少需要完成下列步驟。 從整合式終端中執行命令。

  1. 設定您的使用者名稱
  2. 設定您的認可電子郵件地址
  3. 快取您的 GitHub 密碼

注意

如果您已經使用雙因素驗證與 GitHub 搭配,請建立個人存取權杖。 當系統提示您時,請使用您的權杖來取代您的密碼。

以您處理密碼的方式來處理存取權杖, 請保存在安全的位置。

在 Visual Studio Code 中設定專案

使用 Azure DevOps 建置應用程式學習路徑中,您已派生並複製 Git 存放庫。 存放庫包含 Space Game 網站的原始程式碼。 您的分支已連接到 Azure DevOps 中的專案,以便在您將變更推送至 GitHub 時執行組建。

重要

在此學習路徑中,我們切換至不同的 Git 存放庫:mslearn-tailspin-spacegame-web-deploy。 當您執行範本來設定 Azure DevOps 專案時,此程序會自動為您派生存放庫。

在此部分中,您會在本機複製您的分支,以便進行變更並組建管線組態。

在本機複製您的分支

您的 GitHub 帳戶中現在會有一個 Space Game Web 專案複本。 現在,您會將複本下載或複製至電腦,以供您使用。

複製類似於分支,都是存放庫的複本。 當您複製存放庫時,您可以進行變更、確認如預期運作,然後將這些變更上傳回到 GitHub。 您也可以將本機複本與其他已驗證使用者對 GitHub 存放庫複本所做的變更進行同步。

如何將 Space Game Web 專案複製至您的電腦:

  1. 移至位於 GitHubSpace Game Web 專案 (mslearn-tailspin-spacegame-web-deploy) 的分支。

  2. 選取 [程式碼]。 然後,從 [HTTPS] 索引標籤中,選取所顯示 URL 旁的按鈕,將 URL 複製到剪貼簿。

    Screenshot that shows how to locate the URL and copy button from the GitHub repository.

  3. 在 Visual Studio Code 中,前往終端視窗。

  4. 在終端機中,移至您要使用的目錄。 視需要選擇您的主目錄 (~) 或不同目錄。

    cd ~
    
  5. 執行 git clone 命令。 以您剪貼簿的內容取代這裡所顯示的 URL:

    git clone https://github.com/your-name/mslearn-tailspin-spacegame-web-deploy.git
    
  6. 移至 mslearn-tailspin-spacegame-web-deploy 目錄。 這是您存放庫的根目錄。

    cd mslearn-tailspin-spacegame-web-deploy
    

設定上游遠端

遠端是小組成員可用來共同作業的 Git 存放庫 (例如 GitHub 上的存放庫)。 在這裡,您會列出遠端存放庫,並新增指向 Microsoft 存放庫複本的遠端存放庫,讓您可以取得最新的範例程式碼。

  1. 執行此 git remote 命令以列出您的遠端存放庫:

    git remote -v
    

    您會看到自己擁有存放庫的擷取 (下載) 和推送 (上傳) 存取權:

    origin  https://github.com/username/mslearn-tailspin-spacegame-web-deploy.git (fetch)
    origin  https://github.com/username/mslearn-tailspin-spacegame-web-deploy.git (push)
    

    Origin 會指定 GitHub 上的存放庫。 當您從另一個存放庫派生程式碼時,通常會將原始遠端 (派生來源) 命名為「上游」

  2. 執行此 git remote add 命令,建立名為 upstream 的遠端存放庫,此存放庫指向 Microsoft 存放庫:

    git remote add upstream https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web-deploy.git
    
  3. 再次執行 git remote 以查看變更:

    git remote -v
    

    您會看到自己仍具有存放庫的擷取 (下載) 和推送 (上傳) 存取權。 您現在也會具有從 Microsoft 存放庫擷取的存取權:

    origin  https://github.com/username/mslearn-tailspin-spacegame-web-deploy.git (fetch)
    origin  https://github.com/username/mslearn-tailspin-spacegame-web-deploy.git (push)
    upstream        https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web-deploy.git (fetch)
    

在檔案總管中開啟專案

在 Visual Studio Code 中,您的終端視窗會指向 Space Game Web 專案的根目錄。 您將從檔案總管中開啟專案,以利您檢視其結構以及使用檔案。

  1. 開啟專案最簡單的方式是在目前的目錄中重新開啟 Visual Studio Code。 若要執行此作業,請在整合式終端中執行下列命令:

    code -r .
    

    您會看到在 [檔案總管] 中的目錄和檔案樹狀目錄。

  2. 開啟整合式終端。 此終端會進入 Web 專案的根目錄。

如果 code 命令失敗,則您需要將 Visual Studio Code 新增至系統 PATH。 若要這麼做︰

  1. 在 Visual Studio Code 中,選取 F1 或選取 [檢視]>[命令選擇區] 來存取命令選擇區。
  2. 在命令選擇區中,輸入 Shell Command: Install 'code' command in PATH (殼層命令:在 PATH 中安裝「程式碼」命令)
  3. 重複上述程序,在檔案總管中開啟該專案。

您現在已設定為使用 Space Game 原始程式碼,以及您在本機開發環境中的 Azure Pipelines 設定。

建立 Azure App Service 環境

您可以在此建立定義管線階段的環境。 您可以建立一個對應至每個階段的 App Service 執行個體:「開發」、「測試」和「預備」

使用 Azure Pipelines 模組建立多階段管線課程模組中,您已使用 Azure CLI 來建立 App Service 執行個體。 您將在此處執行相同的動作。

重要

您需要自己的 Azure 訂用帳戶,才能完成本課程模組中的練習。

透過 Azure 入口網站啟動 Cloud Shell

  1. 請前往 Azure 入口網站並登入。
  2. 從功能表列中,選取 [Cloud Shell]。 出現提示時,請選取 Bash 體驗。

選取 Azure 區域

在這裡,您可以指定將建立您 Azure 資源的預設區域或地理位置。

  1. 從 Cloud Shell 執行下列 az account list-locations 命令,以列出 Azure 訂用帳戶中可用的區域。

    az account list-locations \
      --query "[].{Name: name, DisplayName: displayName}" \
      --output table
    
  2. 從輸出中的 [名稱] 資料行,選擇接近您的區域。 例如,選擇 eastasiawestus2

  3. 執行 az configure 以設定您的預設區域。 以您選擇的區域名稱取代 <REGION>

    az configure --defaults location=<REGION>
    

    以下範例會將 westus2 設定為預設區域:

    az configure --defaults location=westus2
    

建立 App Service 執行個體

在這裡,為您將部署至的三個階段建立 App Service 執行個體:「開發」、「測試」和「預備」

注意

為了學習目的,您可以在這裡使用預設的網路設定。 這些設定讓您的網站可從網際網路存取。 實際上,您可以設定 Azure 虛擬網路,將您的網站放在非網際網路可路由傳送的網路中,而且只有您和您的小組可以存取。 稍後,您可以重新設定網路,讓您的使用者可以使用網站。

  1. 從 Cloud Shell 中,產生可讓您的 Web 應用程式功能變數名稱成為唯一的亂數。

    webappsuffix=$RANDOM
    
  2. 執行下列 az group create 命令,以建立名為 tailspin-space-game-rg 的資源群組。

    az group create --name tailspin-space-game-rg
    
  3. 執行下列 az appservice plan create 命令,以建立名為 tailspin-space-game-asp 的 App Service 方案。

    az appservice plan create \
      --name tailspin-space-game-asp \
      --resource-group tailspin-space-game-rg \
      --sku B1 \
      --is-linux
    

    --sku 引數會指定在基本層上執行的 B1 方案。 --is-linux 引數指定使用 Linux 背景工作角色。

    重要

    如果 B1 SKU 不屬於您的 Azure 訂用帳戶,請選擇不同的方案,例如 S1 (標準)。

  4. 執行下列 az webapp create 命令來建立三個 App Service 執行個體,開發測試預備環境各一個。

    az webapp create \
      --name tailspin-space-game-web-dev-$webappsuffix \
      --resource-group tailspin-space-game-rg \
      --plan tailspin-space-game-asp \
      --runtime "DOTNET|6.0"
    
    az webapp create \
      --name tailspin-space-game-web-test-$webappsuffix \
      --resource-group tailspin-space-game-rg \
      --plan tailspin-space-game-asp \
      --runtime "DOTNET|6.0"
    
    az webapp create \
      --name tailspin-space-game-web-staging-$webappsuffix \
      --resource-group tailspin-space-game-rg \
      --plan tailspin-space-game-asp \
      --runtime "DOTNET|6.0"
    

    為了方便學習,在此您可對每個 App Service 執行個體套用相同的 App Service 方案 (B1 基本)。 實際上,您會指派和您預期的工作負載相符的方案。

  5. 執行下列 az webapp list 命令,即可列出 App Service 執行個體的主機名稱和狀態。

    az webapp list \
      --resource-group tailspin-space-game-rg \
      --query "[].{hostName: defaultHostName, state: state}" \
      --output table
    

    請記下每個執行中服務的主機名稱。 稍後當您驗證工作時,您將需要這些主機名稱。 以下是範例:

    HostName                                                 State
    -------------------------------------------------------  -------
    tailspin-space-game-web-dev-21017.azurewebsites.net      Running
    tailspin-space-game-web-test-21017.azurewebsites.net     Running
    tailspin-space-game-web-staging-21017.azurewebsites.net  Running
    
  6. 做為選用步驟,請將一或多個名稱複製和貼上您的瀏覽器,以確認這些名稱正在執行中,而且預設的首頁會顯示。

    您應該會看到本頁面:

    The default home page on Azure App Service.

重要

此課程模組中的清除您的 Azure DevOps 環境頁面包含重要的清除步驟。 完成本課程模組後,清除可協助確保您不需支付 Azure 資源的費用。 請務必執行清除步驟,即使您未完成此課程模組亦然。

在 Azure Pipelines 中建立管線變數

使用 Azure Pipelines 建立多階段管線中,您可以針對對應至管線中的開發測試預備階段的每個 App Service 執行個體新增一個變數。 在此執行同樣的作業。

管線組態中的每個階段都會使用這些變數來識別要部署的 App Service 執行個體。

若要新增變數:

  1. 在 Azure DevOps 中,移至您的 Space Game - web - Functional tests 專案。

  2. 在 [管線] 下,選取 [程式庫]

    A screenshot of Azure Pipelines, showing the Library menu option.

  3. 選取 [+ 變數群組]

  4. 在 [屬性] 下,輸入 Release 作為變數群組名稱。

  5. 在 [變數] 下,選取 [+ 新增]

  6. 針對您的變數名稱,輸入 WebAppName。 針對其值,輸入與您開發環境對應的 App Service 執行個體名稱,例如 tailspin-space-game-web-dev-1234

  7. 重複步驟 5 和 6 兩次,以建立測試預備環境的變數,如下表所示:

    變數名稱 範例值
    WebAppNameTest tailspin-space-game-web-test-1234
    WebAppNameStaging tailspin-space-game-web-staging-1234

    請務必將每個範例值取代為與您環境對應的 App Service 執行個體。

    重要

    設定 App Service 執行個體的名稱,而非其主機名稱。 在此範例中,您會輸入 tailspin-space-game-web-dev-1234 而非 tailspin-space-game-web-dev-1234.azurewebsites.net

  8. 在頁面頂端附近,選取 [儲存],將您的變數儲存至管線。

    您的變數群組應如下所示:

    A screenshot of Azure Pipelines, showing the variable group. The group contains three variables.

建立開發、測試和預備環境

使用 Azure Pipelines 建立多階段管線中,您已建立用於開發測試預備的環境。 在此將重複此流程。 不過,這次您會略過其他準則,例如將變更從某個階段升階到下一個階段的人工核准需求。

若要建立開發測試預備環境:

  1. 從 Azure Pipelines 中,選取 [環境]

    A screenshot of Azure Pipelines showing the location of the Environments menu option.

  2. 若要建立開發環境:

    1. 選取 [建立環境]
    2. 在 [名稱] 下方,輸入 dev
    3. 將其餘欄位保留為預設值。
    4. 選取建立
  3. 若要建立測試環境:

    1. 返回 [環境] 頁面。
    2. 選取 [新增環境]
    3. 在 [名稱] 下,輸入 test
    4. 選取建立
  4. 若要建立預備環境:

    1. 返回 [環境] 頁面。
    2. 選取 [新增環境]
    3. 在 [名稱] 底下輸入預備
    4. 選取建立

建立服務連線

在此,您會建立可讓 Azure Pipelines 存取您 Azure 訂閱的服務連線。 Azure Pipelines 會使用此服務連線,將網站部署至 App Service。 您已在上一個課程模組中建立類似的服務連線。

重要

請確定您已在相同 Microsoft 帳戶下,登入 Azure 入口網站和 Azure DevOps。

  1. 在 Azure DevOps 中,移至您的 Space Game - web - Functional tests 專案。

  2. 從頁面底端,選取 [專案設定]

  3. 管線 下方,選取服務連線

  4. 選取 [新增服務連線],然後選擇 [Azure Resource Manager],再選取 [下一步]

  5. 接近頁面頂端的 [服務主體 (自動)]。 然後選取下一步

  6. 填入下列欄位:

    欄位
    範圍層級 訂用帳戶
    訂用帳戶 您的 Azure 訂用帳戶
    資源群組 tailspin-space-game-rg
    服務連線名稱 Resource Manager - Tailspin - Space Game

    在此過程中,您可能會收到提示,提醒您登入 Microsoft 帳戶。

  7. 確認已選取 [為所有管線授與存取權限]

  8. 選取 [儲存]。

    Azure DevOps 會執行測試連線,以驗證其可以連線到您的 Azure 訂閱。 若 Azure DevOps 無法連線,您還有機會再登入一次。