練習 - 設定環境

  • 4 分鐘

重要

您必須有自己的 Azure 訂用帳戶才能執行本練習，且可能會產生費用。 如果您還沒有 Azure 訂用帳戶，請在開始前建立免費帳戶。

開始處理玩具公司的網站工作流程之前，您需要設定環境。 在此小節中，您會確定已設定 Azure 和 GitHub 環境，以完成本模組的其餘作業。

為了符合這些目標，您將執行下列工作：

  • 設定適用於此課程模組的 GitHub 存放庫。
  • 將該存放庫複製到您的電腦。
  • 在 Azure 中建立資源群組。
  • 在 GitHub 中建立祕密。

取得 GitHub 存放庫

設定您的 GitHub 存放庫，以根據範本存放庫建立新的存放庫，來完成本課程模組的其餘部分。 範本存放庫包含您開始進行此課程模組所需的檔案。

此學習路徑中的課程模組有難度分級。 基於學習目的，每個課程模組都有相關聯的 GitHub 範本存放庫。

提示

即使您已完成學習路徑中的上一個課程模組，仍請遵循這些指示建立新的存放庫，並確定您為其提供新的名稱。

從範本存放庫開始進行

執行可設定您的 GitHub 存放庫的範本。

執行範本

在 GitHub 網站上，按照下列步驟操作以從範本建立存放庫：

  1. 選取 [使用此範本]>[建立新的存放庫]。

    顯示範本存放庫 GitHub 介面的螢幕擷取畫面，其中將 [使用此範本] 按鈕反白顯示。

  2. 從 [擁有者] 下拉式清單中選取您的 GitHub 使用者名稱。

  3. 輸入新專案的存放庫名稱，例如 toy-website-test。

  4. 選取 [公開] 選項。

    建立自己的存放庫時，建議您將其設為私人。 然而，此課程模組會使用僅可與公用存放庫和 GitHub Enterprise 帳戶搭配使用的 GitHub 功能。

  5. 選取 [建立存放庫]。

    GitHub 介面的螢幕擷取畫面，其中顯示存放庫建立頁面。

重要

本課程模組的最後一個練習包含重要的清除步驟。 即使未完成本課程模組，也請務必執行清除步驟。

複製存放庫

現在，您已在自己的帳戶中擁有範本存放庫的複本。 將此存放庫複製至本機，以便開始作業。

  1. 選取 [程式碼]，然後選取複製圖示。

    GitHub 介面的螢幕擷取畫面，其中顯示新的存放庫與已醒目提示的存放庫 URL 複製按鈕。

  2. 打開 Visual Studio Code。

  3. 選取 [檢視]>[終端機]，以開啟 Visual Studio Code 終端機視窗。 該視窗通常會在畫面底部開啟。

  4. 在終端上瀏覽至您要在本機電腦上複製 GitHub 存放庫的目錄。

  5. 輸入 git clone 並貼上您稍早複製的 URL，該 URL 看起來像這樣：

    git clone https://github.com/mygithubuser/toy-website-test.git

  6. 在 Visual Studio Code 終端機中執行下列命令，以在存放庫資料夾中重新開啟 Visual Studio Code：

    code -r toy-website-test

登入 Azure

若要在 Azure 中使用資源群組，請從 Visual Studio Code 終端機登入 Azure 帳戶。 請確定您已安裝 Azure CLI 工具。

  1. 在 [終端機] 功能表中，選取 [新增終端機]。 終端機視窗通常隨即在畫面的下半部開啟。

    預設殼層通常是 pwsh，如終端視窗右側所示。

    Visual Studio Code 終端機視窗的螢幕擷取畫面，其中 pwsh 顯示為殼層選項。

  2. 選取 [啟動設定檔] 下拉式清單，然後選取 [Azure Cloud Shell (Bash)]。

    Visual Studio Code 終端視窗的螢幕擷取畫面。終端殼層下拉式清單和 Azure Cloud Shell (Bash) 功能表項目隨即顯示。

    新的殼層隨即開啟。

