iDeploy

Если вы считаете, что наш проект заслуживает доверия, пожалуйста, перейдите на наш github и поставьте нам «звездочку». Спасибо!

• 1. Введение
• 2. Технологический стек проекта
• 3. Быстрый старт
• 4. Развёртывание первого проекта
• 5. Поддержка нескольких языков
• 6. Написание плагинов для поддержки расширенных функций

Введение

iDeploy — это платформа для непрерывной доставки, разработанная для команд фронтенда. Мы учитываем потребности команд в построении, доставке и других повседневных задачах и предлагаем множество уникальных и простых в использовании функций, которые экономят время и усилия команд на координацию построения и копирования, а также значительно повышают эффективность разработки команд. По мере совершенствования функций мы считаем, что эта система может помочь многим растущим фронтенд-командам (конечно, система также поддерживает развёртывание проектов на java, php и т. д., и с помощью плагинов можно также поддерживать развёртывание go и многих других языков) быстро создавать, быстро развёртывать и уверенно выпускать.

Технологический стек

1. Язык разработки: nodejs

2. База данных: mysql

3. Серверная структура: thinkjs

4. Фронтенд-фреймворк: react

5. Фронтенд UI-фреймворк: ant.design

Быстрый старт (поддерживает только Linux)

1. git clone xxxxx.git код на локальный компьютер.
2. Установите зависимости nodejs: запустите npm install в корневом каталоге.
3. Установите ansible (используется для выполнения команд развёртывания).
4. Установите базу данных mysql, здесь не будем вдаваться в подробности, обратитесь к документации mysql.
5. Создайте новую базу данных (например, fe_build), и предоставьте достаточно прав доступа, см. документацию mysql.
6. Настройте базу данных:

   Откройте src/common/config/db.js, введите соответственно адрес базы данных, имя базы данных, имя пользователя и пароль, как показано ниже:

export default { type: 'mysql', log_sql: true, log_connect: true, adapter: { mysql: { host: '127.0.0.1', port: '', database: 'wdfe_publish', user: 'root', password: '', prefix: '', encoding: 'utf8' }, } }

7. Конфигурация прав доступа к коду, уведомлениям по электронной почте и т.д.:

   Поскольку системе развёртывания необходимо извлекать код из репозитория кода (svn, git), сначала необходимо настроить учётные данные svn.

   Откройте src/common/config/config.js и введите соответствующие конфигурации, например:

   
   export default {
   cvsUser: 'myuser',//имя пользователя svn
   cvsPass: 'mypass',//пароль svn
   emailHost: 'smtp.qq.com',//адрес электронной почты, здесь используется qq в качестве примера
   emailport: 465,//порт
   emailUser: '3333@qq.com',//номер электронной почты
   emailPass: 'xxxxx',//код авторизации (конкретные шаги: войдите в mail.qq.com->настройки->учётная запись->POP3/IMAP/SMTP/Exchange/CardDAV/CalDAV сервис->сгенерировать код авторизации для получения)
   cvsDir: '/temp',//каталог временного сохранения кода svn
   port: 80 //порт сервера, то есть порт веб-службы платформы развёртывания
   }

   Если это проект git, убедитесь, что машина развёртывания имеет прямой доступ к git.

8. Скомпилируйте код и запустите его: Введите следующую команду для компиляции:

npm run build После завершения компиляции выполните следующую команду, чтобы запустить её:

npm run start

Также можно использовать forever или pm2 для управления службой, в качестве примера возьмём forever:

npm install -g forever

./start.sh
./stop.sh

9. Импортируйте скрипт базы данных и создайте базовую структуру таблицы базы данных Этот шаг в основном предназначен для создания необходимых таблиц базы данных для работы системы. Чтобы упростить использование, проект предоставляет веб-программу для создания структуры таблицы, просто введите: http://localhost/install Появится следующий интерфейс, нажмите «подтвердить импорт таблицы базы данных» для генерации базы данных.

   

   Также можно напрямую импортировать файл структуры таблицы mysql в базу данных, файл таблицы базы данных находится в db/db.sql

Развёртывание первого проекта

