Создание, создание и развертывание ионного приложения с использованием Azure DevOps и App Center

В настоящее время существует высокий рыночный спрос на создание мобильных решений для удовлетворения потребностей клиентов, а для этих структур и инструментов, таких как Ionic, React Native и Flutter, предоставляют хорошие решения и средства для создания и развертывания наших приложений, добавляя магазины, такие как Play Store и App Store (не так просто), который предлагает нам хорошие платформы и API, чтобы упростить работу, тестирование и мониторинг. Однако, если вы работаете или управляете большими командами, а ваше приложение выполняет много сборки и развертывания, использование только этих подходов может быть не эффективным и довольно проблематичным. Имея это в виду, моя цель в этой статье состоит в том, чтобы продемонстрировать полное создание конвейеров CI/CD для тестирования, создания и развертывания ионного гибридного приложения с использованием Azure Tipvines, Github и Visual Studio App Center, которые могут распространять APK для игры в магазин.

Подготовка и необходимая настройка

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

ПРИМЕЧАНИЕ: я использую изображение Docker, созданное Beevelov, и вас можно найти Здесь , это упростит нашу настройку, потому что изображение уже содержит эссенционные инструменты, такие как Nodejs, инструменты сборки Android, Cordova, Gradle и т. Д., Но в этом случае не требуется, если вы этого не хотите.

Инструменты

• Последняя версия узел
• Ionic CLI, вы можете установить запуск # npm install -g @Ionic/CLI
• Cordova Для создания приложения для платформы Android (генерация APK) вы можете установить с помощью этой команды # npm install -g cordova
• Android Studio, которую можно скачать Здесь

Если вы не хотите устанавливать полную Android Studio, вы можете просто загрузить Инструменты командной строки который можно найти на той же странице загрузки Android Studio и настройки в пути, см. Пример Анкет

• Gradle, который может быть установлен после этих шаги .

Этот инструмент нуждается в JDK или JRE, а также установлена вся необходимая информация в официальной документации, я действительно рекомендую использовать изображение Docker, которое можно найти Здесь Анкет С другой стороны, вам нужна настройка в пути, см. Пример Анкет

• А Текстовый редактор Я использовал Visual Studio Code , который можно скачать здесь

ПРИМЕЧАНИЕ. Эти инструменты, такие как Cordova, Android Studio, Android SDK Tools и Gradle, необязательны для проведения локальных тестов, в основном все эти инструменты доступны для размещенных агентов Microsoft, которые мы собираемся использовать.

учетные записи

• Учетная запись GitHub Для поддержания нашего репо, вы можете создать здесь
• Azure DevOps Account и организация Создано, можно найти больше информации Здесь > Примечание. Также возможно использовать учетную запись GitHub для входа в систему на Azure DevOps.
• Визуальная учетная запись App Center для развертывания приложения и включения дистрибуции в магазин Play Store, вы можете создать здесь

Создание ионного проекта

Сначала давайте создадим приложение, используя Ionic CLI Чтобы запустить простое приложение с вкладок, так что выполните Ionic START SAMPLEAPP TABS-ANGULAR-CORDOVA , это делает явным, что мы хотим использовать Угловой и Кордова , после этого вы можете перейти в папку приложения, используя CD SampleApp , структура должна выглядеть так:

В этот момент приложение было успешно создано, теперь следующим шагом является тестирование приложения локально в браузере, чтобы увидеть, как выглядит начальная структура, чтобы сделать этот запуск Ионная подача Эта команда автоматически открывает приложение (моделируемое) в браузере, также можно выбрать порт, браузер и другие параметры, см. Больше запуска Ионная подача -Хельп Анкет После этих шагов вы можете изменить приложение, так как вы хотите отличить от шаблона, созданного автоматически с помощью Ionic.

Примечание. Также можно использовать контейнер Docker для создания начальной структуры приложения (например, docker run -it - -rm -v $ ($ pwd):/usr/app beevelov/ionic: новейший иона стартов Tabs-Angular-Cordova ) Обратите внимание, что в этом случае используется переменная $ pwd, эта переменная содержит имя текущего рабочего каталога.

Наконец, вы можете изменить приложение по своему усмотрению, чтобы сделать это, используя код Visual Studio или любой текстовый редактор по вашему выбору.

Создание репозитория на GitHub и нажатие кода приложения

Чтобы создать репо для приложения на GitHub , сначала войдите в свою учетную запись и выберите Новый репозиторий , заполните поля, затем выберите один из этих двух вариантов:

