WebDesign Master
Курсы
Rsync - молниеносный деплой средних и крупных проектов (gulp-rsync)
Инструменты

Rsync - молниеносный деплой средних и крупных проектов (gulp-rsync)

Всех приветствую! Сегодня мы рассмотрим настройку Gulp-проекта для быстрого деплоя изменённых файлов на рабочий хостинг или сервер в системе MacOS и Windows на примере реального сайта. Научимся создавать публичные SSH ключи для быстрого доступа к серверу по SSH и настроим подсистему Ubuntu в Windows 10 для работы с rsync.

Поделиться
Твитнуть
Поделиться
Класснуть
Запинить
Rsync - молниеносный деплой средних и крупных проектов (gulp-rsync) - Видеоурок
Смотреть урок на YouTube
Создание контентного сайта на Jekyll от А до Я
Внимание! Данный материал требует установленных инструментов Node.js и Gulp.
Если у вас возникли вопросы или проблемы, обратитесь к руководству Gulp для самых маленьких, в котором подробно объясняется, что такое Gulp и как с ним работать.

1. Настройка gulp-rsync в MacOS и Linux

1.1 Настройка Gulp таска

Настройка gulp-rsync в системах MacOS и Linux довольно проста и заключается в выполнении нескольких несложных инструкций.

Для начала убедитесь, что у вас установлена последняя стабильная версия Node.js и установлен gulp глобально.

Подключите к вашему Gulp-проекту rsync:

npm i gulp-rsync gulp --save-dev

И создайте новый таск "deploy"

var gulp  = require('gulp'),
		rsync = require('gulp-rsync');

gulp.task('deploy', function() {
	return gulp.src('yousite/**')
	.pipe(rsync({
		root: 'yousite/',
		hostname: 'sshusername@yousite.com',
		destination: 'yousite/public_html/',
		// include: ['*.htaccess'], // Includes files to deploy
		exclude: ['**/Thumbs.db', '**/*.DS_Store'], // Excludes files from deploy
		recursive: true,
		archive: true,
		silent: false,
		compress: true
	}));
});

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

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

Создайте директорию для SSH, в том случае, если она ещё не создана (знак доллара копировать не нужно):

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

Зайдите в созданную папку и сгенерируйте ключ (на все вопросы - жмём Enter):

$ cd ~/.ssh
$ ssh-keygen

Скопируйте получившийся ключ id_rsa.pub на ваш хостинг или сервер:

$ scp -p id_rsa.pub sshusername@yousite.com:~

Подключитесь к удалённому серверу для внесения нового ключа в authorized_keys:

$ ssh sshusername@yousite.com
Password:

Если директория ещё не существует, создайте её и установите соответствующие права:

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

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

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

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

RemoteServer~$ rm -f ~/id_rsa.pub
RemoteServer~$ 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 на вашем компьютере, а в том числе и rsync, который использует SSH без авторизации в автоматическом режиме. Попробуйте подключиться снова к вашему серверу по SSH и убедитесь, что от вас не требуется ввести пароль. В противном случае, если пароль всё-таки требуется ввести, повторите процедуру получения SSH ключа заново.

2. Настройка gulp-rsync в Windows

2.1 Установка и настройка подсистемы Linux в Windows

Обратите внимание, что подсистема Linux, необходимая для работы rsync доступна только в Windows 10.

Для установки подсистемы Linux в Windows 10 откройте "Параметры Windows" > "Обновление и безопасность" > "Для разработчиков".

Windows установка Ubuntu - Обновление и безопасность

И выберие опцию "Режим разработчика":

Windows 10 - Режим разработчика

Далее переходим в Панель управления, выбираем пункт "Программы и компоненты", на панели слева выбираем "Включение или отключение компонентов Windows".

В новом окне устанавливаем чекбокс рядом с "Подсистема Windows для Linux":

Linux в Windows

После перезагрузки компьютера откройте окно PowerShell от имени администратора и выполните следующую команду:

$ Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux

Теперь мы можем работать с файловой системой нашего проекта через bash.

2.2 Установка в подсистеме Linux Node.js последнего стабильного релиза

Далее установим свежий стабильный Node.js и Gulp. Откройте Командную строку или PowerShell, введите команду bash и установите:

$ cd ~
$ curl -sL https://deb.nodesource.com/setup_6.x -o nodesource_setup.sh

Здесь _6.x - первая цифра последнего стабильного релиза. Её можно узнать на сайте Nodejs.

Далее выполним команду:

$ sudo bash nodesource_setup.sh

И установим Node.js:

$ sudo apt-get install nodejs

После этого установите Gulp глобально в вашей Linux подсистеме ($ npm i -g gulp) и установите все пакеты проекта ($ npm i), который мы подготовили ранее.

Премиум уроки от WebDesign Master

Курс по созданию сайта от А до Я на Jekyll

Создание сайта от А до Я. Комплексный курс

Курс по созданию интернет-магазина на OpenCart

Создание современного интернет-магазина от А до Я

Фриланс для начинающих

Я - фрилансер! Базовый курс для начинающих

Другие уроки по теме «Инструменты»

  • Gulp include на стороне сервера Browsersync + Build
  • OptimizedHTML 5: Важные обновления стартера для JS-разработки
  • Gulp 4 - Актуальное и исчерпывающее руководство для самых маленьких
  • Актуальный способ установки и настройки окружения Windows WSL 2 (Windows Subsystem for Linux)
  • PageSpeed Insights - Оптимизация (обновление)
  • October CMS - Первое знакомство

Разделы сайта:

  • Курсы
  • HTML и CSS
  • Веб-дизайн
  • Инструменты
  • Оффтоп
  • MODX
  • WordPress
  • jQuery
  • Адаптивный веб-дизайн
  • Создание иконок
  • Обработка изображений
  • Иллюстрации и Инфографика
  • Интерфейсы UI/UX
  • Прототипирование
  • JavaScript
  • Хостинг

Полезные ресурсы:

  • Lazy Load Placeholder
  • Документация Gulp 4
  • Рабочее место разработчика
2021 © WebDesign Master