使用 Azure CLI 登入 Azure

  1. 在 Visual Studio Code 終端機中，執行下列命令以登入 Azure：

    az login

  2. 在開啟的瀏覽器中，登入您的 Azure 帳戶。

若要在 Azure 中使用資源群組，請從 Visual Studio Code 終端機登入 Azure 帳戶。 確定您已安裝 Azure PowerShell。

  1. 在 [終端機] 功能表中，選取 [新增終端機]。 終端機視窗通常隨即在畫面的下半部開啟。

    預設殼層通常是 pwsh，如終端視窗右側所示。

    Visual Studio Code 終端機視窗的螢幕擷取畫面，其中 pwsh 顯示為殼層選項。

  2. 選取 [啟動設定檔] 下拉式清單，然後選取 [Azure Cloud Shell (PowerShell)]。

    Visual Studio Code 終端視窗的螢幕擷取畫面。終端殼層下拉式清單和 Azure Cloud Shell (PowerShell) 功能表項目隨即顯示。

    新的殼層隨即開啟。

使用 Azure PowerShell 登入 Azure

  1. 在 Visual Studio Code 終端機中，執行下列命令以登入 Azure：

    Connect-AzAccount

  2. 在開啟的瀏覽器中，登入您的 Azure 帳戶。

建立工作負載身分識別

接下來，在 Microsoft Entra ID 中，為部署工作流程建立工作負載身分識別。

若要建立工作負載識別，Azure CLI 命令會使用 jq 來從 JSON 輸出剖析資料。 如果您尚未安裝 jq，您可以使用 Azure Cloud Shell 中的 Bash 來建立工作負載身分識別、資源群組和角色指派，並準備 GitHub 秘密。

  1. 執行下列程式碼以定義 GitHub 使用者名稱及存放庫名稱的變數。 確定您以稍早在此練習中記下的 GitHub 使用者名稱來取代 <myGithubUser>。 也請確定您指定正確的 GitHub 存放庫名稱。

    githubOrganizationName='<myGithubUser>'
githubRepositoryName='toy-website-test'

  2. 為部署工作流程建立工作負載身分識別。 您會建立兩個同盟認證來準備此課程模組稍後的練習。

    applicationRegistrationDetails=$(az ad app create --display-name 'toy-website-test')
applicationRegistrationObjectId=$(echo $applicationRegistrationDetails | jq -r '.id')
applicationRegistrationAppId=$(echo $applicationRegistrationDetails | jq -r '.appId')

az ad app federated-credential create \
   --id $applicationRegistrationObjectId \
   --parameters "{\"name\":\"toy-website-test\",\"issuer\":\"https://token.actions.githubusercontent.com\",\"subject\":\"repo:${githubOrganizationName}/${githubRepositoryName}:environment:Website\",\"audiences\":[\"api://AzureADTokenExchange\"]}"

az ad app federated-credential create \
   --id $applicationRegistrationObjectId \
   --parameters "{\"name\":\"toy-website-test-branch\",\"issuer\":\"https://token.actions.githubusercontent.com\",\"subject\":\"repo:${githubOrganizationName}/${githubRepositoryName}:ref:refs/heads/main\",\"audiences\":[\"api://AzureADTokenExchange\"]}"

  1. 執行下列的程式碼，來定義 GitHub 使用者名稱和存放庫名稱的變數。 確定您以稍早在此練習中記下的 GitHub 使用者名稱來取代 <myGithubUser>。 也請確定您指定正確的 GitHub 存放庫名稱。

    $githubOrganizationName = '<myGithubUser>'
$githubRepositoryName = 'toy-website-test'

  2. 為部署工作流程建立工作負載身分識別。 您會建立兩個同盟認證來準備此課程模組稍後的練習。

    $applicationRegistration = New-AzADApplication -DisplayName 'toy-website-test'
