Блог 01/05/2018

Rsync (gulp-rsync) – настройка deploy сайта на хостинг

Хочу рассказать о том, что такое Rsync и дать подробную пошаговую инструкцию с примерами, как быстро осуществлять deploy (выгрузку) сайтов на свой веб-хостинг с помощью утилиты Rsync (gulp-rsync).

Для работы потребуется:

  • Windows 10 и включенная подсистема Ubuntu (bash).
  • Установленный Gulp и всё нужное для нормальной его работы в системе.
  • Включённый SSH у юзера в ISPmanager5 на вашем хостинге.
Rsync (gulp-rsync) – настройка deploy сайта на хостинг

Внимание, deploy через gulp-rsync не работает в windows ниже версии 10 из-за отсутствия bash… (хнык-хнык).

Что такое Rsync и в чём его преимущество?

По Wiki:

Rsync (англ. Remote Synchronization) — программа для UNIX-подобных систем, которая выполняет синхронизацию файлов и каталогов в двух местах с минимизированием трафика, используя кодирование данных при необходимости... и бла-бла-бла-бла.

А если по-русски, то это:

Мощная утилита, которая позволяет очень быстро и легко «залить» файлы вашего сайта на хостинг. Буквально одной командой gulp rsync всего за несколько секунд будет загружен довольной крупный сайт, обалденно, да?

Выходит, если в проекте использовать Gulp, то такие FTP клиенты, как FileZilla на фоне Rsync выглядят совсем неудобными, убогими, архаичными чудовищами:)

Однако к делу!

Настройка gulp-rsync в Win10

Настраивается совсем просто:

К вашему проекту подключаем Rsync командой:

	npm i gulp-rsync gulp --save-dev

В файле gulpfile.js создаём и настраиваем нужный таск (task):

	
		var gulp = require('gulp'),
		    rsync = require('gulp-rsync'),
	
	
		gulp.task('rsync', function() {
		  return gulp.src('dist/**')
		  .pipe(rsync({
		    root: 'dist/',
		    hostname: 'user666@mydomain.com',
		    destination: 'www/mydomain.com/',
		    // include: ['*.htaccess'], // Includes files to deploy
		    exclude: ['**/Thumbs.db', '**/*.DS_Store'], // Excludes files from deploy
		    recursive: true,
		    archive: true,
		    silent: false,
		    compress: true
	    }))
    });

gulp-rsync - подключение и настройка в gulpfile.js

Пример настройки реализован в Start html template on UIKit3 + SASS + Gulp

  • Где таск "rsync" -> (gulp.task('rsync') может быть заменен на любое другое название, например mynametask, в итоге команда запроса деплоя будет gulp mynametask
  • 'dist/** - берем все файлы из папки dist (Название папки проекта и путь может быть любыми)
  • В user666@mydomain.com указываем свой логин в хостинг-панели ISPmanager5, например user777, и ваш домен под данным юзером.

Подробное описание всех настроек таска rsync в примерах всегда можно найти в официальных источниках.

После вышеуказанной нехитрой настройки при выполнении команды "gulp rsync" в bash, вам будет предложено ввести пароль от вашего юзера на хостинга, вводим и вуаля! Ваш сайт почти моментально появился в интернете!

Как всё просто, да?

Однако можно пойти ещё дальше, избавиться от ввода каждый раз пароля! Для этого надо настроить SSH аутентификацию по открытому ключу. Не пугайтесь страшных слов, просто выполните всё по инструкции, и у вас в ISPmanager5 всё будет работать, как и у меня!

Настройка SSH аутентификации по открытому ключу

Генерация ключа на локальном компьютере:

В папке вашего проекта (где находится ваш файл gulpfile.js) последовательно выполните следующие команды:

  $ mkdir -p ~/.ssh
  $ chmod 700 ~/.ssh

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

  $ cd ~/.ssh
  $ ssh-keygen

которые сгенерируют ключ, на все вопросы просто жмите кнопку Enter!

Далее командой:

  $ scp -p id_rsa.pub user666@mydomain.com:~

копируете получившийся ключ id_rsa.pub на ваш аккаунт на хостинге (не забывайте менять user666 и mydomain.com на свои!)

Следующей командой подключаетесь уже к своему аккаунту на хостинге для внесения нового ключа в authorized_keys:

  $ ssh user666@mydomain.com

Появится: "Password:"

Там создайте директорию и установите соответствующие права:

  $ mkdir -p ~/.ssh
  $ chmod 700 ~/.ssh

Скопируйте сгенерированный ключ в специальный файл доступа 'authorized_keys' и установите на него безопасные права:

  $ cat id_rsa.pub >> ~/.ssh/authorized_keys
  $ chmod 600 ~/.ssh/authorized_keys

Удалите скопированный в корень вашего пользователя ключ, который вы уже добавили в общий файл и завершите вашу сессию командой logout:

  $ rm -f ~/id_rsa.pub
  $ logout

Далее остаётся только добавить закрытый ключ в агент аутентификации на локальном компьютере:

  $ ssh-add

Если вы не получили сообщения вида "Identity added: /home/user/.ssh/id_rsa (/home/user/.ssh/id_rsa)", а видите уведомление вроде такого: "Could not open a connection to your authentication agent.", то запустите агента командой eval:

  $ eval `ssh-agent -s`

И заново запустите ssh-add.

  $ ssh-add

На этом настройка окончена!

Уф… как сложно кажется, да? Эти последовательности команд придется выполнять для каждого проекта отдельно, зато тут особо не нужно ничего сочинять, просто делайте всё пошагово по инструкции.

Открываем консоль, вводим команду «gulp rsync» и наблюдаем чудо, всё работает! Пароль более не требуется.

Если всё-таки ваш хостинг продолжает запрашивать пароль, придется более внимательно повторить процедуру заново, значит, где-то ошиблись!

Для быстрого тестирования можно использовать «Start html template on UIKit3 + SASS + Gulp» (ссылка)

Где таск gulp-rsync уже настроен.

Используемые материалы и источники:

Rsync – молниеносный деплой средних и крупных проектов (gulp-rsync) – _webdesign-master.ru/blog/tools/2017-06-13-gulp-rsync.html

Статья написана на базе вышеуказанного источника и адаптирована в первую очередь для хостинг-панели ISPmanager5, все мною проверено лично на примере хостинга LandingHost!

Статья Алексея Климанова адаптирована под другую хостинг-панель и, к сожалению, не подходит для ISPmanager5.

Если эта информация стала для вас полезной, вы можете сказать "спасибо", нажав кнопку вашей любимой социальной сети:

Вконтакте
Одноклассники
Читать еще:
Готовый Gulp-проект для OpenCart – быстрый старт
Готовый Gulp-проект для OpenCart – быстрый старт
26/02/2020
Let's Encrypt – бесплатный SSL-сертификат для сайта: инструкция по получению, установке, перевыпуску, а также преимущества и недостатки
Let's Encrypt – бесплатный SSL-сертификат для сайта: инструкция по получению, установке, перевыпуску, а также преимущества и недостатки
10/02/2019
Хостинг для Landing Page – как выбрать нужный тариф
Хостинг для Landing Page – как выбрать нужный тариф
07/02/2019
Установка WordPress с нуля на хостинг
Установка WordPress с нуля на хостинг
01/02/2019
Как выбрать хостинг для WordPress 5
Как выбрать хостинг для WordPress 5
25/01/2019

Подпишись и будь в курсе новых публикаций на сайте!