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

19 分

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

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

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

ローカルリポジトリを GitHub の最新の main ブランチと同期します。
変更を保持するブランチを作成します。
必要なコード変更を行い、ローカルで確認します。
ブランチを GitHub にプッシュします。
GitHub の main ブランチからの最近の変更をローカルの作業ブランチにマージし、変更が引き続き機能することを確認します。
残りの変更をプッシュアップし、Azure Pipelines でアプリケーションがビルドされるのを見て、pull request を送信します。

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

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

Visual Studio Code で、ターミナルウィンドウに移動し、次の dotnet build コマンドを実行してアプリケーションをビルドします。
```
dotnet build --configuration Release
```
次の 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 ブランチに基づいています。

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

Visual Studio Code で、Tailspin.SpaceGame.Web/Views/Home ディレクトリで Index.cshtml を開きます。
ページの上部付近で、次のテキストを探します。
```
<p>An example site for learning</p>
```
ヒント

Visual Studio Code には、ファイル内のテキストを検索する簡単な方法が用意されています。検索ペインにアクセスするには、横のペインで虫眼鏡アイコンを選択します。
前の手順で入力したテキストを、次の "誤って入力した" テキストに置き換えてから、ファイルを保存します。
```
<p>Welcome to the oficial Space Game site!</p>
```
"oficial" という単語は、意図的に誤って入力されていることに注意してください。そのエラーについては、このモジュールの後の方で対処します。
ターミナルで次の dotnet build コマンドを実行し、アプリケーションをビルドします。
```
dotnet build --configuration Release
```
次の dotnet run コマンドを実行してアプリケーションを実行します。
```
dotnet run --configuration Release --no-build --project Tailspin.SpaceGame.Web
```
新しいブラウザータブで、http://localhost:5000 に移動して、実行中のアプリケーションを表示します。

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

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

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

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

git status を実行して、あなたのブランチにコミットされていない変更があるかどうかを確認します。
```
git status
```
Index.cshtml が変更されていることがわかります。前と同様に、次の手順では、Git がこのファイルを追跡していることを確認します。これはファイルの ステージング と呼ばれます。
次の git add コマンドを実行して Index.cshtml をステージングします。
```
git add Tailspin.SpaceGame.Web/Views/Home/Index.cshtml
```
次の git commit コマンドを実行して、ステージされたファイルを feature/home-page-text ブランチにコミットします。
```
git commit -m "Improve the text at the top of the home page"
```
この git push コマンドを実行して、GitHub 上にある自分のリポジトリに feature/home-page-text ブランチをプッシュ (アップロード) します。
```
git push origin feature/home-page-text
```
前と同様、ブランチドロップダウンボックスから GitHub 上の自分のブランチを見つけることができます。

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

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

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

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

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

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

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

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

ターミナルでこの git checkout コマンドを実行して、main ブランチをチェックアウトします。
```
git checkout main
```
リモート 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.
```
機能ブランチをチェックアウトするには、git checkout を実行します。
```
git checkout feature/home-page-text
```
機能ブランチを main とマージします。
```
git merge main
```
ここでも実際には、あなたの main ブランチには誰も変更を加えていないため、まだすべてが最新の状態であることがわかります。
```
Already up to date.
```
変更を組み込んだ場合は、アプリケーションをもう一度テストして、すべてが引き続き機能していることを確認するのが良いでしょう。

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

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

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

この git push コマンドを実行して、あなたの変更を GitHub にプッシュします。
```
git push origin feature/home-page-text
```
この場合も、変更が加えられていないため、応答には、既に最新の状態であることが示されます。
```
Everything up-to-date
```

プル要求の提出

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

ブラウザーで GitHub にサインインします。
mslearn-tailspin-spacegame-web リポジトリに移動します。
ドロップダウンリストで、あなたの feature/home-page-text ブランチを選択します。
pull request を開始するには、[ 投稿 ] を選択し、[ pull request を開く] を選択します。
基本ドロップダウンリストで、Microsoft リポジトリではなくリポジトリが指定されていることを確認します。

重要

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

フォークではなく独自リポジトリを直接操作するときは、main ブランチが既定で選択されます。
pull request のタイトルと説明を入力します。
- タイトル: ホームページの上部にあるテキストを改善する
- 説明: 製品チームから最新のホームページテキストを受け取りました。
pull request を完了するには、[ pull request の作成] を選択します。

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

pull request のウィンドウが表示されます。前と同様に、pull request によって Azure Pipelines がトリガーされ、既定でアプリケーションがビルドされます。
必要に応じて、[ 詳細 ] リンクを選択するか、Azure DevOps でプロジェクトに移動し、パイプラインの実行を監視します。
ビルドが完了したら、GitHub で pull request に戻ります。
[ プル要求のマージ] を選択し、[ マージの確認] を選択します。
[ ブランチの削除] を選択して、GitHub から feature/home-page-text ブランチを削除します。

フィードバック

このページはお役に立ちましたか?