Разработчики программ рано или поздно сталкиваются с задачей автоматического развертывания проектов на удаленном ресурсе. Причем часто пользуются облачными серверами из-за простоты их аренды и удобства масштабирования аппаратных ресурсов, включая дисковое пространство. В этом материале рассмотрим один из вариантов деплоя React-приложений. В качестве примера также рассмотрим альтернативу с архивом.
Подготовка к работе
Нам понадобится собственный gitlab-хостинг с доступом для разработчиков как для пользователей (без защищенного канала SSH), проект на React с регулярным обновлением, поддержкой FTP и хостинг для домена на Timeweb Cloud. Еще потребуется платформа node.js и скомпилированный проект на рабочем компьютере. Решим следующую задачу – реагировать на изменение в репозитории, и:
- Компилировать исходный код React за счет функционала node.js.
- Очищать хостинг от старой информации.
- Копировать туда только что скомпилированные данные.
Git Hooks
Проверяем git-хуки терминальной командой git help hooks. Сразу отметим, что их делят на клиентские и серверные. Первые исполняются на компьютере пользователя, а вторые на хосте. Клиентские размещены по адресу .git/hooks. Чтобы любой из них стал функционировать, необходимо удалить .sample. В нашем случае для организации автообновления репозитория будет работать pre-push, срабатывающий перед запуском копирования информации на удаленный хост.
В gitlab серверные хуки называют WebHooks. Их используют, например, когда поступает какой-то запрос вроде обновления репозитория и его отправляют по заданному HTTP-адресу. Такой подход упрощает отслеживание событий, происходящих внутри проекта, позволяет своевременно и полноценно обрабатывать их при деплое приложений.
Деплой проекта на веб-хостинг
Функционал web-хостинга позволяет реализовать следующее:
- Стартовать хук pre-push, активирующий обработку проекта React, он создаст репозиторий и следом скопирует готовое решение на gitlab, где предполагается его хранение в скомпилированном виде.
- Настроить WebHook, вызывающий с хостинга скрипт, предназначенный для создания копии репозитория в указанное пользователем место (итогом станет обновление веб-портала).
Подключение к репозиторию организуем при помощи логина и пароля. Ниже будет использован этот способ аутентификации как базовый. Перейдем к созданию репозитория для проекта React после обработки. С этой целью в каталоге с исходниками сгенерируем файл build.bash, после этого разместим в нем:
Приведенный перечень команд позволит перейти в каталог проекта React, запустить компиляцию, а затем вернуться в папку билда и создать локальный репозиторий. В итоге происходит копирование билда на удаленный хост с принудительной перезаписью информации в репозитории.
Теперь зайдет в каталог с хуками (.git/hooks) и там создадим pre-push, а в него включим содержание:
Отметим, что символ & в команде nohup нужен для скрытия вывода терминала. В нашем случае не работает контроль версий, соответственно, при перезаписи репозитория будут стерты все ранее внесенные и потом удаленные комментарии. Созданный репозиторий работает в качестве «точки реагирования», необходимой для итоговой стадии деплоя реакт-приложений. Завершим процедуру преобразованием обоих файлов в исполняемые:
Теперь при формировании WebHook для проекта на gitlab зададим URL-скрипт, секретный токен, идентифицирующий источник, пометим push. И напишем PHP-скрипт, размещенный в корневой папке веб-хостинга. Назовем его _deploy-client.php и включим в него код:
Вариант с архивом
Суть технологии заключается в замене репозитория с билдом на архив. Все, что от вас требуется, это исправить содержимое файла build.bash:
Обратите внимание, что в нашем примере мы указали формат создаваемого архива ZIP. Еще нужно немного изменить скрипт деплоя на веб-хостинге:
Отметим, что деплой React-приложения при использовании хука post-commit возможен без git-сервера.
Деплой React-приложений на VPS
Как и в случае с хостингом, нам понадобится готовый проект React, который мы и будет деплоить на виртуальную машину. Например, в локальной среде создадим новое приложение:
Команда запускает пакет Node без загрузки на компьютер. Скрипт create-react-app инсталлирует все необходимые зависимости и создает проект в каталоге react-deploy. На выполнение этой процедуры уйдет несколько минут. Результат система отобразит на экране:
После создания проекта его нужно преобразовать в производственную сборку. Поможет на в этом команда:
Ее действие заключается в компиляции JavaScript и активов в build каталог. В нем будут лежать скомпилированные и минимизированные версии всех файлов, входящих в проект. Этого достаточно для последующих действий.
Определим размещение файлов на сервере Ubuntu
Под наш эксперимент проще арендовать готовую виртуальную машину VPS с предустановленной операционкой Ubuntu. На нем понадобится установить веб-сервер Nginx и вручную указать, где надо хранить файлы развертываемого проекта. Сначала определим, какой каталог используется в качестве корневого «по умолчанию». Для этого подключимся к удаленному хосту по защищенному каналу SSH:
Там по пути /etc/nginx/sites-enabled найдем конфигурационный файл веб-сервера и просмотрим его содержимое:
При отсутствии подключенного SSL-сертификата увидим примерно такой вывод:
Нас интересует строка, где присутствует название текущего аккаунта – root. Именно по тому пути и будут располагаться файлы проекта после развертывания.
Загрузим сборку при помощи scp
Наиболее безопасным способом переноса файлов проекта на виртуальную машину VPS считается команда scp. При наличии настроенного ключа SSH, она будет использовать его по умолчанию. В противном случае система предложит ввести логин и пароль. Скопируем все файлы при помощи знака *:
Команда во время выполнения задачи выводит на экран название скопированных файлов, процент завершения операции, скорость передачи. Пример:
Наш тестовый проект состоит из статических файлов, поэтому на сервере не требуется установка и настройка какого-либо компилятора. Все будет работать за счет функционала обычного браузера. Откроем используемый и введем IP-адрес сервера или его доменное имя, если оно подключено. В результате должны увидеть результат выполнения приложения.
Выводы
По итогу перечисленных выше операций мы получили функционал авторазвертывания React-проектов на заданном в настройках сайте. Опробуйте технологию на мощностях провайдера Timeweb Cloud, отдельно от своих рабочих хостов. Важно учитывать, что компиляцию мы проводим на компьютере разработчика.
Кстати, в своем официальном канале Timeweb Cloud собрали комьюнити из специалистов, которые говорят про IT-тренды, делятся полезными инструкциями и даже приглашают к себе работать.