• Public (Любой может увидеть этот репозиторий. Вы выбираете, кто может совершить)
• Частный (Вы выбираете, кто может видеть и посвятить себя этому хранилищу)

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

Вернитесь к терминалу и перейдите к коду приложения и запустите эти команды:

git remote add origin https://github.com//.git
git push -u origin master

Теперь у вас создан репо и код внутри него, в следующих шагах мы немного поговорим о Azure DevOps и о том, как создавать и настраивать трубопроводы.

Создание проекта в Azure DevOps

Azure DevOps-это мощный сервис (или локальный), который предлагает поддержку командам планировать работу, сотрудничать с разработкой кода, строительство, развертывание, тестирование и создание и управление множеством различных видов интеграций в Azure или сторонние услуги по умолчанию, такие Как Дженкинс, шеф -повар, Nuget и Другие Анкет Чтобы узнать больше доступа Официальная документация Microsoft Чтобы увидеть все возможные возможности.

Чтобы создать проект на Azure DevOps, сделать Войдите с помощью учетной записи Microsoft (или учетной записи GitHub) и выполните следующие действия:

• Выберите Новый проект

Просто заполните Поле названия проекта и нажмите на Новый проект , вы можете проверить проект, созданный в этой статье Здесь Анкет

Создание сборки и развертывания трубопроводов

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

Примечание: не обязательно должно быть три трубопровода, это разделение только логично

Azure DevOps имеет разделение между конвейером сборки и выпуска, первым обычно используется для генерации одного или нескольких артефактов с использованием исходного кода проекта, а второй более распространен для развертывания этих сгенерированных артефактов. Две следующие темы объясняют, как создать два конвейера сборки и один трубопровод для развертывания приложения.

Построить трубопроводы

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

• Нажмите на Трубопроводы

• Выберите Новый трубопровод или Создать трубопровод
• Выберите GitHub как вариант исходного кода

Вы можете выбрать Пользователь классический редактор вариант Если вы хотите, чтобы руководство помогло при создании трубопровода

• Выберите репозиторий, созданный для вашего приложения

На этом этапе Azure DevOps перенаправляет вас на страницу GitHub, чтобы вы приняли и установили приложение Azure Pipelines.

• Выберите «Утвердить и установить

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

• Выберите Стартовый трубопровод Анкет

Наконец, вы можете увидеть минимальную конструкцию трубопровода, удалить все линии и поместить следующие:

# Disables CI builds entirely, then commits don't trigger a build
trigger: none

# Activates pull request trigger, so any pull request to the master trigger a build
pr:
- master

# Specifies which pool (Hosted or Self-hosted) to use for this pipeline. 
# In this case it is in the scope of the pipeline, but you can use it at the stage or job level
pool:
  vmImage: 'ubuntu-latest'

# Specific variables to use, in our case it is just one and at the pipeline level 
variables:
  chromeDriverVersion: '80.0.3987.106'

# Specifies a linear sequence of operations that make up a job
# We need only one job, so we can use the simplified structure
steps:
# Tasks are the building blocks of a pipeline
# We can choose from a catalog of tasks available by default or download from the Azure DevOps marketplace 
# In this case I chose to use 6 tasks (not mandatory) to install dependencies and build the App. 
  - task: Npm@1 # Run npm install
    displayName: 'npm install'
    inputs:
      command: install
      workingDir: '$(System.DefaultWorkingDirectory)'

  - task: Npm@1 # Run npm run build
    displayName: 'npm run build'
    inputs:
      command: custom
      customCommand: run build

  - script: | # Run unit tests
      npx --no-install ng test --watch=false --reporters=progress,junit
    displayName: 'ng test'

# This task download the chromedriver binary, required for e2e tests
# In this case I installed a specific version of chromedriver to avoid errors with the version of Chrome in the hosted agent microsoft, see the troubleshooting topic.
  - script: |
      node node_modules/.bin/webdriver-manager update --versions.chrome=$(chromeDriverVersion) --gecko false --standalone false
    displayName: 'changing version of chromedriver to $(chromeDriverVersion)'


  - script: | # Run e2e tests without update webdriver
      npx --no-install ng e2e --webdriverUpdate=false
    displayName: 'ng e2e tests'

  - task: PublishTestResults@2 # Publish tests results
    displayName: 'Publishing test results'
    condition: succeededOrFailed()
    inputs:
      testResultsFormat: 'JUnit'
      testResultsFiles: '**/TESTS-*.xml'

  - publish: 'www/' # Publish App artifact
    artifact: 'www'
    displayName: 'Publishing Artifact'

