Рука в руке, чтобы говорить о непрерывной интеграции небольших программ с Дженкинсом

Эта статья была впервые опубликована в моем блоге на github.GitHub.com/душа/блог…, Заинтересованные студенты могут нажать на звездочку, не теряйтесь~

Зачем нам непрерывная интеграция?

Рассмотрим следующие два сценария:

Сценарий 1. Когда вы разрабатываете новую функцию, коллега А просит вас проверить QR-код с помощью апплета, поэтому вы можете только:

git stash // 缓存本地修改
git checkout release // 切换到测试分支
yarn test // 打测试包
... // 预览、切回分支
git stash pop // 还原本地修改

Затем систематизируйте прерванные идеи кода, продолжайте кодировать и тайно жалуйтесь (срок действия QR-кода составляет 35 минут, и вы должны найти меня снова...)

Сценарий 2: Мини-программа приходит в день теста, а вы, которому довелось быть ответственным за разработку, отпросились сегодня, а это значит, что никто не может собраться для тестовых одноклассников, тем самым задерживая ход проекта .

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

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

Ограничения непрерывной интеграции мини-программы

В настоящее время инструменты разработчика Wechat поддерживают только среды Mac и Windows.Вы можете создать среду Jenkins на отдельном компьютере Mac mini для упаковки приложений и апплетов iOS.

Запас ранних знаний

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

Давайте сначала попробуем использовать инструмент командной строки для запуска и входа в инструмент разработчика WeChat:

Расположение инструментов командной строки:

macOS: /Contents/MacOS/cli

Windows: /cli.bat

Все следующие примеры работают на MacOS 10.13.5:

Если в приложении установлен разработчик WeChat, /Applications/wechatwebdevtools.app

Запустить инструменты разработчика WeChat

терминальное исполнение/Applications/wechatwebdevtools.app/Contents/MacOS/cli -o, результат следующий:

и запускаются инструменты разработчика:

lalpdgq9qca_-cvnadrnau4_334_474 png_620x10000q90g

PS: Если это недавно установленный инструмент разработчика в среде Mac, обязательно сначала откройте его и пройдите проверку безопасности.

Вход в инструменты разработчика WeChat

терминальное исполнение/Applications/wechatwebdevtools.app/Contents/MacOS/cli -l, результат следующий:

lalpdgq9qcbcguvnatxnar0_701_725 png_620x10000q90g

После сканирования QR-кода терминал печатаетlogin success, и инструменты разработчика в это время вошли в систему:

Попробуем предварительно просмотреть проект с помощью HTTP-сервиса:

После запуска и входа в инструмент разработчика нам нужно получить номер порта, на котором запущен инструмент (порт не фиксирован), а затем вызватьhttp сервисЧтобы просмотреть этот проект, выполните следующую команду, чтобы получить номер порта:

port=$(cat "/Users/pengyong/Library/Application Support/微信web开发者工具/Default/.ide")
echo "微信开发者工具运行在${port}端口"

Предположим, адрес моего проекта: /User/demo, инструмент разработчика открыт на порту 55228 и вводится в браузере.http://127.0.0.1:55228/preview?projectpath=/User/demo, вы можете просмотреть QR-код предварительного просмотра

Мы знаем, что разработчики могут указать инструменту запуститься, войти в систему, просмотреть и т. д. через командную строку или HTTP-запрос, поэтому давайте перейдем к делу: установите и разверните Jenkins.

Настроить Дженкинс

Jenkins зависит от среды Java для запуска. Введите java -version в терминал, чтобы убедиться, что вывод правильный. Например: версия java "1.8.0_151"

Как правило, есть два способа установить Jenkins на Mac:

официальный сайт Дженкинса (jenkins.io/), чтобы загрузить установочный пакет, вплоть до Далее.
Tomcat + War

Здесь я рекомендую второй метод установки, потому что первый метод будет генерировать общего пользователя Jenkins, а все последующие операции сборки основаны на пользователе Jenkins, чьи разрешения отличаются от разрешений системного пользователя, в который вы вошли в данный момент, в результате чего много проблем в процессе сборки.

