Comment builder, signer et déployer votre application UWP avec Azure DevOps et App Center Damien Aicheh

Dans ce tutoriel, je vais vous montrer comment construire et signer votre application UWP et la distribuer à vos utilisateurs via App Center.

Pour ce faire, nous devons suivre ces étapes:

Créez un certificat UWP (PFX) pour votre application
Installez le fichier PFX dans votre agent de build
Builder et signer votre application UWP à l’aide d’Azure DevOps
Publier le package appx dans Azure DevOps ou App Center

Commençons donc par aller sur Azure DevOps!

Dans l’onglet Pipelines, créez un New pipeline et suivez les 4 étapes pour obtenir le code source à partir du repository approprié. Azure DevOps créera automatiquement un nouveau fichier azure-pipelines.yml à la racine du dossier de votre projet. C’est à cet endroit que la définition du job sera définie et ensuite interprétée par Azure DevOps.

Préparer le certificat

Tout d’abord, nous devons créer le certificat PFX et l’installer sur l’agent. Pour se faire vous pouvez consulter mon précédent tutoriel à ce sujet.

Notre certificat est maintenant installé sur notre agent et un groupe de variables appelé uwp-pipeline est prêt à être utilisé. Nous devons d’abord restaurer les Nugets associés à notre projet. Pour ce faire, il suffit d’ajouter ces deux tâches en guise de premières étapes:

- task: NuGetToolInstaller@1

- task: NuGetCommand@2
  inputs:
    restoreSolution: '$(solution)'

Si vous avez suivi correctement les étapes précédentes, vous devriez avoir un azure-pipelines.yml ressemblant à ceci:

trigger:
- master

pool:
  vmImage: 'windows-latest'

variables:
  - group: uwp-pipeline

steps:
- task: NuGetToolInstaller@1

- task: NuGetCommand@2
  inputs:
    restoreSolution: '$(solution)'

- task: DownloadSecureFile@1
  name: mySecureFile
  displayName: 'Get the pfx file certificat'
  inputs:
    secureFile: '$(signingCert.secureFilePath)'

- task: PowerShell@2
  inputs:
    targetType: 'inline'
    script: |
      Write-Host "Start adding the PFX file to the certificate store."

      $pfxpath = '$(mySecureFile.secureFilePath)'
      $password = '$(signingCert.password)'
      
      Add-Type -AssemblyName System.Security
      $cert = New-Object System.Security.Cryptography.X509Certificates.X509Certificate2
      $cert.Import($pfxpath, $password, [System.Security.Cryptography.X509Certificates.X509KeyStorageFlags]"PersistKeySet")
      $store = new-object system.security.cryptography.X509Certificates.X509Store -argumentlist "MY", CurrentUser
      $store.Open([System.Security.Cryptography.X509Certificates.OpenFlags]"ReadWrite")
      $store.Add($cert)
      $store.Close()

Personnellement, j’aime exécuter automatiquement mon pipeline lorsque la branche master est mise à jour, c’est pourquoi j’ai ajouté l’option trigger au script.

Builder er signer votre application UWP

Il est temps de créer votre application UWP et de la signer à l’aide de votre certificat.

Commencez par compléter la liste de variables ci-dessous en ajoutant le chemin de la solution, la plateforme de build, la configuration de build et le répertoire de packages appx:

variables:
  - group: uwp-pipeline
  - name: solution
    value: '**/*.sln'
  - name: buildPlatform
    value: 'x86|x64|ARM'
  - name: buildConfiguration
    value: 'Release'
  - name: appxPackageDir
    value: '$(build.artifactStagingDirectory)\AppxPackages\\'

Pour signer le package appx, nous devons activer la configuration de la signature, transmettre l’emplacement du certificat PFX, son mot de passe associé et enfin, nous avons besoin du thumbprint du certificat. Le thumbprint peut être trouvée dans le .csproj de votre projet UWP après avoir choisi le certificat dans Visual Studio.

Ajoutez le thumbprint au groupe de variables, puis ajoutez la tâche de build comme ceci:

