練習 - 建立管線

已完成

此時，Mara 已定義 Space Game 網站的組建組態。 現在輪到您了；您將建立管線並產生您的第一個組建成品。

如您所見，Mara 使用了 YAML 檔案來定義組建。 當您建立管線時，該流程會提示您提供 YAML 檔案。 專案目前沒有此檔案。

當您未提供專案的初始 YAML 檔案時，Azure Pipelines 可以根據您的應用程式類型為您建立一個檔案。 在這裡，您會建立 ASP.NET Core 應用程式，但 Azure Pipelines 也會提供其他專案類型的入門組建組態，包含 Java、Go 等等。

建立管線

1. 在 Azure DevOps 中，前往您的專案。

2. 從專案頁面或左窗格，選取 [管線]。

3. 選取 [建立管線] (或如果不是專案中的第一個管線，請 [新增管線])。

4. 在 [連線] 索引標籤上，選取 [GitHub]。

   出現提示時，請輸入您的 GitHub 認證。

5. 從 [選取] 索引標籤選取您的 mslearn-tailspin-spacegame-web 存放庫。

6. 若要安裝 Azure Pipelines 應用程式，您可能會重新導向至 GitHub。 如是，請捲動至底部，並選取 [核准並安裝]。

7. 在 [設定] 索引標籤上，選取 [ASP.NET Core]。

   注意

   若未看到此選項，請選取 [顯示更多]。 請勿選取 [ASP.NET Core (.NET Framework)]。

   

8. 在 [檢閱] 索引標籤上，記下初始組建組態。

   

   此為 Azure DevOps 根據您應用程式類型 (ASP.NET Core) 提供的最基本組態。 預設組態會使用 Microsoft 裝載的代理程式。

   請將文字 vmImage: ubuntu-latest 取代為 name: Default (或代理程式集區的名稱，要是您在設定 GitHub Codespaces 存放庫祕密時指定了不同的集區)。

9. 在 [檢閱] 索引標籤上，選取 [儲存並執行]。 若要將變更認可至 GitHub 並啟動管線，請選擇 [直接認可至主要分支]，然後再次選取 [儲存並執行]。 如果系統提示您以類似 This pipeline needs permission to access a resource before this run can continue 的訊息來授與權限，請選擇 [檢視] 並遵循提示以允許存取。

監看管線執行

在 [作業] 底下，選取 [作業]。 接下來，追蹤建置流程的每個步驟。 若要在組建完成後以文字檔的形式查看工作輸出，您也可選取 [檢視原始記錄]。

如果您的管線未快速啟動，請確認 GitHub Codespaces 仍在執行中。 GitHub Codespaces 將會在 30 分鐘後關閉，而且可能需要重新開機。

如果您的管線狀態維持在 [已佇列]，且在幾分鐘後未轉換至 [執行中]，請檢查您的平行作業並要求免費授與。 如果您沒有平行作業的存取權限，則您可以使用 GitHub Codespaces 來啟動模組。

在這裡，您會看到建立組建定義的步驟。 其會準備 VM、從 GitHub 擷取最新的原始程式碼，然後建立應用程式。

此組態是很好的開始，因為您現在有地方可新增建置工作。 您必須更新以符合 Tailspin 小組的需求，例如縮製 JavaScript 和 CSS 檔案。

提示

檢查您的電子郵件。 您可能已收到組建通知，其中包含您的執行結果。 您可使用此通知讓小組成員知道組建已完成，及每個組建是否成功或失敗。

新增建置工作

現在您有運作正常的建置程序，您可開始新增建置工作。

請記得自己目前是從 main 分支工作。 若要保存您的工作，您現在要建立名稱為 build-pipeline 的分支。 分支為您提供實驗的地方，在不影響小組其他成員的情況下讓您的組建完全運作。

您可直接從 Azure Pipelines 將工作新增至 azure-pipelines.yml。 Azure Pipelines 會將您的變更直接認可至您的分支。 在這裡，您將會在本機變更 azure-pipelines.yml，並將您的變更推送或上傳至 GitHub。 如此可讓您練習 Git 技能。 觀看管線在您推送變更時自動建立應用程式。

在實務上，您可能會一次新增一個建置工作、推送您的變更，然後觀察建置執行。 不過在這裡，您會一次新增我們稍早所確認的所有組建工作。

注意

您即將執行幾個 Git 命令。 若您剛開始使用 Git，別擔心。 我們將為您示範做法。 我們也會在未來的課程模組中更詳細說明 Git。

1. 在 Visual Studio Code 中，前往整合式終端。 請確定您移至存放庫中的 main 分支，並執行步驟。

2. 若要從 GitHub 擷取最新的變更，並更新您的 main 分支，請執行此 git pull 命令。

   git pull origin main
   

   您可從輸出中看到，Git 已擷取名稱為 azure-pipelines.yml 的檔案。 這是 Azure Pipelines 為您建立的入門管線設定。 當您設定管線時，Azure Pipelines 會將這個檔案新增至您的 GitHub 存放庫。

3. 若要建立名稱為 build-pipeline 的分支，請執行此 git checkout 命令：

   git checkout -B build-pipeline
   

