Автотесты и деплой на GitHub Actions: npm-скрипты, EditorConfig и настройка ssh-ключа
Вставка
- Опубліковано 15 сер 2024
- 00:00 Интро
01:43 Обзор проекта
05:00 Сборка и деплой
09:16 Создание репозитория
10:50 Гитхаб-экшены
11:59 Экшен для теста
14:32 EditorConfig
15:31 Запуск тестов
16:56 Экшен для деплоя
18:46 Добавление ключа
21:51 Запуск деплоя
23:35 Выводы
24:55 Аутро
Нравится? Становитесь патронами - / pepelsbey
Код - github.com/pep...
Демо - pepelsbey.dev/
GitHub Actions - github.com/fea...
EditorConfig - editorconfig.org/
Экшены «Веб-стандартов» - github.com/web...
* * *
Камера: Blackmagic Pocket Cinema 4K
Объектив: Panasonic 12-35 мм, f/2,8
Микрофон: Audio-Technica BP40 + Blue Compass
Свет: Aputure Light Storm 120d II + Light Dome
Софт: DaVinci Resolve, iZotope RX
![Дон ДОН, Алаудинов и СБЕЖАВШИЕ из под Курска ахматовцы 😁 [Пародия]](http://i.ytimg.com/vi/dEfCf5IK26Q/mqdefault.jpg)
00:00 Интро
01:43 Обзор проекта
05:00 Сборка и деплой
09:16 Создание репозитория
10:50 Гитхаб-экшены
11:59 Экшен для теста
14:32 EditorConfig
15:31 Запуск тестов
16:56 Экшен для деплоя
18:46 Добавление ключа
21:51 Запуск деплоя
23:35 Выводы
24:55 Аутро
Мне постоянно выдаёт ошибку на стадии rsync. Вы не могли бы помочь, всё перекопал, но решения так и не нашёл
в восторге от того что ты делаешь, крутой контент, потрясающая харизма, не покидай нас больше пожалуйста!!!
О боже, эта подача, это качество, этот контент! Просто и глазам, и ушам счастье :)
Как всегда, Вадим берёт и не отпускает до "титров" :)
Я даже на 1х смотрю, чтоб кайфануть подольше =)
Подачи качественнее в ру сегменте не встречал) Палец вверх!
Вадим, ти крутий! Дуже все зрозуміло і грамотно говориш та показуєш. Дякую за всі твої відео!
Большое спасибо. Можно разобрать больше возможностей гитхаба)
Шикарная подача контента, самое главное, в такой простой манере в такой непростой области айти, как девопс. Спасибо Вадим за мастер класс )))
Отлично все обьяснил и рассказал, спасибо очень круто, попробую в своём пет проекте
Восторг!!! Огромное спасибо, за такой годный контент. Все заработало и на моем репозитории. Я просто счастлив!)))
такое бы понятое да еще с gitlab, вообще красота будет, везде гитлаб. Спасибо за контент!
Спасибо! До этого не встречал столь адекватного видео по этой теме
Господи, полгода было интересно ci/cd заняться, но было стремновато. А тут такая годнота подъехала, часок и готово, СПАСИБО!)
Всем фронтендерам в своих командах, чтобы перестали бояться сами работать с сервером и не ждали сложа руки помощи.
Крутейшие ролики в российском интернет-пространстве! Всё по делу, без воды, без соплей! Очень круто!
Настроил у себя, все работает, красота! 🧐
Вадим, ты лучший!
Очень круто! Спасибо большое! Сразу же пошла пробовать и тестировать. Получилось автоматизировать на своих проектах - тесты, билд и деплой на firebase hosting :) Для меня, как для фронтенда - это невероятная магия :)
в гитлабе это было уже много лет назад :) Наконец-то после покупки гитхаба микрософтом что-то начало шевелиться
Вадим, всё просто и офигенно, спасибо большое, буду пользоваться этими штуками!
Хммм, надо пересмотреть видео и попробовать что-то такое сообразить, ну или сломать как обычно. 😂
Спасибо Вадим.
самый внятный оратор который разжевывает валенкам типа меня... лайкос однозначный только по nginx-у не очень зашло так как у меня на VDS джанга вертится и не очень подошло
Жирный лайк за очень полезный видос!
Офигенная тема! Спасибо большое)
Вообще отличное видео. Спасибо!
Стоит добавить, что npm ci на пайплайне будет работать только в том случае, если репозиторий содержит package-lock.json. В противном случае будет сваливаться в EUSAGE ошибку.
Огромное тебе спасибо!!! То, что ты делаешь это бесценно.
npm ci берет зависимости из package-lock.json, а при npm i просто устанавливает из package.json, при этом может обновиться файл package-lock.json
Это невероятно полезная информация
Спасибо за видео, максимально полезная информация для разворачивания кода без старых выгрузок по FTP. Кстати, важно убедиться чтобы на VPS сервере rsync также был установлен.
Отлично все рассказал, что для чего и без "воды"! Лайк и подписка)
Спасибо за классный контент! 😍
Спасибо, Вадим, за отличный туториал! Собрал по нему авто-деплой Django-проекта. Единственное, чего тут не хватает, так это добавить в команду про rsync: --filter=":- .gitignore". А то он сразу же поудалял у меня всю статику и медиа-файлы...
Отличное видео. Очень полезно. Большое спасибо )
Интересно!
Очень полезно 👍 Большое спасибо!
спасибо большое! помогло
Очень доходчиво, спасибо
Спасибо!
Очень полезно, спасибо!
тема интересная и ведущий занятный, футболка что надо, каждый раз с новыми надписями ))
Стараюсь разнообразить картинку :) Но футболки уже начали повторяться, к сожалению
Как раз на очередь в изучении стал вопрос о деплое, и ты тут как тут)
Спасибо 🙃
Подписывайтесь, будет больше )
@@pepelsbey сколько минимально на патреоне?)
Я сейчас про подписку на канал говорил :) А на Патреоне кажется минимально 1 $
@@pepelsbey на канал то я подписан), а на патреоне видел 99$, и пока это сочно для меня в месяц)
Не, 99 $ - это сколько всего собирают люди :)
19:44 Теперь в буфере обмена лежит ПРИВАТНЫЙ ключ ;)
Да, оговорился. Но, к счастью, скопировал всё-таки нужный :) Не верьте ушам, верьте глазам!
Лучше создать отдельный ключ для деплоя, ты же можешь на разные сервера под своим ключом ходить, а значит в случае компроментации ключа придется везде его перепрописывать
Вы правы: на тех же «Веб-стандартах» заведён отдельный пользователь для деплоя и используются его ключи. Но тут проще было показать свой.
Отличный контент. Спасибо.
Вадим, спасибо за ваш труд.
прям то что надо было! круто.
Я столько времени потратил на освоение этого всего и так гордился этими навыками, а начинающим разработчикам теперь все достанется за 5 минут, потраченных на видео. Обидно однако(
Шучу, конечно же:)
Спасибо за видос!
С удовольствием посмотрел и сверил со своими знаниями.
По видео может сложиться впечатление, что я всю жизнь это знал. Но я, как и вы, столько времени потратил весной, чтобы разобраться. А теперь вот рассказываю всего за пять минут!
@@pepelsbey очень информативно получилось 👍
npm ci использоует для установки package-lock.json. это нужно чтобы сервер использовал контролируемые зависимости, а не собирал из последних версий
Фактически да, но главное тут, как я сказал, что ставится быстрее :)
Офигеть! Это похоже на магию 😅
Спасибо отличное видео
Отличный материал! Жаль нераскрытой осталась тема как деплоить только в случае, когда экшен тестирования был успешно завершен.
В доке тоже не нашел описания как описать зависимость между workflows. Надеюсь добавят в будущем.
Ничего не понял, но очень круто!
GitHub Actions - это лучшее что случилось в мире CI/CD за последнее время. Сыро еще, но очень много возможностей появилось. Можно еще прокачать доставку делая репорты с помощью Deployments API. Это позволит получать сообщения о доставке в Пулл Реквестах, ну или в целом получить новую вкладку с доставками в репозитории.
Мы тут Action наопенсорсили для этого github.com/marketplace/actions/deploy-status
Как по мне, то гитлабовский CI/CD тоже довольно удобно сделан
Вот бы про ci/CD для докера послушать
Это вряд ли, я не настоящий девопс
Жаль не было этого видео 4 года назад, когда все это дело настраивал по документации
Как кстати!
npm ci игнорирует package.json пакета и устанавливает модули руководствуясь локфайлом (package-lock.json). Это позволяет создавать воспроизводимые сборки: вы получаете именно то, что ожидаете при каждой установке.
То чувство, когда «посмотрел» видео еще до того, как его смонтировали... благодаря оповещениям в ленте GitHub, о том, что некий юзер pepelsbey начал пушить в репозиторий pepelsbey.dev коммиты со странными названиями (типа «ломает лого»)... 😅 Зашел в Actions репозитория, посмотрел исходники и ага, вот про что будет видео.
В целом, отличный выпуск! Как всегда - огромное СПАСИБО, Вадим 👍
Ну что, следующая остановка Docker? Или может быть даже Ansible? И можно будет смело закрывать тему «деплой для самых маленьких» - всё остальное уже бантики и вкусовщина... 😉
Я, пожалуй, буду теперь делать такие вещи в приватных репозиториях, чтобы не привлекать лишнего внимания. Деплоя сложнее, чем было в этом видео, не будет - я рассказал то, в чём уверен, дальше - просто не моя область.
@@pepelsbey вот за что люблю и уважаю тебя, Вадим, так за то, что на канале (и в других соцсетях) не бывает «мусорного» контента на темы, в которых ты не разобрался и/или не уверенно себя ощущаешь! Спасибо огромное, еще раз, ты делаешь контентную часть Рунета (да, и нас всех, что уж тут) чуточку лучше 🥰
Подскажите пожалуйста, как сконфигурировать репозиторий, чтобы пи создании Release в архив попадали не все файлы репозитория, а чтобы можно было исключить парочку файлов репы и в архив попадали только остальные?
Спасибо.
К сожалению, мне не доводилось работать с релизами, но думаю можно запускать экшен, который будет формировать нужное по событию.
Vercel полностью убирает прослойку между ubuntu и настроек Github. Если это не бекенд конечно ;) а только фронтэнд как в примере.
Вадим, спасибо за видео. У Вас отлично поставлена речь. Излагаете кратко и ясно.
Подскажите, пожалуйста как сделать вывод возможных продолжений команд в терминале как это происходит на 19:15?
Этот вывод кажется встроен в bash и вызывается нажатием Tab на неполном имени.
Спасибо огромное, очень полезное видео лично для меня, так как из этого я почти ничего не знал ). Я так понял, что с помощью action можно запретить пушить в мастер и в публичном репозитории и делать только через pull_request, верно?
Это можно сделать в настройках репозитория - запретить пушить в мастер.
@@pepelsbeyСпасибо за ответ. Все оказалось гараздо проще ) Я еще совсем зеленый в данной теме )
И как это мы должны всё бросить и узнавать про эдитор.конфиг, если ты нам про него не рассказывал?! Вадим!))
Теперь у вас нет оправданий!
Гитхаб экшны рулят! :) Долой всякие сервисы ci! Даешь комбайн на github! :) Я тоже тащуся от Экшенов на ГитХабе 😂😎👌🥳
Вадим, когда запишите полноценный практический курс по вёрстке?)
Пожалуй, никогда :) Это очень большая работа, которую я уже так или иначе делаю в HTML Academy и этой мой фултайм.
Расскажи, как деплоить через docker-compose
Я не очень разбираюсь в Docker, но знаю где почитать. Может вам поможет:
web-standards.ru/articles/docker-unboxing-1/
doka.guide/tools/docker-compose/
Класно все) но жизнь сурова когда работаешь в команде где не используют git)) а про докер есть что ?)
Соболезную. И почитайте документацию, там есть подробности про образы, докер и прочее.
Видео хорошее и полезное, но есть один нюанс: если тест падает - деплой пройдет.
Я решил эту проблему тем, что объединил джобы в один файл и описал зависимость деплоя от успеха тестов через ключ needs, но это имеет другую проблему - тогда приходится убрать вотчинг пулл реквестов ибо деплой на пулл реквест - не нужно, тут или как-то условие сделать на тип события, или делать отдельную джобу конкретно на пулл реквест.
Хотелось бы чтобы Вы это прояснили, мой английский не позволяет мне свободно читать документацию по ГитХаб екшенам :(
Для меня это никогда не было проблемой: коммиты попадают в мастер из пулреквеста, где запускается тест и он не мёржится, пока не начнут проходить тесты. Это самое правильное решение, на мой взгляд. Мне пока не доводилось собирать более сложные цепочки из экшенов, для моих задач хватало простых. Но если доберусь, обязательно расскажу об этом.
Здравствуйте. Шикарный контент, большое спасибо! А сборка и деплой в GCP будет принципиально отличаться от описанного в видео? Мне, в частности, требуется собрать java-проект и командами gcloud сначала закинуть исполняемый файл в Гугл, затем рестартануть группу виртуалок в GCP.
Не работал с GCP, так что не помогу вам здесь
Спасибо за видео! Такой вопрос, а нельзя в deploy.yml писать команду npm run deploy -e ... и дальше уже путь к ключу? Чтобы если что не править в двух местах
Вообще в npm-скрипты можно прокинуть параметры во время запуска через npm run с помощью -- (двух дефисов), так что попробуйте. Вопрос в том, получит ли такие параметры rsync, но кажется, что шанс есть.
Привет. Спасибо за множество полезной информации. Есть вопрос по медиафайлам. Если деплоиться таким образом, то все картинки и видео находящиеся в папке проекта, точно также перезаписываются, как и сам код. Если размер медиа 20мб и больше, то это большие затраты времени. Как лучше всего хранить медиафайлы?
Если в репозитории хранится контент, то лучше такого избегать и делать более сложный деплой. Например, хранить тяжёлое на CDN.
Вадим, хоть это не совсем ваш профиль - DevOps, но ради сравнения, запишите пожалуйста про Jenkins.
Вы правы, это совсем не мой профиль. Так что вряд ли :)
По Jenkins есть неплохие уроки от Кирилла Семаева.
В общем и целом, там примерно всё так же, как и с Github Actions. Только pipeline приходится писать на языке Groovy, а не YAML, что не очень хорошо сказывается на читабельности, но не критично. Впрочем, есть плагин, Jenkins YAML Pipeline, что решает эту загвоздку. Во всяком случае, на моей практике проблем не возникало, а если и есть, можно пойти на Github к автору плагина, посотрудничать. )
В ухе дебиан)
А на сервере Убунта, непорядок
Спасибо за познавательное видео!
Вот только тема с тестами не совсем раскрыта, если экшен тестов прошёл не успешно, деплой все равно пройдёт?
Я показал саму механику организации такой сборки на Гитхабе. Как её комбинировать и усложнять - это другой вопрос. Лучше конечно идти через пулреквесты, в которых непрошедший тест будет блокировать мёрж и показывать, что такому коду не дело в мастере. Но можно и объединить деплой с тестом в одном экшене, чтобы тесты падали и деплой не проходил. Это уже другой уровень сложности, я туда пока решил не ходить.
@@pepelsbey бывает и такое, что тесты в pull request проходят, а вот после merge в master (если это не fast-forward merge), уже что-то ломается. Так что лучше всегда тестировать именно ту версию, что будет deployed.
Вадим, привет! А скажи пожалуйста, а как ты решаешь проблему инвалидации кешей? Я задеплоил сайт, по аналогии с тем, как ты делаешь в этом видео (см. твой package.json), и каждый раз, когда я что-то меняю в стилях, после редеплоя, браузер всё ещё отдаёт старую версию статики. Я, конечно, закостылил сейчас это в виде версии,
Я раньше возился с кэшбастингом: переименовывал файлы в хэш-сумму, делал автозамену - для всего есть плагины для сборщиков: Gulp, Webpack, Rollup, Vite. Но в какой-то момент попробовал сделать проще и не заметил разницы. Кажется, что дело в правильной настройке сервера, чтобы отдавались правильные заголовки.
Спасибо большое! Если у меня просто статичный сайт на nginx, то просто в настройках nginx это делается?@@pepelsbey
Да, нужно поискать руководство как в конфиге nginx выставить правильные заголовки
Отлично! Спасибо, я сделал. Это очень просто:
server {
...
etag on;
if_modified_since before;
...
}@@pepelsbey
Интересно, а я через вебхуки деплою, не пойму чем лучше экшены... Только тем, что собираются на самом гитхабе? У меня по вебхуку сам сервер вытягивает свежий master и тесты и билды просто запускаются на продакшн-сервере (на уже установленном node и npm) и не надо никаких ключей
Лучше тем, что прозрачнее и хранятся вместе с кодом. То есть у вас и npm-скрипты, и экшены живут вместе и понятно что и как происходит. Плюс интерфейс запуска отлично показывает, что пошло не так. Ну и не только деплой ведь - автотесты кода, вы про это не забывайте :)
@@pepelsbey но тесты я всё равно на продакшне запускаю и у вас ключ с кодом не хранится и всё равно надо настраивать, но я вас понял, да, тоже как вариант, удобно.
Сори может туплю. Но зачем сохранять ссш в файл с окружения, а потом из файла в rsync? Нельзя сразу с окружения передать?
Я несколько раз перечитал вопрос и всё равно не понял. Разверните, если не сложно :)
@@pepelsbey 18:45 нельзя на 28 строке вместо "ssh -i $HOMe/.ssh/key -o ...." написать "ssh ${{secret.ssh}}" как на 22 строке? примерно так.
Вы, пожалуй, правы. Я соединял рецепты вместе и не додумался до оптимизации.
@@pepelsbey видео очень хорошее. Буду себе делать actions и попробую.
Вадим спасибо за потрясающую идею, только застопорился на том что npm run build в экшене скрипт вылоняется полностью без ошибок, а результа ноль(ничего не собрано), экшен на всех пунктах ставит зеленую галочку. Есть ли предположения?
Если вы хотите, чтобы результат сборки оказался в репозитории, вам это нужно сделать самим. Сборка запускается на свежем экземпляре сервера, а потом гасится и пропадает, если вы ничего не сделаете с результатом.
@@pepelsbey Теперь все стало ясно. Спасибо!
Интересное видео. На ~19:45 возникает путаница: какой ключ в буфер попал - публичный/приватный.
Да, оговорочка вышла. К счастью, скопировал правильно :)
есть ли возможность отклонить деплой если тесты не прошли?
Да, этот способ называется «пулреквест» :) Вы можете усложнить и склеить тестирование и деплой в один экшен, но лично я иду через пулреквесты, так прозрачнее и надёжнее.
@@pepelsbey ахах :) ето слишком просто. Спасибо за ответ
Ура, я уже достал попкорн!!!!!!!!!!!!! Приятного мне просмотра. ))))))
Можно спросить Ваше мнение по поводу gitLab?
Не было повода там поработать, но многим очень нравится их система как раз за богатые возможности CI/CD.
@@pepelsbey Спасибо!!! И респект за ответ!
Ввёл на предыдущем месте работы хранение проектов на GitLab Standalone CE.
Встроенный CD/CD конкретно помог относительно быстро внедрить практики DevOps и ускорить процесс разработки и доставки собранных пакетов (деплой ручной по отмашке) + настроил простые пинки Телеграм-бота для уведомлений о статусе и готовности этих сборок.
Но временами приходилось много курить документацию, т.к. какие-то вещи приходилось делать не совсем прямым путём. Как минимум, из-за использования бесплатной версии, при наличии нужных возможностей в платном Enterprise. Как максимум, из-за технических ограничений в разработке GitLab.
А всё это можно провернуть с приватным репозиторием на бесплатном github аккаунте?
И есть ли ограничения у action-ов? На bitbucket подобное пробовал - было ограничение на сколько-то минут на выполнение тасков в месяц, если не ошибаюсь.
В бесплатных аккаунтах теперь можно делать приватные репозитории и там всё так же хорошо работает.
В дополнение - в гитхабе тоже есть ограничения, в зависимости от вашего тарифа.
Более точно можете узнать в секции pricing на гитхабе.
Точно не могу сказать, там что-то вроде 1500 минут в месяц на бесплатном аккаунте.
@@eahaeybsdbsyhs Опа, спасибо за уточнение!
Мне кажется, пора использовать yarn :)
Зачем?
Добрый день. Решил поиграться с исходниками проекта и при выполнении команды "npm start" вместо проекта получаю "Error. Cannot GET /". В чем может быть ошибка? Заранее благодарен. P. S. Использую исходники из ролика.
Сложно сказать, что это может быть без подробностей. Я захожу в папку репозитория playground/28, делаю npm install, npm start и у меня всё работает :(
Такая же проблема. Если у вас windows, удалите одинарные кавычки вокруг имен директорий.
"start": "browser-sync start --server src --no-notify --no-ui --cwd src --files index.html,styles/**/*",
Спасибо! Убрал кавычки в скрипте, запушил в репозиторий.
@@nataliasemenova548 Спасибо. Все заработало. Но у меня еще вопрос: какими плагинами для npm лучше пользоваться для добавления в данную сборку возможностей работы со скриптами и изображениями (шрифтами). Заранее благодарен.
При запуске сборка выдает Cannot GET / В чем может быть проблема?
К сожалению, сложно сказать. Можно много чего сделать не так: не поставить зависимости, запустить не там и не то )
@@pepelsbey Да все правильно установлено и запущено. Ошибка в консоли : Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-ThhI8UaSFEbbl6cISiZpnJ4Z44uNSq2tPKgyRTD3LyU='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.
Опять же, до конца не уверен, но предположу: у вас где-то указан заголовок CSP (Content-Security-Policy), который запрещает встраивание скриптов на страницу. А для работы Browsersync такое встраивание нужно. Вероятно, вам стоит отключить такие заголовки при локальной разработке и отправлять их только в продакшене developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy
@@pepelsbey Cпасибо
19:40 не понятно, копируете приватный ключ но говорите "в буфере лежит мой публичный ключ". И зачем называть файл `.ssh/key` если можно использовать стандартное имя тем самым избегая флаг `-i`
1) оговорка и 2) вариация - кажется ничего страшного, да ведь?
GitHub Actions, SSH в пайплайне, сильно. Не надо такому учить, потом приходят и делают такую грязь. Прежде чем снимать обучающие видео - разберитесь в теме.
Простые шаги: Сборка, тестирование, запаковка кода( артефакт ), доставка и это база.
Всё классно, но забыли аргументацию почему так нельзя делать. Вот моя: это прекрасно работает для моих задач. Не работает для ваших? Поделитесь опытом, а не запрещайте мне делиться моим.
Спасибо!
Спасибо!
Спасибо!