• Нажмите на Сохранить и запустить Чтобы проверить трубопровод

Теперь вы можете переименовать этот трубопровод в App Build Ci Нажав Редактировать → Три точки → Триггеры → Ямл и редактирование Имя поле.

Эта спецификация сборки отвечает за установку, сборку и тестирование приложения, этот трубопровод генерирует www Артефакт Всякий раз, когда он успешно выполнен, вы можете увидеть пример сгенерированного артефакта Здесь Этот артефакт включает в себя активы, стили и сценарии, которые были составлены и будут использоваться для создания файла .apk на следующем шаге.

Наконец, чтобы сгенерировать файл .apk, необходимо создать другой трубопровод с именем Android App Ci и поместите следующий контент:

# Enable CI builds, trigger a build whenever the master branch receive new modifications 
trigger: ['master']
pr: none # Disable PR builds entirely

pool:
  vmImage: 'ubuntu-latest'

steps:
# This task trigger a new build to run, this build is the same as the step above that generates the bundle
- task: TriggerBuild@3
  displayName: 'trigger App Build CI'
  inputs:
    definitionIsInCurrentTeamProject: true
    buildDefinition: 'App Build CI'
    queueBuildForUserThatTriggeredBuild: true
    ignoreSslCertificateErrors: true
    useSameSourceVersion: false
    useCustomSourceVersion: false
    useSameBranch: true
    waitForQueuedBuildsToFinish: true
    waitForQueuedBuildsToFinishRefreshTime: '10'
    failTaskIfBuildsNotSuccessful: true
    cancelBuildsIfAnyFails: false
    treatPartiallySucceededBuildAsSuccessful: false
    downloadBuildArtifacts: false
    storeInEnvironmentVariable: true
    authenticationMethod: 'OAuth Token'
    password: '$(System.AccessToken)' # Necessary allow permission of Queue builds to  Build Service, See the troubleshooting topic 
    enableBuildInQueueCondition: false
    dependentOnSuccessfulBuildCondition: false
    dependentOnFailedBuildCondition: false
    checkbuildsoncurrentbranch: false
    failTaskIfConditionsAreNotFulfilled: false

# Download the artifact of the build triggered above
- task: DownloadPipelineArtifact@2
  displayName: 'download artifact App Build CI'
  inputs:
    buildType: 'specific'
    project: 'Ionic App'
    definition: 'App Build CI'
    specificBuildWithTriggering: true
    buildVersionToDownload: 'specific'
    runId: '$(TriggeredBuildIds)'
    targetPath: '$(Build.BinariesDirectory)'

# Moves the www folder containing bundle to the Default Working Directory path (e.g. /agent/_work/1/s)
- bash: |
      mv $(Build.BinariesDirectory)/www $(System.DefaultWorkingDirectory)
  displayName: 'mv $(Build.BinariesDirectory)/www $(System.DefaultWorkingDirectory)'

- bash: | # Installing cordova
    sudo npm i -g cordova
  displayName: 'npm i -g cordova@latest'

- bash: | # Build android App using cordova
    npx ionic cordova build android --no-build --release
  displayName: 'ionic cordova build android --no-build --release'

# Needed to solve missing dependency problem, see the troubleshooting topic
- bash: |
    sudo apt-get install lib32z1
  displayName: 'sudo apt-get install lib32z1'

# Signin the .apk file with the specified keystore
- task: AndroidSigning@3
  displayName: 'android signing'
  inputs:
    apkFiles: '**/outputs/apk/release/app*.apk'
    apksignerKeystoreFile: 'sampleapp.keystore'
# This password is placed in Variables inside the pipeline and the option to keep the value secret is checked.
    apksignerKeystorePassword: '$(password_keystore)'
    apksignerKeystoreAlias: 'sampleapp'

- task: CopyFiles@2 # Copies all .apk files to publish
  displayName: 'copy **/outputs/apk/release/app*.apk to $(Build.BinariesDirectory)'
  inputs:
    SourceFolder: '$(System.DefaultWorkingDirectory)'
    Contents: '**/outputs/apk/release/app*.apk'
    CleanTargetFolder: true
    TargetFolder: '$(Build.BinariesDirectory)'
    flattenFolders: true


- publish: '$(Build.BinariesDirectory)' # Publish artifact
  artifact: 'android-app'
  displayName: 'publish artifact'

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