Установить Томкэт

Официальный сайтЗагрузите установочный пакет Tomcat, который я скачалapache-tomcat-8.5.37.tar.gzЭта версия, переименованная вTomcat8И положи/Users/用户/Libraryв этом каталоге.
Добавьте путь к корзине Tomcat в переменные среды:

sudo vi ~/.bash_profile
export PATH=$JAVA_HOME/bin:$PATH:/Users/pengyong/Library/Tomcat8/bin
source ~/.bash_profile

Чтобы избежать проблем с разрешениями, назначьте разрешения для вашего Tomcat/bin/*.sh

sudo chmod 755 /Users/pengyong/Library/Tomcat8/bin/*.sh

Проверьте, занят ли порт 8080, используйте kill PID, чтобы освободить занятый

lsof -i:8080
kill PID

терминальный входstartup.sh, если отображается содержимое, показанное на рисунке ниже, запуск выполнен успешно

Доступ к браузеру HTTP: // localhost: 8080 /

Выключите Tomcat с помощьюshutdown.sh

На этом установка Tomcat в основном завершена, а затем установите Jenkins.

Установить Дженкинс

1.Официальный сайтЗагрузите военный пакет Jenkins и поместите его в каталог Tomcat/webapps.

Доступ через браузер http://localhost:8080/jenkins
При первом доступе вас попросят ввести пароль, вы можете получить пароль в соответствии с подсказкой пути.

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

Введите пароль и нажмите «Продолжить», чтобы перейти на страницу установки плагина.

Нажмите на рекомендуемую установку и дождитесь завершения установки.

После успешной установки войдите в пользовательский интерфейс Create Jenkins, заполните и нажмитеSave and Continue

После того, как пользователь создан, войдите в интерфейс URL-адреса конфигурации Jenkins, вы можете изменить его на ожидаемый адрес, а затем нажмитеSave and Finish

В этом интерфейсе поздравляем с успешной настройкой Jenkins, но нам все еще не хватает последнего шага: перезапустить Jenkins.

Доступ к браузеру http://localhost:8080/jenkins/restart (ваш адрес jenkins + перезагрузка), нажмите «Да», чтобы перезапустить

Возможно, что страница продолжает показывать загрузку.Вы можете попробовать посетить домашнюю страницу Jenkins напрямую.Если эта страница появляется, процесс установки Jenkins завершен, и вы можете создать задачу.

Установка подключаемого модуля: Администрирование системы — Управление подключаемыми модулями — Дополнительные подключаемые модули (доступны)

Параметр Git: может реализовать функцию выбора указанной ветки для сборки установщик описания: используется для создания QR-кода предварительного просмотра

Теперь, когда подготовка завершена, давайте приступим к созданию апплета.

сборка-конфигурация задачи

Мы создаем новую задачу с именем wechat и выбираем构建一个自由风格的软件项目, нажмите ОК, чтобы войти в интерфейс конфигурации

Общие параметры конфигурации参数化构建过程

build_typeАпплет для выбора версии для разработки, бета-версии или рабочей версии.

branchВетка, используемая для выбора сборки (если эта опция недоступна, проверьте, установлен ли плагин параметров Git)

upload_descа такжеupload_versionДва текстовых параметра используются для заполнения примечаний и версии апплета при сборке

Выберите Git для управления исходным кодом, заполните адрес хранилища, ветка по умолчанию здесь master и измените ее на ветку, которую мы выбрали при сборке (Примечание: локально сгенерированный id_rsa.pub добавляется к ssh-аутентификации хранилища git, иначе jenkins не сможет подключиться к git)

Построить выбрать выполнить оболочку

Скрипт выглядит следующим образом, который можно изменить по мере необходимости:

echo -------------------------------------------------------
echo GIT_BRANCH: ${GIT_BRANCH}
echo -------------------------------------------------------
# 执行项目构建
yarn install 
if [ "$build_type" == "dev" ]
  then
  yarn run test
else
  yarn run $build_type
fi
# 打开微信开发者工具
/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli -o
port=$(cat "/Users/pengyong/Library/Application Support/微信web开发者工具/Default/.ide")
echo "微信开发者工具运行在${port}端口"
return_code=$(curl -sL -w %{http_code} http://127.0.0.1:${port}/open)
if [ $return_code == 200 ]
  then
  echo "返回状态码200，devtool启动成功！"
else
  echo "返回状态码${return_code}，devtool启动失败"
  exit 1
fi
if [ "$build_type" == "dev" ]
  then
  echo "发布开发版！"
  # wget -o下载预览二维码，以build_id命名
  /usr/local/bin/wget -O $BUILD_ID.png http://127.0.0.1:${port}/preview?projectpath=/Users/pengyong/.jenkins/workspace/wechat
  echo "预览成功！请扫描二维码进入开发版！"
elif [ "$build_type" == 'prod' ] || [ "$build_type" == "test" ] || [ "$build_type" == "test:demo" ]
  then
  echo "准备上传！"
  # 上传到微信平台
  /Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli -u $upload_version@/Users/pengyong/.jenkins/workspace/wechat --upload-desc $upload_desc
  echo "上传成功！请到微信小程序后台设置体验版或提交审核！"
fi

Выберите Установить описание сборки для операции после сборки (если нет, проверьте, установлен ли плагин установки описания)

Тег img используется здесь для отображения построенного QR-кода (Примечание: номер порта — это порт, который запустил ваш jenkins, а имя задачи — это нашсборка задачиЗаполните имя этого шага, здесь мы wechat):

<img src="http://本机ip:端口/job/任务名称/ws/${BUILD_ID}.png" alt="非开发版请到后台预览" width="200" height="200" /> <a href="http://本机ip:端口/job/任务名称/ws/${BUILD_ID}.png" target="_blank">二维码${BUILD_ID}</a>

На данный момент наша конфигурация сборки задачи в основном завершена.

Сборка задачи — предварительный просмотр апплета

выберитеBuild with parameters, выберите тип, ветку и другие параметры, которые вы хотите построить, здесь мы выбираем версию разработки:

После завершения построения обнаруживается, что QR-код отображается в виде текста, а изображения не отображаются.

Решение состоит в том, чтобы перейти в «Системное администрирование» -> «Глобальная конфигурация безопасности» -> «Формат тегов» -> выбрать «Безопасный HTML».

В это время появится предварительный QR-код. Обратите внимание, что у QR-кода есть время истечения срока действия (35 минут).

На данный момент задача построения предварительного просмотра QR-кода завершена, мы пытаемся загрузить код на платформу WeChat.

Сборка задачи — загрузить код

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

Перейдите на операционную платформу или платформу разработки, чтобы просмотреть представленную версию.

дружеское напоминание

Инструменты разработчика должны быть предварительно просмотрен и загружены в зарегистрированном состоянии. Чтобы избежать конфликтов учетных записей, вы можете использовать специальную учетную запись WECHAT, чтобы войти на сервере Jenkins. Эта учетная запись должна позволять разрешениям разработчика и опыта, а также попытаться не Используйте учетную запись разработчика.
Не загружайте Jenkins напрямую с официального сайта для установки и запуска, там действительно много подводных камней.

Суммировать

В настоящее время выпуск апплета в основном зависит от ручной загрузки разработчиками, и все еще существует много проблем с непрерывной интеграцией апплета: инструменты разработчика не поддерживают среду Linux, а QR-код экспериментальной версии не может быть сгенерирован через командную строку. , так далее. Но направление непрерывной интеграции по-прежнему достойно того, чтобы все исследования, разработки и релизы расцвели...

Ссылаться на:

Интеграция программы WeChat Mini Дженкинс
Установка и использование Mac Jenkins