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

完了

このユニットでは、このモジュールの残りの部分を完了するために、自分の Azure DevOps 組織が設定されていることを確認します。 また、デプロイ先の Azure App Service 環境を作成します。

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

  • ユーザーを追加して、Azure DevOps をお使いの Azure サブスクリプションに接続できることを確認します。
  • このモジュール用の Azure DevOps プロジェクトを設定します。
  • Azure Boards 上で、このモジュールの作業項目を [実行中] 列に移動します。
  • 変更をパイプラインにプッシュできるように、ローカルでプロジェクトが設定されていることを確認します。
  • Azure Cloud Shell の Azure CLI を使用して、Azure App Service と Azure Functions アプリを作成します。
  • App Service と Azure Functions インスタンスの名前を定義するパイプライン変数を作成します。
  • Azure Pipelines が Azure サブスクリプションに安全にアクセスできるようにするサービス接続を作成します。

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

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

Azure DevOps を使用するために Azure サブスクリプションは必要ありませんが、この演習では Azure DevOps を使用して、Azure サブスクリプションの Azure リソースにデプロイします。 このプロセスを簡略化するには、お使いの Azure サブスクリプションと自分の Azure DevOps 組織の両方に、同じ Microsoft アカウントを使用してサインインします。

重要

異なるアカウントでサインインする場合は、Azure へのサインインに使用する Microsoft アカウントで自分の DevOps 組織にユーザーを追加する必要があります。 詳細については、組織またはプロジェクトへのユーザーの追加に関する記事を参照してください。 ユーザーを追加する際、Basic アクセス レベルを選択します。

次に、Azure DevOps からサインアウトし、新しいユーザー アカウントでサインインします。 お使いの Azure サブスクリプションへのサインインに使用する Microsoft アカウントを使用します。

Azure DevOps プロジェクトを取得する

このモジュールの残りの部分を完了するために、Azure DevOps 組織が確実に設定されるようにします。 これを行うには、Azure DevOps にプロジェクトを作成するテンプレートを実行します。

このラーニング パスのモジュールでは、Tailspin Web チームの DevOps 体験を踏襲する段階的なプロセスになっています。 学習目的のために、各モジュールには独自の Azure DevOps プロジェクトがあります。

テンプレートの実行

  1. Azure DevOps 組織を設定するテンプレートを実行します。

  2. Azure DevOps Demo Generator サイトで、[Sign In](サインイン) を選びます。 プロンプトが表示されたら、使用条件に同意します。 [Create New Project](新しいプロジェクトの作成) ページが表示されます。

  3. [Create New Project](新しいプロジェクトの作成) ページでプロジェクトの名前を入力し (例: Space Game - web - Azure Functions)、[組織の選択] で Azure サブスクリプションに使用する組織を選びます。

    A screenshot of the Azure DevOps Demo Generator showing how to create the project.

  4. 次のセクションで、[Yes, I want to fork this repository] (はい、このリポジトリをフォークします) を選び、[Authorize] (承認) を選びます。

    ウィンドウが表示されたら、自分の GitHub アカウントへのアクセスを承認します。

    重要

    テンプレートで GitHub リポジトリに接続するには、このフォーク オプションを有効にする必要があります。 既に Space Game Web サイト プロジェクトをフォーク済みである場合も選択してください。 テンプレートでは既存のフォークが使用されます。

  5. [プロジェクトの作成] を選択します。

    テンプレートの実行には少し時間がかかります。

  6. プロジェクトが正常にプロビジョニングされたら、[Navigate to project](プロジェクトに移動) を選んで Azure DevOps のプロジェクトに移動します。

重要

このモジュールの「Azure DevOps 環境をクリーンアップする」ページには、このモジュールを完了しない場合であっても行う必要がある重要な手順が含まれています。 クリーンアップによって、無料のビルド時間の浪費を抑えることができます。

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

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

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

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

作業項目を割り当てて実行中状態にする

ここでは、Azure Boards で自分に作業項目を割り当てて、作業項目の状態を実行中に設定します。 実際には、自分とチームが、各 "スプリント" (繰り返し作業) の最初に作業項目を作成することになります。