New-AzADAppFederatedCredential `
   -Name 'toy-website-test' `
   -ApplicationObjectId $applicationRegistration.Id `
   -Issuer 'https://token.actions.githubusercontent.com' `
   -Audience 'api://AzureADTokenExchange' `
   -Subject "repo:$($githubOrganizationName)/$($githubRepositoryName):environment:Website"

New-AzADAppFederatedCredential `
   -Name 'toy-website-test-branch' `
   -ApplicationObjectId $applicationRegistration.Id `
   -Issuer 'https://token.actions.githubusercontent.com' `
   -Audience 'api://AzureADTokenExchange' `
   -Subject "repo:$($githubOrganizationName)/$($githubRepositoryName):ref:refs/heads/main"

在 Azure 中建立資源群組，並授與工作負載身分識別存取權

接下來，為網站建立一個資源群組。 此程序也會在資源群組上為工作負載身分識別授與參與者角色，讓您的工作流程能夠部署至資源群組。

在 Visual Studio Code 終端中，執行下列 Azure CLI 命令：

resourceGroupResourceId=$(az group create --name ToyWebsiteTest --location westus3 --query id --output tsv)

az ad sp create --id $applicationRegistrationObjectId
az role assignment create \
  --assignee $applicationRegistrationAppId \
  --role Contributor \
  --scope $resourceGroupResourceId

在 Visual Studio Code 終端中，執行下列 Azure PowerShell 命令：

$resourceGroup = New-AzResourceGroup -Name ToyWebsiteTest -Location westus3

New-AzADServicePrincipal -AppId $($applicationRegistration.AppId)
New-AzRoleAssignment `
  -ApplicationId $($applicationRegistration.AppId) `
  -RoleDefinitionName Contributor `
  -Scope $($resourceGroup.ResourceId)

準備 GitHub 祕密

執行下列程式碼，以顯示您建立來作為 GitHub 祕密所需的值：

echo "AZURE_CLIENT_ID: $applicationRegistrationAppId"
echo "AZURE_TENANT_ID: $(az account show --query tenantId --output tsv)"
echo "AZURE_SUBSCRIPTION_ID: $(az account show --query id --output tsv)"

$azureContext = Get-AzContext
Write-Host "AZURE_CLIENT_ID: $($applicationRegistration.AppId)"
Write-Host "AZURE_TENANT_ID: $($azureContext.Tenant.Id)"
Write-Host "AZURE_SUBSCRIPTION_ID: $($azureContext.Subscription.Id)"

建立 GitHub 祕密

您已建立工作負載身分識別，以及其可部署至的資源群組。 接下來，在 GitHub Actions 中建立祕密。

  1. 在瀏覽器中，瀏覽至您的 GitHub 存放庫。

  2. 選取[設定]>[秘密和變數]>[動作]。

  3. 選取 [新增存放庫祕密]。

    GitHub 介面的螢幕擷取畫面，其中顯示 [Secrets] \(祕密\) 頁面並醒目提示 [Create repository secret] \(建立存放庫祕密\) 按鈕。

  4. 將祕密命名為 AZURE_CLIENT_ID。

  5. 在 [Value] \(值\) 欄位中，貼上來自終端輸出第一行的 GUID。 請勿在值中包含 AZURE_CLIENT_ID、冒號或任何空格。

  6. 選取 [新增祕密]。

    GitHub 介面的螢幕擷取畫面，其中顯示 [新增祕密] 頁面，已在其上填寫名稱和值且已醒目提示 [新增祕密] 按鈕。

  7. 重複此程序，以建立 AZURE_TENANT_ID 和 AZURE_SUBSCRIPTION_ID 的祕密，並從終端輸出的對應欄位中複製值。

  8. 確認祕密清單現在會顯示這三個祕密。

    顯示祕密清單的 GitHub 介面螢幕擷取畫面。