快速入門 - 使用 Azure Pipelines 建置和發佈Node.js套件

發行項
04/04/2024

Azure DevOps Services | Azure DevOps Server 2022 - Azure DevOps Server 2019

您可以使用 Azure DevOps 管線來建置、部署及測試 JavaScript 應用程式。

本快速入門會逐步解說如何使用管線建立具有 Node 封裝管理員（npm）的Node.js套件，以及發佈管線成品。

必要條件

您必須在 Azure DevOps 中具有下列專案：

您可以在其中建立存放庫的 GitHub 帳戶。免費建立一個。
Azure DevOps 組織和專案。免費建立一個。
能夠在 Microsoft 裝載的代理程式上執行管線。您可以購買平行作業，也可以要求免費層。

1 - 派生範例程式碼

在 GitHub 派生下列範例 Express.js 伺服器應用程式。

https://github.com/Azure-Samples/js-e2e-express-server

2 - 建立管線

登入 Azure Pipelines。您的瀏覽器將會移至 https://dev.azure.com/my-organization-name 並顯示您的 Azure DevOps 儀錶板。
移至您的項目，然後選取 [管線>建立新的管線]。
選取 [GitHub ] 作為原始程式碼的位置。
如果您重新導向至 GitHub 以登入，請輸入您的 GitHub 認證。
當存放庫清單出現時，請選取您的Node.js範例存放庫。
Azure Pipelines 會分析存放庫中的程式代碼，並建議 Node.js 管線的範本。選取該範本。
Azure Pipelines 會產生管線的 YAML 檔案。選取 [儲存並直接執行>認可至主要分支]，然後選擇 [儲存並再次執行]。
新的回合隨即啟動。等待執行完畢。

當您完成時，您的存放庫中有一個可運作的 YAML 檔案 azure-pipelines.yml ，可供您自定義。

建立管線並選取 YAML 範本。
設定管線的 Agent 集 區和 YAML 檔案路徑 。
儲存管線並將組建排入佇列。 當組建 #nnnnnnnn.n 已排入佇列訊息時，請選取數位連結以查看管線的運作情形。

3 - 建置您的套件併發佈成品

編輯您的 azure-pipelines.yml 檔案。

更新Node.js工具安裝程式工作，以使用 Node.js 16 版 LTS。

trigger:
- main

pool:
  vmImage: 'ubuntu-latest'

steps:
- task: UseNode@1
  inputs:
    version: '16.x'
  displayName: 'Install Node.js'

- script: |
    npm install
  displayName: 'npm install'

- script: |
    npm run build
  displayName: 'npm build'

將新工作新增至管線，以複製 npm 套件、package.json，以及發佈成品。 [ 複製檔案] 工作會從下載原始碼檔案之代理程式的本機路徑複製檔案，並將檔案儲存至代理程式上的本機路徑，其中會先將任何成品複製到其中的代理程式，再推送至目的地。 src只有和 public 資料夾會取得複本。 [ 發佈管線成品] 工作會從先前的 [複製檔案] 工作下載這些檔案，並讓它們以管線組建發行的管線成品的形式提供。
```
- task: CopyFiles@2
  inputs:
    sourceFolder: '$(Build.SourcesDirectory)'
    contents: |
       src/*
       public/*
    targetFolder: '$(Build.ArtifactStagingDirectory)'
  displayName: 'Copy project files'

- task: PublishPipelineArtifact@1
  inputs:
    artifactName: e2e-server
    targetPath: '$(Build.ArtifactStagingDirectory)'
    publishLocation: 'pipeline'
  displayName: 'Publish npm artifact'
```

4 - 執行管線

儲存並執行您的管線。在管線執行之後，請確認作業已成功執行，且您看到已發佈的成品。

使用成品成功執行管線的螢幕快照。

在 GitHub 派生下列存放庫。

https://github.com/Azure-Samples/js-e2e-express-server

在您自己的存放庫中有範例程式代碼之後，請建立您的第一個管線，然後選取 空白進程 範本。
在管線編輯器的 [工作] 索引標籤下選取 [處理]，然後變更屬性，如下所示：
- 代理程式佇列：Hosted Ubuntu Latest
以指定的順序將下列工作新增至管線：
- npm $英文$
  - 命令：install
- npm $英文$
  - 顯示名稱npm test：
  - 命令：custom
  - 命令與自變數：test
- 發佈測試結果
  - 保留所有屬性的預設值
- 封存盤案
  - 要封存的根資料夾或檔案：$(System.DefaultWorkingDirectory)
  - 封存路徑前面加上根資料夾名稱： 取消核取
- 發佈組建成品
  - 保留所有屬性的預設值
儲存管線並將組建排入佇列，以查看其實際操作。

下一步

恭喜，您已成功完成本快速入門！

設定 JavaScript