Авторизация

Для создания процесса CI/CD интеграции и организации автоматической сборки приложения или сайта на своем сервере, прежде всего, следует спланировать структуру файлов в директории сайта.

Структура проекта сайта

Если сайт это просто страницы и фронт части не нужен бэкенд, то задача немного упрощается и файлы сайта будут заливаться в корень директории, где apache по умолчанию будет искать index.html и загружать его с подключенным бандлом сайта.

Однако же если сайту необходима связь со своим nodejs сервером (в проекте есть файл server.js и подобные), то файлы лучше распределить по разным директориям и не сваливать все в кучу, чтобы не получить путаницу с новыми папками при дальнейшем развитии проекта. Лучше всего создать папки

client/
server/

где в client будут находиться файлы фронтенд части, а в server соответственно бэкенд. При этом, создавать их нужно от имени того FTP пользователя, который при интеграции сайта будет служить для загрузки файлов из Jenkins.

Но apache сервер ищет index.html в корне директории сайта, а не в client/. Чтобы это исправить в файле apache2.conf ( или httpd.conf в зависимости от ОС и системы управления сервера, для Vestacp это [user]/conf/web/[site.apache2.conf] ) нужно найти секцию настроек виртуального хоста вашего сайта и в DocumentRoot дописать

/client/build

"build" - это папка, в которую собирается бандл сайта, она может быть и другой (напр. dist). Затем перезапуск, чтобы применить изменения:

/etc/init.d/apache2 restart

Установка Jenkins

Затем нужно установить Jenkins, как это сделать описано здесь.

Настройка Jenkins

Сначала нужно установить плагин Publish Over FTP, в панели Jenkins переходим в Настроить Jenkins -> Управление плагинами, на вкладке Доступные вводим over ftp в поиск и устанавливаем плагин без перезагрузки Jenkins.

Затем переходим в Настроить Jenkins ->Конфигурация системы, долго скроллим до раздела Publish over FTP и добавляем данные FTP подключения для директории своего сайта, при этом нужно запомнить введённое название подключения, оно будет использовано далее (здесь отмечу его как <ftp_connection_name>).

После этого переходим на главную страницу Jenkins и жмем Создать Item, вводим Имя и выбираем Pipeline в списке конфигураций нового проекта.

Откроются настройки нового проекта интеграции, где указываем:

Ставим галочку GitHub project
В Project url указываем путь к проекту на GitHub без .git в конце (ex. https://github.com/[user]/[project]/)
В разделе Build Triggers ставим галочку GitHub hook trigger for GITScm polling
В Pipeline выбираем Pipeline script from SCM, SCM выбираем Git, в Repository URL указываем путь к проекту на GitHub с .git в конце, в Branches to build указываем нужную ветку из которой будет происходить сборка и в Script Path названия файла-конфигурации Jenkins (можно оставить Jenkinsfile)
Жмем Сохранить

Создание Jenkinsfile

Далее создадим файл Jenkinsfile в корне проекта с минимальными настройками:

pipeline {
    agent {
        docker {
            image 'node:lts-buster-slim' 
            args '-p 3000:3000'         }
    }
    stages {
        stage('install') {             
          steps {
            dir('client') {             
                sh 'npm install'
            }
            dir('server') {             
                sh 'npm install'
            }
          }
        }
        stage('Build') {             
          steps {
            sh 'npm run build'
          }
        }
    }
}

с такими настройками уже можно протестировать сборку проекта, но пока билд не будет загружаться по FTP на сервер.
(! Выполнение команд настройте в зависимости от раздела "scripts" в файле package.json и структуры папок.)

Для FTP загрузки сайта в этот файл нужно добавить еще один stage:

         stage('Upload') {
             steps {
                ftpPublisher alwaysPublishFromMaster: false, 
                    continueOnError: false, 
                    failOnError: false,
                    masterNodeName: '',
                    paramPublish: null,
                    publishers: [[configName: '[<ftp_connection_name>]', 
                                    transfers: [[
                                        asciiMode: false, 
                                        cleanRemote: false,
                                        excludes: '',
                                        flatten: false,
                                        makeEmptyDirs: false,
                                        noDefaultExcludes: false,
                                        patternSeparator: '[, ]+',
                                        remoteDirectory: '',
                                        remoteDirectorySDF: false,
                                        removePrefix: '',
                                        sourceFiles: '**/*'
                                    ]], 
                                    usePromotionTimestamp: false, 
                                    useWorkspaceInPromotion: false, 
                                    verbose: false
                                ]]
            }
        }

где <ftp_connection_name> - это название созданного ранее FTP подключения в настройках Jenkins

и пушим этот файл в корень git репозитория (можно сделать это после настройки GitHub чтобы сразу инициировать сборку сайта)

Настройка GitHub

В заключении идем на сайт Github, открываем свой репозиторий и переходим в настройки -> Settings -> Webhooks и добавляем URL

http://[jenkins_ip]:[jenkins_port]/github-webhook/

Content type ставим application/json и жмем Add webhook

Проверка

В завершении проверим как всё работает, для этого, либо в панели Jenkins жмем кнопку Собрать сейчас в задаче, либо пушим что-то в репозиторий проекта. Далее в панели Jenkins переходим в появившееся задание сборки и заходим в Console Output, чтобы просмотреть результат, он должен быть "SUCCESS"

Рейтинг:

IT Статьи

Рассылка

Подпишитесь на рассылку и будьте в курсе наших новостей!

РегХост

Авторизация

Новости компании

Отзывы

CI/CD интеграция сайта из GitHub по FTP