существуетnodejsНа фоне растущей популярности,Фронтенд-инжинирингразвитие можно охарактеризовать как стремительное. Сценарии повседневных задач, таких как сборка и упаковка, являются нормой.webpackа такжеgulpЭто уже имя нарицательное, естественно, что и говорить, иНепрерывная интеграция/непрерывная доставка/непрерывное развертываниеТакже становится все больше и большеTeamвнимание, в отрасли также есть много зрелых концепций или решений, таких какHudson, Jenkins, Travis CI , Circle CI, DevOps, git hook. Однако для Xiaobai, если вы начнете непосредственно с этого содержимого, легко запутаться в концепции и попасть в замешательство. Если для того, чтобы использоватьJenkinsи использоватьJenkins, это не мой стиль ведения дел, я должен выяснить, что эта технология может мне дать. Так что я просто возвращаюсь к сути проблемы, начиная с самого простогоРабочий процессначать, сначалаРешите проблему эффективности ручного развертывания.

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

строить автоматически

Строительство не является предметом этой статьи, это невозможно объяснить в короткой статье, поэтому я описал это здесь одним махом.

инструменты для сборки

Используйте основные инструменты сборки, такие какwebpack, gulp, rollupЖдать.

построить цель

Организовано в виде сценария代码检查,编译,压缩,混淆,资源处理,devServerи другие операции рабочего процесса.

Развертывание вручную

вытоптанная яма

Я также пробовал два метода ручного развертывания.

Переместите режим кирпича, пропустите встроенную папку черезxftpпередача на сервер/usr/share/nginx/htmlПод содержанием.
Используйте встроенную папку сgitФилиал управляется, перемещается на удаленный склад, а затем вlinuxВытащите эту часть кода с сервера.

Первый способ, очевидно, уже модель slash and burn, но я им давно пользуюсь. Увы, нет возможности, нахожу время только для оптимизации рабочего процесса из-за бизнеса.

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

Автоматическое развертывание

написать сценарий

Сначала напишите скрипт для автоматической сборки и развертывания, в основном включая вырезаниеgitРазветвите, загрузите последний код, соберите пакет, передайте файлы на сервер, выполните следующие действия.

Команда scp для копирования файлов и каталогов между Linux

#!/bin/bash
git checkout develop
git pull
npm run build:test
scp -r ./dist/. username@162.81.49.85:/usr/share/nginx/html/projectname/

пс:ipЭто было изменено мной, не пытайтесь атаковать меня.

Однако я обнаружил, что в процессе использования сценария развертыванияПароль требуется для каждой операции,Очень надоедливый.

SSH-аутентификация

Хоть я и ненавижу вводить пароли, но пароли являются гарантией безопасности.Если не вводить пароли, можно только пройтиsshБезопасный доступ.

Во-первых, я работаю на своем компьютере~/.sshПод содержаниемСоздать пару ключей.

ssh-keygen -t rsa

При необходимости измените имя файла пары ключей в соответствии с вашей личной ситуацией и нажмите Enter при вводе пароля, что означает, что вам не нужно использовать пароль.

生成ssh密钥

следующийпередать открытый ключ на серверначальство

scp ~/.ssh/id_rsa.pub username@162.81.49.85:/home/username/.ssh/authorized_keys

Если сервер уже существуетauthorized_keysфайл, вы можете изменить его прямо на сервереauthorized_keysфайл, добавьте свой собственный в конце файлаid_rsa.pubсодержание.

Затем мы модифицируем сценарий развертывания, чтобы использоватьsshметод аутентификации дляlinuxСервер передает файл.

#!/bin/bash
git checkout develop
npm run build:test
scp -i ~/.ssh/id_rsa -r ./dist/. username@162.81.49.85:/usr/share/nginx/html/projectname/

scpиз-iПараметр указывает файл ключа, который следует использовать при передаче, чтобы его можно было передатьsshБезопасный доступ без необходимости каждый раз вводить пароль.-rпараметрrecursive, что означает рекурсивное копирование всего каталога.

