演習 - パイプラインを通して変更をプッシュする

  • 19 分

このユニットでは、Space Game Web サイトに対する小さな変更を GitHub にプッシュすることで、完全なコード ワークフローを実行します。

Mara には、Web サイトのホーム ページである Index.cshtml 上の一部のテキストを変更するタスクが与えられています。 このユニットでは、その過程をたどってゆきます。

タスクの完了までたどってゆく手順を簡単に確認しましょう。

  • ローカル リポジトリを、GitHub 上の最新の main ブランチと同期する
  • 変更を保持するブランチを作成する
  • 必要なコード変更を行って、それらをローカルで検証する
  • GitHub にあなたのブランチをプッシュする
  • GitHub 上の main ブランチに最近の変更があれば、ローカルの作業ブランチにマージし、変更が引き続き正しく機能することを確認する
  • 残りの変更をすべてプッシュし、Azure Pipelines によるアプリケーションのビルドを監視して、pull request を送信する

最新のメイン ブランチをフェッチする

前のユニットでは、pull request を作成し、あなたの code-workflow ブランチを GitHub 上の main ブランチにマージしました。 ここでは、main に対する変更をプルしてローカル ブランチに戻す必要があります。

git pull コマンドでは、リモート リポジトリから最新のコードがフェッチされ、それがローカル リポジトリにマージされます。 こうして、最新のコードベースを使用して作業をしていることがわかります。

  1. ターミナルで git checkout main を実行して、main ブランチに切り替えます。

    git checkout main

  2. 最新の変更をプルするため、この git pull コマンドを実行します。

    git pull origin main

    変更されたファイルの一覧を参照できます。 省略可能な手順として、azure-pipelines.yml ファイルを開くと、そこに完全なビルド構成が含まれていることを確認できます。

    チーム メンバーが共同作業を行う Git リポジトリ (GitHub 上など) は、"リモート" と呼ばれることを思い出してください。 ここでは origin によって、GitHub 上のあなたのリポジトリを指定しています。

    後で、"上流" と呼ばれる Microsoft GitHub リポジトリからスタート コードをフェッチします。

Web アプリをビルドして実行する

変更を開始するための作業コピーがあることを確認するには、Web アプリケーションをローカルでビルドして実行します。

  1. Visual Studio Code で、ターミナル ウィンドウに移動し、次の dotnet build コマンドを実行してアプリケーションをビルドします。

    dotnet build --configuration Release

  2. 次の dotnet run コマンドを実行してアプリケーションを実行します。

    dotnet run --configuration Release --no-build --project Tailspin.SpaceGame.Web

    ヒント

    ブラウザーに、プライバシーまたは証明書のエラーに関連するエラーが表示される場合は、ターミナルで Ctrl+C キーを押して、実行中のアプリを停止します。

    次に、プロンプトが表示されたら dotnet dev-certs https --trust を実行して[はい] を選択するか、このブログ記事を参照して詳細を確認してください。

    お使いのコンピューターでローカルの SSL 証明書が信頼されたら、dotnet run コマンドをもう一度実行し、新しいブラウザー タブから http://localhost:5000 に移動して、実行中のアプリケーションを表示します。

アプリケーションが実行されていることを確認する

開発モードでは、Space Game Web サイトはポート 5000 で実行されるように構成されています。

新しいブラウザー タブで http://localhost:5000 に移動し、実行中のアプリケーションを表示します。

次のように表示されます。

Screenshot of the Space Game website running in a web browser.

ランキングを含むページを操作できます。 プレーヤーの名前を選択すると、そのプレーヤーの詳細が表示されます。

操作を終えたら、ターミナル ウィンドウに戻り、Ctrl+C キーを押して、実行中のアプリを停止します。

機能ブランチを作成する

このセクションでは、他のユーザー影響を与えずにファイルを操作できるように Git ブランチを作成します。 あなたがこれらのファイルをリモート リポジトリにプッシュするまで、あなたがこれらのファイルに対して作業していることを、誰かが知ることさえありません。

ブランチを作成するには、前の部分で実行したのと同様に git checkout コマンドを使用して、ブランチに名前を付けます。

名前付け規則に従ってブランチを作成することをお勧めします。 たとえば、ブランチが新機能に関する作業用である場合は、feature/<branch-name> を使用できます。 バグ修正プログラム用であれば、bugfix/<bug-number> を使用できます。 この例では、ブランチ名は feature/home-page-text になります。

ターミナルで、次の git checkout コマンドを実行します。

git checkout -B feature/home-page-text

前と同様に、feature/home-page-text は main ブランチに基づいています。

変更を加えてローカルでテストする

  1. Visual Studio Code で、Tailspin.SpaceGame.Web/Views/Home ディレクトリにある Index.cshtml を開きます。

  2. ページの上部付近で、次のテキストを探します。

    <p>An example site for learning</p>

    ヒント

    Visual Studio Code には、ファイル内のテキストを検索する簡単な方法が用意されています。 検索ペインにアクセスするには、横のペインで虫眼鏡アイコンを選択します。

  3. 前の手順で入力したテキストを、次の "誤って入力した" テキストに置き換えてから、ファイルを保存します。

    <p>Welcome to the oficial Space Game site!</p>

    "oficial" という単語は、意図的に誤って入力されていることに注意してください。 そのエラーについては、このモジュールの後の方で対処します。

  4. ターミナルで次の dotnet build コマンドを実行し、アプリケーションをビルドします。

    dotnet build --configuration Release

  5. 次の dotnet run コマンドを実行してアプリケーションを実行します。

    dotnet run --configuration Release --no-build --project Tailspin.SpaceGame.Web

  6. 新しいブラウザー タブで、http://localhost:5000 に移動して、実行中のアプリケーションを表示します。

    ホーム ページには、更新されたテキストが含まれていることがわかります。

    Screenshot of the Space Game website with updated text. The text contains a spelling error.

    操作を終えたら、ターミナル ウィンドウに戻った後、Ctrl+C キーを押し、実行中のアプリを停止します。

