Выпуск в NPM из Azure DevOps

В моей недавней статье о Создание загрузчика WebPack для генерации WebAssembly с GO Я решил, что хочу легко спустить погрузчик в NPM, когда я его строил.

Для этого я решил, что собираюсь использовать Azure DevOps Поскольку это дает мне хорошее разделение между фазой сборки и фазой высвобождения. Кроме того, многие люди не знают, что трубопроводы Azure DevOps бесплатны для проектов с открытым исходным кодом, поэтому снова есть хороший маленький бонус, который мы можем использовать для нашего проекта.

Создание сборки

Первый шаг, который вам нужно сделать, — это создать определение сборки. Мы сделаем это, установив Azure Pipelines Github Application (Если вы еще не установили его) и активируйте его для нашего репозитория GitHub.

При их связывании мы разрешаем Azure DevOps иметь доступ к нашей информации GitHub и создать конвейер, используя определение шаблона Node.js в качестве базы, но мы собираемся немного настроить его перед тем, как сохранить его.

Шаблон Node.js выглядит так:

trigger:
- master

pool:
    vmImage: 'Ubuntu-16.04'

steps:
- task: NodeTool@0
    inputs:
    versionSpec: '10.x'
    displayName: 'Install Node.js'

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

Это заявляет, что эта сборка запускается на Мастер Branch, поэтому PR не запускает этот (мы всегда могли бы вызвать другую сборку для PR). Далее это говорит нам, что сборщики сборки будут в бассейн Участники Linux, в частности Ubuntu 16.04, является дистрибутивом, который будет использоваться.

Теперь мы выполняем задачи, которые будет выполнять агент, сначала задача установить node.js в запрошении, которую вы запрашиваете. Это будет по умолчанию в последнюю LTS, но вы можете настроить это, если вы хотите сделать версию закрепления или что -то в этом роде, просто измените версии имущество. Наконец, мы запускаем Скрипт Задача, которая просто выполнит сценарий в оболочке агента (в данном случае, сценарий Linux, но это скрипт Windows, если это был агент Windows), который запускается NPM Установка и NPM Run Build Анкет Это сделало предположение, что у вас есть NPM Script называется сборка Это сделает сборку, так что вы можете настроить это, если хотите. На самом деле вы можете делать все изменения, которые вам нужны, но это просто для большинства сценариев. Кроме того, в зависимости от вашего предпочтения к ролям задачи, вы можете разделить установить и сборка Шаги в отдельные задачи, которые могут облегчить отладку сбоя, если он ударит, вместо того, чтобы читать журналы.

Если вы выберете Сохранить и запустить Он предложит создать Azure-Pipelines.yaml Файл в вашем репозитории GitHub, либо непосредственно в Мастер Или в филиале, чтобы PR, так что выберите свой предпочтительный подход, тогда наша сборка начнется и должна успешно завершить.

Итак, как мы что -то выпустили?

Получение артефактов для выпуска

Наша сборка будет работать на агенте, генерируя то, что мы хотели, генерируют (в моем случае конвертированная TypeScript в JavaScript), но он жил только на этом агенте, и когда агент будет сделан, он уничтожен. Что ж, это не очень полезно сейчас, мы хотим, чтобы все было там, чтобы подтолкнуть к NPM.

Для этого мы отредактируем наш Azure-Pipelines.yaml файл. Сначала давайте создать пакет NPM, который мы можем опубликовать:

- script: |
    npm pack
    displayName: 'Package for npm release'

Снова мы используем Скрипт Задача, чтобы сделать это, и мы запускаем NPM Pack Команда, которая генерирует нас TGZ Файл, который может быть отправлен в репозиторий пакета NPM (или любой другой, который вы так желаете). Но почему мы генерируем пакет, а не публикуем? Ну, причина в том, что мы хотим разделить строить Фаза нашего трубопровода из Выпуск Фаза, поэтому непрерывная интеграция, затем непрерывная доставка. Сделав релиз с нашего шага сборки, вроде как водам за что ответственен. Также, генерируя TGZ Файл в сборке, мы говорим, что это то, что будет выпущено, и его нельзя изменить, поэтому, если у нас был промежуточный репозиторий NPM, мы могли бы подтолкнуть его туда, как будто мы можем выполнять постановку для приложений. В конечном счете, это делает выпущенный артефакт более неизменным.

Теперь мы сгенерировали TGZ Файл, затем нам нужно прикрепить его в качестве артефакта к сборке. Артефакт — это результат сборки, которую можно поднять в другом месте, либо цепной сборкой, выпуском или просто вручную, глядя на результаты сборки.

- task: CopyFiles@2
    inputs:
    sourceFolder: '$(Build.SourcesDirectory)'
    contents: '*.tgz' 
    targetFolder: $(Build.ArtifactStagingDirectory)/npm
    displayName: 'Copy npm package'

