演習 - 環境を設定する

  • 15 分

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

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

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

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

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

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

異なる Microsoft アカウントを使用して Azure と Azure DevOps にサインインする場合は、Azure へのサインインに使用する Microsoft アカウントで、DevOps 組織にユーザーを追加します。 詳細については、「組織ユーザーの追加とアクセスの管理」を参照してください。 ユーザーを追加する際、Basic アクセス レベルを選択します。

その後、Azure DevOps からサインアウトし、Azure サブスクリプションへのサインインに使用する Microsoft アカウントでもう一度サインインします。

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

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

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

テンプレートの実行

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

テンプレートの実行

Azure DevOps Demo Generator サイトから、以下の手順に従ってテンプレートを実行します。

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

  2. [新しいプロジェクトの作成] ページから該当する Azure DevOps 組織を選択し、プロジェクト名を入力します (「Space Game - web - Release」など)。

    Screenshot of the Azure DevOps Demo Generator web site showing the process to create the project.

  3. [Yes, I want to fork this repository]>[Authorize] を選択します。 ウィンドウが表示されたら、自分の GitHub アカウントへのアクセスを承認します。

    重要

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

  4. [プロジェクトの作成] を選択します。 テンプレートの実行には少し時間がかかります。

  5. [プロジェクトに移動] を選択して 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 が用意されています。

    Note

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

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

    cd ~

Git を構成する

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

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

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

Note

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

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

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

テンプレートを実行して Azure DevOps プロジェクトを設定したときに、プロセスによって mslearn-tailspin-spacegame-web-deploy リポジトリが自動的にフォークされました。 次に、コンピューターにコピーをダウンロード ("クローン") して作業できるようにします。

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

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

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

    Screenshot that shows how to locate the URL and copy button from the GitHub repository.

  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 上のリポジトリが明示されています。 別のリポジトリからコードをフォークするとき、一般的に、元のリモート (フォーク元) に「upstream」という名前を付けます。

  2. 次のコマンドを実行して、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)
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 リポジトリから release-pipeline ブランチをフェッチし、新しいブランチ upstream/release-pipeline をチェックアウトします。

    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 リポジトリ。
  • release-pipeline という名前のブランチ (Web サイトのソース コードおよび初期 Azure Pipelines 構成が含まれる)。

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

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

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

    Screenshot of Azure Pipelines showing the pipeline for this project. The pipeline has no runs.

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

    Screenshot of Azure Pipelines showing the location of the Run pipeline button.

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

    Screenshot of Azure Pipelines showing the running job.

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

    Screenshot of Azure Pipelines showing how to navigate to the summary page.

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

    Screenshot of Azure Pipelines showing the location of the link to the published artifact.

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

    Screenshot of Azure Pipelines showing the published artifact. The artifact includes a .zip file.

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