練習 - 透過管線推送變更

19 分鐘

在此單元中，您會將 Space Game 網站的小幅變更推送至 GitHub，以練習完整的程式碼工作流程。

主管安排工作給 Mara，要求她變更網站首頁 Index.cshtml 上的一些文字。在此單元中，您將會跟著做。

讓我們簡單檢閱完成工作須遵循的步驟：

同步處理您的本機存放庫與 GitHub 上最新的 main 分支
建立分支以保存您的變更
進行您需要的程式碼變更，並在本機進行驗證
將您的分支推送至 GitHub
將任何最近的變更從 GitHub 上的 main 分支合併至本機運作中的分支，並確認變更仍可正常運作
推送任何剩餘的變更、觀看 Azure Pipelines 建置應用程式，並提交您的提取要求

擷取最新的主分支

在上一個單元中，您已建立提取要求，並將您的 code-workflow 分支合併至 GitHub 上的 main 分支。現在必須將 main 的變更提取回本機分支。

git pull 命令會從遠端存放庫中擷取最新的程式碼，並合併至本機存放庫。如此您可知道目前使用最新的程式碼基底。

在您的終端中，執行 git checkout main 以切換至 main 分支：
```
git checkout main
```
若要提取最新的變更，請執行這個 git pull 命令：
```
git pull origin main
```
您可檢視已變更的檔案清單。 (選擇性步驟) 您可開啟 azure-pipelines.yml 檔案，以確認其中包含完整的組建組態。

請記得，可供小組成員共同作業的 Git 存放庫 (例如在 GitHub 上) 稱為遠端。此處的原點會指定 GitHub 上的存放庫。

稍後，您將從 Microsoft GitHub 存放庫 (稱為上游) 擷取起始程式碼。

建置並執行 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 網站已設定在連接埠 5000 上執行。

在新的瀏覽器索引標籤中，瀏覽至 http://localhost:5000 以查看執行中的應用程式。

您應該會看到以下內容：

在網頁瀏覽器中執行 Space Game 網站的螢幕擷取畫面。

您可與該頁面互動，包含排行榜。按一下玩家的名稱時，您會看到該玩家的詳細資料。

完成後，請返回終端機視窗並選取 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 命令，將 feature/home-page-text 分支推送或上傳至 GitHub 上的存放庫：
```
git push origin feature/home-page-text
```
同上，您可在 GitHub 上從分支下拉式方塊找到您的分支。

觀察 Azure Pipelines 建置應用程式

如同先前作業，當您將變更推送至 GitHub 時，Azure Pipelines 會自動將組建排入佇列。

(選擇性步驟) 追蹤組建在管線中的移動情形，並確認組建是否成功。

將任何變更同步至 main 分支

當您正在處理功能時，遠端 main 分支可能已發生變更。在您建立提取要求前，常見的做法是從遠端 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
```

提交提取要求

在本節中，您將比照先前作業提交提取要求。

在瀏覽器中，登入 GitHub。
移至您的 mslearn-tailspin-spacegame-web 存放庫。
在下拉式清單中，選取您的 feature/home-page-text 分支。
若要啟動您的提取要求，請選取 [參與]，並選取 [開啟提取要求]。
確定 [基底] 下拉式清單指定了您的存放庫，而非 Microsoft 的存放庫。

重要

一樣，此步驟很重要，因為您無法將變更合併到 Microsoft 存放庫。

若您直接使用自己的存放庫，而非分支存放庫，則依預設會選取您的 main 分支。
輸入提取要求的標題和描述。
- 標題：改善首頁頂端的文字
- 描述：已收到產品小組的最新首頁文字。
若要完成您的提取要求，請選取 [建立提取要求]。

此步驟不會合併任何程式碼。其只會指出您有某些您建議應合併的變更。

[提取要求] 視窗隨即顯示。同上，提取要求預設會觸發 Azure Pipelines，以建置您的應用程式。
(選擇性) 選取 [詳細資料] 連結，或移至 Azure DevOps 上的專案，並觀看管線執行。
組建完成後，請回到 GitHub 上的提取要求。
選取 [合併提取要求]，接著選取 [確認合併]。
選取 [刪除分支]，以從 GitHub 刪除 feature/home-page-text 分支。