1. Зарегистрируйтесь в системе При первом входе в систему вы сразу же перейдёте на страницу входа, если вы ещё не зарегистрировались, вы можете нажать кнопку регистрации внизу, чтобы заполнить имя пользователя и пароль для регистрации. Если вы уже зарегистрированы, вы можете войти в систему.

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

   

   Заполните соответственно название проекта, тип репозитория кода, язык проекта, адрес репозитория кода, параметры hook для построения и развёртывания, и параметры hook можно оставить пустыми (эта часть будет подробно описана в разделе расширенного использования).

3. Заполните целевую информацию о машине, заполните информацию о проекте и нажмите на список проектов в меню слева, чтобы перейти на страницу списка проектов. Нажмите на только что созданный проект, чтобы перейти на главную страницу проекта:

Нажмите на страницу списка машин, чтобы перейти к странице списка машин. Нажмите «новая машина» в правом верхнем углу, чтобы перейти на страницу новой машины, страница выглядит следующим образом:

Имя машины: вы можете выбрать любое имя машины, например, test1 Тип среды: разделяется на тестирование, предварительное развёртывание, официальное развёртывание, просто выберите один. Команда построения проекта: команда, выполняемая при построении, например npm run build test1, которая выполняется в каталоге проекта (также можно выбрать пользовательскую команду построения при развёртывании). Адрес машины: адрес целевой машины развёртывания, то есть IP-адрес машины, на которую должен быть развёрнут этот проект. Исходный каталог развёртывания: каталог, который необходимо развернуть на целевой машине, несколько каталогов могут быть разделены ';'. Целевой каталог развёртывания: исходный каталог развёртывания должен быть развёрнут в соответствующий каталог целевой машины, несколько каталогов можно разделить ';'. Hook развёртывания: (пользовательский hook, подробности будут описаны в разделе расширенного использования) Параметры hook: (параметры пользовательского hook, подробности будут описаны в разделе расширенного использования) Перевод текста на русский язык:

Развёртывание команд выполнения в каталоге: если при развёртывании требуется выполнить команду на целевой машине, необходимо указать каталог выполнения команды.

Выполнение команды перед развёртыванием: если перед развёртыванием требуется выполнить команду на целевой машине, то необходимо указать эту команду. Она будет выполнена в начале развёртывания в каталоге выполнения команд для развёртывания.

Выполнение команды после завершения развёртывания: если после развёртывания требуется выполнить команду на целевой машине, необходимо её указать. Эта команда будет выполнена после завершения процесса развёртывания в указанном каталоге.

Пользователь SSH: конечное развёртывание выполняется с помощью команды rsync. Необходимо указать имя пользователя SSH.

Пароль SSH: если требуется пароль SSH, укажите его.

4. Создание развёртывания

После заполнения всех полей можно приступать к развёртыванию. Для этого перейдите в меню «Список проектов» и нажмите «Проект», чтобы перейти на главную страницу проекта.

Сначала нажмите «Начать извлечение», чтобы загрузить код из репозитория кода на платформу развёртывания. Платформа развёртывания выполняет следующие действия:

• Развёртывает код из репозитория кода в платформу развёртывания на целевую машину.
• Если есть предыдущее развёртывание, извлекает тег предыдущего развёртывания и сравнивает его с текущим. Затем перечисляет новые файлы, изменённые файлы и файлы без изменений. Также отображает историю фиксации от предыдущей официальной среды до текущего развёртывания. Это показано на рисунке ниже:

Жёлтое имя пользователя на кнопке показывает, кто и сколько раз фиксировал изменения с момента последнего развёртывания. При нажатии на кнопку отображается история фиксации этого участника с момента последнего развёртывания до текущего. Это показано на следующем рисунке:

При нажатии на правый синий значок «Просмотр» рядом с файлом отображается конкретная модификация файла в текущей фиксации (зелёный цвет обозначает версию после фиксации, красный — версию до фиксации). На следующем рисунке показано, как это выглядит:

