練習 - 設定您的 Azure DevOps 環境

  • 15 分鐘

在本節中，您將確實完成設定 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 訂用帳戶中的現有 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 - Multistage。

    A screenshot of the Azure DevOps Demo Generator showing the process for creating the project.

  3. 選取 [是，我要派生此存放庫]>[授權]。

    如果出現視窗，則請授與對您 GitHub 帳戶的存取權。

    重要

    您必須選取此選項，範本才會連線至您的 GitHub 存放庫。 即使您已派生 Space Game 網站專案，仍應選取此選項。 範本會使用您現有的分支。

  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 five tasks for this sprint.

注意

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

在這裡，您會將第一個項目建立多階段管線移至 [執行中] 資料行。 然後將自己指派給工作項目。 建立多階段管線與定義 Space Game 網站的每個部署階段有關。

設定工作項目：

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

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

  2. 在 [建立多階段管線] 卡片中，選取向下箭號。 然後，將工作項目指派給您自己。

    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. 移至位於 GitHub 上 Space 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 入口網站啟動 App Service。 雖然入口網站很適合用於探索 Azure 的可用功能或執行基本工作，但是啟動 App Service 等元件可能很繁瑣。

在此課程模組中，您會使用 Azure CLI 啟動三個 App Service 執行個體。 您可以從終端或透過 Visual Studio Code 存取 Azure CLI。 在本單元中，您需要從 Azure Cloud Shell 存取 Azure CLI。 此瀏覽器型的殼層體驗是裝載在雲端中。 在 Cloud Shell 中，Azure CLI 是設定為搭配您的 Azure 訂用帳戶使用。

重要

若要完成本課程模組中的練習，您需要有自己的 Azure 訂用帳戶。

透過 Azure 入口網站啟動 Cloud Shell

  1. 前往 Azure 入口網站並登入。

  2. 從功能表中，選取 [Cloud Shell]。 當出現提示時，請選取 Bash 體驗。

    A screenshot of the Azure portal showing the location of the Cloud Shell menu item.

    注意

    Cloud Shell 需要有 Azure 儲存體資源，才能保存您在 Cloud Shell 中建立的任何檔案。 當第一次開啟 Cloud Shell 時，系統會提示您建立資源群組、儲存體帳戶和 Azure 檔案儲存體共用。 所有未來的 Cloud Shell 工作階段都會自動使用此設定。

選取 Azure 區域

「區域」是地理位置內的一或多個 Azure 資料中心。 美國東部、美國西部和歐洲北部都是區域範例。 每個 Azure 資源 (包括 App Service 執行個體) 都會獲指派區域。

若要讓命令更容易執行，請從選取預設區域開始。 在您指定預設區域之後，除非您指定不同的區域，否則稍後的命令都會使用該區域。

  1. 若要透過 Cloud Shell 列出您的 Azure 訂用帳戶中可用的區域，請執行下列 az account list-locations 命令。

    az account list-locations \
  --query "[].{Name: name, DisplayName: displayName}" \
  --output table

  2. 從輸出中的 Name 資料行，選取接近您的區域。 例如，選擇 eastasia 或 westus2。

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

    az configure --defaults location=<REGION>

    此範例會將 westus2 設定為預設區域：

    az configure --defaults location=westus2

建立 App Service 執行個體

在這裡，您需為您要部署至的三個階段建立 App Service 執行個體:開發、測試和預備。 以下是您要遵循的程序簡短概觀:

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

    這步驟僅供學習之用。 實際上，您會選擇符合您應用程式或服務名稱的網域名稱。

  2. 建立內含所有 App Service 執行個體的資源群組。

    為了方便學習，您將在此建立一個內含所有 App Service 執行個體的資源群組。 實際上，您可以為每個 App Service 執行個體建立個別的資源群組，以便更妥善地控制每個執行個體的生命週期。

  3. 建立 App Service 方案。

    App Service 方案會定義 Web 應用程式的 CPU、記憶體和儲存體資源。 在這裡，您會使用 B1 基本方案。 此方案適用於流量需求較低的應用程式。 標準和進階方案則適用於生產工作負載。 這些方案會在專用的虛擬機器執行個體上執行。

  4. 為「開發」、「測試」和「預備」環境各建立一個 App Service 執行個體。

  5. 取得每個環境的主機名稱。

  6. 確認每個環境都在執行，且首頁可供存取。

    注意

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

若要建立 App Service 執行個體，請遵循下列步驟：

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

    webappsuffix=$RANDOM

  2. 若要建立名為 [tailspin-space-game-rg] 的資源群組，請執行下列 az group create 命令。

    az group create --name tailspin-space-game-rg

  3. 若要建立名為 [tailspin-space-game-asp] 的 App Service 方案，請執行下列 az appservice plan create 命令。

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

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

    重要

    若您的 Azure 訂用帳戶中沒有 B1 SKU，請選取不同的方案，例如 S1 (標準)。

  4. 若要建立三個 App Service 執行個體，每個環境 (「開發」、「測試」和「預備」) 各一個，請執行下列 az webapp create 命令。

    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 基本)。 實務上，您會指派符合您預期工作負載的方案。

    例如，針對對應至「開發」和「測試」階段的環境，「B1 基本」可能是適當的方案，因為您只想要讓小組存取這兩個環境。

    針對「預備」環境，則可以選取符合您生產環境的方案。 該方案可能會提供更高的 CPU、記憶體和儲存體資源。 在該方案中，您可以在類似於您生產環境的環境中執行效能測試 (例如負載測試)。 您可以執行測試，而不會影響到您網站的即時流量。

  5. 若要列出每個 App Service 執行個體的主機名稱和狀態，請執行下列 az webapp list 命令。

    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. 選擇性地移至一或多個主機名稱。 確認其正在執行中，且預設的首頁會出現。

    以下是您看到的情況：

    A screenshot of a web browser showing the default home page on Azure App Service.

重要

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

在 Azure Pipelines 中建立管線變數

在使用 Azure Pipelines 建立發行管線中，您已將變數新增至管線，在 App Service 中儲存 Web 應用程式的名稱。 在此執行同樣的作業。 但這次，您要為每個對應至管線中「開發」、「測試」或「預備」階段的 App Service 執行個體新增一個變數。

您可以在管線設定中將這些名稱硬式編碼，但是若將其定義為變數，您的設定會更容易重複使用。 此外，若您的 App Service 執行個體名稱有所變更，您可以更新變數並觸發管線，而不需要修改設定。

若要新增變數：

  1. 在 Azure DevOps 中，移至您的 Space Game - web - Multistage 專案。

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

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

  3. 選取 [+ 變數群組]。

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

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

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

  7. 再重複執行上述兩個步驟兩次，為「測試」和「預備」環境建立變數。 範例如下：

    變數名稱 範例值
    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. 選取 建立。

建立服務連線

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

重要

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

  1. 在 Azure DevOps 中，移至您的 Space Game - web - Multistage 專案。

  2. 從頁面左下角，選取 [專案設定]。

  3. 在管線 下方，選取服務連線。

  4. 依序選取 [新增服務連線]、[Azure Resource Manager] 和 [下一步]。

  5. 在頁面開頭附近，選取 [服務主體 (自動)]。 然後選取下一步。

  6. 填入下列欄位：

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

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

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

  8. 選取 [儲存]。

    為了確認可以連線到您的 Azure 訂用帳戶，Azure DevOps 會執行測試連線。 若 Azure DevOps 無法連線，您還有機會再登入一次。