Использование действий Github для создания и публикации пакетов npm

Ручные и, скажем прямо, зачастую довольно утомительные задачи можно легко автоматизировать с помощью современных инструментов, таких как Github Actions. В сочетании с частным реестром мы можем облегчить сотрудничество и повысить качество, лучше отслеживая конвейер поставки кода.

Полное раскрытие информации: я являюсь одним из основателей продукта Bytesafe (https://bytesafe.dev/), который предлагает бесплатные, безопасные и высокодоступные частные реестры NPM.

Ниже я шаг за шагом опишу простой рабочий процесс для создания и публикации пакетов Javascript npm. Мы будем использовать частный реестр, который можно использовать как песочницу перед выпуском кода в мир. Таким образом, вы сможете найти потенциальные ошибки раньше, чем это сделают ваши конечные пользователи. Мы будем использовать действия Github для автоматизации сборки.

Что грузить, ну… Пакет конечно же!

Так что у вас, вероятно, будет что-то более интересное для вашего рабочего процесса, но для этого поста мы создадим новый пустой пакет с именем «@ niclas-test / test» с указанным ниже package.json, который описывает этот пакет.

Шаг 1. Определите пакет

Мы настроим package.json, указав некоторую основную информацию, имя пакета, местоположение git и т. Д.

Добавим в этот пакет кое-что интересное:

index.js

Отлично, наш пакет готов, давайте перейдем к Github и определим наш рабочий процесс Github Actions, что ж, мы останемся в нашей локальной среде, поскольку мы определяем рабочий процесс с помощью кода.

Шаг 2. Определите процесс сборки для Github Actions Workflow.

Действия Github находятся в специальном каталоге github / workflows.

Несколько моментов, на которые следует обратить внимание в приведенном выше фрагменте

  1. Триггер, то есть то, что будет инициировать сборку и развертывание пакета, «on: push: branch: master» сообщает Github, что нужно строить все коммиты для мастеринга, но, возможно, вы создаете функциональные ветки как ну просто измените в соответствии с вашими потребностями.
  2. конечная точка реестра, т.е. куда мы отправляем артефакты.
  3. учетные данные, необходимые для аутентификации в реестре,

Шаг 3. Настройте частный реестр

Для этого поста мы опубликуем наш пакет в частном реестре Bytesafe. Вы можете бесплатно зарегистрироваться и использовать, зайти и настроить свой личный реестр прямо сейчас, это займет меньше минуты. Я подожду здесь.

(Конечно, есть и другие варианты, и рабочий процесс должен быть аналогичным)

Сделанный? Здорово!

В сценарии рабочего процесса Github мы ссылаемся на секрет, используемый npm для аутентификации в частном реестре:

NODE_AUTH_TOKEN: ${{secrets.npm_token}}

Вы настраиваете этот секрет в репозитории Github. Именно этот токен доступа позволит вам загружать / публиковать ваши пакеты в реестр.

Настроить дополнительные реестры Bytesafe в той же учетной записи тривиально, но мы согласимся на «по умолчанию», который предоставляется при создании учетной записи.

Учетные данные для этого реестра показаны на https://bytesafe.dev на странице сведений о реестре:

Чтобы получить необходимый токен, мы запускаем стандартную команду NPM со следующими параметрами для входа в систему:

$ npm --registry https://<account>.bytesafe.dev/r/<registry> login
Username: bytesafe
Password: ****** 
Email: (this IS public) user@yourdoma.in
Logged in as bytesafe on https://<account>.bytesafe.dev/r/<registry>

Шаг 4. Получите токен API для использования в конвейере автоматической сборки.

После успешного входа в систему вы получите токен с помощью следующей команды:

$ npm --registry https://<account>.bytesafe.dev/r/<registry> token create
npm password: 
┌────────────────┬────────────────────────────┐
│ token          │ 01E54TK8T🤐🤐🤐🤐🤐🤐B0TQ│
├────────────────┼────────────────────────────┤
│ readonly       │ false                      │
├────────────────┼────────────────────────────┤
│ cidr_whitelist │ null                       │
├────────────────┼────────────────────────────┤
│ created        │ 2020-04-05T09:26:26Z       │
└────────────────┴────────────────────────────┘

Шаг 5. Добавьте токен в Github Actions

Затем добавьте токен в репозиторий Github, нажмите Настройки - ›Секреты -› «Добавить новый секрет» и назовите его « npm_token », введите данные из строки токенов выше.

Шаг 6… Готово.

Давай и сделай:

$ git push

Перейдите на GitHub и на вкладку действий в вашем репозитории и посмотрите, как идет сборка, есть вероятность, что вы опаздываете, сборка обычно довольно быстрая:

И для проверки: вернитесь в веб-консоль Bytesafe и убедитесь, что пакет был отправлен:

Вот и все: (очень) базовый конвейер, который будет строить ваш код после коммитов для освоения и развертывания пакетов в вашем частном реестре npm, готового к использованию вашими приложениями и приложениями вашей команды.