Кроме отображения истории фиксации каждого участника и предоставления возможности просмотра каждой модификации, система также предоставляет обзор изменений файлов между последней официальной средой и текущим развёртыванием. Он включает в себя новые, изменённые и неизменённые вкладки для отображения состояния файлов (число в правом верхнем углу вкладки указывает количество новых, изменённых или неизменённых файлов). Список файлов внизу содержит конкретные файлы. Для изменённых файлов нажмите «Просмотреть разницу», чтобы увидеть, где именно были изменены файлы, как показано на следующем рисунке:

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

Теперь можно начать сборку и упаковку проекта. Вы можете выбрать конкретную машину для развёртывания сборки, выполнив команду сборки, указанную при заполнении поля машины развёртывания, или использовать пользовательскую команду сборки (выполняется непосредственно в указанном каталоге). Если это проект JavaScript, рекомендуется сначала выбрать, обновлять ли node_modules при первой сборке, а затем не выбирать этот параметр для последующих сборок, чтобы сократить время установки npm. Интерфейс показан на следующем рисунке:

Нажмите «Собрать», чтобы выполнить сборку. Результаты сборки можно просмотреть в журнале фоновых событий. Проверьте журнал, чтобы убедиться, что сборка прошла успешно, как показано ниже:

Сборка завершена. Можно также просмотреть результаты сборки с помощью кнопок на странице сборки, как показано на следующих двух рисунках:

После завершения сборки кнопка развёртывания внизу станет серой. Теперь нужно заполнить поля описания и причины развёртывания. Нажмите «Развернуть», чтобы завершить развёртывание (стоит отметить, что можно развернуть несколько машин одновременно). Это показано на следующем рисунке:

После развёртывания появится окно с запросом, хотите ли вы заблокировать машину развёртывания. Если вы решите заблокировать, только человек, который развернул проект, сможет развернуть его снова. Также можно отслеживать процесс развёртывания в реальном времени через журнал фоновых событий. Если развёртывается официальный проект, система автоматически помечает проект и сохраняет его. На этом первое развёртывание проекта завершено. Чтобы развернуть другие проекты или машины, следуйте правилам добавления проектов и машин.

Поддержка многоязычных развёртываний:

