Всем привет!

В этой статье я хочу рассказать, как я сделал удобный автодеплой нашего ui-kit на npm с помощью pipeline’s gitlab.

Что хотелось сделать?

• Автоматическое обновление версии пакета при пуше изменений.

• Автоматический деплой новой версии на npm.

Автоматическое обновление версии пакета при пуше изменений

Начнем с создания файла, который будет обновлять версию нашего пакета. Тут все просто:

1. Возьмем нашу прошлую версию из package.json

2. Добавим к ней 1

3. Положим обратно

Я использовал версии до 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 своего аккаунта

1. Переходим по ссылке.

2. Создаем токен с правами на чтение и запись, не забываем сохранить сам токен, потом его нельзя будет посмотреть.

Где получить Access Token конкретного репозитория

1. Заходим в наш репозиторий.

2. Выбираем раздел 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

Наслаждаемся пайплайном, который все делает за нас! 🙂