練習 - 透過管線推送變更

14 分鐘

在此部分中，您會看到作用中的部署位置。在網站的首頁上，您可以變更英雄橫幅上的背景色彩和文字。然後，再將您的變更推送至 GitHub、觀看管線執行，並確認變更。

若要進一步練習此流程，您接著可以還原變更，並以「向前復原」的方式觀看管線執行。

變更英雄橫幅上的文字

您可以在這裡變更英雄橫幅上的文字。稍後當您部署至 App Service 時，即會看到變更。

在 Visual Studio Code 的 Tailspin.SpaceGame.Web/Views/Home 目錄中，開啟 Index.cshtml。
在頁面頂端附近尋找此文字：
```
<p>An example site for learning</p>
```
提示

Visual Studio Code 會提供搜尋檔案中文字的方式。若要存取 [搜尋] 窗格，請選取側邊窗格中的放大鏡圖示。
以下列文字取代範例文字，然後儲存檔案。
```
<p>Welcome to the official Space Game site!</p>
```

變更背景色彩

在這裡，您可將英雄橫幅的背景色彩從灰色變更為綠色。

在 Visual Studio Code 的 Tailspin.SpaceGame.Web/wwwroot/css 目錄中，開啟 site.scss。

重要

開啟 site.scss，而不是 site.css。 「組建」階段會執行node-sass，以將 site.scss (Sass 檔案) 轉換為 site.css (標準 CSS 檔案)。

在檔案頂端附近找出下列程式碼：

.intro {
  height: 350px;
  background-color: #666;
  background-image: url('/images/space-background.svg');
  background-size: 1440px;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;

在程式碼中，將醒目提示的文字取代，如下列範例所示。然後儲存檔案。

.intro {
  height: 350px;
  background-color: green;
  background-image: url('/images/space-background.svg');
  background-size: 1440px;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;

透過管線推送變更

一般情況下，您會在本機建立並執行網站以確認變更。您也可以執行任何相關聯的單元測試，以確認您的變更不會中斷現有的功能。

為了簡潔起見，在此您可將變更認可至您的分支、將分支推送至 GitHub，並觀看管線執行。

將 Index.cshtml 和 site.scss 新增至索引、認可變更，然後將變更向上推送至 GitHub。

git add Tailspin.SpaceGame.Web/Views/Home/Index.cshtml Tailspin.SpaceGame.Web/wwwroot/css/site.scss
git commit -m "Change text and colors on the home page"
git push origin blue-green

在 Azure Pipelines 中追蹤組建的每個步驟。
移至您「預備」環境的「生產」位置相對應的 URL。此位置是您稍早設定管線時所設定的預設位置。

您會看到已部署的網站顯示色彩和文字變更。
移至您「預備」環境的「交換」位置相對應的 URL。 URL 在其名稱中包含「-swap.azurewebsites.net」。

您會看到未變更色彩和文字的網站先前版本。

因為您已將「生產」位置和「交換」位置交換，所以不會看到任何變更。換句話說，在此您每次都會部署至「交換」位置，然後將「生產」位置和「交換」位置交換。交換流程可確保「生產」位置指向較新的部署。

還原變更

假設您部署了想要還原的變更。此時，再次將「生產」位置和「交換」位置交換，即可復原變更。例如，您可以透過 Azure 入口網站手動交換位置。或者，您可以透過管線推送另一個變更，以向前復原，而不是回復變更。

以上即是所有事項。您會還原最新的程式碼變更，並透過管線推送另一個變更。若要執行此作業，您可以使用 git revert 命令。

在 Git 中，您很少會從檔案的歷程記錄中移除認可。與文字編輯器中的「復原」作業不同的是，此 git revert 命令會建立新的認可，其實質上與指定的認可集相反。若要查看認可，您首先可以在還原流程中執行 git log 命令以追蹤您的認可歷程記錄。

在您的終端機中執行下列 git log 命令，即可檢視您的認可歷程記錄。
```
git --no-pager log --oneline
```
您的輸出會類似下列程式碼範例。在您的輸出中，您會看到其他認可和不同的認可識別碼。
```
d6130b0 (HEAD -> blue-green, origin/blue-green) Change text and colors on the home page
ce56955 Swap deployment slots
0d6a123 Trigger the pipeline
```
在輸出中，追蹤認可歷程記錄。最新的認可位於最頂端。
執行下列 git revert 命令，即可還原一個認可。
```
git revert --no-edit HEAD
```
將 HEAD 視為您分支的目前狀態。 HEAD 指的是最新的認可。此命令會指定只還原 HEAD 或最新的認可。

再次執行 git log，即可查看更新的認可歷程記錄。

git --no-pager log --oneline

在您輸出的頂端，您會看到另一個認可，其會還原先前的認可。以下是範例：

e58896a (HEAD -> blue-green) Revert "Change text and colors on the home page"
d6130b0 (origin/blue-green) Change text and colors on the home page
ce56955 Swap deployment slots
0d6a123 Trigger the pipeline

透過管線推送還原的變更

您可以在這裡透過管線推送還原的變更，並查看結果。

執行下列 git push 命令，以將 blue-green 分支上傳至您的 GitHub 存放庫。
```
git push origin blue-green
```
在 Azure Pipelines 中，移至該組建。在建置執行時加以追蹤。
前往對應至您「預備」環境之「交換」位置和「生產」位置的 URL。

「生產」位置現在會指向您還原的變更，也就是原始網站。

「交換」位置現在會指向先前的變更。

很棒！小組現在有方法可將版本自動化。他們可以取得使用者的新功能，而不會產生停機時間。

小組會議

小組集合以示範管線。這次，Tim 會在每個人觀看時，透過管線推送變更。但不是每個人都信服。

Andy：很高興看到部署位置運作中。但是我不懂。我們如何從此處的零停機部署獲益？ 「預備」僅供我們的小組和管理人員使用。

Tim：的確，我們現在不會看到太多效益。但是請想像，當我們將藍綠部署套用至「生產」階段時。我們仍會在升階至「生產」之前，先取得管理人員的手動核准。但是，當我們發行新功能時，交換流程會使得推出近乎即時。對我們的使用者來說，即可順暢無礙。

Andy：好的，我想我現在已經了解了。我喜歡這種改善。部署位置的系統很容易設定，而且可讓使用者獲益。每個人都得利。

Amita：說到改善，為什麼我們不回顧我們在幾週前所做的價值串流對應練習？沒錯，我相信我們會在如何快速地發行新功能方面看到進展。

Mara：太好了，讓我們將這放在下一個小組會議的議程上。