この演習では、作業のためのチェックリストを作成します。 これにより、あなたの作業内容と残っている作業をチームの他のメンバーが把握できます。 また、作業項目は、チームがあまりに多くの作業を一度に引き受けることがないように、進行中の作業 (WIP) の制限を適用するのに役立ちます。

  1. Azure DevOps から [Boards] カテゴリに移動し、メニューから [Boards] を選びます。

    Azure DevOps showing the location of the Boards menu.

  2. タイトルを選んで "Refactor leaderboard API as an Azure Function" (Azure 関数としてスコアボード API をリファクタリングする) 作業項目を開きます。 この作業項目を自分に割り当ててから、[保存して閉じる] を選びます。

  3. カードの下部にある下矢印を選んで [実行中] を選ぶか、またはカードを選んで [実行中] 列にドラッグします。

    Screenshot of work item card highlighting the location of the down arrow.

  4. 作業項目が [作業予定] 列から [実行中] 列に移動されます。

    Screenshot of Azure Boards highlighting the work item card in the Doing column.

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

Azure App Service および Azure Functions 環境を作成する

ここでは、新しいバージョンのサイトと API をデプロイするために必要な App Service と Azure Functions アプリを作成します。

Azure Pipelines にリリース パイプラインを作成する」の Learn モジュールでは、Azure portal を使用して App Service を開始しました。 ポータルは、Azure で利用できるものを調べたり、基本的なタスクを実行したりするには優れた方法ですが、App Service などのコンポーネントを導入するには面倒な場合があります。

このモジュールでは、Azure CLI を使用して App Service インスタンスを表示します。 Azure CLI には、ターミナルまたは Visual Studio Code からアクセスできます。 ここでは、Azure Cloud Shell から Azure CLI にアクセスします。 このブラウザーベースのシェル エクスペリエンスは、クラウドでホストされています。 Cloud Shell では、Azure CLI は Azure サブスクリプションで使用するように構成されています。

重要

このモジュールの演習を完了するには、自分の Azure サブスクリプションが必要です。

Azure portal から Cloud Shell を起動する

  1. Azure Portal にサインインします。

  2. ページ ヘッダーのグローバル コントロールから、[Cloud Shell] を選びます。

    A screenshot of the Azure portal showing the location of the Cloud Shell menu item.

    ターミナルが開き、Azure Cloud Shell に接続されます。

  3. 必要な場合は、ターミナル メニューから [Bash] を選びます。

    Note

    Cloud Shell では、Cloud Shell で作成するすべてのファイルを保持する Azure ストレージ リソースが必要です。 ユーザーが Cloud Shell を初めて開くとき、リソース グループ、ストレージ アカウント、Azure Files 共有の作成を求められます。 この設定は、以降のすべての Cloud Shell セッションで自動的に使用されます。

Azure リージョンを選択する

"リージョン" は、1 つの地理的な場所内にある 1 つ以上の Azure データセンターです。 米国東部、米国西部、北ヨーロッパなどがリージョンの例です。 App Service インスタンスなどのすべての Azure リソースには、リージョンが割り当てられています。

コマンドを実行しやすいように、既定のリージョンを選んで始めましょう。 既定のリージョンを指定すると、別のリージョンを指定しない限り、入力するコマンドではそのリージョンが使われます。

  1. Cloud Shell から次の az account list-locations コマンドを実行して、お使いの Azure サブスクリプションで使用可能なリージョンの一覧を表示します。

    az account list-locations \
      --query "[].{Name: name, DisplayName: displayName}" \
      --output table
    
  2. 出力の Name 列から、最寄りのリージョンを選択します。 たとえば、eastasia または westus2 を選択します。

  3. az configure を実行して、自分の既定のリージョンを設定します。 <REGION> を、任意のリージョン名に置き換えます。

    az configure --defaults location=<REGION>
    

    この例では、既定のリージョンとして westus2 を設定します。

    az configure --defaults location=westus2
    

Bash 変数の作成