- task: VSBuild@1
  inputs:
    platform: 'x86'
    solution: '$(solution)'
    configuration: '$(buildConfiguration)'
    msbuildArgs: '/p:AppxBundlePlatforms="$(buildPlatform)"
                  /p:AppxPackageDir="$(appxPackageDir)"
                  /p:AppxBundle=Always
                  /p:UapAppxPackageBuildMode=StoreUpload
                  /p:AppxPackageSigningEnabled=true
                  /p:PackageCertificateThumbprint="$(signingCert.thumbprint)" 
                  /p:PackageCertificateKeyFile="$(mySecureFile.secureFilePath)"
                  /p:PackageCertificatePassword="$(signingCert.password)"'

Notez que la variable appelée mySecureFile correspond au nom que nous avons précédemment configuré dans la tâche de téléchargement de fichier sécurisé. Cette variable nous permet d’obtenir le chemin du fichier PFX installé sur l’agent. Cette tâche de génération générera les packages Appx.

Distibuer votre application

Nous devons d’abord ajouter une tâche pour copier nos fichiers du répertoire de travail de notre agent vers le répertoire de transfert des artéfacts, comme suit:

- task: CopyFiles@2
  displayName: 'Copy Files to: $(build.artifactstagingdirectory)'
  inputs:
    SourceFolder: '$(system.defaultworkingdirectory)'
    Contents: '**\bin\$(BuildConfiguration)\**'
    TargetFolder: '$(build.artifactstagingdirectory)'

Maintenant nous avons deux options:

Publiez l’intégralité du dossier des packages Appx dans Azure DevOps afin qu’il soit téléchargeable
Publiez le fichier .appxupload dans App Center pour le rendre facilement accessible à vos utilisateurs

Publiez votre artéfact

Si vous choisissez la première option, ajoutez simplement la tâche de publication d’artéfacts à votre pipeline, comme suit:

- task: PublishBuildArtifacts@1
  displayName: 'Publish Artifact: drop'
  inputs:
    PathtoPublish: '$(build.artifactstagingdirectory)'

Lorsque vous exécuterez le pipeline, vous pourrez télécharger les packages Appx. Voici ce que vous devriez avoir si vous l’affichez dans Azure DevOps:

Appx Packages Explorer

Comme vous pouvez le voir dans l’image ci-dessus, vous avez le fichier .appxupload qui peut être uploadé vers App Center, faisons cela dans la section suivante!

Uploadez votre package sur App Center

Nous avons maintenant notre appxupload signé et prêt à être envoyé à nos utilisateurs. Mon outil préféré pour cela est App Center. Vous pouvez partager votre application avec différents groupes de testeurs avant de la publier sur un store et c’est très utile.

Continuons en configurant la connexion entre App Center et Azure DevOps. Pour ce faire, il suffit de suivre mon tutorial à ce sujet, puis continuez à l’étape suivante.

Si vous avez suivi correctement les instructions précédentes, vous pouvez maintenant ajouter votre slug d’application et votre ID de groupe de distribution au groupe de variables. À ce stade, votre groupe de variables uwp-pipeline devrait ressembler à ceci:

Variable groups

Enfin, ajoutons la tâche suivante pour envoyer notre .appxupload dans App Center:

- task: AppCenterDistribute@3
  inputs:
    serverEndpoint: 'VSAC'
    appSlug: '$(appSlug)'
    appFile: '$(build.artifactstagingdirectory)\AppxPackages\*.appxupload'
    releaseNotesOption: 'input'
    releaseNotesInput: 'New release!'
    destinationType: 'groups'
    distributionGroupId: '$(distributionGroupId)'

Si vous exécutez le pipeline maintenant, vous verrez l’application dans votre compte App Center comme ceci:

Appx Packages

Vous pouvez maintenant le télécharger sur votre machine Windows et le tester!

Sources:

Vous trouverez un exemple de code sur ce répertoire Github.

Happy codding !

Vous avez aimé ce tutoriel ? Laissez une étoile sur le répertoire Github associé !

N'hésitez pas à me suivre sur Twitter pour ne pas rater mon prochain tutoriel !

Comment builder, signer et déployer votre application UWP avec Azure DevOps et App Center

Créez votre appxupload et distribuez-le à vos utilisateurs.

Préparer le certificat

Builder er signer votre application UWP

Distibuer votre application

Publiez votre artéfact

Uploadez votre package sur App Center