演習 - 環境を設定する

  • 15 分

チームは、DevOps 戦略をプロセスに徐々に統合しています。 このセクションでは、環境にチームのこれまでの取り組みが反映されていることを確認します。

このためには、次の手順に従います。

  • ユーザーを追加して、Azure DevOps が Azure サブスクリプションに接続できることを確認します。
  • このモジュール用の Azure DevOps プロジェクトを設定します。
  • ビルド パイプラインを追加します。

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

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

Azure DevOps を使用して作業するためにサブスクリプションは必要ありませんが、ここでは Azure DevOps を使用して、Azure サブスクリプションに存在する 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 を使用してリリース パイプラインを作成する」に「29」と入力し、Enter キーを押します。

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

    注

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

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

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

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

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

重要

このモジュールの「Azure DevOps 環境をクリーンアップする」ページには、重要なクリーンアップ手順が含まれています。 クリーンアップによって、無料のビルド時間の浪費を抑えることができます。 このモジュールを最後まで実行しなかったとしても、クリーンアップ手順は必ず行ってください。

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

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

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

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

Visual Studio Code の準備

Web サイトをローカルでビルドし、ソース ファイルを使用できるように Visual Studio Code を設定します。

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

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

  2. [ ターミナル] を選択し、[ 新しいターミナル] を選択します。

  3. ドロップダウン リストで、 Git bash を選択します。 Zsh など、慣れている Unix シェルが他にあり、そちらを使用する場合は、代わりにそのシェルを選択します。 Git for Windows には、Git コマンドを簡単に実行できる Git Bash が用意されています。

    注

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

  4. 次のコマンドを実行して 、ホーム ディレクトリに移動します。

    cd ~

Git の構成

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

少なくとも、次の手順を完了する必要があります。

  1. 最新バージョンの Git をダウンロードしてインストールします。
  2. ユーザー名を設定します。
  3. コミット メール アドレスを設定します。

注

GitHub で既に 2 要素認証を使用している場合は、 個人用アクセス トークンを作成します。 後でメッセージが表示されたら、パスワードの代わりにトークンを使用します。

パスワードを扱うのと同じように、アクセス トークンを扱います。 安全な場所に保管してください。

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

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

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

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

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

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

  2. [ コード] を選択し、[ HTTPS ] タブからコピー ボタンを選択して URL をクリップボードにコピーします。

    GitHub リポジトリから URL とコピー ボタンを見つける方法を示すスクリーンショット。

  3. Visual Studio Code で、前に開いたターミナル ウィンドウに移動します。

  4. git clone コマンドを実行します。 ここに表示されている URL をクリップボードの内容に置き換えます。

    git clone https://github.com/your-name/mslearn-tailspin-spacegame-web-deploy.git

  5. mslearn-tailspin-spacegame-web-deploy ディレクトリに移動します。 このディレクトリはリポジトリのルートです。

    cd mslearn-tailspin-spacegame-web-deploy

アップストリーム リモートを設定する

"リモート" とは、チーム メンバーが (GitHub のリポジトリのように) 共同作業する Git リポジトリです。 ここでは、リモートを一覧表示し、最新のサンプル コードを取得できるように、Microsoft のリポジトリのコピーを指すリモートを追加します。

  1. 次のコマンドを実行して、リモートを一覧表示します。

    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. 次のコマンドを実行して、Microsoft リポジトリを指す アップストリーム という名前のリモートを作成します。

    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)
upstream        https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web-deploy.git (push)

Visual Studio Code でプロジェクトを開く

  1. プロジェクトのルート ディレクトリから次のコマンドを実行します。

    code .

  2. 統合ターミナルをもう一度開きます。 ターミナルでは、ご使用の Web プロジェクトのルートに表示されます。

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

  1. Visual Studio Code で、[F1] を選択するか、[表示]>[コマンド パレット] を選択して、コマンド パレットにアクセスします。
  2. シェル コマンドを入力し、シェル コマンドを見つけます。PATH コマンドで 'code' コマンドをインストールします。
  3. 新しい PATH を有効にするには、ターミナルを再起動します。

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

GitHub からブランチをフェッチする

  1. Visual Studio Code で、統合ターミナルを開きます。

  2. 次のコマンドを実行して、MicrosoftDocs リポジトリから リリース パイプライン ブランチをフェッチし、新しいブランチ のアップストリーム/リリース パイプラインを確認します。

    git fetch upstream release-pipeline
git checkout -B release-pipeline upstream/release-pipeline

  3. 省略可能な手順として、Visual Studio Code で azure-pipelines.yml ファイルを開き、最初の YAML パイプライン構成について理解します。

パイプラインを実行する

この時点で、次の操作が行われます。

  • GitHub アカウントの mslearn-tailspin-spacegame-web-deploy リポジトリのフォーク。
  • ローカルに複製された mslearn-tailspin-spacegame-web-deploy リポジトリ。
  • Web サイトのソース コードと Azure Pipelines の初期構成を含む release-pipeline という名前のブランチ。

次に、パイプラインを手動でトリガーして実行します。 この手順により、GitHub リポジトリからビルドするようにプロジェクトが設定されます。 最初のパイプライン構成では、アプリケーションがビルドされ、ビルド成果物が生成されます。

  1. Azure Devops でプロジェクトに移動し、[ パイプライン] を選択します。

  2. mslearn-tailspin-spacegame-web-deploy パイプラインを選択します。 メッセージが表示されたら、[ リソースの承認 ] を選択してサービス接続を承認してください。

    このプロジェクトのパイプラインを示す Azure Pipelines のスクリーンショット。パイプラインには実行がありません。

  3. [パイプラインの実行] を選択し、[ブランチ/タグ] ドロップダウン メニューから release-pipeline ブランチを選択します。 [実行] を選択します。

    [パイプラインの実行] ボタンの場所を示す Azure Pipelines のスクリーンショット。

  4. [ 概要 ] ページで、ログを表示するパイプライン ジョブを選択します。

    実行中のジョブを示す Azure Pipelines のスクリーンショット。

  5. ビルドが完了したら、[戻る] ボタンを選択して概要ページに戻ります。

    概要ページに移動する方法を示す Azure Pipelines のスクリーンショット。

  6. 発行した成果物を選択します。

    発行された成果物へのリンクの場所を示す Azure Pipelines のスクリーンショット。

  7. Tailspin.Space.Game.Web.zip はビルド成果物です。 このファイルには、ビルドされたアプリケーションとその依存関係が含まれています。

    発行された成果物を示す Azure Pipelines のスクリーンショット。成果物には、.zip ファイルが含まれています。

これで、Space Game Web プロジェクトのビルド パイプラインが作成されました。 次に、デプロイ ステージを追加して、ビルド成果物を Azure App Service にデプロイします。