演習 - 環境を設定する

  • 4 分

重要

この演習を行うには、独自の Azure サブスクリプションが必要です。また、料金が発生することがあります。 Azure サブスクリプションをお持ちでない場合は、開始する前に無料アカウントを作成してください。

おもちゃ会社の Web サイトのワークフローで作業を開始する前に、環境を構成する必要があります。 このセクションでは、このモジュールの残りの部分を完了するために、Azure と GitHub 環境が設定されていることを確認します。

これらの目標を達成するには、次のタスクを実行します。

  • このモジュール向けに GitHub リポジトリを設定します。
  • リポジトリをコンピューターに複製します。
  • Azure でリソース グループを作成する。
  • GitHub にシークレットを作成します。

GitHub リポジトリを取得する

テンプレート リポジトリに基づいて新しいリポジトリを作成して、このモジュールの残りの部分を完了するように GitHub リポジトリを設定します。 テンプレート リポジトリには、このモジュールを開始するために必要なファイルが含まれています。

このラーニング パスのモジュールは、段階的に進めるラーニング パスの一部となっています。 各モジュールには、学習のための、関連する GitHub テンプレート リポジトリがあります。

ヒント

ラーニング パスで前のモジュールを完了した場合でも、次の手順に従って新しいリポジトリを作成し、新しい名前を付けます。

テンプレート リポジトリから開始する

GitHub リポジトリを設定するテンプレートを実行します。

テンプレートの実行

GitHub サイトで、次の手順を実行して、テンプレートからリポジトリを作成します。

  1. [このテンプレートを使用]>[新しいリポジトリの作成] の順に選択します。

    強調表示されている [このテンプレートを使用] ボタンのあるテンプレート リポジトリが示されている GitHub インターフェイスのスクリーンショット。

  2. [所有者] ドロップダウン リストから GitHub ユーザー名を選択します。

  3. 新しいプロジェクトのリポジトリ名を入力します (toy-website-test など)。

  4. [Public](パブリック) オプションを選択します

    独自のリポジトリを作成するときに、プライベートにしたい場合もあります。 ただし、このモジュールでは、パブリック リポジトリと GitHub Enterprise アカウントでのみ動作する GitHub の機能をいくつか使用します。

  5. [Create repository] (リポジトリの作成) を選択します。

    リポジトリ作成ページが表示されている GitHub インターフェイスのスクリーンショット。

重要

このモジュールの最後の演習には、重要なクリーンアップ ステップが含まれています。 クリーンアップ手順は、このモジュールを完了しなかった場合でも必ず行ってください。

リポジトリの複製

これで、独自のアカウントでテンプレート リポジトリのコピーが作成されました。 作業を始められるように、このリポジトリをローカル環境にクローンしてください。

  1. [コード] を選択して、コピー アイコンを選択します。

    GitHub インターフェイスのスクリーンショット。新しいリポジトリが表示され、リポジトリの URL のコピー ボタンが強調表示されています。

  2. Visual Studio Code を開きます。

  3. [表示]>[ターミナル] を選択して、Visual Studio Code ターミナル ウィンドウを開きます。 このウィンドウは通常、画面の下部に表示されます。

  4. ターミナルで、ローカル コンピューター上の GitHub リポジトリをクローンするディレクトリに移動します。

  5. 「git clone」と入力し、先ほどコピーした 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. [ターミナル] メニューで、[新しいターミナル] を選択します。 通常、ターミナル ウィンドウは画面の下半分に表示されます。

  2. ターミナル ウィンドウの右側に示されているように、通常、既定のシェルは pwsh です。

    Visual Studio Code ターミナル ウィンドウのスクリーンショット。シェル オプションとして p w s h が表示されています。

  3. シェル ドロップダウンを選択し、[Azure Cloud Shell (bash)] を選択します。

    ターミナル シェルのドロップダウンが表示され、[Azure Cloud Shell (bash)] が選択されている Visual Studio Code ターミナル ウィンドウのスクリーンショット。

  4. 新しいシェルが開きます。

Azure CLI を使用して Azure にサインインする

  1. Visual Studio Code のターミナルで次のコマンドを実行して、Azure にサインインします。

    az login

  2. 開いたブラウザーで、Azure アカウントにサインインします。

