Добро пожаловать в последнюю и заключительную часть моего урока! В предыдущем я показал вам, как выполнить модульное тестирование коннектора с помощью Jest framework, создать покрытие кода и проверить качество кода с помощью eslint. Теперь вы узнаете, как автоматизировать все это с помощью платформы CI. В этой статье я буду использовать CircleCI, однако эти шаги должны быть очень похожи для других инструментов, таких как Semaphore или Travis.
В этой статье мы сделаем следующее:
- Заставьте CircleCI запускать набор модульных тестов при каждой новой фиксации
- Автоматически запускать проверки eslint
- Сгенерируйте покрытие кода и отправьте его на codecov.io
- После успешной сборки вставьте новый код в Google Scripts.
Строительная часть
Часть сборки довольно проста. Единственная сложность для меня заключалась в отправке покрытия кода в CodeCov. Я все же опишу все шаги, так что поехали ...
Простая настройка сборки
Сначала давайте зарегистрируемся в CircleCI и добавим репозиторий как «проект» в инструмент CI. Теперь нам нужно добавить .circleci/config.yml
файл в наш репозиторий. Мы включим туда все необходимые шаги по сборке / развертыванию. Наш исходный файл будет отвечать только за запуск тестов. Вот как это выглядит:
Теперь, если я зафиксирую файл и отправлю основную ветку на GitHub, сборка начнется автоматически:
Eslint и покрытие кода
Теперь давайте воспользуемся тем фактом, что мы настроили eslint и что Jest может генерировать покрытие кода. Мы изменим шаги, чтобы проверить качество кода и запустить набор тестов с отчетом о покрытии кода. Я заменил команду yarn test
следующей:
- run: name: "Lint the code" command: yarn lint - run: name: "Run tests (with coverage)" command: yarn coverage
Теперь всякий раз, когда любое из правил eslint нарушается, сборка завершается ошибкой с соответствующим выводом:
Отправить покрытие в CodeCov
Это супер необязательно. Я решил, что хочу отобразить симпатичный значок с процентом покрытия кода в файле readme моего репозитория. Я выбрал бесплатный инструмент CodeCov для проектов с открытым исходным кодом. Их значок выглядит так:
Сначала я, конечно, зарегистрировал и настроил свой репозиторий в интерфейсе CodeCov. Затем, основываясь на этом документе, надеялись, что CircleCI каким-то образом автоматически отправит покрытие в CodeCov. На самом деле этого не произошло: D
Решение оказалось не таким уж сложным - оказалось, что есть пакет npm, который делает то, что мне нужно, поэтому мне нужно было только:
- Добавить
CODECOV_TOKEN
в мой проект CircleCI
2. Добавьте следующий шаг в .circleci/config.yml
файл.
- run: name: "Send coverage to CodeCov" command: yarn add --dev codecov && ./node_modules/.bin/codecov
Часть развертывания
Часть развертывания намного интереснее. Мне не удалось найти в Интернете никаких руководств по этому вопросу, так что, похоже, я новатор в этой области. Если вы знаете, как лучше настроить автоматическое развертывание коннектора GDS, дайте мне отзыв :)
Подготовьте сценарий развертывания
В моем решении для управления версиями скриптов используется пакет CLASP. Я уже описал идею версий и развертываний скрипта, а также то, как настроить CLASP в части 1 серии, так что если вы новичок в этих концепциях, сделайте перерыв. здесь, прочтите первую часть и вернитесь через несколько минут :)
Как вы, наверное, помните, тогда я уже настроил развертывание «Производство». Теперь мы напишем сценарий, который будет выполнять следующие действия:
- Отправьте код в скрипты Google
- Создать новую версию скрипта
- Измените развертывание «Производство» так, чтобы оно указывало на только что созданную версию.
Вот как выглядит придуманный мною сценарий bash:
Запускаем скрипт на CircleCI
Худшее уже сделано. Осталось только заставить CircleCI запускать скрипт развертывания при каждом нажатии на master.
Сначала давайте добавим новый скрипт в наш package.json
файл: "deploy-production": "./deploy.sh 'Production'"
.
Затем нам нужно разрешить заданию CircleCI изменять наш скрипт Google. Если вы еще не сделали этого, запустите clasp login
в src
папке и войдите, используя свои учетные данные Google. Clasp создаст .clasprc.json
файл, содержащий токены доступа к службам Google в вашем домашнем каталоге.
Я не нашел лучшего способа выполнить аутентификацию Google на стороне CI, чем просто скопировать содержимое вашего локального файла в приложение CI. В случае CircleCI нам нужно будет добавить новую переменную среды в наш проект CircleCI и назвать ее CLASPRC
. Значение переменной должно быть просто содержимым вашего локального clasprc.json
файла.
Последнее, что нужно сделать, это добавить этап развертывания в наш .circleci/config.yml
файл, чтобы:
- Записывает содержимое
CLASPRC
переменной в~/.clasprc.json
файл. - Он запускает
deploy.sh
скрипт, который мы написали ранее. - Шаг
deploy
выполняется только после успешногоmaster
построения ветки.
Наш окончательный файл конфигурации выглядит так:
Проверьте результаты!
Хорошо, это тот момент, которого мы ждали - давайте сделаем что-нибудь, чтобы освоить, отправим это на GitHub и позвольте CircleCI творить чудеса!
Работа успешно завершена. Теперь, если мы проверим результат в интерфейсе Google Scripts, мы действительно увидим, что была создана новая версия:
И точки развертывания «Производство» во вновь созданной версии:
Резюме
Вот и все! В этой части наш коннектор стал еще более зрелым. Теперь здесь не будет места случайным ошибкам - каждая новая строка кода будет тщательно проверена инструментом CI и мгновенно появится для пользователей благодаря написанному нами сценарию развертывания.
Вы можете сказать, что выполнение всего того, что я делал в частях 3 и 4, является излишним для такого небольшого приложения и ... возможно, вы правы. Однако, когда ваш коннектор станет более продвинутым, вы быстро заметите, что ручная отладка и развертывание занимают много времени. Я почти уверен, что после недели такой «ручной» разработки вы потратите столько же времени на отладку, сколько я потратил на написание модульных тестов и настройку CI :)
Надеюсь, вы многому научились из этой серии публикаций и что это поможет вам разрабатывать отличные продукты.
Как всегда, вы можете проверить полный код этой части в моем репозитории на GitHub или протестировать коннектор по этой ссылке.
Если вам понравился сериал, не сомневайтесь 👏!