Рубрики
Uncategorized

Многоступенчатые сборки для ионных приложений с шаблонами лазурных трубопроводов

В этой статье мы создадим лазурный трубопровод для ионного приложения, используя новые трубопроводы Azure YAML … Теги с учебником, Azure, DevOps, Ionic.

  • Автор записи Автор: Sahan
  • Дата записи 04.03.2022

В этой статье мы создадим лазурный трубопровод для ионного приложения, используя новые шаблоны YAML-трубопроводов Azure. Мы также охватим подписи выпуска сборки опубликованных артефактов (подписание APK). Я кратко известел целы этого блога на диаграмме ниже.

Одна картинка стоит тысячи слов. Любые пункты для моих навыков сработителя? 💯😅.

Наши основные цели должны;

  1. Леса ионное приложение
  2. Создайте приложение Android
  3. Настройка лазурных трубопроводов
  4. Подписать релиз APKS

💡 Вы можете следовать вместе с моим завершенным репозиторием проекта в здесь Отказ

Леса ионное приложение

Давайте получим начальную настройку из пути! Ионные документы уже есть отличный Начало работы Руководство Отказ На этом этапе мы не собираемся делать что-то фантазии на обосновании вещей ионной. Мы просто будем просто настроить базовое приложение и использовать конденсатор для создания приложения Android. Если вы уже получили существующее ионное приложение, вы можете пропустить раздел «Создать лазурный трубопровод».

1. Создание пустого ионного приложения

ionic start sampleapp blank --capacitor --type=ionic-angular

Как видите, здесь здесь ничего нет. Просто пустой ионный угловой проект с интеграцией конденсатора.

2. Установите ID проекта (необязательно) — Вам не нужно менять APID для этого руководства, но мне нравится все равно настроить.

{
...
  "appId": "com.sahan.sampleapp",
...
}

Откройте Capacitor.config.json Файл и изменить appid Имущество к тому, что вам подходит.

3. Добавить конденсатор — Android Project

Если вы не создали свою среду для разработки Android, пожалуйста, следуйте этому Руководство сделать это.

ionic build && ionic cap add android

Обратите внимание на Ионическая сборка Команда здесь. Нам сначала нужно выдать Ионическая сборка Команда перед добавлением проекта Android впервые. С начальным Ionic Cap Добавить Android Команда это будет скопировать необходимые веб-активы в нативный проект.

💡 Это сейчас Рекомендуется сохранить ваши родные проекты в контроле источника.

Если вы внесите какие-либо изменения в свой ионный проект, вы можете использовать Копировать ионные шапки Команда для копирования любых измененных веб-активов или Ionic Cap Sync. Если вы используете/обновили какие-либо собственные зависимости.

После этих шагов ваша структура проекта должна выглядеть следующим образом.

Создайте лазурный трубопровод

Для этого учебника я создадим один Azure-Pipelines.yml Файл и сборки-опубликовать два приложения для Android, один из отладочных конфигураций и другой для выпуска.

1. Создание начальной структуры Azure-Pipelines.yml.yml.yml.

Давайте сначала создадим папку под названием Инфраструктура В корне структуры нашего решения. Мы будем использовать эту папку, чтобы сохранить все наши файлы Line Azure Pipeline. Затем мы добавим два дополнительных файла YAML под названием Ionic-Android-debug-build.yml и Ionic-Android-Release-build.yml Отказ Я объясню, почему мы делаем это через секунду. Ваша структура файлов должна выглядеть так.

Для нашего начального шага мы создадим структуру Barebones наших лазурных трубопроводов .yml file

trigger:
- main

variables:
  vmImageName: 'windows-latest'
  projectName: 'SampleApp'

stages:
  - stage: Build
    displayName: Build Ionic - Android projects
    jobs:
      # Debug build
      - job: Build_Ionic_Android_Debug
        variables:
          - name: buildConfiguration
            value: Debug
        displayName: Build Debug
        pool:
          vmImage: $(vmImageName)
        steps:
          - template: ionic-android-debug-build.yml

      # Release build
      - job: Build_Ionic_Android_Release
        variables:
          - name: buildConfiguration
            value: Release
        displayName: Build Release
        pool:
          vmImage: $(vmImageName)
        steps:
          - template: ionic-android-release-build.yml

Вот грубое объяснение структуры вышеуказанного файла.

  1. вызывать : Мы запускаем наш трубопровод всякий раз, когда изменение происходит с Главная ветвь
  2. Переменные : Мы определили две глобальные переменные, которые можно повторно использовать на наших этапах

стадии : Это где мы определяем наши этапы. Первоначально мы добавили Построить сцена. Позже мы добавим другой этап под названием Развертывать

  • рабочие места : У нас есть две работы под названием Отладка и Выпуск Отказ
  • Работа: Шаги : Обратите внимание, как мы даем наш путь шаблона с Шаблон атрибут. Таким образом, нам не нужно держать все в одном файле ямла.