- task: CopyFiles@2
    inputs:
    sourceFolder: '$(Build.SourcesDirectory)'
    contents: 'package.json' 
    targetFolder: $(Build.ArtifactStagingDirectory)/npm
    displayName: 'Copy package.json'

- task: PublishBuildArtifacts@1
    inputs:
    pathtoPublish: '$(Build.ArtifactStagingDirectory)/npm'
    artifactName: npm
    displayName: 'Publish npm artifact'

Используя Копировать файлы Задача мы можем получить файлы (наш tgz и наш Package.json ) и скопируйте их в Артефакты Постановка Место определяется переменной $ (Build.ArtifactStagingDirectory) . Это специальный каталог, который имеет агент, который предназначен для публикации как артефактов. Как только эти файлы находятся в нужном месте, мы используем Публикайте артефакты Задача, чтобы сообщить нашу сборку Файлы в папке будет в Названный артефакт из npm Анкет Это имя важно, так как мы будем использовать его в будущем для доступа к ним, поэтому сделайте его чем -то логичным. Я также избегаю использования пробелов во имя артефакта, чтобы вам не приходилось сбежать, когда вы пытаетесь их использовать.

Я также скопирую через заметки о выпуске, а также файлы JavaScript, которые мы генерируем из компилятора TypeScript, поскольку они могут быть полезны для отладки.

Когда все сказано и сделано, наше определение сборки теперь выглядит как это И вы можете увидеть его историю запуска Здесь Анкет

Создание релиза

Наша сборка проходит, мы получаем вывод артефактов, пришло время публиковать в NPM.

Прямо сейчас единственный способ создать конвейер выпуска — это использование дизайнера в Azure Pipeline, нет экспорта YAML, но это хорошо, что у нас есть простой конвейер выпуска!

В портале Azure DevOps мы создадим новый релиз, используем Пустая работа Шаблон и название нашего этапа выпуска (я назвал его Публикуйте ).

Теперь нам нужно определить, через что пройдет наше выпуск. Стадия может представлять собой среду, поэтому, если вы выпускаете в UAT, то Pre Prod и, наконец, производство, вы все нанесли на карту в сборке. Вы также можете определить ворота на каждом этапе, есть ли утверждения релиза сцены и т. Д. Но все это выходит за рамки того, что нам нужно здесь, у нас есть только один этап, это выходит на NPM. Проверьте Документы для получения дополнительной информации о этапах Анкет

Удобно есть npm Задача, предоставленная Azure DevOps, в которых определены некоторые общие команды, в том числе то, что мы хотим, публиковать ! Укажите путь к нашему связанному артефакту с именем npm (который мы назвали выше) и решили опубликовать в Внешний реестр NPM (Мы используем это, потому что Azure DevOps могут выступать в качестве реестра NPM).

