я был там много лет назадАвтоматическое развертываниеЯ сделал небольшое усилие в этом отношении и вложил свои знания вНебольшой шаг в автоматизированном развертывании, большой шаг в перемещении кирпичиков переднего планаВыложено в этом блоге. Спасибо двум пользователям сети@_shanksи@TomCzHen, побудил меня продолжить оптимизацию процесса развертывания. Эта статья в основном посвящена процессу автоматического развертывания, чтобыУправление версиямииРациональность процессаНекоторые улучшения были сделаны и в других аспектах, а благодаря стандартизированному рабочему процессу пользовательский интерфейс стал лучше!

PS: Если вам нужно знать CI/CD напрямую, нажмите здесь ->Потратьте полдня, чтобы легко создать интерфейсный рабочий процесс CI/CD..

Журнал изменений создается автоматически

Я сделал это вручную раньшеCHANGELOG.md, используемый для записи журнала обновлений, я немного устал от работы, и он не очень стандартизирован. К счастью, предшественники посадили деревья, поэтому я подумал об использованииconventional-changelog-cliАвтоматически генерировать и обновлятьCHANGELOG.md, действительно полезно!

真香警告

Что такое обычный список изменений

Generate a changelog from git metadata

в соответствии сgitМетаданные генерируют журналы изменений, аconventional-changelog-cliЭто связанный инструмент командной строки.

Установить обычный-changelog-cli

npm install -g conventional-changelog-cli

Инициализировать и сгенерировать CHANGELOG.md

cd my-project
conventional-changelog -p angular -i CHANGELOG.md -s

Приведенные выше команды основаны на последнейFeature, Fix, Performance Improvement or Breaking Changesи Т. Д.commitгенерация или обновление записиCHANGELOG.md. Если вы хотите использовать все предыдущиеcommitгенерация записи завершенаCHANGELOG.md, затем попробуйте следующую команду:

conventional-changelog -p angular -i CHANGELOG.md -s -r 0

Рабочий процесс

Добавьте код в тестовую область

В этом шаге нет ничего особенного, просто запускайте код каждый день, а затем добавляйте содержимое рабочей области в область подготовки.

git add .

Стандартное сообщение фиксации

