Как настроить расширенное автоматическое развертывание с помощью Travis CI

1656537491 kak nastroit rasshirennoe avtomaticheskoe razvertyvanie s pomoshhyu travis ci

автор Амир Офф

1*zuVag9ipdXYb-A4ojT_FxQ

Этот пост является продолжением моего предыдущего Расширенный рабочий процесс веб-разработки и развертывания учебник. В этом учебнике я показал, как автоматизировал свой рабочий процесс разработки и развертывания. С тех пор многое изменилось из-за быстрого развития веб-инструментов и технологий – и, конечно, из-за моей необходимости улучшить свой рабочий процесс как веб-разработчика.

Мой вариант использования

Я использую общий хостинг для своего веб-сайта личного портфолио, и большинство кода состоит из статических активов интерфейса:

1*29ynOaYNgPeFTqw6qAx1Lw
Структура файлов моего сайта

В прошлом мне приходилось запускать задачи Gulp.js, чтобы минимизировать, ублажать и обрабатывать весь исходный код. Он выводит его в папку пакета вместе с файлом index.html, готовым к развертыванию на моей службе хостинга через FTP.

Для автоматизации процесса я использовал DeployBot. Это служба, которая позволяет использовать существующие репозитории и развертывать их в нескольких местах, таких как FTP, SFTP, Amazon и т.д.

Для меня DeployBot недостаточно, так это то, что он работает только как туннель, который разворачивает мой репозиторий GitHub всякий раз, когда в хранилище вносятся изменения. Это означало, что мне понадобится загрузить мой пакетный код в отдельную ветвь – я назвал это «развертыванием» в моем случае – и он скачал все файлы из этой ветви на сервер хостинга через FTP.

Я счел это плохой практикой и временным комфортным решением. Мой код на GitHub должен быть «исходным» кодом, а не кучей минимизированных и плохих активов JavaScript и CSS и других обработанных файлов.

Решение

Чтобы устранить проблему с DeployBot, мне пришлось отказаться от нее для Travis CI – службы непрерывной интеграции и доставки, которая интегрируется с GitHub. Таким образом, я смог удалить ветвь «развертывания», которая была в моем хранилище, и позволил Travis CI выполнять всю работу по запуску задач Gulp.js за меня и дальше разворачивать ее на моем хостинг-сервере через FTP. Все, что мне нужно было сделать это нажать свой исходный код, а Тревис КИ сделает все остальное. Больше не нужно запускать задачу Gulp.js вручную, а затем проверять ветку развертывания и передавать ее вручную на Github.

В коде ниже я определяю файл сценария «.travis.yml», который необходим для запуска Travis CI:

// Setting environment language
language: node_js

// Using the lastest version of Node.js
node_js:
- node

// Script to install dependencies
before_script:
- npm install -g --silent

// The actual build script for Gulp.js
script:
- gulp build --prod

// Deploying to hosting server via FTP
after_script:
- gulp deploy --user $FTP_USER --password $FTP_PASSWORD
.travis.yml

💡 В строке 18 учетные данные FTP извлекаются из Travis CI

Это отличная функция, поскольку она позволяет мне устанавливать защищенные переменные среды, учетные данные для входа на FTP.$FTP_USER и «$FTP_PASSWORD» в этом случае. Эти переменные зашифрованы и встроены в «.travis.yml” файл сценария во время выполнения. Таким образом, я могу передать свой исходный код на GitHub, не открывая никаких конфиденциальных данных.

1*C9yaH-9TXV_a1JiIsXX0AA
Настройка переменных среды на странице настроек сборки Travis CI

Чтобы они работали, мне пришлось использовать пакет под названием винил-ftp. Это описано как,

Виниловый адаптер для FTP. Поддерживает параллельные передачи, условные передачи, буферизированные или потоковые файлы. Зачастую работает лучше, чем ваш любимый настольный FTP-клиент.

const ftp = require('vinyl-ftp');
const minimist = require('minimist');
const args = minimist(process.argv.slice(2));

gulp.task('deploy', () => {
    const remotePath="/amiroffme/";
    const conn = ftp.create({
        host: 'ftp.amiroff.me',
        user: args.user,
        password: args.password
    });
    console.log('FTP connection successful!');
    gulp.src('build/**/*.*')
        .pipe(conn.dest(remotePath));
});
gulpfile.js

💡 В строках 9 и 10 задачи развертывания анализируют пользователя и пароль из параметров аргументов, которые запускает сценарий Travis CI:

$ gulp deploy --user $FTP_USER --password $FTP_PASSWORD

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

В дополнение к установке двух предыдущих пакетов npm мне пришлось переработать свой файл задач Gulp.js, чтобы позволить мне запустить сборку для разработки, чтобы я мог работать над кодом локально. Непрерывное производственное развертывание — это прекрасно, но я все равно хотел иметь возможность запускать свой код локально и иметь реальную разработку с фактической сборкой для разработки. 😊

// Main build task
gulp.task('build', ['html', 'images', 'sass', 'js', (args.prod ? 'production' : 'development')], () => {
    // Print build info
    console.log(packageFile.name + ' "' + packageFile.description + '" v' + packageFile.version);
});

// Runs only for production build
gulp.task('production', () => {
    console.log('This is a production build');
    console.log('Please run the following script for deployment:');
    console.log('gulp deploy --user $FTP_USER --password $FTP_PASSWORD');
});

// Runs only for development build
gulp.task('development', () => {
    browsersync(browserSyncConfig);
    console.log('This is a development build');
    console.log('File changes will be watched and trigger a page reload');
    gulp.watch(html.watch, ['html', browsersync.reload]);
    gulp.watch(images.src, ['images', browsersync.reload]);
    gulp.watch(css.watch, ['sass', browsersync.reload]);
    gulp.watch(js.src, ['js', browsersync.reload]);
});
gulpfile.js

💡 В строке 2 я проверяю аргументы сборника, а затем запускаю задание сборки соответственно.

Если задача выявляетпрод” аргумент, как в сценарии сборника Travis CI:

$ gulp build --prod

оно пропускает развитие задача, предназначенная для местного развития, создает и запускает производство задача вместо этого.

Выполнение сборки безпрод” аргумент инициирует развитие Задача, которая наблюдает за изменениями файлов и перезагружает страницу, очень похожа на любую среду разработки.

$ gulp build

Вывод

Больше не нужно переключаться между ветвями и копировать вручную и отправлять объединенные ресурсы на GitHub. Я могу просто работать локально и нажимать на GitHub, а Тревис CI позаботится о другом.

1*G5EkaZP-_t63dNFyzjZNeg
Мой журнал истории сборников Travis CI

Надеюсь, вам понравилось читать! пожалуста следоватьи поделитесь для более технических вещей 🤖💖

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *