演習 - Azure DevOps 環境を設定する

このセクションでは、Azure DevOps 組織がこのモジュールの残りを完了する準備が整っていることを確認します。 また、デプロイする Azure App Service 環境も作成します。

これらのタスクを実行するには、次の手順を実行します。

Azure DevOps にユーザーを追加する

このモジュールを完了するには、独自の Azure サブスクリプションが必要です。 Azure の使用は無料で開始できます。

Azure DevOps を操作するために Azure サブスクリプションは必要ありませんが、ここでは Azure DevOps を使用して、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 組織を設定するテンプレートを実行します。

1. Visual Studio または選択した IDE で ADOGenerator プロジェクトを取得して実行します。

2. テンプレートの一覧からテンプレート番号を入力するように求められたら、「Azure Pipelines で機能テストを実行する」に「32」と入力し、Enter キーを押します。

3. 認証方法を選択します。 個人用アクセス トークン (PAT) を設定して使用することも、デバイス ログインを使用することもできます。

   注

   PAT を設定する場合は、必ず必要なスコープを承認 してください。 このモジュールではフル アクセスを使用できますが、実際の状況では、必要なスコープのみを付与する必要があります。

4. Azure DevOps 組織名を入力し、 Enter キーを押します。

5. メッセージが表示されたら、Azure DevOps PAT を入力し、 Enter キーを押します。

6. Space Game - Web - Functional テストなどのプロジェクト名を入力し、Enter キーを押します。