Этот проект изначально был разработан для развёртывания фронтенда, но с развитием системы мы также поддерживаем развёртывание других языков, таких как Java-проекты. Давайте рассмотрим, как развернуть Java-проект, управляемый Maven (я случайно выбрал Java-веб-проект и разветвил его: https://github.com/luyongfugx/maventest.git).

1. Сначала убедитесь, что машина развёртывания имеет установленную JDK (Java Runtime Environment), а целевая машина имеет установленный Tomcat.
2. При создании нового проекта выберите язык программирования Java (при нажатии кнопки «Собрать» фактически выполняется команда src/common/service/impl/build_java.sh 'команда выполнения каталога' 'mvn package 命令行' 'проект id' 'npm install').
3. При добавлении машины укажите команду сборки mvn package (Maven compile command). Перед развёртыванием необходимо удалить код сервера, который можно настроить для удаления при развёртывании. После развёртывания необходимо перезапустить сервер, например, для этого проекта мы указываем следующую информацию:

Это встроенные скрипты Java, которые мы создали. Если вы хотите добавить поддержку других языков, вы также можете расширить программу. Например, давайте добавим поддержку языка Go. Во-первых, откройте файл frontend/component/project_detail_component/do_build.jsx и добавьте поддержку языка Go при создании новых проектов. Код выглядит следующим образом:

this.state={
getItemList:'',
selectedRows:'',
codeLangArray:['javascript','java','go'],//добавляем поддержку go.
selectedMacRowKeys :''
}

После сохранения и повторного запуска проекта язык будет включать опцию Go. Введите название вашего проекта и адрес репозитория (этот пример представляет собой очень простой HTTP-сервер, который необходимо скомпилировать и загрузить локально, а затем перезапустить). Затем перейдите в каталог src/common/service/ipml и создайте файл build_go.sh. Когда вы нажимаете кнопку «Собрать», этот файл будет выполнен, и ему будут переданы четыре параметра: «команда выполнения каталога», «выполняемая команда», «идентификатор проекта» и «npm install». В соответствии с этими параметрами мы можем выполнить команду компиляции. Ниже приведён пример файла build_go.sh:

#!/bin/bash
projectPath=$1
cd $projectPath
echo 'начало сборки'
$2

Далее нам нужно указать команду сборки и команду перезапуска при добавлении машины. Пример следующий:

После добавления мы можем следовать предыдущему процессу сборки и развёртывания для развёртывания проекта. Завершив развёртывание, введите http://localhost:4000/string в браузере, чтобы проверить успешность развёртывания. Хук делится на два вида: build hook и deploy hook.

Build hook, как следует из названия, это хук, который вызывается при сборке какого-либо проекта. Он делится на хук до сборки и хук после сборки. Поскольку проект использует thinkjs для разработки, мы определяем класс хука как класс сервиса thinkjs. В качестве примера мы создаём файл с именем build_nodejs_plugin.js со следующим содержимым:

'use strict';
class BuildPlugin extends think.service.base {
  init(...args) {
    super.init(...args);
  }
  async before(params){
    console.log('before build hook :',params);
    return params;
  }
  async  after(params){
    console.log('afterProject build hook :',params);
    return params;
  }
}
export default new BuildPlugin();

Метод before вызывается перед сборкой проекта, а метод after — после сборки проекта. Параметр params представляет собой передаваемый аргумент, который в основном содержит некоторую информацию о проекте и процессе сборки, например:

{
  id: 17,
  name: 'ssr',
  creater: 'waynelu',
  vcs_type: 1,
  code_url: 'https://github.com/luyongfugx/vue-ssr-hmr-template.git',
  build_type: 0,
  online_tag: '2017022700004',
  last_tag: '2017022700004',
  pub_time: '2017-02-24 10:14:30',
  status: '1',
  op_item_id: 0,
  op_item_name: '0',
  code_lang: 'javascript',
  hook_params: 'port:8081',
  deploy_hook: 'deploy_nodejs_plugin',
  build_hook: 'build_nodejs_plugin',
  task: 'build ',
  pro_id: 17,
  pro_name: 'ssr',
  sessionUser: { id: 1, name: 'luyongfu', pass: '111111', avatar: 'avatar' },
  shellParams:
   { build_shell: './src/common/service/impl/build_javascript.sh',
     buildDir: './temp/luyongfu/17',
     task: 'build ',
     isNpmInstall: '1' },
  buildDir: './temp/luyongfu/17' }

Этот файл помещается в каталог src/common/service, затем в информации о проекте добавляется build hook со значением build_nodejs_plugin, чтобы методы before и after вызывались соответственно до и после сборки. Если вы хотите добавить параметры, можно указать их в параметрах хука, которые будут переданы методам before и after.

Deploy hook — это хук, вызываемый до и после развёртывания. Он также делится на общий хук перед развёртыванием проекта и хук перед и после развёртывания на конкретной машине. Мы также создадим deployHook и новый файл deploy_nodejs1_plugin.js:

'use strict';
class  DeployPlugin1 extends think.service.base {
      init(...args) {
          super.init(...args);
      }
      async beforeProject(params){
        console.log('beforeProject hook1 :',params);
        return params;
      }
      async  afterProject(params){
        console.log('afterProject hook1 :',params);
        return params;
      }
      async beforeMachine(params,projectHookParams){
        console.log('beforeMachine hook1 :',params,projectHookParams);
        return params;
      }
      async afterMachine(params,projectHookParams){
        console.id('afterMachine hook1 :',params,projectHookParams);
        return params;
      }
}
export default new DeployPlugin1();

Мы также помещаем этот файл в каталог src/common/service. При развёртывании сначала вызывается метод beforeProject, затем перед каждой машиной вызываются методы beforeMachine и afterMachine, и, наконец, вызывается afterMachine. В основной информации о проекте мы указываем deploy hook как deploy_nodejs1_plugin. Если требуется специальный хук для каждой машины, он указывается в основной информации об этой машине, и при развёртывании этой машины будет выполняться только хук beforeMachine и afterMachine, а хук из основной информации о проекте выполняться не будет.

Если вам понравился наш проект, вы можете поставить нам звезду. Наш GitHub: github.