練習 - 設定環境

  • 20 分鐘

在本節中，您將確實完成設定 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 - Deployment patterns。

    Screenshot that shows how to create 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) 限制，讓小組不會一次處理太多工作。

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

Screenshot of Azure Boards that shows the tasks for this sprint.

注意

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

在這裡，您會將第五個項目 (改善發行步調) 移至 [執行中] 資料行。 然後將自己指派給工作項目。 改善發行步調與選擇部署模式有關，可讓您快速地將變更發行給使用者。

設定工作項目：

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

    Screenshot of Azure DevOps that shows the location of the Boards menu.

  2. 在 [改善發行步調] 工作項目的底部，選取向下箭號。 然後，將工作項目指派給您自己。

    Screenshot of Azure Boards that shows the location of the down arrow.

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

    Screenshot of Azure Boards that shows 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 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. 執行下列命令，建立兩個 App Service 方案。

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

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

    重要

    如果您的 Azure 訂用帳戶中沒有 B1 SKU，請選擇其他方案，例如 S1 (標準)。

    回想一下，App Service 方案定義了為執行您的 Web 應用程式所提供的 CPU、記憶體和儲存體資源。

    第一個命令會指定 B1 方案。 此方案會在基本層上執行。 App Service 環境會針對開發和測試階段使用此計畫。 B1 基本方案適用於具有低流量需求的應用程式，例如在開發或測試環境中。

    第二個命令會指定在進階層執行的 P1V2 方案。 此方案用於預備階段。 PREMIUM P1V2 方案適用於生產工作負載。 會在專用虛擬機器執行個體上執行。

    基本方案層不提供任何額外的部署位置。 不過進階方案會提供。 這就是為什麼您需要進階方案以用於預備環境的原因。

  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-test-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-test-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-prod-asp \
  --runtime "DOTNET|6.0"

    請注意，您會為用於開發和測試的 App Service 執行個體套用相同的 App Service 方案 B1 基本。 您會將 App Service 方案進階 P1V2 套用至 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. 選擇性前往一或多個名稱。 確認其正在執行，且預設的首頁會顯示。

    您會在每個環境中看到以下頁面：

    Screenshot of the default home page in Azure App Service.

重要

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

在 Azure Pipelines 中建立管線變數

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

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

若要新增變數：

  1. 在 Azure DevOps 中，前往您的 Space Game - web - Deployment patterns 專案。

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

    Screenshot of Azure Pipelines that shows 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. 在頁面頂端附近，選取 [儲存]，將您的變數儲存至管線。

    您的變數群組如下所示：

    Screenshot of Azure Pipelines that shows the variable group. The group contains three variables.

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

在先前的課程模組中，您已建立開發、測試和預備環境。 在此將重複此流程。

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

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

    Screenshot of Azure Pipelines that shows 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 - Deployment patterns 專案。

  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 無法連線，您還有機會再登入一次。

從 GitHub 擷取分支

在這裡，您會從 GitHub 擷取 blue-green 分支。 然後，簽出或切換至該分支。

此分支包含您在先前課程模組中使用的 Space Game 專案，以及您首先要處理的 Azure Pipelines 設定。

  1. 在 Visual Studio Code 中，開啟整合式終端。

  2. 執行下列 git 命令，以從 Microsoft 存放庫擷取名為 blue-green 的分支，並切換至該分支。

    git fetch upstream blue-green
git checkout -B blue-green upstream/blue-green

    這些命令的格式可讓您從稱為 upstream 的 Microsoft GitHub 存放庫取得起始程式碼。 不久後，您就會將此分支推送至自己的 GitHub 存放庫，名為 origin。

  3. 您可以選擇性從 Visual Studio Code 開啟 azure-pipelines.yml。 熟悉初始組態。

    此組態類似於您在此學習路徑的先前課程模組中所建立的設定。 其只會建置應用程式的發行設定。 為了簡潔起見，它會省略您在先前課程模組中設定的觸發程序、手動核准與測試。

    基於學習目的，此設定會將任何分支的變更升階為開發、測試和預備。 更完善的做法是只升階版本分支或 main 的變更。 在使用 Azure Pipelines 建立多階段管線課程模組中，您用過這個完善做法。

執行管線並查看已部署的網站

在此，您會將初始設定推送至 GitHub，讓您與小組保持最新狀態。 稍後，您會為預備環境新增位置，以便實作藍綠部署。

  1. 在 Visual Studio Code 中，開啟整合式終端。

  2. 執行下列 git commit 命令，以將空的項目新增至您的認可記錄。

    git commit --allow-empty -m "Trigger the pipeline"

    這步驟僅供學習之用。 這並不是一般的做法。 我們會提供您無需現在修改的起始程式碼。 --allow-empty 旗標可確保下一個步驟成功將分支推送至 GitHub，並觸發 Azure Pipelines 以執行。

    如果您省略這個步驟，在下一個步驟中執行的 git push 命令將不會採取任何動作。 因此其不會觸發 Azure Pipelines 執行。

  3. 執行下列 git push 命令，以將分支上傳至您的 GitHub 存放庫。

    git push origin blue-green

  4. 在 Azure Pipelines 中，移至該組建。 接下來在執行時追蹤該組建。 出現提示時，選取 [允許] 將部署權限授與給不同階段。

  5. 管線執行完成後，瀏覽至摘要頁面查看您的管線狀態。

    Screenshot of Azure Pipelines that shows the completed stages.

  6. 瀏覽至對應至每個階段的 URL。 您的 Web 應用程式應該部署到各個環境。

    Screenshot of a web browser that shows the Space Game website in the Dev environment.