CI/CD のための GitHub Actions の実装

受講生用ラボマニュアル

ラボの要件

このラボには、Microsoft Edge または Azure DevOps 対応ブラウザーが必要です。
既存の Azure サブスクリプションを識別するか、新しいものを作成します。
Azure サブスクリプションで共同作成者または所有者のロールを持つ Microsoft アカウントまたは Microsoft Entra アカウントを持っていることを確認します。詳細については、「Azure portal を使用して Azure ロールの割り当てを一覧表示する」および「Azure Active Directory で管理者ロールを表示して割当てる」を参照してください。
このラボで使用できる GitHub アカウントをまだお持ちでない場合は、新しい GitHub アカウントのサインアップにある手順に従ってアカウントを作成してください。

ラボの概要

このラボでは、Azure Web アプリをデプロイする GitHub Actions ワークフローを実装する方法を学習します。

目標

このラボを完了すると、次のことができるようになります。

CI/CD のために GitHub Actions ワークフローを実装する。
GitHub Actions ワークフローの基本的な特性について説明する。

推定時間:40 分

Instructions

演習 0: eShopOnWeb を GitHub リポジトリにインポートする

この演習では、既存の eShopOnWeb リポジトリのコードを独自の GitHub プライベートリポジトリにインポートします。

リポジトリは次のように編成されています。 - .ado フォルダーには、Azure DevOps の YAML パイプラインが含まれています。 - .devcontainer フォルダーには、コンテナーを使って開発するためのセットアップが含まれています (VS Code でローカルに、または GitHub Codespaces で)。 - infra フォルダーには、一部のラボシナリオで使用される Bicep および ARM のコードとしてのインフラストラクチャテンプレートが含まれています。 - .github フォルダーには、YAML GitHub ワークフローの定義が含まれています。 - src フォルダーには、ラボシナリオで使用される .NET 8 Web サイトが含まれています。

タスク 1: GitHub でパブリックリポジトリを作成し、eShopOnWeb をインポートする

このタスクでは、空のパブリック GitHub リポジトリを作成し、既存の eShopOnWeb リポジトリをインポートします。

ラボコンピューターから Web ブラウザーを起動し、GitHub Web サイトに移動し、ご自分のアカウントを使ってサインインし、 [New] をクリックして新しいリポジトリを作成します。
[Create a new repository] ページで、 [Import a repository] のリンク (ページタイトルの下) をクリックします。

注: インポート Web サイトは、 https://github.com/new/import で直接開くこともできます。

[Import your project to GitHub] ページ上で:

フィールド	値
古いリポジトリのクローン URL	https://github.com/MicrosoftLearning/eShopOnWeb
所有者	アカウントの別名
リポジトリ名	eShopOnWeb
プライバシー	Public

[Begin Import] をクリックし、リポジトリの準備が整うのを待ちます。
リポジトリページで、 [Settings] に移動し、 [Actions] > [General] をクリックし、 [Allow all actions and reusable workflows] オプションを選択します。 [Save] をクリックします。

演習 1: GitHub リポジトリと Azure アクセスを設定する

この演習では、GitHub Actions から Azure サブスクリプションにアクセスする GitHub を承認するための Azure サービスプリンシパルを作成します。また、Web サイトをビルド、テストし、Azure にデプロイする GitHub ワークフローも設定します。

タスク 1: Azure サービスプリンシパルを作成し、GitHub シークレットとして保存する

このタスクでは、GitHub が目的のリソースをデプロイするために使用する Azure サービスプリンシパルを作成します。代わりに、シークレットレス認証メカニズムとして Azure の OpenID Connect を使用することもできます。