ここで、設定プロセスをより便利にし、エラーが発生しにくくするために、Bash 変数を作成します。 共有のテキスト文字列に変数を使用すると、偶発的な入力ミスを防ぐことができます。

  1. Cloud Shell から乱数を生成し、次のステップでそれを使って特定のサービスのグローバルに一意の名前を作成します。

    resourceSuffix=$RANDOM
    
  2. App Service、Azure Function、ストレージ アカウントの 3 つのグローバルに一意の名前を作成します。 これらのコマンドでは、二重引用符を使うことで、インライン構文を使って変数を解決するよう Bash に指示します。

    webName="tailspin-space-game-web-${resourceSuffix}"
    leaderboardName="tailspin-space-game-leaderboard-${resourceSuffix}"
    storageName="tailspinspacegame${resourceSuffix}"
    
  3. リソース グループとサービス プランの名前を保存するために、2 つ以上の Bash 変数を作成します。

    rgName='tailspin-space-game-rg'
    planName='tailspin-space-game-asp'
    

必要な Azure リソースを作成する

このソリューションをデプロイするには、いくつかの Azure リソースが必要なので、次にそれを作成します。

Note

この演習では、既定のネットワーク設定を使って、サイトにインターネットからアクセスできるようにします。 実際には、Web サイトを配置したネットワークにあなたやあなたのチームのみがアクセスできるように、Azure 仮想ネットワークを構成することができます。 後で仮想ネットワークを再構成して、ユーザーが Web サイトを利用できるようにすることができます。

  1. 次の az group create コマンドを実行し、先ほど定義した名前を使用してリソース グループを作成します。

    az group create --name $rgName
    
  2. 次の az appservice plan create コマンドを実行し、前のタスクで定義した名前を使用して App Service プランを作成します。

    az appservice plan create \
      --name $planName \
      --resource-group $rgName \
      --sku B1 \
      --is-linux
    

    --sku パラメーターでは、B1 プランを指定します。 このプランは、Basic サービス レベルで実行されます。 --is-linux パラメーターでは、Linux ワーカー (イベントとタスクのスケジュールで使われるスレッド) を指定します。

    重要

    ご自分の Azure サブスクリプションで B1 SKU を使用できない場合、S1 (Standard) などの別のプランを選択します。

  3. 次の az webapp create コマンドを実行して、App Service インスタンスを作成します。

    az webapp create \
      --name $webName \
      --resource-group $rgName \
      --plan $planName \
      --runtime "DOTNETCORE|6.0"
    
  4. Azure Functions をデプロイするには、ストレージ アカウントが必要です。 これを作成するには、次の az storage account create コマンドを実行します。

    az storage account create \
      --name $storageName \
      --resource-group $rgName \
      --sku Standard_LRS
    
  5. 次の az functionapp create コマンドを実行して、Azure Functions アプリ インスタンスを作成します。 <region> は優先リージョンに置き換えてください。

    az functionapp create \
      --name $leaderboardName \
      --resource-group $rgName \
      --storage-account $storageName \
      --functions-version 4 \
      --consumption-plan-location <region>
    
  6. 次の az webapp list コマンドを実行して、App Service インスタンスのホスト名と状態を一覧表示します。

    az webapp list \
      --resource-group $rgName \
      --query "[].{hostName: defaultHostName, state: state}" \
      --output table
    

    自分の実行中の各サービスのホスト名をメモします。 次のようになりますが、乱数識別子は異なります。 この Web ホスト名は、後で自分の作業を確認するときに必要になります。

    HostName                                        State
    ----------------------------------------------  -------
    tailspin-space-game-web-4692.azurewebsites.net  Running
    
  7. 次の az functionapp list コマンドを実行して、Azure Functions インスタンスのホスト名と状態を一覧表示します。

    az functionapp list \
      --resource-group $rgName \
      --query "[].{hostName: defaultHostName, state: state}" \
      --output table
    

    自分の実行中の各サービスのホスト名をメモします。 次のようになりますが、乱数識別子は異なります。 ランキングのホスト名は、後で自分の作業を確認するときに必要です。

    HostName                                                State
    ------------------------------------------------------  -------
    tailspin-space-game-leaderboard-4692.azurewebsites.net  Running
    
  8. これら 2 つのホスト名を、後で簡単にアクセスできる場所にコピーします。

  9. 省略可能なステップとして、ブラウザーを開き、ホスト名を入力して、実行されていることを確認します。 既定のホーム ページが表示されます。

重要