💡 Совет: Если вы используете Сценарий Задача, которую вы иногда обнаружите, что любые многоуровневые команды не будут работать. Только первый взял бы. Вы можете добавить ваши команды с && Или используйте задачу PowerShell, как показано в этом руководстве.

2. Создание Ionic-Android-debug-build.yml

steps:    
  - script: npm install -g @ionic/cli
    displayName: 'Install Ionic CLI'

  - task: Npm@1
    inputs:
      workingDir: '$(Build.SourcesDirectory)/$(projectName)'
      command: install
    displayName: 'NPM Install'

  - powershell: |
      ionic cap build android --no-open
      npx cap sync
      cd android
      ./gradlew assemble$(buildConfiguration)
    workingDirectory: $(Build.SourcesDirectory)/$(projectName)
    displayName: 'Build Android Project'

  - task: CopyFiles@2
    inputs:
      SourceFolder: '$(Build.SourcesDirectory)/$(projectName)/android/app/build/outputs/apk/$(buildConfiguration)'
      contents: "**/app-$(buildConfiguration).apk"
      targetFolder: "$(Build.ArtifactStagingDirectory)/$(projectName)"
    displayName: "Copy unsigned APK to staging directory"

  - task: PublishBuildArtifacts@1
    inputs:
      PathtoPublish: "$(Build.ArtifactStagingDirectory)/$(projectName)"
      ArtifactName: "$(projectName)"
      publishLocation: "Container"
    displayName: "Publish artifacts"

Мы используем Граделв Утилита, которая поставляется с проектом Android, чтобы построить его. Это обертка вокруг Грели, которая вызывает его с любыми параметрами, которые мы дали (в нашем случае Assembledebug или ассемассаесть ). Если в вашей системе не найден в вашей системе (или в агенте по сборке), он также скажет его с сервера распределения.

Ionic-Android-Release-build.yml Это в значительной степени той же конфигурации, за исключением некоторых дополнительных флагов, чтобы сделать сборку выпуска. Мы пройдем через этот файл на шаге подписания.

Теперь отпустите и совершите изменения. Возможно, вы захотите Создать новый лазурный трубопровод Если вы еще не сделали. После того, как трубопровод будет запущен, вы сможете увидеть все зеленые (надеюсь). 😀

Если вы посмотрите на артефакты сборки, вы найдете отладку и выпустить APKS все в одном месте сейчас. Далее мы посмотрим на подписание файлов APK.

Подписание APK

Если вы публикуете свое приложение в игровой магазин, нам нужно подумать о подписании наших APKS. Ionic’s Официальная документация Уже охватывает этот шаг, поэтому мы посмотрю на то, как мы можем автоматизировать этот шаг.

1. Создание файла .keystore

Если вы делаете это в первый раз, вам нужно создать частную .keystore Файл, используемый для подписания APK. Вы можете использовать keytool Файл, который поставляется с Android SDK:

keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000

Не забудьте принять к сведению следующее, когда вы генерируете этот файл.

  • Пароль ключевого магазина
  • Псевдоним ключей
  • Ключевой пароль

Мы будем ставить их в переменные трубопроводы в качестве следующего шага.

2. Создание переменных трубопроводов

После того, как вы сгенерировали файл Keystore, вы можете перейти к разделу библиотеки вашего проекта в Azure DEVOPS.

Обязательно поставить в keystorepassword , Кейалиас и keypassword Переменные, которые мы создали на вышеуказанном шаге.

После этого вам необходимо загрузить файл Keystore в Secure файлы раздела. Позже мы получим доступ к этому файлу в задаче подписания Android.

3. Добавить задачу подписания

Мы будем использовать AndroidSigning @ 3 Задача подписать нашу сборку выпуска. Это довольно прямая задача для использования и параметры, которые нам нужно отправлять, следующие.

- task: AndroidSigning@3
    inputs:
      apkFiles: '$(Build.SourcesDirectory)/$(projectName)/android/app/build/outputs/apk/$(buildConfiguration)/*.apk'
      apksign: true
      apksignerKeystoreFile: '${{ parameters.keystoreFileName }}'
      apksignerKeystorePassword: '${{ parameters.keystorePassword }}'
      apksignerKeystoreAlias: '${{ parameters.keyAlias }}'
      apksignerKeyPassword: '${{ parameters.keyPassword }}'
      apksignerArguments: --out $(Build.SourcesDirectory)/$(projectName)/android/app/build/outputs/apk/$(buildConfiguration)/$(projectName)-$(buildConfiguration).apk --verbose
      zipalign: true
    displayName: 'Sign the APK'

Обратите внимание, как мы связываем переменные, которые мы создали в разделе библиотеки. Теперь наш финал Ionic-Android-Release-build.yml Файл будет выглядеть как следующее.

