Упростите сборку и развертывание статического веб-сайта (часть 2)✨

Это вторая часть статьи, начинать следует с части первой.

В предыдущем эпизоде ​​мы работали над созданием кода для производства. На данный момент у нас должна быть возможность заполнить наш каталог prod производственным кодом, запустив npm run build_prod. Если это работает, давайте приступим к развертыванию части!

Теперь нам нужно сделать простой и удобный способ отправить наш код на сервер.

Для этого нам понадобится FTP-клиент. Хорошим выбором для среды Windows является WinSCP.

Если на вашем компьютере не установлен WinSCP, вам следует перейти сюда https://winscp.net/eng/download.php, скачать и установить его.

После этого я рекомендую вам добавить WinSCP в переменные среды, чтобы вызывать его без полного пути. В документации по Java есть хорошее объяснение, как это сделать https://www.java.com/en/download/help/path.xml.

Начнем с создания файла prod_to_server.txt в корне проекта. Сценарий WinSCP представляет собой простой файл .txt.

Для передачи файлов с помощью WinSCP мы будем использовать три оператора: open, put и exit.

Мы начинаем с open.

open sftp://[email protected] 
-privatekey=D:\Drive\Digital_Ocean_Droplet\id_rsa.ppk

Здесь мы используем протокол SFTP для подключения к серверу как пользователь root. Просто замените ip адрес на адрес вашего сервера и укажите правильный путь к вашему приватному ключу для безопасного соединения с сервером.

Оператор Put определяет передачу.

open sftp://[email protected] 
-privatekey=D:\Drive\Digital_Ocean_Droplet\id_rsa.ppk -hostkey="ssh-ed25519 256 un5Xf2DHqRtpk6YNV0krt6J6H90s/7TFPpMoIi92KWs="
put "D:\Drive\dinosaur_comics_generator V2\prod" /var/www/dinosaur_comics

Здесь мы должны предоставить два аргумента для команды put. Первый — источник (на локальном компьютере), а второй — пункт назначения (на удаленном компьютере). Ключ хоста должен совпадать с ключом хоста нашей удаленной машины. Это используется из соображений безопасности, чтобы убедиться, что файлы передаются на правильный компьютер.

После передачи нам достаточно просто закрыть соединение.

open sftp://[email protected] 
-privatekey=D:\Drive\Digital_Ocean_Droplet\id_rsa.ppk -hostkey="*"
put "D:\Drive\dinosaur_comics_generator V2\prod" /var/www/dinosaur_comics
exit

Скрипт готов, теперь мы должны запустить его с помощью WinSCP.

WinSCP.exe /console /script='D:\\Drive\\dinosaur_comics_generator V2\\prod_to_server.txt'

Наш производственный код только что добрался до сервера, и теперь наш код работает, круто!

Но вводить эту команду каждый раз неудобно. Давайте создадим для этого еще один пакетный скрипт.

Создайте файл deploy.bat в корневом каталоге вашего проекта.

Давайте заполним его @echo OFF, вы уже знаете, что он делает.

Далее мы должны просто поместить команду для запуска скрипта WinSCP в оператор powershell.

@echo OFF
powershell -Command “WinSCP.exe /console /script=’D:\\Drive\\dinosaur_comics_generator V2\\prod_to_server.txt’”

Давайте запустим этот скрипт с помощью npm. Вам просто нужно добавить его в блок скриптов package.json.

"scripts": {
  ...
  "build_prod": "html-minifier --collapse-whitespace src/index.html
  -o prod/index.html | xcopy images prod\\images /Y | uglifyjs --  
  compress --mangle -o prod/bundle.js -- dist/bundle.js | postcss   
  src/styles.css > prod/styles.css | CALL prepare-html.bat",
  "deploy": ".\\deploy.bat"
  ...
}

Теперь мы можем собрать наш код с помощью npm run build_prod и развернуть код с помощью npm run deploy. Как я и обещал, всего две команды для запуска кода 👌

Но подождите… Процесс развертывания настолько прост, что мы можем делать это каждую минуту, но что, если мы что-то сломаем? Мы должны позаботиться о резервном копировании нашего веб-сайта при каждом развертывании. Хотите посмотреть, как? Просто следуй за мной 🏃

Мы создадим сценарий оболочки на сервере и вызовем этот сценарий удаленно.

Сначала подключитесь к серверу по SSH, используя предпочитаемый вами SSH-клиент. У меня Putty. Если у вас возникли проблемы с этим, следуйте этому руководству Digital Ocean:

Ты в деле? Поехали 🏎️

Сначала мы создаем каталог scripts с mkdir scripts. Затем перейдите в созданный каталог с cd scripts. Здесь давайте создадим файл скрипта с touch make_website_backup.sh и сделаем его исполняемым chmod +x make_website_backup.sh.

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

Давайте откроем файл с помощью nano make_website_backup.sh.

Первая строка сценария должна быть заголовком сценария оболочки #!/bin/sh. Он сообщает интерпретатору, что для выполнения скрипта необходимо использовать оболочку /bin/sh.

Теперь давайте определим, сколько резервных копий мы хотим сохранить. Я выбрал 10, на мой взгляд достаточно для моего сайта, вы можете выбрать сколько хотите, но помните об объеме памяти в вашей машине.

#!/bin/sh
backups_capacity=10

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

#!/bin/sh
backups_capacity=10
if [ ! -d "/root/websites_backup" ]; then
mkdir /root/websites_backup
mkdir /root/websites_backup/$1
elif [ ! -d "/root/websites_backup/$1" ]; then  
mkdir /root/websites_backup/$1
fi

