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 分

手順

演習 1: 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] をクリックします。

演習 2: 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] をクリックします。

注: [Environments] 一覧に 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 ジョブの実行に続き、完了します。

[!IMPORTANT] 不要な料金が発生しないように、Azure portal で作成されたリソースを必ず削除してください。

確認

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