parameters:
  - name: keystoreFileName
    displayName: "The keystore file name for signing the apk"
    type: string
  - name: keystorePassword
    displayName: "Password for the keystore"
    type: string
  - name: keyAlias
    displayName: "Key alias"
    type: string
  - name: keyPassword
    displayName: "Key password"

steps:    
  - script: npm install -g @ionic/cli
    displayName: 'Install Ionic CLI'

  - task: Npm@1
    inputs:
      workingDir: '$(Build.SourcesDirectory)/$(projectName)'
      command: install
    displayName: 'NPM Install'

  - powershell: |
      ionic cap build android --prod --no-open
      npx cap sync
      cd android
      ./gradlew assemble$(buildConfiguration)
    workingDirectory: $(Build.SourcesDirectory)/$(projectName)
    displayName: 'Build Android Project'

  - task: AndroidSigning@3
    inputs:
      apkFiles: '$(Build.SourcesDirectory)/$(projectName)/android/app/build/outputs/apk/$(buildConfiguration)/*.apk'
      apksign: true
      apksignerKeystoreFile: '${{ parameters.keystoreFileName }}'
      apksignerKeystorePassword: '${{ parameters.keystorePassword }}'
      apksignerKeystoreAlias: '${{ parameters.keyAlias }}'
      apksignerKeyPassword: '${{ parameters.keyPassword }}'
      apksignerArguments: --out $(Build.SourcesDirectory)/$(projectName)/android/app/build/outputs/apk/$(buildConfiguration)/$(projectName)-$(buildConfiguration).apk --verbose
      zipalign: true
    displayName: 'Sign the APK'

  - task: CopyFiles@2
    inputs:
      SourceFolder: '$(Build.SourcesDirectory)/$(projectName)/android/app/build/outputs/apk/$(buildConfiguration)'
      contents: "**/$(projectName)-$(buildConfiguration).apk"
      targetFolder: "$(Build.ArtifactStagingDirectory)/$(projectName)"
    displayName: "Copy unsigned APK to staging directory"

  - task: PublishBuildArtifacts@1
    inputs:
      PathtoPublish: "$(Build.ArtifactStagingDirectory)/$(projectName)"
      ArtifactName: "$(projectName)"
      publishLocation: "Container"
    displayName: "Publish artifacts"

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

Во-первых, нам нужно сказать Azure-Pipeline.yml, какую переменную группу использовать. Вот небольшой выдержка этого.

# other tasks removed for brevity
- job: Build_Ionic_Android_Release
  variables:
    - group: SampleApp-Release
    - name: buildConfiguration
      value: Release

💡 Обратите внимание, что обозначение для Определение переменной может принимать два варианта. Если вы не используете группу, вы могли бы просто написать ее как BuildConfiguration: Release Отказ Если вы используете Группа Атрибут, вам нужно использовать нотацию, которую я показал на приведенном выше фрагменте. Я должен был узнать это трудный путь 😂

Вы бы также заметили, что мы используем Параметры здесь. Они будут введены в Azure-Pipeline.yml файл.

# other tasks removed for brevity
steps:
  - template: ionic-android-release-build.yml
    parameters:
      keystoreFileName: 'sampleapp-release-key.keystore'
      keystorePassword: $(keystorePassword)
      keyAlias: $(keyAlias)
      keyPassword: $(keyPassword)

После того, как вы нажимаете изменения в репо, Azure DEVOPS попросит вас разрешить вашу конвейер получить доступ к безопасному файлу, который мы добавили на вышеуказанном шаге. Нажмите на вид и позвольте ему. В качестве альтернативы вы также можете использовать Azure KeyVault для хранения секретов.

Завершенные файлы YAML можно найти в моем репо над здесь Отказ После завершения трубопровода вы можете взглянуть на артефакты. Вуаля! У нас есть подписанные аппликаты

Заключение

Таким образом, мы создали пустое ионное приложение, настроили файлы трубопроводов Azure DevOps YAML и опубликовали подписанные артефакты. Вы можете использовать ту же структуру, чтобы добавить проект iOS. Тем не менее, шаги сборки могут быть более вовлечены и громоздкими, чтобы получить правильно первоначально. В моей следующей статье мы посмотрим, как мы можем интегрировать с Microsoft App Center для распространения.

Если у вас есть какие-либо отзывы или вопросы, дайте мне знать в комментариях ниже. До скорого 👋

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

  1. https://docs.microsoft.com/en-us/azure/devops/pipelines/process/templates?view=azure-devops
  2. https://docs.microsoft.com/en-us/azure/devops/pipelines/process/variables?view=azure-devops&tabs=yaml%2Cbatch
  3. https://ionicframework.com/docs/developing/android

Оригинал: «https://dev.to/sahan/multi-stage-builds-for-ionic-apps-with-azure-pipeline-templates-501n»

Читайте ещё по теме: