Всем привет!
В этой статье я хочу рассказать, как я сделал удобный автодеплой нашего ui-kit на npm с помощью pipeline’s gitlab.
Что хотелось сделать?
-
Автоматическое обновление версии пакета при пуше изменений.
-
Автоматический деплой новой версии на npm.
Автоматическое обновление версии пакета при пуше изменений
Начнем с создания файла, который будет обновлять версию нашего пакета. Тут все просто:
-
Возьмем нашу прошлую версию из package.json
-
Добавим к ней 1
-
Положим обратно
Я использовал версии до 100 на каждом уровне, т.е от 0.0.1 до 99.99.99.
bumpVersion.js
import fs from 'fs'; // Берем наш package.json file const packageFile = JSON.parse(fs.readFileSync('./package.json', 'utf8')); // Берем оттуда его версию const version = packageFile.version; // разбиваем на уровни const [l3, l2, l1] = version.split('.').map(v => Number(v)); // Далее смотрим сколько уже было версий, считаем из расчета const oldVersion = l1 + l2 * 100 + l3 * 100 * 100; // Инкрементим версию const newVersion = oldVersion + 1; // Записываем новую версию const [newL3, newL2, newL1] = [Math.floor(newVersion / (100 * 100)), Math.floor(newVersion % (100 * 100) / 100), newVersion % 100]; packageFile.version = `${newL3}.${newL2}.${newL1}`; // Кладем файл обратно fs.writeFileSync('./package.json', JSON.stringify(packageFile));
Далее нам нужно вызвать этот скрипт перед деплоем и запушить изменения. Для этого нам нужно написать конфигурацию для ci/cd.
Но для начала нам нужно разобраться с тем, как мы будем пушить изменения из пайплайна. Для этого нам понадобятся креды gitlab, чтобы gitlab мог идентифицировать нас как своих)
Я решил действовать через Access Tokens gitlab. Здесь у нас два варианта либо использовать Access Tokens своего аккаунта, либо использовать Access Token конкретного репозитория.
Где получить Access Token своего аккаунта
-
Создаем токен с правами на чтение и запись, не забываем сохранить сам токен, потом его нельзя будет посмотреть.
Где получить Access Token конкретного репозитория
-
Заходим в наш репозиторий.
-
Выбираем раздел Settings -> Access Tokens, создаем токен с правами на чтение и запись, также не забываем его сохранить, так как потом его нельзя будет посмотреть.
Далее переходим к написанию самой джобы для ci/cd.
.gitlab-ci.yml
stages: - deploy deploy: stage: deploy image: node:16.17.0 before_script: - git remote remove origin # Создаем авторизованный remote - git remote add origin https://<Access Token Name>:<Access Token Token>@gitlab.com/<Your Repository Name>.git script: # Прокидываем name + email, чтобы gitlab не сыпал ошибки - git config --global user.name "YourName" - git config --global user.email "YourEmail" # Вызываем наш скрипт, который инкрементирует версию - node bumpVersion.js # Добавляем и пушим наши изменения в ветку откуда стригерился pipeline - git add ./package.json - git commit -m "bump package.json version" # Используем опцию gitlab -o ci.skip, для того, чтобы наш коммит не тригерил новый pipeline - git push origin HEAD:$CI_COMMIT_REF_NAME -o ci.skip rules: - when: manual allow_failure: false
Версия пакета обновляется, можем перейти к следующему этапу.
Автоматический деплой новой версии на npm
Начнем с того, что получим токен на https://www.npmjs.com/.
-
Заходим на https://www.npmjs.com/
-
Тыкаем на свой профиль в правом верхнем углу и выбираем Access Tokens
-
Далее Generate New Token -> Classic Token и там создаем publish токен, также не забываем его сохранить, так как его потом нельзя будет посмотреть
Дописываем нашу ci/cd джобу.
.gitlab-cy.yml
stages: - deploy deploy: stage: deploy image: node:16.17.0 before_script: - git remote remove origin # Создаем авторизованный remote - git remote add origin https://<GitLab Access Token Name>:<GitLab Access Token Token>@gitlab.com/<Your Repository Name>.git # Подставляем наш полученный npm token - npm config set //registry.npmjs.org/:_authToken <NPM Access Token> script: # Прокидываем name + email, чтобы gitlab не сыпал ошибки - git config --global user.name "YourName" - git config --global user.email "YourEmail" # Вызываем наш скрипт, который инкрементирует версию - node bumpVersion.js # Добавляем и пушим наши изменения в ветку откуда стригерился pipeline - git add ./package.json - git commit -m "bump package.json version" # Используем опцию gitlab -o ci.skip, для того, чтобы наш коммит не тригерил новый pipeline - git push origin HEAD:$CI_COMMIT_REF_NAME -o ci.skip # Публикуем наш пакет - npm publish rules: - when: manual allow_failure: false
Финальный штрих
Добавим стадию build в нашу ci/cd конфигурацию, чтобы получить полный цикл.
.gitlab-ci.yml
stages: - deploy - build build: stage: build image: node:16.17.0 script: - npm install - npm run build artifacts: paths: - ./dist/** allow_failure: false deploy: stage: deploy image: node:16.17.0 before_script: - git remote remove origin - git remote add origin https://<GitLab Access Token Name>:<GitLab Access Token Token>@gitlab.com/<Your Repository Name>.git - npm config set //registry.npmjs.org/:_authToken <NPM Access Token> script: - git config --global user.name "Your Name" - git config --global user.email "Your Email" - node bumpVersion.js - git add ./package.json - git commit -m "bump package.json version" - git push origin HEAD:$CI_COMMIT_REF_NAME -o ci.skip - npm publish rules: - when: manual allow_failure: false

Наслаждаемся пайплайном, который все делает за нас! 🙂
ссылка на оригинал статьи https://habr.com/ru/articles/739000/
Добавить комментарий