4. 在 Visual Studio Code 中變更 azure-pipelines.yml，如下所示：

   trigger:
   - '*'
   
   pool:
     name: 'Default' # Replace Default with the name of your agent pool if you used a different pool
   
   variables:
     buildConfiguration: 'Release'
   
   steps:
   - task: UseDotNet@2
     displayName: 'Use .NET SDK 6.x'
     inputs:
       packageType: sdk
       version: '6.x'
   
   - task: Npm@1
     displayName: 'Run npm install'
     inputs:
       verbose: false
   
   - script: './node_modules/.bin/node-sass Tailspin.SpaceGame.Web/wwwroot --output Tailspin.SpaceGame.Web/wwwroot'
     displayName: 'Compile Sass assets'
   
   - task: gulp@1
     displayName: 'Run gulp tasks'
   
   - script: 'echo "$(Build.DefinitionName), $(Build.BuildId), $(Build.BuildNumber)" > buildinfo.txt'
     displayName: 'Write build info'
     workingDirectory: Tailspin.SpaceGame.Web/wwwroot
   
   - task: DotNetCoreCLI@2
     displayName: 'Restore project dependencies'
     inputs:
       command: 'restore'
       projects: '**/*.csproj'
   
   - task: DotNetCoreCLI@2
     displayName: 'Build the project - Release'
     inputs:
       command: 'build'
       arguments: '--no-restore --configuration Release'
       projects: '**/*.csproj'
   

   trigger:
   - '*'
   
   pool:
     vmImage: ubuntu-latest
   
   variables:
     buildConfiguration: 'Release'
   
   steps:
   - task: UseDotNet@2
     displayName: 'Use .NET SDK 6.x'
     inputs:
       packageType: sdk
       version: '6.x'
   
   - task: Npm@1
     displayName: 'Run npm install'
     inputs:
       verbose: false
   
   - script: './node_modules/.bin/node-sass Tailspin.SpaceGame.Web/wwwroot --output Tailspin.SpaceGame.Web/wwwroot'
     displayName: 'Compile Sass assets'
   
   - task: gulp@1
     displayName: 'Run gulp tasks'
   
   - script: 'echo "$(Build.DefinitionName), $(Build.BuildId), $(Build.BuildNumber)" > buildinfo.txt'
     displayName: 'Write build info'
     workingDirectory: Tailspin.SpaceGame.Web/wwwroot
   
   - task: DotNetCoreCLI@2
     displayName: 'Restore project dependencies'
     inputs:
       command: 'restore'
       projects: '**/*.csproj'
   
   - task: DotNetCoreCLI@2
     displayName: 'Build the project - Release'
     inputs:
       command: 'build'
       arguments: '--no-restore --configuration Release'
       projects: '**/*.csproj'
   

   在 steps 區段底下，您會看到先前已確認的各指令碼命令所對應的建置工作。

   Azure Pipelines 提供對應至許多常見組建活動的內建建置工作。 例如，DotNetCoreCLI@2 工作會對應至 dotnet 命令列公用程式。 管線會使用 DotNetCoreCLI@2 兩次：一次用於還原或安裝專案的相依性，一次用於建置專案。

   請記得，並非所有組建活動皆對應至內建工作。 例如，沒有任何內建工作會執行 node-Sass 公用程式或將組建資訊寫入文字檔。 若要執行一般系統命令，您可以使用 CmdLine@2 或 script 工作。 管線會使用 script 工作，因為它是 CmdLine@2 的常用捷徑。

   在將組建相關資訊寫入至檔案的建置步驟中，注意下列元素：

   • $(Build.DefinitionName)
   • $(Build.BuildId)
   • $(Build.BuildNumber)

   這是系統提供的內建變數，供您在管線中使用：

   • $(Build.DefinitionName) 是組建管線的名稱。 例如 "SpaceGame-Web-CI"。
   • $(Build.BuildId) 是已完成組建的數值識別碼，例如 115。
   • $(Build.BuildNumber) 是已完成組建的名稱。 您可設定格式，但組建編號預設包含目前日期，後面接著當天的組建編號。 例如組建編號 "20190329.1"。

   您也可定義自己的變數 (稍後將進行此作業)。

   您也可能注意到 UseDotNet@2 工作，這是第一個建置步驟。 Mara 記得建置指令碼並未安裝必要的建置工具。 雖然組建代理程式隨附數種 .NET SDK 版本，但此工作可讓管線作者輕鬆指定須用於組建代理程式的版本。

5. 從整合式終端執行下列 Git 命令，將 azure-pipelines.yml 新增至索引、認可變更，並將變更推送至 GitHub。 這些步驟與您稍早執行的步驟類似。

   提示

   請記得先儲存 azure-pipelines.yml，再執行這些 Git 命令。

   git add azure-pipelines.yml
   git commit -m "Add build tasks"
   git push origin build-pipeline
   

   這次，您會將 build-pipeline 分支 (而不是 main) 推送至 GitHub。

   將分支推送至 GitHub 會觸發 Azure Pipelines 中的建置程序。

6. 在 Azure Pipelines 中，前往您的組建。 若要進行，請在頁面側邊選取 [管線]，然後選取您的管線。 您會看到認可訊息，以及組建正在使用 build-pipeline 分支中的程式碼執行。

   

   提示

   如果您沒有立即看到組建，請稍候片刻或重新整理頁面。

7. 選取您的組建並選擇 [工作]，並在建置工作執行時進行追蹤。

   例如，以下是執行 gulp@1 工作，以執行 gulp 工作來縮製 JavaScript 和 CSS 資產時會發生的狀況：

   

   若任何步驟失敗，您會在輸出中看到錯誤，以便進行診斷和修正失敗。

   稍早，您執行了更基本的組建組態。 這次，當組建完成時，您會看到組建應用程式所需的一套完整工作。

   

8. 組建完成後，請選取任何步驟來查看組建的整體進展。 從該處，您可以跳到組建記錄檔或 GitHub 上的相關變更。