練習 - 取得範例應用程式

  • 10 分鐘

準備開始使用 Microsoft Azure Pipelines 建置 CI 管線。 第一步是建置和執行 Space Game Web 應用程式。 了解如何手動建置軟體，以準備好在管道中重複此流程。

Mara 將會這樣進行，您可遵循這些程序來執行相同動作。

建立 Azure DevOps 個人存取權杖

  1. 登入您的組織 (https://dev.azure.com/{yourorganization})。 如果您還沒有 Azure DevOps 組織，請在開始之前建立一個免費組織。 登入之後，如果您有多個組織，請選擇 Azure DevOps，然後移至您打算用來完成此課程模組的組織。 在此範例中，組織的名稱是 fabrikam。

    選擇您的 Azure DevOps 組織的螢幕擷取畫面。

  2. 從您的首頁開啟使用者設定 ，然後選取 [個人存取權杖]。

  3. 選取 [+ 新增權杖]。

  4. 使用您偏好的任何名稱為您的權杖命名。 Codespace 向 Azure DevOps 組織註冊其代理程式時會使用權杖，因此您可以保留預設到期日。

  5. 選擇 [自訂定義]，然後選擇 [顯示所有範圍]。

    檢視個人存取權杖所有範圍的螢幕擷取畫面。

  6. 選取下列範圍:代理程式集區 (讀取與管理)，然後選擇 [建立]。

    選取個人存取權杖代理程式集區權限的螢幕擷取畫面。

  7. 完成時，請複製權杖，並將其儲存在安全的位置。 為了您的安全，系統將不會再次顯示。

警告

像您的密碼一樣處理和使用 PAT 並加以保密。

建立分支

在 Git 中使用專案的第一個步驟是建立分支，讓您可以使用和修改來源檔案。 分支是 GitHub 存放庫的複本。 該複本存在於您的帳戶中，可讓您進行必要變更而不影響原始專案。

雖然您可對原始專案提出變更，但在本課程中，您會使用 Space Game Web 專案，就像 Mara 及小組所擁有的原始專案一樣。

注意

如果您先前已派生此存放庫，例如，如果您先前已完成此課程模組或其他 Tailspin Toys 訓練課程模組，建議您刪除分支，並使用下列步驟建立新的分支。 如果您不想刪除您的分支，請確保同步您的分支。

請將 Space Game Web 專案派生到您的 GitHub 帳戶：

  1. 從網頁瀏覽器移至 GitHub 並登入。

  2. 移至 Space Game Web 專案。

  3. 請選取分叉：

    GitHub 的螢幕擷取畫面，顯示 [派生] 按鈕的位置。

  4. 若要將存放庫派生到您的帳戶，請遵循指示。

設定自我裝載代理程式的祕密

建立 Codespace 之前，您將建立數個祕密，以協助自我裝載的 Azure DevOps 代理程式執行。 在生產環境中，您不想在 GitHub Codespaces 中使用自我裝載代理程式。 不過，因為您的小組使用 Codespaces 進行測試，所以當您建置管道時，這是很適合使用的暫時解決方案。

  1. 移至您的分支 GitHub 存放庫，然後選取 [設定] > [祕密和變數] > [Codespaces]。

    GitHub Codespaces 祕密的螢幕擷取畫面。

  2. 建立下列 Codespaces 存放庫祕密。

    名稱 值
    ADO_ORG 您用來完成此課程模組的 Azure DevOps 組織名稱。 在此範例中，組織的名稱是 fabrikam。 此組織名稱必須是您在上一個步驟中建立 PAT 時所使用的相同組織名稱。
    ADO_PAT 您在上一個步驟中建立的個人存取權杖。

    提示

    在此訓練課程模組中，會將您的代理程式指派至 Default 代理程式集區。 例如，如果您不想在 Default 集區中執行代理程式 (例如，您使用生產 Azure DevOps 環境來執行此訓練模組，而且您在 Default 集區中擁有其他代理程式)，您可以建立名為 ADO_POOL_NAME 的祕密，並指定要使用的代理程式集區的名稱。 如果未指定此祕密，則會使用 Default 集區。

設定 Codespaces

接下來，您會設定 Codespaces，以便建置網站、使用來源檔案，以及使用自我裝載代理程式執行您的管線。

  1. 在您派生的 GitHub 存放庫中，選取 [程式碼]，再次選取 [程式碼]，選擇 Codespaces 索引標籤，然後選擇 + 以建立新的 Codespace。

    使用選項建立新 Codespace 的螢幕擷取畫面。

  2. 等候您的 Codespace 建置。 此建置可能需要一些時間，但您只需要在訓練課程模組的此步驟中執行一次。

    建置完成時，系統會將您重新導向至線上版本的 Visual Studio Code。 您的 Codespace 隨附全新的 Visual Studio Code 安裝，就好像您剛在本機電腦上安裝 Visual Studio Code。 當 Codespace 第一次啟動時，Visual Studio Code 線上可能會提示您提供特定設定，或詢問您相關的喜好設定。 您可以選擇適合您 Visual Studio Code 使用方式的喜好設定。

設定上游遠端

遠端存放庫是小組成員共同作業的 Git 存放庫 (類似 GitHub 上的存放庫)。 請列出遠端存放庫，並新增指向 Microsoft 存放庫複本的遠端存放庫，以便您取得最新的範例程式碼。

  1. 在 Visual Studio Code 線上編輯器中，移至終端視窗，然後從右側選擇 bash。

    Visual Studio Code 線上編輯器中終端視窗的螢幕擷取畫面。

  2. 若要列出您的遠端存放庫，請執行 git remote 命令：

    git remote -v

    您具有存放庫的擷取 (下載) 和推送 (上傳) 存取權：

    origin  https://github.com/username/mslearn-tailspin-spacegame-web.git (fetch)
origin  https://github.com/username/mslearn-tailspin-spacegame-web.git (push)

    Origin 會指定 GitHub 上的存放庫。 當您從另一個存放庫派生程式碼時，通常會將原始遠端 (派生來源) 命名為 upstream。

  3. 執行此 git remote add 命令，以建立指向 Microsoft 存放庫、名稱為上游的遠端存放庫：

    git remote add upstream https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web.git

  4. 再次執行 git remote 以查看變更：

    git remote -v

    您會看到自己仍具有存放庫的擷取 (下載) 和推送 (上傳) 存取權。 您現在也具有 Microsoft 存放庫的擷取和推送存取權：

    origin  https://github.com/username/mslearn-tailspin-spacegame-web.git (fetch)
origin  https://github.com/username/mslearn-tailspin-spacegame-web.git (push)
upstream        https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web.git (fetch)
upstream        https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web.git (push)

建置和執行 Web 應用程式

  1. 在 Visual Studio Code 中，瀏覽至終端視窗並執行 dotnet build 此命令以建置應用程式：

    dotnet build --configuration Release

  2. 從終端機視窗執行此命令，以執行應用程式 dotnet run：

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

    .NET 解決方案檔案可包含多個專案。 --project 引數會指定 Space Game Web 應用程式的專案。

確認應用程式正在執行

在開發模式中，Space Game 網站已設定在連接埠 5000 上執行。

您會在 Visual Studio 編輯器中看到新的訊息。 您在連接埠 5000 上執行的應用程式可供使用。 選取 [在瀏覽器中開啟] 以移至執行中的應用程式。

連接埠轉送 Codespaces 訊息的螢幕擷取畫面。

在新瀏覽器視窗中，您應該會看到 Space Game 網站：

顯示 Space Game 網站的網頁瀏覽器螢幕擷取畫面。

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

顯示 Space Game 排行榜的網頁瀏覽器螢幕擷取畫面。

完成後請返回到終端機視窗，若要停止執行中的應用程式，請選取 Ctrl + C。

準備 Visual Studio Code

首先，設定 Visual Studio Code，以便在本機建置網站並使用來源檔案。

Visual Studio Code 隨附整合式終端，可讓您完全只從命令列來編輯檔案和工作。

  1. 啟動 Visual Studio Code。

  2. 在 [檢視] 功能表上選取 [終端]。

  3. 從下拉式清單中，選取 [bash]：

    在 Visual Studio Code 中選取 Bash 殼層的螢幕擷取畫面。

    終端機視窗可讓您選取系統上安裝的任何殼層，例如 Bash、Zsh 和 PowerShell。

    在這裡，您會使用 Bash。 Git for Windows 提供 Git Bash，可讓您輕鬆地執行 Git 命令。

    注意

    在 Windows 上，如果您看不到 Git Bash 列為選項，則請確定您已安裝 Git，然後重新啟動 Visual Studio Code。

  4. 若要瀏覽至要使用的目錄，例如您的主目錄 (cd)，請執行 ~ 命令。 您可視需要選擇不同目錄。

    cd ~

設定 Git

如果您不熟悉 Git 和 GitHub，則必須先執行幾個命令，將您的身分識別與 Git 建立關聯，並向 GitHub 進行驗證。

設定 Git 將詳細說明此流程。

您至少需要完成下列步驟。 請從 Visual Studio Code 的整合式終端執行這些命令。

  1. 設定您的使用者名稱。
  2. 設定您的認可電子郵件地址。
  3. 快取您的 GitHub 密碼。

注意

若您已對 GitHub 使用雙重要素驗證，則請建立個人存取權杖，並在稍後提示時以您的權杖取代密碼。

將存取權杖視同密碼。 請保存在安全的位置。

取得原始程式碼

現在您會從 GitHub 取得原始程式碼並設定 Visual Studio Code，以便執行應用程式並使用原始程式碼檔案。

建立分支

在 Git 中使用專案的第一個步驟是建立分支，讓您可以使用和修改來源檔案。 分支是 GitHub 存放庫的複本。 該複本存在於您的帳戶中，可讓您進行必要變更而不影響原始專案。

雖然您可對原始專案提出變更，但在本課程中，您會使用 Space Game Web 專案，就像 Mara 及小組所擁有的原始專案一樣。

請將 Space Game Web 專案派生到您的 GitHub 帳戶：

  1. 從網頁瀏覽器移至 GitHub 並登入。

  2. 移至 Space Game Web 專案。

  3. 請選取分叉：

    GitHub 的螢幕擷取畫面，顯示 [派生] 按鈕的位置。

  4. 若要將存放庫派生到您的帳戶，請遵循指示。

在本機複製您的分支

您的 GitHub 帳戶已有 Space Game Web 專案的複本，便可將複本下載或複製至電腦，以便在本機使用。

複製類似於分支，都是存放庫的複本。 當您複製存放庫時，您可以進行變更、確認如預期運作，然後將這些變更上傳回到 GitHub。 其他已驗證使用者所做的 GitHub 存放庫複本變更也可同步至本機複本。

如何將 Space Game Web 專案複製至您的電腦：

  1. 移至 GitHub 上 Space Game Web 專案的分支。

  2. 在命令列中選取 [程式碼]。 此窗格會顯示 [複製] 選項，以及各種複製類型的索引標籤。 從 [HTTPS] 索引標籤中，選取 URL 旁的複製圖示，將 URL 複製到剪貼簿。

    GitHub 存放庫顯示 URL 位置和複製按鈕的螢幕擷取畫面。

  3. 在 Visual Studio Code 中，移至終端視窗並輸入 git clone，接著貼上剪貼簿中的 URL。 其內容應與下面所示類似：

    git clone https://github.com/username/mslearn-tailspin-spacegame-web.git

  4. Cloning 'mslearn-tailspin-spacegame-web'... 作業完成後，請輸入下列命令以切換至 mslearn-tailspin-spacegame-web 目錄。 您存放庫的根目錄。

    cd mslearn-tailspin-spacegame-web

設定上游遠端

遠端存放庫是小組成員共同作業的 Git 存放庫 (類似 GitHub 上的存放庫)。 請列出遠端存放庫，並新增指向 Microsoft 存放庫複本的遠端存放庫，以便您取得最新的範例程式碼。

  1. 若要列出您的遠端存放庫，請執行 git remote 命令：

    git remote -v

    您具有存放庫的擷取 (下載) 和推送 (上傳) 存取權：

    origin  https://github.com/username/mslearn-tailspin-spacegame-web.git (fetch)
origin  https://github.com/username/mslearn-tailspin-spacegame-web.git (push)

    Origin 會指定 GitHub 上的存放庫。 當您從另一個存放庫派生程式碼時，通常會將原始遠端 (派生來源) 命名為 upstream。

  2. 執行此 git remote add 命令，以建立指向 Microsoft 存放庫、名稱為上游的遠端存放庫：

    git remote add upstream https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web.git

  3. 再次執行 git remote 以查看變更：

    git remote -v

    您會看到自己仍具有存放庫的擷取 (下載) 和推送 (上傳) 存取權。 您現在也具有 Microsoft 存放庫的擷取和推送存取權：

    origin  https://github.com/username/mslearn-tailspin-spacegame-web.git (fetch)
origin  https://github.com/username/mslearn-tailspin-spacegame-web.git (push)
upstream        https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web.git (fetch)
upstream        https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web.git (push)

在檔案總管中開啟專案

在 Visual Studio Code 中，您的終端視窗會指向 Space Game Web 專案的根目錄。 請開啟專案，以檢視其結構並使用檔案。

  1. 開啟專案最簡單的方式是在目前的目錄中重新開啟 Visual Studio Code。 若要執行此作業，請在整合式終端中執行下列命令：

    code -r .

    您會看到在 [檔案總管] 中的目錄和檔案樹狀目錄。

  2. 開啟整合式終端。 此終端會進入 Web 專案的根目錄。

如果 code 命令失敗，則您需要將 Visual Studio Code 新增至系統 PATH。 若要這麼做︰

  1. 在 Visual Studio Code 中，選取 F1 或選取 [檢視]>[命令選擇區] 來存取命令選擇區。

  2. 在命令選擇區中，輸入 Shell Command: Install 'code' command in PATH (殼層命令：在 PATH 中安裝「程式碼」命令)。

  3. 重複上述程序，在檔案總管中開啟該專案。

建置和執行 Web 應用程式

現在您已有 Web 應用程式，即可在本機建置並執行。

  1. 在 Visual Studio Code 中，瀏覽至終端機視窗並執行 dotnet build 此命令，以建立應用程式：

    dotnet build --configuration Release

    注意

    若找不到命令 dotnet，請參閱本課程模組開頭的先決條件。 您可能需要安裝 .NET SDK。

    .NET 專案通常隨附兩個組建組態：偵錯和發行。 偵錯組建未針對效能最佳化。 這些組建可讓您輕鬆追蹤整個程式，並進行問題疑難排解。 在此，我們選取發行組態，只是了解一下 Web 應用程式的實際運作。

  2. 從終端機視窗執行此命令，以執行應用程式 dotnet run：

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

    .NET 解決方案檔案可包含多個專案。 --project 引數會指定 Space Game Web 應用程式的專案。

確認應用程式正在執行

在開發模式中，Space Game 網站已設定在連接埠 5000 上執行。

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

顯示 Space Game 網站的網頁瀏覽器螢幕擷取畫面。

提示

若您在瀏覽器中看到隱私權相關錯誤或憑證錯誤，請從終端機選取 Ctrl + C，以停止執行中的應用程式。

接著執行 dotnet dev-certs https --trust，並於出現提示時選取 [是]。 如需詳細資訊，請參閱這篇部落格文章。

您的電腦信任您的本機 SSL 憑證後，請再次執行 dotnet run 命令，並從新的瀏覽器索引標籤瀏覽至 http://localhost:5000，以查看正在執行的應用程式。

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

顯示 Space Game 排行榜的網頁瀏覽器螢幕擷取畫面。

完成後請返回終端機視窗，並選取 Ctrl+C 停止執行中的應用程式。