練習 - 設定您的 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 訂用帳戶中存在的資源。 若要簡化此程式，請在相同的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 組織的範本。

  1. 在 Visual Studio 或您選擇的 IDE 中取得並執行 ADOGenerator 專案。

  2. 當系統提示您 從範本清單中輸入範本號碼時，輸入 32 以 在 Azure Pipelines 中執行功能測試，然後按 Enter。

  3. 選擇您的驗證方法。 您可以 設定並使用個人存取令牌 （PAT） 或使用裝置登入。

    備註

    如果您設定 PAT，請務必授權必要的 範圍。 在此課程模組中，您可以使用 完整存取權，但在真實世界中，您應該確保只授與必要的範圍。

  4. 輸入您的 Azure DevOps 組織名稱，然後按 Enter。

  5. 如果出現提示，請輸入您的 Azure DevOps PAT，然後按 Enter。

  6. 輸入項目名稱，例如 Space Game - web - 功能測試，然後按 Enter。

  7. 建立項目之後，請移至瀏覽器 （at https://dev.azure.com/<your-organization-name>/） 中的 Azure DevOps 組織，然後選取專案。

分叉存放庫

如果您還沒有這樣做，請建立一個 mslearn-tailspin-spacegame-web-deploy 存放庫的 fork。

  1. 在 GitHub 上，移至 mslearn-tailspin-spacegame-web-deploy 存放庫。

  2. 選取畫面右上方的 Fork。

  3. 選擇您的 GitHub 帳戶作為擁有者，然後選擇建立 Fork。

這很重要

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

設定專案的可見度

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

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

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

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

在這部分中，您會為自己指派一個與您工作模組相關的專案任務到 Azure Boards。 您也會將工作項目移至 [執行中] 狀態。 實際上，您的團隊會在每個衝刺或迭代開始時建立工作項目。

以這種方式指派工作，您將取得據以展開工作的檢查清單。 這可讓您的小組瞭解您正在處理的工作，以及剩餘的工作量。 它也有助於小組對進行中的工作強制執行限制，以避免一次承擔太多工作。

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

Azure Boards 的螢幕快照，其中顯示此短期衝刺的工作。

備註

在 Azure DevOps 組織內，工作項目會依序編號。 在您的專案中，每個工作項目的數目可能不符合您在這裡看到的內容。

在這裡，您會將第三個專案 自動化質量測試移至 [執行中] 數據行。 然後，您會將自己指派給這個工作項目。 自動化質量測試 與自動化 Space Game 網站的 UI 測試有關。

設定工作項目：

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

    Azure DevOps 的螢幕擷取畫面，顯示 Boards 功能表的位置。

  2. 在 [自動化質量測試 ] 工作專案上，選取卡片底部的向下箭號，然後將工作專案指派給自己。

    Azure Boards 的螢幕擷取畫面，顯示向下箭號的位置。

  3. 將工作專案從 [To Do ] 資料行移至 [執行中] 資料行。

    Azure Boards 的螢幕擷取畫面，顯示 [執行中] 資料行中的卡片。

在本模組結束時，完成任務後，您會將卡片移至完成欄。

在本機設定專案

在這裡，您會在 Visual Studio Code 中載入 Space Game 專案、設定 Git、在本機複製存放庫，以及設定上游遠端，以便下載入門程序代碼。

備註

如果您已在本機使用 mslearn-tailspin-spacegame-web-deploy 專案進行設定，您可以移至下一節。

開啟整合式終端

Visual Studio Code 隨附整合式終端機。 在這裡，您會在命令行下編輯檔案並工作。

  1. 啟動 Visual Studio Code。

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

  3. 在下拉式清單中，選取 [Git Bash]。 如果您熟悉並偏好使用不同的 Unix 殼層，請選擇您喜歡的那個殼層。

    Visual Studio Code 的螢幕快照，其中顯示 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 複製到剪貼簿。

    顯示如何從 GitHub 存放庫尋找 URL 和複製按鈕的螢幕快照。

  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: 將 'code' 指令安裝在 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. 從輸出中的 [ 名稱 ] 資料行，選擇接近您的區域。 例如，選擇 eastasia 或 westus2。

  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 "DOTNETCORE|8.0"

az webapp create \
  --name tailspin-space-game-web-test-$webappsuffix \
  --resource-group tailspin-space-game-rg \
  --plan tailspin-space-game-asp \
  --runtime "DOTNETCORE|8.0"

az webapp create \
  --name tailspin-space-game-web-staging-$webappsuffix \
  --resource-group tailspin-space-game-rg \
  --plan tailspin-space-game-asp \
  --runtime "DOTNETCORE|8.0"

    為了學習目的，您可以在這裡將相同的 App Service 方案 （B1 基本） 套用至每個 App Service 實例。 實際上，您會指派符合您預期工作負載的方案。

  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. 在選擇性步驟中，將一或多個名稱複製並貼到您的瀏覽器中，以確認它們正在執行，且預設的首頁隨即出現。

    您應該會看到類似以下的頁面：

    Azure App Service 上的預設首頁。

這很重要

此課程模組中的清除您的 Azure DevOps 環境頁面包含重要的清除步驟。 清理可以確保您在完成本模組之後，不會被收取 Azure 資源的費用。 請務必執行清除步驟，即使您未完成此課程模組亦然。

在 Azure Pipelines 中建立管線變數

在使用 Azure Pipelines 建立多階段管線中，您已為每個 App Service 實例新增一個變數，其對應至管線中的開發、測試和預備階段。 在此執行同樣的作業。

管線設定中的每個階段都會使用這些變數來識別要部署的App Service實例。

若要新增變數：

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

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

    Azure Pipelines 的螢幕快照，其中顯示 [連結庫] 功能表選項。

  3. 選取 + 變數群組。

  4. 在 [屬性] 底下，針對變數組名輸入 Release。

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

  6. 如需變數的名稱，請輸入 WebAppNameDev。 針對其值，輸入對應至 您開發 環境的 App Service 實例名稱，例如 tailspin-space-game-web-dev-1234。

  7. 重複步驟 5 和 6 兩次，為您的 測試 與 預備 環境建立變數，如下表所示：

    變數名稱 範例值
    WebAppNameTest 尾旋-太空-遊戲-網絡-測試-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. 在頁面頂端附近，選取 [儲存]，將您的變數儲存至管線。

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

    Azure Pipelines 的螢幕快照，其中顯示變數群組。此群組包含三個變數。

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

在使用 Azure Pipelines 建立多階段管線中，您已建立開發、測試和預備環境的環境。 在這裡，您會重複此過程。 不過，這次，您會省略其他準則，例如人類核准的需求，以推動變更從一個階段到下一階段。

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

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

    Azure Pipelines 的螢幕快照，其中顯示 [環境] 功能表選項的位置。

  2. 若要建立 開發 環境：

    1. 點選 [建立環境]。
    2. 在 [ 名稱] 底下，輸入 dev。
    3. 將其餘欄位保留為預設值。
    4. 選取 ，創建。

  3. 若要建立 測試 環境：

    1. 返回 [ 環境] 頁面。
    2. 選擇新增環境。
    3. 在 [名稱] 底下，輸入 測試。
    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 無法連線，您就有機會第二次登入。