Быстрый и качественно собранный продукт – главное конкурентное преимущество для любой компании, занимающейся софт- и веб-разработкой. Это получается осуществить при помощи слаженной работы всей команды, а значит, и отлаженной системы внесения правок в код. Как сделать это четко, корректно и быстро? В этой статье мы хотим поделиться опытом решения этой и других важных задач при работе над цифровыми продуктами на примере кейса для нашего клиента, крупного российского брокера.
Для чего на проекте нужна концепция CI/CD
Непрерывная интеграция (Continuous Integration или CI) – процесс, который сводит работу разных разработчиков в общую ветку автоматизированного кода. Это позволяет выявить дефекты кода на ранних этапах работы над проектом и своевременно решать проблемы несовместимости кода разных разработчиков.
Если код прошел проверку CI, он попадает в общую ветку и начинается процесс сначала непрерывной поставки кода, а затем его непрерывного развертывания (Continuous delivery или CD). По итогу получаем автоматизацию процесса доставки кода на целевой сервер.
Какие задачи перед нами стояли
Нам нужно было внедрить систему версионирования компонентов к новому UI-Kit и настроить публикацию UI-Kit пакетов через GitLab CI/CD. Ниже расскажем, как мы это реализовали.
Для сборки UI-Kit пакетов мы использовали NodeJS, yarn, webpack, сами пакеты UI-Kit работают на React + TypeScript. Для автоматизации управления версиями пакетов решили использовать библиотеку Lerna и столкнулись с проблемой правильности ее сборки. На этом этапе нам очень пригодился webpack плагин.
Зачем мы написали свой webpack-plugin
Чтобы наша библиотека Lerna работала так, как надо и импорт стилей компонента происходил автоматически, мы написали свой webpack-loader, а потом превратили его в webpack-plugin. На первоначальном этапе работ, честно говоря, было страшно лезть в такие “дебри”, но, как показала локальная настройка и пробная публикация пакетов, это того стоило.
Что было потом
Оказалось, что перед нами появилась новая проблема – как научить CI/CD делать то же самое на своей стороне. Решение этой проблемы заняло примерно неделю, большую часть которой съела борьба с настройкой аутентификации сервера для публикации пакетов. И вот, заветная мечта была исполнена – каждый пакет UI-kit`а можно публиковать независимо от других, а в случае зависимости пакетов от других, библиотека Lerna автоматически обновляет и зависимые пакеты, и changelog измененного компонента с текстом коммита.
В качестве итогов
Настройка публикаций UI-Kit пакетов через GitLab CI/CD интересна и с точки зрения механики действий, и с точки зрения расширения собственных знаний, и с точки зрения используемых технологий. В своей статье мы поделились личным опытом работы над такой задачей, и надеемся, что наша статья будет полезной для всех разработчиков. Будем рады пообщаться с вами в комментариях!