ブランチをコミットしてプッシュする

ここでは、変更を Index.cshtml にステージし、変更をあなたのブランチにコミットして、そのブランチを GitHub にプッシュします。

  1. git status を実行して、あなたのブランチにコミットされていない変更があるかどうかを確認します。

    git status

    Index.cshtml が変更されていることがわかります。 前と同様に、次の手順は、Git によってこの staging というファイルが追跡されていることを確認するためのものです。

  2. 次の git add コマンドを実行して、Index.cshtml をステージします。

    git add Tailspin.SpaceGame.Web/Views/Home/Index.cshtml

  3. 次の git commit コマンドを実行して、ステージされたファイルを feature/home-page-text ブランチにコミットします。

    git commit -m "Improve the text at the top of the home page"

  4. この git push コマンドを実行して、GitHub 上にある自分のリポジトリに feature/home-page-text ブランチをプッシュ (アップロード) します。

    git push origin feature/home-page-text

  5. 前と同様、ブランチ ドロップダウン ボックスから GitHub 上の自分のブランチを見つけることができます。

    Screenshot of GitHub showing the new branch.

アプリケーションをビルドする Azure Pipelines の監視

前に行ったのと同様に、変更を GitHub にプッシュすると、ビルドは Azure Pipelines によって自動的にキューに移動されます。

省略可能な手順として、ビルドがパイプライン内を移動するときにそれをトレースし、ビルドが成功することを確認します。

すべての変更をメイン ブランチに同期する

機能に対する作業で忙しくしている間に、リモートの main ブランチに変更が加えられているかもしれません。 pull request を作成する前に、リモート main ブランチから最新のデータを取得するのが一般的なやり方です。

これを行うには、最初に main ブランチをチェックアウトするか、このブランリに切り替えてから、リモート main ブランチをローカル main ブランチにマージします。

次に、機能ブランチをチェックアウトし、機能ブランチを main ブランチにマージします。

では、この過程を試してみましょう。

  1. ターミナルでこの git checkout コマンドを実行して、main ブランチをチェックアウトします。

    git checkout main

  2. リモート main ブランチに対する最新の変更をダウンロードし、それらの変更をあなたのローカル main ブランチにマージするには、この git pull コマンドを実行します。

    git pull origin main

    実際はあなたの main ブランチにだれも変更を加えていなかったため、次のコマンドによって、すべてが既に最新の状態であることが示されます。

    From https://github.com/username/mslearn-tailspin-spacegame-web
 * branch            main     -> FETCH_HEAD
Already up to date.

  3. 機能ブランチをチェックアウトするには、git checkout を実行します。

    git checkout feature/home-page-text

  4. 機能ブランチを main とマージします。

    git merge main

    ここでも実際には、あなたの main ブランチには誰も変更を加えていないため、まだすべてが最新の状態であることがわかります。

    Already up to date.

    変更を組み込んだ場合は、アプリケーションをもう一度テストして、すべてが引き続き機能していることを確認するのが良いでしょう。

ローカル ブランチを再度プッシュする

リモート リポジトリからローカルの機能ブランチに変更を組み込むときには、あなたのローカル ブランチを、リモート リポジトリにもう一度プッシュして戻す必要があります。

リモート リポジトリからはまったく変更を組み込んでいませんが、どのようになるか確認するため、この過程を実行してみましょう。

  1. この git push コマンドを実行して、あなたの変更を GitHub にプッシュします。

    git push origin feature/home-page-text

    この場合も、変更が加えられていないため、応答には、既に最新の状態であることが示されます。

    Everything up-to-date

プル要求の提出

このセクションでは、前に行ったように pull request を送信します。

  1. ブラウザーで GitHub にサインインします。

  2. あなたの mslearn-tailspin-spacegame-web リポジトリに移動します。

  3. ドロップダウンリストで、あなたの feature/home-page-text ブランチを選択します。

  4. pull request を開始するには、[Contribute]、[Open pull request] の順に選択します。

  5. [base] ドロップダウン リストで、Microsoft のリポジトリではなく、あなたのリポジトリを指定していることを確認します。

    Screenshot of GitHub confirming that the branch can be merged.

    重要

    この場合も、Microsoft リポジトリにあなたの変更をマージすることはできないため、この手順は重要です。

    フォークではなく独自リポジトリを直接操作するときは、main ブランチが既定で選択されます。

  6. pull request のタイトルと説明を入力します。

    • タイトル: ホーム ページ上部のテキストを改善する
    • 説明: 製品チームから、ホーム ページの最新のテキストを受け取りました。

  7. pull request を完了するため、[プル要求の作成] を選択します。

    この手順ではどのコードもマージしません。 これによって、マージするために提出中の変更があることを他の人に知らせます。

    pull request のウィンドウが表示されます。 前と同様に、pull request によって Azure Pipelines がトリガーされ、既定でアプリケーションがビルドされます。

  8. (省略可能) [Details] リンクを選択するか、Azure DevOps の自分のプロジェクトに移動して、パイプラインの実行を観察します。

  9. ビルドが完了したら、GitHub で pull request に戻ります。

  10. [Merge pull request] を選択してから、[Confirm merge] を選択します。

  11. [ブランチの削除] を選択して、GitHub から feature/home-page-text ブランチを削除します。