Наконец, мы можем изменитьpackage.json,пройти черезnpm scriptsвыполнитьsh

"scripts": {
  "deploy:test": "deploy-test.sh"
}

Сотрудничатьvscodeизnpm scriptsЯрлык очень удобен в использовании.

npm scripts

Обратите внимание, что еслиlinuxдокументНедостаточно разрешенийЭто также может быть неправильно, не забудьте датьauthorized_keysфайл дает разрешения,Владелец может читать и писатьВот и все.

chmod 600 authorized_keys

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

scp传输中

вместе сbashАвтоматическое закрытие окна и работа по развертыванию также подошли к концу.

last but not least

Еще один вопрос, который следует рассмотреть, — будут ли проблемы с доступом пользователей в процессе развертывания?

ответповлияет на доступ пользователей. Например, во время выполнения скрипта развертывания он был замененindex.html, разворачиваются статические ресурсы, в это время пользователь только заходит на сайт, новыйindex.htmlОднако доступ к новым статическим ресурсам невозможен, и веб-страница сообщает об ошибке на белом экране.

Обходной путьСначала на статических ресурсах, потом на странице. Поскольку статические ресурсыwebpackПосле того, как сборка принесенаhashзначение, первые статические ресурсы не повлияют на исходную версию, поэтому нам еще нужно оптимизировать скрипт развертывания и разложить процесс передачи.

это головная больscpНемного хлопотно, что команда не может игнорировать файл.

Если упакованоdistФайлов в корневом каталоге не так много, можно рассмотреть ручной перебор, чтобы упорядочить порядок передачи. Например:

#!/bin/bash
git checkout develop
git pull
npm run build:test
scp -i ~/.ssh/id_rsa -r ./dist/static username@162.81.49.85:/usr/share/nginx/html/projectname/
scp -i ~/.ssh/id_rsa ./dist/favicon.ico username@162.81.49.85:/usr/share/nginx/html/projectname/favicon.ico
scp -i ~/.ssh/id_rsa ./dist/element-icons.ttf username@162.81.49.85:/usr/share/nginx/html/projectname/element-icons.ttf
scp -i ~/.ssh/id_rsa ./dist/element-icons.woff username@162.81.49.85:/usr/share/nginx/html/projectname/element-icons.woff
scp -i ~/.ssh/id_rsa ./dist/index.html username@162.81.49.85:/usr/share/nginx/html/projectname/index.html

Если вы думаете, что это глупо, то подумайтеrsyncсейчас,rsyncда через--excludeНе обращайте внимания на файл, так что теоретически нужно написать только две команды передачи, и нет необходимости учитывать контент, который может быть добавлен в последующих сборках. Но вwindowsа такжеlinuxмеждуrsyncЭто все еще довольно сложно, я оставлю это вам для самостоятельного изучения.

Обновить и дополнить

20.01.2020 Упрощенный скрипт

Спасибо нетизен _shanks за напоминание, можно использовать.ssh/configУпрощенное письмо. Первый — модифицировать.ssh/config

# 配置开发环境
Host dev
HostName 162.81.49.85
User username
IdentityFile ~/.ssh/id_rsa

Затем измените сценарий развертыванияdeploy-test.sh

#!/bin/bash
git checkout develop
git pull
npm run build:test
scp -r ./dist/static dev:/usr/share/nginx/html/projectname/
scp ./dist/favicon.ico dev:/usr/share/nginx/html/projectname/
scp ./dist/element-icons.ttf dev:/usr/share/nginx/html/projectname/
scp ./dist/element-icons.woff dev:/usr/share/nginx/html/projectname/
scp ./dist/index.html dev:/usr/share/nginx/html/projectname/

04.02.2020 Углубленная практика

Углубленная практика автоматизированного развертывания переднего плана

29.03.2021 Представляем CI/CD, которым я пользуюсь уже почти год

Потратьте полдня, чтобы легко создать интерфейсный рабочий процесс CI/CD.

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