Цель этой статьи — задокументировать мои шаги по настройке автоматического деплоя React-приложения на сервер (VPS). Это не только поможет мне в будущем, если снова понадобится повторить процесс, но и, возможно, будет полезно кому-то, кто хочет пройти этот путь быстрее. Я расскажу, как настроить Jenkins — популярный инструмент для автоматизации задач, и Nginx, который будет направлять запросы к приложению, чтобы деплой можно было выполнять автоматически или одним нажатием.
Jenkins часто выбирают для автоматизации, потому что он облегчает работу разработчикам, позволяя настроить процесс так, чтобы всё происходило без их участия: код загружается, собирается, а приложение сразу становится доступным для пользователей. Это особенно удобно для частых обновлений, ведь вам не нужно вручную перезаливать файлы и настраивать каждый шаг. Настроив Jenkins один раз, вы сможете спокойно писать новый код, зная, что с каждым изменением всё обновится автоматически.
У нас есть проект на React, который хранится в репозитории на GitHub, выделенный VPS, и, возможно, уже купленный домен.
Что мы хотим достичь? Каждый раз, когда мы делаем push в основную ветку (main) нашего репозитория, проект должен автоматически попадать на наш VPS, собираться и разворачиваться по указанному API или доменному адресу.
Давайте начнем!
Шаг 1: Установка Jenkins на Ubuntu VPS
Для работы Jenkins требуется Java, так что начнем с её установки. Jenkins прекращает поддержку java11 поэтому если у вас уже установлена старая версия Java, удалите её:
sudo apt remove default-jdk
Далее установим openjdk-17-jdk:
sudo apt update
sudo apt install openjdk-17-jdk -y
Проверьте установленную версию:
java -version
Настройка времени
Для корректной работы Jenkins, установим часовой пояс и настроим синхронизацию времени:
1. Настройка часового пояса
timedatectl set-timezone Europe/Moscow
Эта команда устанавливает часовой пояс сервера на Europe/Moscow. Она помогает серверу правильно отображать локальное время, что особенно важно для корректной работы журналов (логов), расписаний задач и временных меток.
2. Установка и настройка службы синхронизации времени (Chrony)
sudo apt install chrony
chrony — это служба для синхронизации времени. Она работает с сервером точного времени (NTP-сервером) и автоматически корректирует время на вашем сервере, чтобы оно оставалось точным.
3. Включение автозапуска chrony
sudo systemctl enable chrony
Команда включает chrony так, чтобы служба запускалась автоматически при загрузке сервера. Это гарантирует, что время будет поддерживаться точным даже после перезагрузки.
Настройка брандмауэра
Откроем порт 8080, на котором работает Jenkins. Если у вас активен брандмауэр, выполните:
sudo ufw allow 8080
Теперь можно установить Jenkins. Добавьте его репозиторий и ключ:
echo "deb https://pkg.jenkins.io/debian-stable binary/" | sudo tee /etc/apt/sources.list.d/jenkins.list
curl -fsSL https://pkg.jenkins.io/debian-stable/jenkins.io.key | sudo apt-key add -
Установите Jenkins:
1. Обновление списка пакетов
sudo apt update
2. Установка Jenkins
sudo apt install jenkins -y
Команда устанавливает Jenkins. Флаг -y автоматически подтверждает установку, что ускоряет процесс, так как система не будет запрашивать подтверждение.
3. Запуск Jenkins
sudo systemctl start jenkins
Эта команда запускает Jenkins. После выполнения Jenkins начнет работать, и его интерфейс будет доступен по порту 8080 вашего сервера (например, http://<ваш_IP>:8080).
4. Включение автозапуска Jenkins
sudo systemctl enable jenkins
Команда добавляет Jenkins в автозапуск, чтобы он автоматически запускался при перезагрузке сервера. Это гарантирует, что Jenkins будет всегда доступен, даже если сервер перезагрузится.
Перейдите по адресу http://<ваш_сервер>:8080, чтобы открыть Jenkins. Первый пароль для входа можно найти в файле:
sudo cat /var/lib/jenkins/secrets/initialAdminPassword
Шаг 2: Настройка Jenkins для деплоя React-приложения
Подготовка Personal Access Token на GitHub
Чтобы Jenkins мог работать с вашим репозиторием на GitHub, потребуется создать Personal Access Token:
1. Войдите в свой GitHub, перейдите в Settings → Developer settings → Personal access tokens и нажмите Generate new token.
2. Установите права repo, чтобы Jenkins мог читать и записывать в репозиторий.
3. Скопируйте токен и сохраните его.
Добавление токена в Jenkins
1. В интерфейсе Jenkins перейдите в Manage Jenkins → Manage Credentials.
2. В Global Credentials выберите Add Credentials.
3. Установите Kind: Secret text, Secret: вставьте токен, ID: github-token.
Настройка Webhook в GitHub
Для того чтобы Jenkins автоматически запускал деплой при каждом пуше в репозиторий GitHub, нужно настроить вебхук (webhook) в GitHub, который будет отправлять уведомление Jenkins о каждом изменении.
1. Перейдите в настройки репозитория на GitHub:
Зайдите в свой репозиторий на GitHub.
Нажмите на Settings в верхнем меню.
В меню слева выберите Webhooks и нажмите Add webhook.
В поле Payload URL введите адрес вашего Jenkins с добавлением /github-webhook/, например: http://<ваш_IP_адрес>:8080/github-webhook/.
Убедитесь, что Jenkins доступен извне и адрес указан правильно.
В поле Content type выберите application/json.
Оставьте настройку по умолчанию — Just the push event, чтобы webhook срабатывал только при пуше в репозиторий.
Нажмите Add webhook для сохранения.
Потом при создании пайпдайна нужно будет установить галочку GitHub hook trigger for GITScm polling. Но об этом ниже)
Создание Pipeline для деплоя
После создания Pipeline в Jenkins, чтобы настроить автоматический запуск деплоя при каждом пуше в основную ветку (main), нужно включить триггер на изменения в репозитории.
1. Перейдите в настройки Pipeline.
2. В разделе Build Triggers поставьте галочку на GitHub hook trigger for GITScm polling.
Эта настройка позволит Jenkins реагировать на каждый пуш в ветку main и автоматически запускать процесс деплоя.
Теперь добавим скрипт для сборки и деплоя приложения:
pipeline {
agent any
stages {
stage('Clone') {
steps {
git branch: 'main', credentialsId: 'github-token', url: 'https://github.com/YourName/your-repo'
}
}
stage('Install dependencies') {
steps {
sh 'npm install'
}
}
stage('Build') {
steps {
sh 'npm run build'
}
}
stage('Deploy') {
steps {
sh 'sudo rm -rf /var/www/your-site/* && sudo cp -r build/* /var/www/your-site'
}
}
}
}
Чтобы разрешить Jenkins выполнять команды с sudo, откройте visudo и добавьте разрешение:
sudo visudo
jenkins ALL=(ALL) NOPASSWD: ALL
Шаг 3: Настройка Nginx для доступа к приложению
Настроим Nginx как прокси для работы с вашим приложением:
1. Установите Nginx:
sudo apt install nginx -y
2. Создайте новый конфигурационный файл:
sudo nano /etc/nginx/sites-available/your-site
Вставьте следующую конфигурацию:
server {
listen 80;
server_name <ваш_домен>;
location / {
proxy_pass http://localhost:3000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
3. Активируйте конфигурацию и перезагрузите Nginx:
sudo ln -s /etc/nginx/sites-available/your-site /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx
Готово! Теперь ваше React-приложение будет автоматически собираться и деплоиться на каждый коммит в GitHub. Nginx обеспечит доступ к приложению по вашему доменному имени, а Jenkins возьмет на себя все шаги деплоя.
Комментарии (3)
Dron_Ch
29.10.2024 10:49Спасибо за статью, будет здорово если в подобных статьях вы буде использовать тестовое приложение с открытого репозитория, чтобы каждый мог повторить все настройки и убедиться в их работоспособности. Подпишусь и надеюсь на продолжение!
vitaly_il1
29.10.2024 10:49Очень советую переходить на GitHub Actions - намного легче, т.к. не надо поднимать Jenkins.
MadridianFox
Спасибо за пост, всегда интересно как что-то устроено у других.
У вас как-то не показано как перезапускается процесс, который слушает порт 3000
Кроме того деплой через удаление папки и копирование её обратно вызывает перебои в работе сайта.