Краткое руководство. Создание и публикация пакета Node.js с помощью Azure Pipelines

Azure DevOps Services | Azure DevOps Server 2022 г. - Azure DevOps Server 2019 г. | TFS 2018

Конвейер Azure DevOps можно использовать для создания, развертывания и тестирования приложений JavaScript.

В этом кратком руководстве описывается, как использовать конвейер для создания пакета Node.js с помощью диспетчера пакетов Node (npm) и публикации артефакта конвейера.

Предварительные условия

В Azure DevOps должны быть следующие элементы:

YAML недоступен для TFS 2018.

1. Создание вилки примера кода

Создайте вилку следующего примера серверного приложения Express.js в GitHub.

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

2. Создание конвейера

  1. Войдите в Azure Pipelines. В браузере откроется https://dev.azure.com/my-organization-name панель мониторинга Azure DevOps.

  2. Перейдите к проекту и выберите Конвейеры>Создать новый конвейер.

  3. Выберите GitHub в качестве расположения исходного кода.

  4. Если вы будете перенаправлены на GitHub для входа, введите учетные данные GitHub.

  5. Когда появится список репозиториев, выберите Node.js пример репозитория.

  6. Azure Pipelines анализирует код в репозитории Node.js и рекомендует шаблон для конвейера. Выберите этот шаблон.

  7. Azure Pipelines создает YAML-файл для конвейера. Выберите Сохранить и запустить>фиксацию непосредственно в ветвь main, а затем нажмите кнопку Сохранить и запустить еще раз.

  8. Начинается новое выполнение. Дождитесь, пока он завершится.

По завершении вы получите в репозитории рабочий YAML-файл azure-pipelines.yml , который можно настроить.

  1. Создайте конвейер и выберите шаблон YAML .

  2. Задайте пул агентов и путь к файлу YAML для конвейера.

  3. Сохраните конвейер и поставить сборку в очередь. Когда появится сообщение Сборка #nnnnnnnn.n поставлена в очередь , щелкните ссылку на номер, чтобы увидеть конвейер в действии.

3. Создание пакета и публикация артефакта

  1. Измените файл azure-pipelines.yml .

  2. Обновите задачу установщика средств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'
    
  3. Добавьте в конвейер новые задачи для копирования пакета 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. Запуск конвейера

Сохраните и запустите конвейер. После выполнения конвейера убедитесь, что задание успешно выполнено и отображается опубликованный артефакт.

Снимок экрана: успешное выполнение конвейера с артефактом.

  1. Выполните вилку в следующем репозитории на сайте GitHub.

    https://github.com/Azure-Samples/js-e2e-express-server
    
  2. Получив пример кода в собственном репозитории, создайте первый конвейер и выберите шаблон Пустой процесс .

  3. Выберите Процесс на вкладке Задачи в редакторе конвейера и измените свойства следующим образом:

    • Очередь агента:Hosted Ubuntu Latest
  4. Добавьте следующие задачи в конвейер в указанном порядке:

    • npm

      • Команды:install
    • npm

      • Отображаемое имя:npm test
      • Команды:custom
      • Команда и аргументы:test
    • Публикация результатов теста

      • Оставьте все значения по умолчанию для свойств
    • Архивные файлы

      • Корневая папка или файл для архивации:$(System.DefaultWorkingDirectory)
      • Добавить имя корневой папки в архивные пути: Беспрепятственно
    • Публикация артефактов сборки

      • Оставьте все значения по умолчанию для свойств
  5. Сохраните конвейер и добавьте сборку в очередь, чтобы увидеть ее в действии.

Дальнейшие действия

Поздравляем, вы успешно завершили работу с этим руководством!