Стандартное сообщение фиксации обычно делится на три части: заголовок, тело и нижний колонтитул. Заголовок содержит тип, объем, тему и другие части, которые используются для описания типа фиксации, области влияния и краткого описания фиксации. Тело представляет собой подробное описание, которое можно написать в несколько строк. Нижний колонтитул в основном используется для описания несовместимых изменений (Breaking Change) или для закрытия проблем (Closes #issue).

Формат следующий:

<type>(<scope>): <subject>

<body>

<footer>

Возьмите каштан:

feat(支持自动部署): 结合conventional-changelog，配合部署脚本完成部署任务

conventional-changelog是一个很好的工具，用于自动生成changelog，再配上自定义的部署脚本，整个部署流程就显得更规范了

Breaking Change: 比较大的更新
Closes #315

в,Headerявляется обязательным,BodyиFooterМожно опустить.

После того, как вы получите общее представление о спецификации, вы можете использовать инструмент.Здесь мы используемcommitizen.

npm install -g commitizen

Затем выполните следующую команду в корневом каталоге проекта:

commitizen init cz-conventional-changelog --save --save-exact

После успешного запускаpackage.jsonБудет добавлено следующее:

"devDependencies": {
  "cz-conventional-changelog": "^3.1.0"
},
"config": {
  "commitizen": {
    "path": "./node_modules/cz-conventional-changelog"
  }
}

git commitИспользуйте этот шагgit cz替代,czозначаетcommitizen, через интерактивную командную строкуcommitработать.

PS D:\robin\frontend\spa-blog-frontend> git cz
cz-cli@4.0.3, cz-conventional-changelog@3.1.0

? Select the type of change that you're committing: feat:     A new feature
? What is the scope of this change (e.g. component or file name): (press enter to skip) 支持自动部署
? Write a short, imperative tense description of the change (max 86 chars):
 (37) 结合conventional-changelog，配合部署脚本完成部署任务
? Provide a longer description of the change: (press enter to skip)

? Are there any breaking changes? No
? Does this change affect any open issues? No
[master ee41f35] feat(支持自动部署): 结合conventional-changelog，配合部署脚本完成部署任务
 3 files changed, 15 insertions(+), 3 deletions(-)

Номер версии процесса, обновить CHANGELOG

Тогда мы должны обновитьnpmНомер версии пакета вместе сnpm versionиconventional-changelogиспользование, может быть обновлено в то же времяCHANGELOG.md.

Хорошо, давайте сначала подготовим скрипт:

"scripts": {
    "start": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "deploy": "node deploy",
    "version": "conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md",
    "postversion": "npm run deploy"
}

Выберите обновление в соответствии с актуальной версиейpatch/minor/majorВерсия. Предположим, мы обновляемminorномер версии, то команда операции выглядит следующим образом:

npm version minor -m '特性版本更新'

Выполнение этой команды обновитpackage.jsonсерединаversionполе,

также будет выполнятьconventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md,продлитьCHANGELOG.md.

После выполнения этой команды вы увидитеCHANGELOG.mdбыл изменен.

CHANGELOG自动更新

npm-хук для запуска скрипта развертывания

пройти черезpostversionХук для запуска скрипта развертыванияnode deployчтобы начать развертывание.deploy.jsСодержимое файла следующее:

const { execFile } = require('child_process');

const version = process.env.npm_package_version;

execFile('deploy.sh', [version], { shell: true }, (err, stdout, stderr) => {
    if (err) {
        throw err;
    }
    console.log(stdout);
});

используется здесьnodejsизchild_processМодуль выполняет дочерний процесс, вызываяexecFileказненdeploy.sh, и воляnpmНомер версии пакета передается в качестве параметраdeploy.sh.

deploy.shСодержимое файла следующее:

#!/bin/bash
npm run build
htmldir="/usr/share/nginx/html"
uploadbasedir="${htmldir}/upgrade_blog_vue_ts"
appenddir=$1
uploaddir="${uploadbasedir}/${appenddir}"
projectdir="/usr/share/nginx/html/blog_vue_ts"
scp -r ./dist/. txcloud:${uploaddir}
ssh txcloud > /dev/null 2>&1 << eeooff
ln -snf ${uploaddir} ${projectdir}
exit
eeooff
echo done

Главное, что делает приведенная выше команда, это:

npm run buildВыполнение задач по сборке
будет строитьdistСодержимое папки передается черезscpОн передается на сервер, и каждая версия отличается номером версии.
nginxнастроен на мониторинг80порт, указывая на/usr/share/nginx/html/blog_vue_ts, и я будуblog_vue_tsснова указать наupgrade_blog_vue_tsв каталоге версии, напримерupgrade_blog_vue_ts/0.5.4. Каждый раз, когда выпускается версия, приведенный выше сценарий изменяет программную ссылку, чтобы она указывала на целевую версию, напримерupgrade_blog_vue_ts/0.6.0для завершения перехода версии.

Здесь я использовал мягкое соединение, чтобы улучшить предыдущий сценарий развертывания, который может хранить различные папки с историческими версиями на сервере без учета обработки.index.htmlПроблема отделения от статических ресурсов.

Комбинация настоятельно рекомендуетсяНебольшой шаг в автоматизированном развертывании, большой шаг в перемещении кирпичиков переднего планаПрочитайте эту статью вместе.

lrwxrwxrwx 1 root root   47 Feb  3 21:35 blog_vue_ts -> /usr/share/nginx/html/upgrade_blog_vue_ts/0.6.0

linux服务器项目版本文件夹

Если вы хотите откатить версию, вы также можете реализовать это, модифицировав софт подключение, что более удобно.

Нажмите на удаленный

Наконец, не забудьте поставить кодpushв удаленный репозиторий.

git push

Список измененийchangelogПросмотр также стал очень удобным, то, что было изменено, понятно с первого взгляда, и вы можете сразу перейти кcommitистория,issueЖдать.

github上的changelog

интермедия

Как видите, я прохожуdeploy.jsназываетсяdeploy.sh. Я хотел прямоnpm scriptsвызыватьdeploy.shИ передается параметр номера версии, но я пробовал несколько способов его записи, поэтому я также запишу его здесь.

"deploy": "deploy.sh npm_package_version"

"deploy": "deploy.sh $npm_package_version"

похожеnpm scriptsвызыватьshПри написании сценариев вы можете записывать только литеральные параметры, а передача переменных в качестве параметров, похоже, не работает.

Такая дословная формулировка следующих параметров возможна, но ощущение несколько тупое, и это не соответствует тематике и автоматизированному развертыванию.

"deploy": "deploy.sh 0.6.0"

Так что я все еще выбираю пройтиdeploy.jsзвоните как посредникdeploy.shиз.

Эпилог

Следует признать, что процесс развертывания, о котором я упоминал выше, основан на примере моего личного проекта, который может быть не очень стандартизирован, но его можно рассматривать как полный набор процессов развертывания благодаря моему собственному пониманию и исследованию, и не занимать.jenkinsи другие инструменты. После этого учебного опыта автоматического развертывания я верю в изучение и использованиеjenkinsстанет легче. Далее я продолжу оптимизировать и стандартизировать процесс развертывания,jenkinsКонечно, это в моем расписании.

Лучше начать учиться сейчас, чем собирать пепел, Олли!
Если вы считаете эту статью полезной, пожалуйста, ставьте лайки, подписывайтесь и поддержите волну, спасибо!
Обратите внимание на общедоступный номерФронтенд Саймон, обменивайтесь и учитесь с автором!