Автоматизация деплоя React-приложения на VPS с помощью Jenkins и Nginx: Пошаговое руководство

Цель этой статьи — задокументировать мои шаги по настройке автоматического деплоя 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 возьмет на себя все шаги деплоя.