ラボコンピューターのブラウザーウィンドウで、Azure Portal (https://portal.azure.com/) を開きます。
ポータルで、 [リソースグループ] を探してクリックします。
[+ 作成] をクリックして、演習用の新しいリソースグループを作成します。
[リソースグループを作成します] タブで、リソースグループに rg-eshoponweb-NAME という名前を付けます (NAME を一意の別名に置き換えてください)。 [確認と作成] > [作成] をクリックします。
Azure Portal で、(検索バーの横にある) Cloud Shell を開きます。

注: Cloud Shell を初めて開く場合は、永続ストレージを構成する必要があります
ターミナルが Bash モードで実行されていることを確認し、次のコマンドを実行します。SUBSCRIPTION-ID と RESOURCE-GROUP を独自の識別子に置き換えてください (どちらも [リソースグループ] の [概要] ページで確認できます)。

az ad sp create-for-rbac --name GH-Action-eshoponweb --role contributor --scopes /subscriptions/SUBSCRIPTION-ID/resourceGroups/RESOURCE-GROUP --sdk-auth

注: これが 1 行として入力されるか貼り付けられていることを確認します。注: このコマンドを実行すると、前に作成したリソースグループへの共同作成者アクセス権を持つサービスプリンシパルが作成されます。これにより、GitHub Actions には、このリソースグループと対話するために必要なアクセス許可のみが付与されます (サブスクリプションの残りの部分は含まれません)
コマンドによって JSON オブジェクトが出力されます。後でそれをワークフローの GitHub シークレットとして使います。その JSON をコピーしておきます。この JSON には、Microsoft Entra ID (サービスプリンシパル) の名前で Azure に対する認証に使用される識別子が含まれます。
```
     {
         "clientId": "<GUID>",
         "clientSecret": "<GUID>",
         "subscriptionId": "<GUID>",
         "tenantId": "<GUID>",
         (...)
     }
```
また、次のコマンドを実行して、後でデプロイする Azure App Service のリソースプロバイダーを登録する必要もあります。
```
az provider register --namespace Microsoft.Web
```
ブラウザーウィンドウで、eShopOnWeb GitHub リポジトリに戻ります。
リポジトリページで [Settings] (設定) に移動し、 [Secrets and variables] (シークレットと変数) > [Actions] (アクション) をクリックします。 [New repository secret] をクリックします
- 名前 : AZURE_CREDENTIALS
- シークレット: 前にコピーした JSON オブジェクトを貼り付けます (GitHub では、azure/login アクションで使用される複数のシークレットを同じ名前で保持できます)
[Add secret] をクリックします。これで、GitHub Actions ではリポジトリシークレットを使用して、サービスプリンシパルを参照できるようになりました。

タスク 2: GitHub ワークフローを変更して実行する

このタスクでは、指定された GitHub ワークフローを変更し、それを実行して独自のサブスクリプションにソリューションをデプロイします。

ブラウザーウィンドウで、eShopOnWeb GitHub リポジトリに戻ります。
リポジトリページで、 [Code] に移動し、eShopOnWeb/.github/workflows/eshoponweb-cicd.yml というファイルを開きます。このワークフローは、指定された .NET 8 Web サイトコード用の CI/CD プロセスを定義します。
on セクションのコメントを解除します (“#”を削除します)。このワークフローはメインブランチへのプッシュのたびにトリガーされ、手動トリガー (“workflow_dispatch”) も実行できます。
env セクションで、次の変更を行います。
- RESOURCE-GROUP 変数の NAME を置き換えます。これは、前の手順で作成したのと同じリソースグループである必要があります。
- (省略可能) LOCATION には、最も近い Azure リージョンを選択できます。たとえば、”eastus”、”eastasia”、”westus” などです。
- SUBSCRIPTION-ID の YOUR-SUBS-ID を置き換えます。
- WEBAPP-NAME の NAME を一意の別名に置き換えます。これは、Azure App Service を使用してグローバルに一意の Web サイトを作成するために使用されます。
ワークフローを注意深くお読みください。理解に役立つコメントが記載されています。
[Start Commit] をクリックします。 [Commit Changes] は既定値のままにします (メインブランチを変更)。ワークフローが自動的に実行されます。

タスク 3: GitHub ワークフローの実行を確認する

このタスクでは、GitHub ワークフローの実行を確認します。

ブラウザーウィンドウで、eShopOnWeb GitHub リポジトリに戻ります。
リポジトリページで、 [Actions] に移動すると、実行前のワークフロー設定が表示されます。そのタイルをクリックします。
ワークフローが完了するまで待ちます。 [Summary] で、実行から保持される 2 つのワークフロージョブ、状態、成果物を確認できます。各ジョブをクリックしてログを確認できます。
ブラウザーウィンドウで、Azure portal (https://portal.azure.com/) に戻ります。前に作成したリソースグループを開きます。 bicep テンプレートを使用した GitHub アクションによって、Azure App Service プランと App Service が作成されていることがわかります。発行された Web サイトが表示され、App Service が開きます。 [参照] をクリックします。

(省略可能) タスク 4: GitHub 環境を使って手動承認の事前デプロイを追加する

このタスクでは、ワークフローのデプロイジョブで定義されているアクションを実行する前に、GitHub 環境を使って手動承認を求めます。

リポジトリページで、 [Code] に移動し、eShopOnWeb/.github/workflows/eshoponweb-cicd.yml というファイルを開きます。
[デプロイ] ジョブセクションには、Development という環境への参照があります。 GitHub で使用される環境では、ターゲットの保護規則 (およびシークレット) が追加されます。
リポジトリページで、 [Settings] に移動し、 [Environments] を開き、 [New environment] をクリックします。
Development の名前を指定し、 [Configure Environment] をクリックします。

注: 環境の一覧に Development という名前の環境が既に存在する場合は、環境名をクリックしてその構成を開きます。
[Configure Development] タブで、オプション [Required Reviewers] と、レビュー担当者としての GitHub アカウントをオンにします。 [Save protection rules] をクリックします。
次に、保護規則をテストしましょう。リポジトリページで、 [Actions] に移動し、 [eShopOnWeb Build and Test] ワークフローをクリックし、 [Run workflow] > [Run workflow] をクリックして手動で実行します。
開始されたワークフローの実行をクリックし、buildandtest ジョブが完了するまで待ちます。 deploy ジョブに達すると、レビュー要求が表示されます。
[Review deployments] をクリックし、 [Development] をオンにして、 [Approve and deploy] をクリックします。
ワークフローは deploy ジョブの実行に続き、完了します。

演習 2:Azure ラボリソースを削除する

この演習では、Azure Cloud Shell を使用して、このラボでプロビジョニングされた Azure リソースを削除し、不要な料金を排除します。

Azure portal で、Cloud Shell ウィンドウ内で Bash シェルセッションを開きます。
次のコマンドを実行して、このモジュールのラボ全体で作成したすべてのリソースグループのリストを表示します。
```
 az group list --query "[?starts_with(name,'rg-eshoponweb')].name" --output tsv
```
次のコマンドを実行して、このモジュールのラボ全体を通して作成したすべてのリソースグループを削除します。
```
 az group list --query "[?starts_with(name,'rg-eshoponweb')].[name]" --output tsv | xargs -L1 bash -c 'az group delete --name $0 --no-wait --yes'
```
注:コマンドは非同期に実行されるので (–nowait パラメーターで決定される)、同じ Bash セッション内ですぐに別の Azure CLI コマンドを実行できますが、リソースグループが実際に削除されるまでに数分かかります。

確認

このラボでは、Azure Web アプリをデプロイする GitHub アクションワークフローを実装しました。