$ keytool -genkey -v -keystore sampleapp.keystore -alias sampleapp -keyalg RSA -keysize 2048 -validity 10000

Затем вставьте Библиотека → Безопасный файл который можно найти в Трубопроводы меню.

Теперь вы можете запустить и увидеть результат, когда вы запускаете Android App Ci трубопровод, другой App Build Ci Будет запустить, и сгенерированный артефакт будет загружен для создания .apk файл. Вы можете найти больше информации о структуре YAML в Официальная ссылка Microsoft Yaml. .

Выпустить трубопровод

Последний трубопровод отвечает за развертывание приложения в Visual Studio App Center Итак, для этого вам нужно сначала создать приложение в центре приложений, а затем новый конвейер выпуска в Azure DevOps.

Создание приложения в центре приложений Visual Studio

Доступ к своей учетной записи в центре приложений и нажмите на Добавить новый → Добавить новое приложение .

• Убедитесь, что вы проверяете следующие варианты:
  • Тип выпуска Альфа
  • ОС Android
  • Платформа Java/Kotlin

• После этого вам нужен ваш API API -ключ. Чтобы получить его перейти к вашему Настройки учетной записи

• Редактировать Пользовательские токены API
• Выберите Новый токен API
• Убедитесь, что вы выбираете Полный доступ вариант
• Скопировать и сохранить сгенерированный токен API

Вам нужно будет использовать этот токен API для настройки автоматического развертывания приложения.

Создание конвейера выпуска

Войдите в Azure DevOps и перейдите к Трубопроводы → Выпуски

• Выберите Новый
• Выберите Новый релиз

Конфигурация трубопровода должна показаться, чтобы добавить этапы и артефакты.

Сначала вам нужно добавить артефакт в трубопровод, нажмите Добавить артефакт и выберите Android App Ci как Источник (сборка конвейера)

Добавьте новый этап, нажав на Добавить сцену поле и выберите Пустая работа Поскольку нет необходимости использовать какие -либо шаблоны, затем измените имя сцены на Развернуть альфа Например , теперь необходимо добавить задачу развертывания для этого щелчка на Задачи

• Нажмите на значок Plus, чтобы добавить новую задачу
• Поиск Visual Studio App Center в каталоге задач
• Добавьте App Center распространять задача на работу

После этого, чтобы все было хорошо работать, вы должны заполнить поля задачи, ниже я объясню, как заполнить каждый из них.

• Подключение к сервису App Center

Выберите Сервисное подключение к центру приложений Visual Studio, в этом случае вам нужно сначала создать его, выполнив эти шаги: Enter Управление , выберите Новое сервисное соединение → Visual Studio App Center → Следующий и заполните Токен API С токеном, сгенерированным в центре приложений Visual Studio, наконец дайте имя для подключения, вернитесь к задаче и выберите созданное соединение.

• Приложение Slug