このモジュールの「Azure DevOps 環境をクリーンアップする」ページには、重要なクリーンアップ手順が含まれています。 クリーンアップは、このモジュールを完了した後に Azure リソースに対して課金されないようにするために役立ちます。 このモジュールを最後まで実行しなかったとしても、クリーンアップ手順は必ず行ってください。

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

Azure Pipelines にリリース パイプラインを作成する」モジュールでは、App Service の Web アプリの名前を格納する変数をパイプラインに追加しました。 ここで、あなたも同じことをします。 さらに、Azure Functions インスタンスのランキング アプリの名前を追加します。

これらの名前をパイプライン構成でハードコーディングすることもできますが、変数として定義すると、構成が再利用しやすくなります。 さらに、インスタンスの名前を変更する場合、構成を変更せずに、変数を更新し、パイプラインをトリガーできます。

変数グループをプロジェクトに追加してみましょう。

  1. Space Game-web Azure Functions プロジェクトが Azure DevOps で開かれているはずです。

  2. メニューで [パイプライン] を選んだ後、[パイプライン][ライブラリ] を選びます。 [ライブラリ] ペインが表示されます。

    Screenshot of Azure DevOps menu highlighting the Library option under Pipelines.

  3. コマンド バーまたはペインの中央で、[変数グループ] を選びます。 [新しい変数グループ] ページが表示されます。

  4. 変数グループ名に「Release」と入力します。

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

  6. 変数の名前として、「WebAppName」と入力します。 値として、Web アプリ用に作成した App Service インスタンスの名前 (例: tailspin-space-game-web-4692) を入力します。

    重要

    完全なホスト名ではなく、App Service インスタンスの名前を設定します。 たとえば、この演習では tailspin-space-game-web-4692 がホスト名 tailspin-space-game-web-4692.azurewebsites.net のインスタンス部分です。

  7. LeaderboardAppName という名前でランキングのインスタンスを値とする (例: tailspin-space-game-leaderboard-4692)、もう 1 つの変数を追加します。

  8. 値が「tailspin-space-game-rg」の ResourceGroupName という名前の最終的な変数を追加します。

  9. ページの上部近くにあるコマンド バーの [保存] を選んで、Release 変数グループをパイプラインに保存します。

    変数グループの変数は、次のようになるはずです。

    A screenshot of Azure Pipelines showing the variable group. The group contains three variables.

spike 環境を作成する

前のモジュールでは、devteststaging 用の環境を作成しました。 ここで、あなたも同じことをします。 今回は、spike という名前の環境を作成します。

  1. Azure DevOps のメニューから、[パイプライン][環境] を選びます。

    A screenshot of Azure Pipelines showing the location of the Environments menu option.

  2. [環境の作成] を選択します。 [新しい環境] ペインが表示されます。

  3. [名前] に「spike」と入力します。

  4. 残りのフィールドは既定値のままにします。

  5. [作成] を選択します

サービス接続を作成する

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

重要

同じ Microsoft アカウントで Azure portal と Azure DevOps の両方にサインインしていることを確認してください。

  1. Azure DevOps の Space Game - web - Azure Functions パイプライン プロジェクトで、メニューの下にある [プロジェクト設定] を選びます。 [プロジェクトの詳細] ペインが表示されます。

  2. メニューで、[パイプライン][サービス接続] を選びます。

  3. [サービス接続] ページで [新しいサービス接続] を選び、[新しいサービス接続] ペインで [Azure Resource Manager] を選んで、[次へ] を選びます。

  4. [新しいサービス接続] ペインで [サービス プリンシパル (自動)] を選んで、[次へ] を選びます。

  5. [新しい Azure サービス接続] ペインで、次の設定を選ぶか入力します。

    フィールド
    スコープのレベル サブスクリプション
    サブスクリプション お使いの "Azure サブスクリプション" を選択します
    リソース グループ tailspin-space-game-rg
    サービス接続名 Resource Manager - Tailspin - Space Game

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

  6. 必ず、[すべてのパイプラインへのアクセス許可を与える] を選択してください。

  7. [保存] を選択します。

Azure サブスクリプションに接続できることを確認するために、Azure DevOps でテスト接続が実行されます。 Azure DevOps で接続できない場合は、もう一度サインインする機会があります。