Обратите внимание на $1 это первый аргумент, который получает скрипт.

В этом скрипте мы проверяем, не существует ли /root/websites_backup, если это правда, то нам нужно создать его и еще один каталог внутри с именем $1. В противном случае мы должны проверить, не существует ли /root/websites_backup/$1, если это правда, то нам нужно его создать.

Теперь нам нужно записать дату, чтобы назвать нашу резервную копию.

#!/bin/sh
backups_capacity=10
if [ ! -d "/root/websites_backup" ]; then
mkdir /root/websites_backup
mkdir /root/websites_backup/$1
elif [ ! -d "/root/websites_backup/$1" ]; then  
mkdir /root/websites_backup/$1
fi
DATE=`date '+%Y-%m-%d_%H:%M:%S'`

Имя должно иметь точность до секунд, потому что можно делать развертывания так часто.

И теперь, когда у нас есть имя для бэкапа, мы можем создать его самостоятельно. Поэтому мы просто копируем содержимое из текущего каталога веб-сайта в место резервного копирования.

#!/bin/sh
backups_capacity=10
if [ ! -d "/root/websites_backup" ]; then
mkdir /root/websites_backup
mkdir /root/websites_backup/$1
elif [ ! -d "/root/websites_backup/$1" ]; then  
mkdir /root/websites_backup/$1
fi
DATE=`date '+%Y-%m-%d_%H:%M:%S'`
cp -r /var/www/$1 /root/websites_backup/$1/$DATE

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

Функционал резервного копирования теперь работает, но все же нам нужно удалить старые резервные копии, потому что мы предпочитаем иметь максимум 10. Сначала давайте подсчитаем, сколько резервных копий нам нужно удалить.

#!/bin/sh
backups_capacity=10
if [ ! -d "/root/websites_backup" ]; then
mkdir /root/websites_backup
mkdir /root/websites_backup/$1
elif [ ! -d "/root/websites_backup/$1" ]; then  
mkdir /root/websites_backup/$1
fi
DATE=`date '+%Y-%m-%d_%H:%M:%S'`
cp -r /var/www/$1 /root/websites_backup/$1/$DATE
number_to_delete=$((`ls /root/websites_backup/$1 | wc -l` - $backups_capacity))

Здесь мы просто перечисляем содержимое каталога резервных копий веб-сайта с ls и считаем с wc. Чтобы получить количество резервных копий, которые мы должны удалить, мы вычитаем backups_capacityvariable.

Когда у нас есть число, сколько удалить, мы можем это сделать.

#!/bin/sh
backups_capacity=10
if [ ! -d "/root/websites_backup" ]; then
mkdir /root/websites_backup
mkdir /root/websites_backup/$1
elif [ ! -d "/root/websites_backup/$1" ]; then  
mkdir /root/websites_backup/$1
fi
DATE=`date '+%Y-%m-%d_%H:%M:%S'`
cp -r /var/www/$1 /root/websites_backup/$1/$DATE
number_to_delete=$((`ls /root/websites_backup/$1 | wc -l` - $backups_capacity))
if [ "$number_to_delete" -gt 0 ]; then
cd /root/websites_backup/$1
ls -t /root/websites_backup/$1 | tail -n $number_to_delete | xargs  -d '\n' rm - r
fi

Здесь мы проверяем, больше ли число для удаления, чем 0. Если да, мы идем в каталог резервных копий и начинаем удаление. Сначала мы перечисляем файлы с ls, упорядоченные по дате модификации. Затем мы передаем все команде tail для получения самых старых. После этого имена файлов из tail передаются команде xargs, которая берет имена файлов, разделенные символом «\n», и по очереди передает их команде rm для удаления.

Вот и все! Наш скрипт живет на удаленной машине и готов к запуску.

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

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

Мы сделаем это с помощью утилиты Plink. Это Putty для командной строки. Если на вашем компьютере не установлен Plink, просто перейдите сюда и загрузите:

Теперь нам нужно подключиться к нашей удаленной машине по SSH, используя закрытый ключ.

@echo OFF
powershell -Command "plink -ssh -i D:\Drive\Digital_Ocean_Droplet\id_rsa.ppk -noagent [email protected]"
powershell -Command "WinSCP.exe /console /script='D:\\Drive\\dinosaur_comics_generator V2\\prod_to_server.txt'"

Флаг -i позволяет нам вставить закрытый ключ, а -noagent запрещает использование графического интерфейса. Здесь мы подключаемся как пользователь root к серверу с IP-адресом 46.101.158.45.

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

@echo OFF
powershell -Command "plink -ssh -i D:\Drive\Digital_Ocean_Droplet\id_rsa.ppk -noagent [email protected] /root/scripts/make_website_backup.sh dinosaur_comics"
powershell -Command "WinSCP.exe /console /script='D:\\Drive\\dinosaur_comics_generator V2\\prod_to_server.txt'"

Наконец-то 🎆🎆🎆

У нас все готово, и теперь, когда вы хотите, чтобы ваш код попал в рабочую среду, вам просто нужно запустить npm run build_prod для сборки и npm run deploy для развертывания вашего кода!

Спасибо, что остались со мной до конца. Любые отзывы о статье приветствуются, если у вас есть какие-либо мысли или вы просто заметили ошибку в моей статье, просто не стесняйтесь обращаться ко мне.

Весь код с подробными пояснениями можно найти в этих репозиториях:

Пока! ❤️