7. プロジェクトが作成されたら、ブラウザー ( https://dev.azure.com/<your-organization-name>/) で Azure DevOps 組織に移動し、プロジェクトを選択します。

リポジトリのフォーク

まだ作成していない場合は、 mslearn-tailspin-spacegame-web-deploy リポジトリのフォークを作成します。

1. GitHub で、 mslearn-tailspin-spacegame-web-deploy リポジトリに移動します。

2. 画面の右上にある [フォーク ] を選択します。

3. 所有者として GitHub アカウントを選択し、[フォークの作成] を選択します。

プロジェクトの可視性を設定する

最初は、GitHub 上の Space Game リポジトリのフォークはパブリックに設定され、Azure DevOps テンプレートによって作成されたプロジェクトはプライベートに設定されます。 GitHub 上のパブリック リポジトリには誰でもアクセスできますが、プライベート リポジトリには自分のほかに共有することを選択したユーザーのみがアクセスできます。 同様に、Azure DevOps では、パブリック プロジェクトでは認証されていないユーザーに読み取り専用アクセスを提供しますが、プライベート プロジェクトではユーザーがサービスにアクセスするにはアクセス権の付与と認証が必要です。

現時点では、このモジュールにおいてこれらの設定を変更する必要はありません。 ただし、個人のプロジェクトでは、他のユーザーに付与する可視性とアクセス権を決定する必要があります。 たとえば、プロジェクトがオープンソースの場合は、GitHub リポジトリと Azure DevOps プロジェクトの両方をパブリックにすることを選択できます。 プロジェクトが独自のものである場合は、GitHub リポジトリと Azure DevOps プロジェクトの両方をプライベートにするのが一般的です。

後で、プロジェクトに最適なオプションを決定する際に、次のリソースが役立つ場合があります。

• プライベート プロジェクトとパブリック プロジェクトを使用する
• プロジェクトの可視性をパブリックまたはプライベートに変更する
• リポジトリの可視性の設定

作業項目を [実行中] に移動する

このパートでは、このモジュールに関連する作業項目を自分で Azure Boards に割り当てます。 また、作業項目を [実行 中] 状態に移動します。 実際には、チームは各スプリントまたは作業イテレーションの開始時に作業項目を作成します。

このように作業を割り当てることで、作業の起点となるチェックリストが得られます。 チームは、作業内容と残っている作業量を把握できます。 また、チームが進行中の作業 (WIP) に制限を適用して、一度に多くの作業を行わないようにするのにも役立ちます。

チームは、現在のスプリントに関する次の最も大いな問題を解決したことを思い出してください。

ここでは、3 番目の項目である [品質テストの自動化] を [ 実行 ] 列に移動します。 次に、作業項目に自分自身を割り当てます。 品質テストの自動化 は、 Space Game Web サイトの UI テストの自動化に関連します。

作業項目を設定するには、次のようにします。

1. Azure DevOps から Boards に移動し、メニューから [Boards ] を選択します。

   

2. [ 品質テストの自動化 ] 作業項目で、カードの下部にある下矢印を選択し、作業項目を自分に割り当てます。

   

3. 作業項目を [ To Do ] 列から [ 実行 ] 列に移動します。

   

このモジュールの最後に、タスクを完了したら、カードを [完了] 列に移動します。

プロジェクトをローカルで設定する

ここでは、Visual Studio Code で Space Game プロジェクトを読み込み、Git を構成し、リポジトリをローカルに複製して、スターター コードをダウンロードできるようにアップストリーム リモートを設定します。

統合ターミナルを開く

Visual Studio Code には統合ターミナルが付属しています。 ここでは、ファイルを編集し、コマンド ラインから作業します。

1. Visual Studio Code を起動します。

2. [View] メニューで、[Terminal] を選択します。

3. ドロップダウン リストで、 Git Bash を選択します。 使用する別の Unix シェルに慣れている場合は、代わりにそのシェルを選択します。

   

   ターミナル ウィンドウでは、システムにインストールされている任意のシェルを選択できます。 たとえば、Git Bash、PowerShell、または別のシェルを選択できます。

   ここでは、Git for Windows の一部である Git Bash を使用します。これにより、Git コマンドを簡単に実行できます。

   注

   Windows で、Git Bash がオプションとして表示されない場合は、Git がインストール済みであることを確認してから、Visual Studio Code を再起動してください。

4. cd コマンドを実行して、作業するディレクトリに移動します。 必要に応じて、ホーム ディレクトリ (~) または別のディレクトリを選択します。

   cd ~
   

Git を構成する

Git と GitHub を初めて使用する場合は、最初にいくつかのコマンドを実行して ID を Git に関連付け、GitHub で認証します。 詳細については、「Git の セットアップ」を参照してください。

少なくとも、次の手順を完了する必要があります。 統合ターミナルからコマンドを実行します。

1. ユーザー名を設定します。
2. コミット電子メール アドレスを設定します。
3. GitHub パスワードをキャッシュします。

Visual Studio Code でプロジェクトを設定する

Azure DevOps を使用したアプリケーションのビルド ラーニング パスでは、Git リポジトリをフォークして複製しました。 リポジトリには、 Space Game Web サイトのソース コードが含まれています。 フォークは Azure DevOps のプロジェクトに接続されているため、GitHub に変更をプッシュするとビルドが実行されます。

このパートでは、パイプライン構成を変更して構築できるように、フォークをローカルに複製します。

フォークをローカルにクローンする

これで、GitHub アカウントに Space Game Web プロジェクトのコピーが作成されました。 次に、コンピューターにコピーをダウンロードまたは 複製して、操作できるようにします。

クローンは、フォークと同様にリポジトリのコピーです。 リポジトリを複製するときに、変更を加え、それらが期待どおりに動作することを確認してから、それらの変更を GitHub にアップロードできます。 また、他の認証済みユーザーがリポジトリの GitHub コピーに加えた変更とローカル コピーを同期することもできます。

Space Game Web プロジェクトをコンピューターにクローンするには、次のようにします。

1. GitHub の Space Game Web プロジェクト (mslearn-tailspin-spacegame-web-deploy) のフォークに移動します。

2. [コード] を選択します。 次に、[HTTPS] タブで、URL を自分のクリップボードにコピーできるように表示されている URL の横のボタンを選択します。

   

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 コマンドを実行して、Microsoft リポジトリを指す「upstream」という名前のリモートを作成します。

   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 コマンドが失敗した場合は、ご使用のシステム PATH に Visual Studio Code を追加する必要があります。 これを行うには、次の手順を実行します。

1. Visual Studio Code で、[F1] を選択するか、[表示]>[コマンド パレット] を選択して、コマンド パレットにアクセスします。
2. コマンド パレットで、「 シェル コマンド: PATH に 'code' コマンドをインストールする」と入力します。
3. 前の手順を繰り返して、ファイル エクスプローラーでプロジェクトを開きます。

これで、Space Game のソース コードと Azure Pipelines 構成をローカル開発環境から操作できるように設定されました。

Azure App Service 環境を作成する

ここでは、パイプライン ステージを定義する環境を作成します。 開発、テスト、ステージングの各ステージに対応する 1 つの App Service インスタンスを作成します。

Azure Pipelines を使用したマルチステージ パイプラインの作成 モジュールでは、Azure CLI を使用して App Service インスタンスを作成しました。 ここでは、同じ操作を行います。

Azure portal を使用して Cloud Shell を起動する

1. Azure Portal にアクセスしてサインインします。
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 インスタンスを作成する

ここでは、デプロイ先の 3 つのステージ ( 開発、 テスト、 ステージング) の App Service インスタンスを作成します。

1. Cloud Shell から、Web アプリのドメイン名を一意にする乱数を生成します。

   webappsuffix=$RANDOM
   

2. 次の az group create コマンドを実行して、 tailspin-space-game-rg という名前のリソース グループを作成します。

   az group create --name tailspin-space-game-rg
   

3. 次の az appservice plan create コマンドを実行して、 tailspin-space-game-asp という名前の App Service プランを作成します。

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

   --sku引数は、Basic レベルで実行される B1 プランを指定します。 --is-linux 引数では、Linux ワーカーを使用するよう指定しています。

   重要

   B1 SKU が Azure サブスクリプションに含まれていない場合は、S1 (Standard) などの別のプランを選択します。

4. 次の az webapp create コマンドを実行して、3 つの App Service インスタンス ( 開発、 テスト、 ステージング の各環境に対して 1 つ) を作成します。

   az webapp create \
     --name tailspin-space-game-web-dev-$webappsuffix \
     --resource-group tailspin-space-game-rg \
     --plan tailspin-space-game-asp \
     --runtime "DOTNETCORE|8.0"
   
   az webapp create \
     --name tailspin-space-game-web-test-$webappsuffix \
     --resource-group tailspin-space-game-rg \
     --plan tailspin-space-game-asp \
     --runtime "DOTNETCORE|8.0"
   
   az webapp create \
     --name tailspin-space-game-web-staging-$webappsuffix \
     --resource-group tailspin-space-game-rg \
     --plan tailspin-space-game-asp \
     --runtime "DOTNETCORE|8.0"
   

   学習目的で、ここで各 App Service インスタンスに同じ App Service プラン (B1 Basic) を適用します。 実際には、予想されるワークロードに一致するプランを割り当てます。

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. オプションの手順として、1 つ以上の名前をコピーしてブラウザーに貼り付けて、それらが実行されていることと、既定のホーム ページが表示されることを確認します。

   次のようなページが表示されます。

   

Azure Pipelines でパイプライン変数を作成する

Azure Pipelines を使用したマルチステージ パイプラインの作成では、App Service インスタンスごとに 1 つの変数を追加しました。これは、パイプラインの開発、テスト、ステージングの各ステージに対応します。 ここでは、同じことをします。

パイプライン構成の各ステージでは、これらの変数を使用して、デプロイ先の App Service インスタンスを識別します。

変数を追加するには:

1. Azure DevOps で、Space Game - web - Functional tests プロジェクトにアクセスします。

2. パイプラインでライブラリを選択します。

   

3. [ + 変数] グループを選択します。

4. [ プロパティ] の変数グループ名に「 Release」と入力します。

5. [ 変数] で 、[ + 追加] を選択します。

6. 変数の名前として、「 WebAppNameDev」と入力します。 値として、 開発 環境に対応する App Service インスタンスの名前 ( tailspin-space-game-web-dev-1234 など) を入力します。

7. 次の表に示すように、手順 5 と 6 をもう 2 回繰り返して、 テスト 環境と ステージング 環境の変数を作成します。

   変数名	値の例
   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. ページの上部にある [Save] を選択して、変数をパイプラインに保存します。

   変数グループはこちらのようになるはずです。

   

開発、テスト、ステージングの環境を作成する

Azure Pipelines を使用したマルチステージ パイプラインの作成では、開発、テスト、ステージングの環境を作成しました。 ここでは、このプロセスを繰り返します。 ただし、今回は、ある段階から次のステージへの変更を促進するための人間の承認の要件などの追加の条件を省略します。

開発、テスト、ステージングの環境を作成するには、次の手順を実行します。

1. Azure Pipelines で、[ 環境] を選択します。

   

2. 開発環境を作成するには:

   1. [環境の作成] を選択します。
   2. [ 名前] に「 dev」と入力します。
   3. 残りのフィールドは既定値のままにします。
   4. を選択してを作成します。

3. テスト環境を作成するには:

   1. [環境] ページに戻ります。
   2. [ 新しい環境] を選択します。
   3. [ 名前] に「 test」と入力します。
   4. を選択してを作成します。

4. ステージング環境を作成するには:

   1. [環境] ページに戻ります。
   2. [ 新しい環境] を選択します。
   3. 名前 に ステージング と入力します。
   4. を選択してを作成します。

サービス接続を作成する

ここでは、Azure Pipelines が Azure サブスクリプションにアクセスできるようにするサービス接続を作成します。 Azure Pipelines では、このサービス接続を使用して、Web サイトを App Service にデプロイします。 前のモジュールで同様のサービス接続を作成しました。

1. Azure DevOps で、Space Game - web - Functional tests プロジェクトにアクセスします。

2. ページの下部にある [ プロジェクトの設定] を選択します。

3. [パイプライン] で、[サービス接続] を選択します。

4. [ サービス接続の作成] を選択し、[ Azure Resource Manager] を選択してから、[ 次へ] を選択します。

5. ページの上部付近に、 アプリの登録 (自動) があります。

6. 次のフィールドに入力してください。

   フィールド	価値
   スコープのレベル	サブスクリプション
   サブスクリプション	お使いの Azure サブスクリプション
   リソース グループ	テイルスピン・スペース・ゲーム・RG
   サービス接続名	Resource Manager - Tailspin - Space Game

   プロセス中に、Microsoft アカウントにサインインするように求められる場合があります。

7. [すべてのパイプラインにアクセス許可を付与する] が選択されていることを確認します。

8. 保存 を選択します。

   Azure DevOps は、テスト接続を実行して、Azure サブスクリプションに接続できることを確認します。 Azure DevOps が接続できない場合は、2 回目にサインインする機会があります。