Azure でリソース グループを使用するには、Visual Studio Code ターミナルから Azure アカウントにサインインします。 Azure PowerShell がインストールされていることを確認します。

  1. [ターミナル] メニューで、[新しいターミナル] を選択します。 通常、ターミナル ウィンドウは画面の下半分に表示されます。

  2. ターミナル ウィンドウの右側に示されているように、通常、既定のシェルは pwsh です。

    Visual Studio Code ターミナル ウィンドウのスクリーンショット。シェル オプションとして p w s h が表示されています。

  3. シェル ドロップダウンを選択し、[Azure Cloud Shell (PowerShell)] を選択します。

    ターミナル シェルのドロップダウンが表示され、[Azure Cloud Shell (PowerShell)] が選択されている Visual Studio Code ターミナル ウィンドウのスクリーンショット。

  4. 新しいシェルが開きます。

Azure PowerShell を使用して Azure にサインインする

  1. Visual Studio Code のターミナルで次のコマンドを実行して、Azure にサインインします。

    Connect-AzAccount

  2. 開いたブラウザーで、Azure アカウントにサインインします。

ワークロード ID を作成する

次に、デプロイ ワークフロー用のワークロード ID を Microsoft Entra ID で作成します。

ワークロード ID を作成するため、Azure CLI コマンドは jq を使って JSON 出力からのデータを解析します。 jq をインストールしていない場合は、Azure Cloud Shell で Bash を使って、ワークロード ID、リソース グループ、ロールの割り当てを作成し、GitHub シークレットを準備できます。

  1. 次のコードを実行して、GitHub ユーザー名とリポジトリ名の変数を定義します。 <myGithubUser> は必ず、この演習で前にメモした GitHub ユーザー名に置き換えてください。 また、正しい GitHub リポジトリ名を指定するようにしてください。

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

  2. デプロイ ワークフロー用のワークロード ID を作成します。 このモジュールの後半にある演習の準備をするために、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 ユーザー名とリポジトリ名の変数を定義します。 <myGithubUser> は必ず、この演習で前にメモした GitHub ユーザー名に置き換えてください。 また、正しい GitHub リポジトリ名を指定するようにしてください。

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

  2. デプロイ ワークフロー用のワークロード ID を作成します。 このモジュールの後半にある演習の準備をするために、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 でリソース グループを作成し、ワークロード ID にアクセス権を付与する

次に、Web サイト用のリソース グループを作成します。 また、このプロセスでは、ワークロード ID にリソース グループの共同作成者ロールを付与し、ワークフローでリソース グループにデプロイできるようにします。

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 シークレットを作成する

ワークロード ID と、それがデプロイできるリソース グループを作成しました。 次に、GitHub Actions でシークレットを作成します。

  1. ブラウザーで GitHub リポジトリに移動します。

  2. [設定]>[シークレットと変数]>[アクション] の順に選択します。

  3. [New repository secret](新しいリポジトリ シークレット) を選択します。

    GitHub インターフェイスの [Secrets]\(シークレット\) ページのスクリーンショット。[Create repository secret]\(リポジトリ シークレットの作成\) ボタンが強調表示されています。

  4. シークレットに AZURE_CLIENT_ID という名前を付けます。

  5. [値] フィールドに、ターミナル出力の最初の行の GUID を貼り付けます。 値には、AZURE_CLIENT_ID、コロン、スペースを含めないでください。

  6. [Add secret](シークレットの追加) を選択します。

    [New Secret]\(新しいシークレット\) ページが表示されている GitHub インターフェイスのスクリーンショット。名前と値が入力され、[Add Secret]\(シークレットの追加\) ボタンが強調表示されています。

  7. このプロセスを繰り返して AZURE_TENANT_ID と AZURE_SUBSCRIPTION_ID のシークレットを作成します。値は、ターミナル出力の対応するフィールドからコピーします。

  8. シークレットの一覧に現在 3 つのシークレットが表示されていることを確認します。

    シークレットの一覧を示す GitHub インターフェイスのスクリーンショット。