Если вы этого не делали ранее, вам нужно будет создать Сервисное соединение В реестр NPM используйте Новый кнопка для этого и введите [https://registry.npmjs.org] (https://registry.npmjs.org) Как источник и токен, который вы можете генерировать с веб -сайта NPM под вашим профилем.

Теперь вы думаете, что мы будем готовы к катированию правильно? Ну … да, вы публикуете NPM, но то, что вы публикуете, — это пакет, который содержит Ваш TGZ , не твой TGZ . Видите ли, публиковать Команда способна принимать TGZ и публиковать это в NPM Но есть Ошибка в задаче Azure DevOps Это означает, что это не работает. Поэтому, к сожалению, нам понадобится обходной путь 😦.

К счастью, обходной путь довольно прост, нам нужно распаковать TGZ Подайте и используйте задачу публикации против его содержимого. Мы делаем это с задачей извлечения файлов, определяя *.tgz Как то, что мы извлекли (так как мы не знаем имя файла) и дадим, если новая папка. Я использовал $ (Система. DefaultWorkingDirectory)/NPM-Publish Анкет Теперь мы можем обновить нашу команду публикации, чтобы не использовать каталог артефактов, но распакованный каталог, который в моем случае является $ (Система. DefaultWorkingDirectory)/NPM-Publish/Package Анкет

С нашей сценой, пришло время связать это с определением сборки. Мы делаем это, добавив артефакт, выбрав созданный нами конвейер сборка и оставляя по умолчанию.

Примечание: я оставляю По умолчанию версия в качестве Укажите во время создания выпуска Поскольку это дает сборку сборки над артефактами. Для этого сценария это не имеет огромного значения, но он может быть полезен в более сложных настройках.

Поскольку мы хотим, чтобы релиз выходил каждый раз, когда заполняется сборка, мы нажимаем на болт молнии (⚡) на артефакте и включим триггер непрерывного развертывания. Без этого нам нужно было бы вручную запустить релиз. Если у вас были определенные филиалы, которые не должны когда-либо сокращать релиз (например: GH-Pages ), то вы также можете добавить для них фильтр для них.

Сохраните, беги, бум! Выпуски, происходящие с NPM на Push to Мастер Анкет Просто помните, вам всегда придется обновить свой Package.json Чтобы иметь новый номер версии, иначе он не сможет опубликовать в NPM, поскольку вы не можете опубликовать существующий релиз.

Добавление значков

Последнее, что вы хотите сделать, это добавить значок в ваш Readme, чтобы показать потрясающую работу по трубопроводу. Мы можем сделать это из меню сборки -> в правом верхнем углу и выбрать «Значок статуса» и получить немного отметки, как это:

[![Build Status](https://dev.azure.com/aaronpowell/webpack-golang-wasm-async-loader/_apis/build/status/aaronpowell.webpack-golang-wasm-async-loader?branchName=master)](https://dev.azure.com/aaronpowell/webpack-golang-wasm-async-loader/_build/latest?definitionId=16&branchName=master)

И это похоже на это:

Настройка этикетки

Я только недавно обнаружил, что вы можете настроить текст int, который он маркирует для значка Azure Pipelines. Чтобы сделать это добавить строку запроса к изображению метка = <Что -то крутое> Анкет Это может даже поддерживать смайлики 😉!

[![Build Status](https://dev.azure.com/aaronpowell/webpack-golang-wasm-async-loader/_apis/build/status/aaronpowell.webpack-golang-wasm-async-loader?branchName=master&label=🚢 it)](https://dev.azure.com/aaronpowell/webpack-golang-wasm-async-loader/
_build/latest?definitionId=16&branchName=master)

Бонусный раунд, выпуск на GitHub

Выпуск в NPM — это хорошо и все такое, но что, если мы хотим также опубликовать релиз в GitHub, правильно пометить коммит и убедиться, что любой, кто просто хочет получить необработанные файлы, может их получить?

Ну, что мы также можем сделать с Azure DevOps!

Сначала нам нужно будет взять номер версии нашего релиза, чтобы мы могли соответствующим образом пометить его на GitHub. Я использую задачу BASH (так как я знаю, что использую агент Linux) и просто запускаю встроенный скрипт:

v=`node -p "const p = require('./package.json'); p.version;"`
echo "##vso[task.setvariable variable=packageVersion]$v"

Я запускаю небольшой встроенный скрипт node.js, чтобы получить номер версии из Package.json Файл, который мы прикрепили в качестве артефакта (поэтому я установил рабочий каталог на $ (система. DefaultWorkingDirectory)/aaronpowell.webpack-golang-wasm-async-loader/npm ), в качестве альтернативы, вы можете взять его из распакованного TGZ Файл (но я начал это до того, как понял, что мне придется это сделать 😛). Далее мы используем Эхо Чтобы создать переменную Azure DevOps с именем PackageVersion .

Затем мы будем использовать задачу выпуска GitHub (которая находится в предварительном просмотре во время написания), чтобы генерировать наш релиз.

Я выбираю, в какой учетной записи Github я опубликую, и репозиторий для выпуска (оба показывают, что будут доступны в раскрывающихся списках), мы будем использовать Создать Для действия (в конце концов, это новый релиз) Цель это $ (Сборка. Sourceversion) Поскольку это SHA Commit, запускаемое сборку была запускается, и что мы хотим пометить, используйте нашу переменную $ (PackageVersion) Как тег с источником тега Указанный пользователь тег а затем установите активы на артефакты, которые мы хотим опубликовать (я публикую TGZ и сгенерированный JavaScript). Я также решил добавить заметки о выпуске, которые я пишу в файл с именем ReleaseNotes.md в Git Repo и публикуйте как артефакт.

Теперь, когда мы создаем релиз, он не только переходит в NPM, но и идет на GitHub в качестве релиза, помечает коммит и связывает коммиты, включенные в релиз. Проверьте это Здесь Анкет

Вывод

И именно так мы можем выполнять автоматическую сборку и выпуск пакетов в NPM, а GitHub выпускает от Azure DevOps. Это действительно довольно просто!

Комментарий на 2FA для публикации

Мой коллега Тирни Кирен указал, что вышеперечисленное не будет работать, если вы используете 2FA на публикации В пределах NPM. Одним из возможных обходных путей было бы иметь ручной ворот в релизе, где вы должны ввести код OTP в качестве переменной, прежде чем запустить релиз и передавать его в качестве флага CLI на публикации. В противном случае у вас будет ошибка такой как этот в вашем выпуске.

Оригинал: «https://dev.to/azure/releasing-to-npm-from-azure-devops-3505»