Чтобы найти приложение Slug, перейдите в центр приложений Visual Studio, нажмите на приложение и извлечь из URL (например, https://appcenter.ms/users/carlosggflor-gmail.com/apps/sampleapp → carlosggflor-gamail.com/sampleapp )

• Двоичный путь файла

Относительный путь от корневого репо до файла APK/AAB или IPA, который вы хотите опубликовать, в этом случае вам необходимо выбрать путь артефакта (файл .APK), сгенерированный запуска Android App Ci сборка (например, $ (система. DefaultWorkingDirectory)/_ Android App Ci/Android-App/App-Release-Unsigned.apk )

• Выпуск заметок

Примечания к выпуску будут прикреплены к выпуску и показаны тестерам на странице установки.

• Отправление места назначения

Это поле очень важно, потому что именно там вы решаете пункт назначения, когда выпуск будет распределен, в случае, если Группы Выбирается, вы можете развернуть его в одной или нескольких группах, используя запятые или полуколоны, чтобы разделить несколько идентификаторов, вы можете создать эти группы в центре приложений Visual Studio, перемещаясь к вашему Приложение → Распространять → Группа

Чтобы получить идентификатор, просто выберите созданную группу и нажмите на Значок настроек

В случае, если вы оставите поле идентификатора назначения пустым, тогда выбрана группа по умолчанию ( Сотрудники ).

В противном случае, если вы выберете Магазин Вам необходимо ввести идентификатор Distribution Store для развертывания, в нашем случае мы не создали подключение к магазину (например, Google Play или Intune Company Portal), но если вы хотите создать Enter Visual Studio App Center, ориентируясь на ваш Приложение → Распространять → Магазины → Подключиться к магазину и следуйте шагам.

Наконец, вы можете переименовать свой трубопровод и запустить, нажав на Создать выпуск → Создать Анкет

После развертывания, как закончено, вы можете увидеть релиз в Visual Studio App Center → Распространять → Выпуски , изображение ниже отмечает основную информацию об этой странице.

1 — Версия приложения, вы можете изменить эту версию, редактируя config.xml Файл в исходном коде.

2 — Пункт назначения, выбранного в задаче развертывания для центра приложений.

Отсюда вы можете распространять тот же релиз на другие группы и магазины (Google Play или Intune), настроить тестеры и генерировать ссылки для загрузки приложения.

Наконец, вам необходимо настроить непрерывное развертывание в трубопроводе для создания выпуска всякий раз, когда сборка Android App Ci закончено, чтобы сделать это щелчок на Значок молнии и включить Непрерывное триггер развертывания вариант.

Вывод

Мы создали гибридное приложение с использованием Ionic с Cordova и Azure DevOps для интеграции с GitHub, чтобы сохранить код и создать трубопроводы CI/CD для тестирования, создания и развертывания нашего приложения в центре приложений Visual Studio. Мы можем изменить любую часть, связанную с Azure DevOps, такими как инструмент CI/CD, и по -прежнему использовать ее в качестве посредника. Мы прошли подробное объяснение каждого шага сборки и стадии развертывания.

Исходный код и трубопроводы

SAMPLEAPP на GitHub. https://github.com/carlosgit2016/SampleApp

Ионное приложение на Azure DevOps. https://dev.azure.com/gabrielggff25/Ionic%20App

Дополнения

Настройка инструментов Android SDK в пути

Я не нашел простого примера этого, поэтому, если вы не хотите устанавливать Android Studio или используете Linux и вам нужно настроить инструменты в пути, см. Ниже.

Linux

# i downloaded the command line tools in /tmp/ and unzipped it in /opt/android/tools
# use any editor to edit the /etc/profile
sudo vi /etc/profile
cat /etc/profile 
# put the PATH variable at the end of the file
# should look like this

# /etc/profile: system-wide .profile file for the Bourne shell (sh(1))
# and Bourne compatible shells (bash(1), ksh(1), ash(1), ...).

if [ "${PS1-}" ]; then
  if [ "${BASH-}" ] && [ "$BASH" != "/bin/sh" ]; then
    # The file bash.bashrc already sets the default PS1.
    # PS1='\h:\w\$ '
    if [ -f /etc/bash.bashrc ]; then
      . /etc/bash.bashrc
    fi
  else
    if [ "`id -u`" -eq 0 ]; then
      PS1='# '
    else
      PS1='$ '
    fi
  fi
fi

if [ -d /etc/profile.d ]; then
  for i in /etc/profile.d/*.sh; do
    if [ -r $i ]; then
      . $i
    fi
  done
  unset i
fi

PATH=$PATH:/opt/android/tools/bin

Окна

• Открытая панель управления
• Ищите Редактировать переменные системы среды
• Выберите Переменные среды
• Два нажмите на путь в Системные переменные
• Щелкните новый и поместите путь, в котором вы разкапливает файл (например, c: \ temp \ tools \ bin )

Исправление проблем

Без разрешения запустить другую сборку в Android App Pipeline.

• Ошибка: Сообщение об ошибке: Ошибка: TF215106: В доступе отказано. Ionic App Service Service (Gabrielggff25) нуждается в строительстве очередей разрешений для сборки конвейера 20: App Build CI в командном проекте Ionic App для выполнения действия. Для получения дополнительной информации обратитесь к администратору Azure Devops.

• Решение: Разрешить разрешение на строительство разрешения пользователю Проект Служба сборки , см. изображение ниже.

Проблема с отсутствием зависимостей во время выполнения конвейера Android App App

Проблема возникает во время сборки приложения для Android, см. Ошибка при загрузке общих библиотек

Проблема с версией Chromedriver на агенте

Может быть, текущая версия Chromedriver новичок в Google Chrome, установленной на агенте, см. Установленные мягкие машины на машинах Ubuntu

использованная литература

Развернуть Azure DevOps Builds с App Center

Ионная структура Начиная

Официальная документация Azure DevOps

Ссылка на схему YAML

Оригинал: «https://dev.to/carlosgit2016/creating-building-and-deploying-an-ionic-application-using-azure-devops-and-app-center-1bhj»