Демо -репо
Я принял подходы, описанные в этом посте, и создал полностью функциональный демонстрационный репо, чтобы продемонстрировать их в действии:
вступление
При создании проекта, который живет в репозитории GIT и автоматических развертках в других местах, общая проблема заключается в том, как быть на 100% абсолютно уверенным, что версия развернута в прямом эфире является актуальной. Если я пойду в Live, Production Application, как я могу поверить, что то, что я вижу, является последним выпущенным кодом в моем репозитории?
Только потому, что мой трубопровод CI/CD не прошел, не обязательно Означает, что последний коммит пока живет. Кроме того, если что -то идет плохо, я хочу знать с первого взгляда точно Какой код живет в производстве. Простой значок «Pass/Fail» не может сказать мне это.
Близко, но недостаточно хорошо
Многие автоматизированные системы развертывания обеспечивают значок статуса сборки, но это мало что говорит нам:
Стандартный значок статуса NetLify:
Многие приложения также отображаются в развернутом пользовательском интерфейсе. Строка текущей версии приложения (например, 1.8.2-beta.1.10 ), но это на самом деле все еще оставляет много места для неоднозначности; Что если разработчик использовал --силу Чтобы переопределить голову главной ветви? Что, если в главную филиал были добавлены коммиты, но не было создано нового релиза? И т.п.
Вместо строки версий, хорошая альтернатива (или, что еще лучше, дополнение) — использовать фактический SHA последнего коммита в качестве индикатора статуса. Это очень легко сравнивать с последним коммит в контроле версий, и убедиться, что правильный набор изменений вживую.
Кроме того, никакие два коммита не могут иметь одинакового SHA, даже если --силу был использован, поэтому, если я знаю SHA, который «живой», я знаю точно Какой код запускается, и может даже быстро «заказать» эту точную версию кода в моей локальной среде.
💡 Похоже на то, как вы можете использовать GIT Checkout {branch_name} , вы также можете использовать git cakeout {sha} Чтобы проверить весь ваш репо на этом коммите. Это похоже на путешествие во времени!
Методы создания значков SHA
Общая концепция, которую мы собираемся использовать, заключается в том, что наш шаг сборки, который работает на каждом развертывании, теперь собирается сохранить текущий SHA филиала (он же совет ) в доступном формате, который можно использовать для Визуальные индикаторы.
Два простых подхода, которые создают эту концепцию, и которые я здесь изучу, — это файлы JSON и необработанные файлы SVG.
Файл json
Основная идея с подходом JSON File заключается в том, что во время сборки мы сдерживаем ценность последнего SHA в общем файле JSON. Это позволяет легко повторно использовать нашу кодовую базу, возможно, даже во время выполнения и в широко совместимом формате.
Подход JSON File — мой любимый, по нескольким причинам:
- Это проще, чем иметь дело со строительством струн SVG, но может легко объединить с этим подходом (подробнее ниже)
- Файл JSON может быть использован повторно и даже импортирован в код времени выполнения (при условии, что они обмениваются доступом)!
- Пользуясь API и сторонние услуги (включая shields.io для значков)
Файл json — получение и сохранение SHA
Реализация этой задачи может быть выполнена бесконечными способами, и лучший вариант, вероятно, зависит от специфики вашей среды сборки, типа проекта и операционной системы.
Для общего примера, вот как я, как я интегрировал этот подход в проект, основанный на Nodejs, в рамках Package.json файл:
{
"scripts": {
"build-badge": "$NETLIFY && git rev-parse --short HEAD | xargs -I % printf '{\"sha\":\"%\"}' > ./static/build-info.json",
"build": "(yarn run build-badge || true) && gatsby build"
}
}
Самое важное в команде выше — это то, что она изменяет нашу команду сборки, которая раньше была просто Gatsby Build , чтобы включить шаг, который сохраняет текущий SHA в файл JSON ( ./static/build-info.json ). Если вы хотите, вы могли бы заменить много вещей на Bash на Nodejs или сценария Python, который делает то же самое.
Если вы хотите разбиться вышеуказанной команды, вы можете просмотреть ее ниже
Показать/скрыть детали Чтобы сломать это дальше, || Build Badge || Команда состоит из: $ NetLify || это переменная окружающей среды, которая || только || существует в моей среде сборки (|| netLify Servers ||). Вы можете использовать любое значение, которое оценивается в True в вашей системе сборки Или, если вы всегда хотите, чтобы этот файл был сгенерирован независимо от местного производства, вы можете опустить все || $ Variable && || часть git rev-parse-короткая голова Это команда GIT, чтобы получить || короткий || Версия последнего коммита SHA Вместо этого вы можете использовать полный SHA; Просто опустить || —короткая Если вы ищете много изящных команд GIT, подобных этой, вот бесстыдная заглушка, чтобы проверить || мой шпаргалка GIT || (Эта команда на нем!) xargs -i % printf ‘{\ «sha \»: \ » % \»}’ Не собираюсь ввлечь слишком много в этом, но это причудливый способ перенести SHA из последнего раздела в струнное представление JSON > ./static/build-info.json Сохраните сгенерированную строку JSON в файл. Это может быть любой файл, и он даже не обязательно нужен || .json || расширение Вы должны убедиться, что любой каталог, в который вы его сохраняете, будет доступен после завершения сборки, внутренне и/или внешней (размещенной) И я изменил свою команду сборки с || Gatsby Build || к || (пряжа запустить Build-Badge || true) && Gatsby Build ||: Это простой способ убедиться, что || Gatsby Build || , команда True Build, всегда работает независимо от успеха или неудачи || Build Badge || командование
Опять же, в качестве альтернативы длинной команде Bash вы можете альтернативно извлечь и спасти SHA полностью на вашем любимом языке сценариев (Nodejs, Python и т. Д.).
Файл json — с помощью хранимой SHA
Как и есть, как только у нас есть наш файл JSON, этого достаточно, чтобы иметь возможность добавлять значки или втянуть значение SHA в код переднего интерфейса. Например, мы можем использовать Динамическая функция значка shields.io Чтобы легко получить URL SVG, который отображает наш SHA. Что-то типа:
Notice the importance of: - query=sha - url=HOSTED_SITE/build-info.json
Если вы хотите втянуть его в свой код, в Commonjs, это так же просто, как:
const buildInfo = require(`${BUILD_DIR}/build-info.json`);
console.log(buildInfo.sha);
SVG -файл
Вместо того, чтобы отображать свой SHA в коде переднего класса, потянув его через компоненты AJAX или внутренних фреймворка (например, компонент React), вы также можете предварительно генерировать значки SVG во время сборки, с небольшим количеством кода.
Самый простой подход состоит в том, чтобы на 99% значков SVG были готовы, хранящиеся в виде струны. Вы можете использовать любой метод, который вы предпочитаете для разработки вашего значка. Главное, что нужно сделать, это оставить место для SHA, чтобы быть вставленным во время сборки, как
Во время сборки вы объединяете свою строку шаблона SVG с новейшим SHA (именно здесь это удобно иметь это Buld-Info.json Уже сгенерировано), а затем выписывайте полученную строку на фактическое .svg Файл, который может быть подан.
Вы можете проверить, как я все это собираю в build.js В моем демонстрационном репо Анкет
В псевдо -коде этот подход может выглядеть как -то вроде:
// Compose full SVG string const svgStr = ''; // Save to SVG saveFile(svgStr, 'my-badge.svg');
И не забывайте, вы можете стать настолько причудливым, насколько хотите, с генерируемыми SVG 😄
Бонус: GitHub совершает значки
Если все, что вам нужно, это значок, который показывает нынешнюю главу конкретной ветви в GitHub (то есть самый последний выдвинутый требуется).
Предостережение: это требует, чтобы ваш репо был опубликован как публичный
Во -первых, вам нужно получить конечную точку API, которая возвращает информацию о головке, для вашего конкретного комбинации репо и филиала. Синтаксис следует:
https://api.github.com/repos/{USER}/{REPO}/git/refs/heads/{BRANCH}
Так, например, чтобы получить наконечник в настоящее время для моего Главный ветвь в моем демонстрационном репо для этого поста ( Джошуац/Гит-Ша-Бэджес ), я могу использовать api.github.com/repos/joshuatz/git-sha-badges/git/refs/heads/main Анкет
Если вы попробуете этот URL, вы получите ответ JSON, включая:
{
// Other stuff
"object": {
"sha": "____",
"type": "commit"
}
}
Теперь мы можем подключить эту конечную точку непосредственно к удивительному щиту динамический значок Генератор, который принимает конечную точку JSON и позволяет нам управлять настройками значка через параметры строки запроса. Направляя параметры, мы можем получить апельсиновый значок, который отображает Object.sha значение в конечной точке:
API Endpoint: https://api.github.com/repos/joshuatz/git-sha-badges/git/refs/heads/main Shield Badge Base Endpoint https://img.shields.io/badge/dynamic/json Shield Badge URL (raw) https://img.shields.io/badge/dynamic/json?color=orange&label=Github SHA&query=object.sha&url=https://api.github.com/repos/joshuatz/git-sha-badges/git/refs/heads/main Same URL, encoded: https://img.shields.io/badge/dynamic/json?color=orange&label=Github%20SHA&query=object.sha&url=https%3A%2F%2Fapi.github.com%2Frepos%2Fjoshuatz%2Fgit-sha-badges%2Fgit%2Frefs%2Fheads%2Fmain --- Final badge code --- Markdown:  HTML
И вот оно (это живой значок!):
Заворачивать
Я хочу завершить этот пост, указав, что, хотя я дал несколько конкретных примеров и образцов кода, подходы на протяжении всего этого поста носят общий характер и могут быть распространены на решения, помимо простого добавления значков Git SHA.
Например, если вы поддерживаете несколько целей сборки и развертывания (например, dev , тест , Постановка-альфа , Производство , так далее.) Вы можете повторно использовать большинство решений через этот пост, чтобы добавить визуальные индикаторы в каждую среду, которая проясняет, на какую систему вы смотрите.
Надеюсь, этот пост поможет кому -то там! (И слава любому, кто понимает и ценит то, на что ссылается мой модный пример SVG).
Подробнее обо мне (Джошуа Цукер):
Оригинал: «https://dev.to/joshuatz/git-sha-badges-which-commit-is-live-5ada»