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

  • 8 分

このユニットでは、このモジュールの残りの部分を完了するために、Microsoft Azure DevOps 組織が確実に設定されるようにします。

これを行うには、次を実行します。

  • このモジュール用の Azure DevOps プロジェクトを設定します。
  • 変更をパイプラインにプッシュできるように、ローカルでプロジェクトが設定されていることを確認します。

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

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

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

テンプレートの実行

Azure DevOps 組織の設定をすべて自動的に行うテンプレートを実行します。

テンプレートの実行

テンプレートを実行するには、Azure DevOps Demo Generator サイトで以下を実行します。

  1. [サインイン] を選択して利用規約に同意します。

  2. [新しいプロジェクトの作成] ページで、Azure DevOps 組織を選択してから、Space Game - web - Agent などのプロジェクト名を入力します。

  3. [Fork repository on GitHub] を選択し、[Authorize] を選択します。 ウィンドウが表示されたら、自分の GitHub アカウントへのアクセスを承認します。

    重要

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

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

    Azure DevOps Demo Generator の [新しいプロジェクトの作成] 画面で [プロジェクトの作成] ボタンが強調表示されているスクリーンショット。

    テンプレートが実行されるまで少し時間がかかります。

  5. [プロジェクトに移動] を選択して Azure DevOps のプロジェクトに移動します。

重要

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

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

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

Note

既に mslearn-tailspin-spacegame-web プロジェクトをローカルに設定している場合は、次のセクションに進むことができます。

統合ターミナルを開く

Visual Studio Code には統合ターミナルが付属しており、ファイルの編集とコマンド ラインからの操作をすべて 1 か所で行うことができます。

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

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

  3. ドロップダウン リストで [bash] を選びます。 Zsh など、慣れている Unix シェルが他にあり、そちらを使用する場合は、代わりにそのシェルを選択します。

    Bash シェルの場所を示す Visual Studio Code のスクリーンショット。

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

    ここでは、Bash を使用します。 Git for Windows には、Git コマンドを簡単に実行できる Git Bash が用意されています。

    Note

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

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

    cd ~

Git を構成する

Git と GitHub を初めて使用する場合は、最初にいくつかのコマンドを実行して、自分の ID を Git に関連付け、GitHub で認証する必要があります。

プロセスの詳細については、Git の設定に関するページを参照してください。

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

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

Note

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

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

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

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

Note

リポジトリをクローンする際にファイル名が長すぎるというエラーが発生した場合は、名前が長くないフォルダーや深く入れ子になっていないフォルダーでリポジトリをクローンしてみてください。

フォークをローカルに複製する

ご自分の GitHub アカウントに Space Game Web プロジェクトのコピーが作成されています。 次に、コンピューターにコピーをダウンロード ("クローン") して作業できるようにします。

クローンは、フォークと同様にリポジトリのコピーです。 リポジトリをクローンしたら、変更を加え、予期したとおり機能することを確認してから、それらの変更を GitHub にアップロードすることができます。 ローカル コピーは、他の認証済みユーザーが、GitHub のご自分のリポジトリのコピーに対して行った変更と同期させることもできます。

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

  1. GitHub にある Space Game Web プロジェクト (mslearn-tailspin-spacegame-web) のフォークにアクセスします。

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

    GitHub リポジトリから URL とコピー ボタンを見つける。

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

  4. ターミナルで、ホーム ディレクトリ (~) など、作業するディレクトリに移動します。 必要に応じて、別のディレクトリを選択できます。

    cd ~

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

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

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

    cd mslearn-tailspin-spacegame-web

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

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

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

    git remote -v

    リポジトリに対してフェッチ (ダウンロード) とプッシュ (アップロード) の両方のアクセスがあることがわかります。

    origin  https://github.com/username/mslearn-tailspin-spacegame-web.git (fetch)
origin  https://github.com/username/mslearn-tailspin-spacegame-web.git (push)

    origin により、GitHub 上のリポジトリが明示されています。 別のリポジトリからコードをフォークする場合は、元のリモート (フォーク元) に「upstream」という名前を付けるのが一般的です。

  2. 次の git remote add コマンドを実行して、Microsoft リポジトリを指す「upstream」という名前のリモートを作成します。

    git remote add upstream https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web.git

  3. もう一度 git remote を実行して変更を確認します。

    git remote -v

    リポジトリに対するフェッチ (ダウンロード) とプッシュ (アップロード) の両方のアクセスがまだあることがわかります。 今度は、Microsoft リポジトリへのフェッチおよびプッシュ アクセスもあります。

    origin  https://github.com/username/mslearn-tailspin-spacegame-web.git (fetch)
origin  https://github.com/username/mslearn-tailspin-spacegame-web.git (push)
upstream        https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web.git (fetch)
upstream        https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web.git (push)

エクスプローラーでプロジェクトを開く

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 構成をローカル開発環境から操作できるように設定されました。