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

  • 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 に移動し、実行中のアプリケーションを表示します。

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

Web ブラウザーで実行されている Space Game Web サイトのスクリーンショット。

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

完了したら、ターミナル ウィンドウに戻り、 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 に移動して、実行中のアプリケーションを表示します。

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

    更新されたテキストを含む Space Game Web サイトのスクリーンショット。テキストにスペル ミスが含まれています。

    完了したら、ターミナル ウィンドウに戻り、 Ctrl キーを押しながら C キーを押して実行中のアプリケーションを停止します。

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

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

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

    git status

    Index.cshtml が変更されていることがわかります。 前と同様に、次の手順では、Git がこのファイルを追跡していることを確認します。これはファイルの ステージング と呼ばれます。

  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 上の自分のブランチを見つけることができます。

    新しいブランチを示す GitHub のスクリーンショット。

アプリケーションをビルドする 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 を開始するには、[ 投稿 ] を選択し、[ pull request を開く] を選択します。

  5. 基本ドロップダウン リストで、Microsoft リポジトリではなくリポジトリが指定されていることを確認します。

    ブランチをマージできることを確認する GitHub のスクリーンショット。

    重要

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

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

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

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

  7. pull request を完了するには、[ pull request の作成] を選択します。

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

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

  8. 必要に応じて、[ 詳細 ] リンクを選択するか、Azure DevOps でプロジェクトに移動し、パイプラインの実行を監視します。

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

  10. [ プル要求のマージ] を選択し、[ マージの確認] を選択します。

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