Distribuer une application Windows 10 à partir d’une application web AzureDistribute a Windows 10 app from an Azure web app

L’application Programme d'installation d'application permet aux développeurs et professionnels de l’informatique de distribuer des applications Windows 10 en les hébergeant sur leurs propres Réseau de diffusion de contenu (CDN).The App Installer app allows developers and IT Pros to distribute Windows 10 apps by hosting them on their own Content Delivery Network (CDN). Cela est utile pour les entreprises qui ne veulent pas ou n'ont pas besoin de publier leurs applications dans le Microsoft Store, mais qui souhaitent tirer parti de la plateforme Windows 10 de déploiement et de création de packages.This is useful for enterprises that don't want or need to publish their apps to the Microsoft Store, but still want to take advantage of the Windows 10 packaging and deployment platform.

Cette rubrique décrit les étapes de configuration d’un serveur Web Azure pour héberger des packages d’applications Windows 10 et explique comment utiliser l’application d’installation d’application pour installer les packages d’application.This topic outlines the steps to configure an Azure Web Server to host Windows 10 app packages, and how to use the App Installer app to install the app packages.

Dans ce didacticiel, nous voyons comment configurer un serveur IIS pour vérifier localement que votre application web peut correctement héberger les packages d’application et appeler et utiliser efficacement l’application Programme d'installation d'application.In this tutorial, we will go over setting up an IIS server to locally verify that your web application can properly host the app packages and invoke and use App Installer app effectively. Nous aurons également des didacticiels montrant comment héberger correctement vos applications web sur les services de cloud web populaires dans le champ (Azure et AWS) afin de vérifier qu’elles respectent la configuration requise par le Programme d'installation d'application pour réaliser des installations web.We will also have tutorials for hosting your web applications properly on the popular cloud web services in the field (Azure and AWS) to ensure that they meets the App Installer web install requirements. Ce didacticiel pas à pas ne nécessite aucune compétence particulière et est très facile à suivre.This step-by-step tutorial doesn't require any expertise and is very easy to follow.

Programme d'installationSetup

Pour suivre correctement ce didacticiel, vous aurez besoin des éléments suivants :To successfully follow this tutorial, you will need the following:

  1. un abonnement à Microsoft AzureMicrosoft Azure subscription
  2. Package d’application Windows 10 : package d’application que vous allez distribuerWindows 10 app package - The app package that you will distribute

Facultatif : Projet de démarrage sur GitHub.Optional: Starter Project on GitHub. Cela est utile si vous n’avez pas de package d’application ou de page web à utiliser, mais que vous souhaitez apprendre à utiliser cette fonctionnalité.This is helpful if you don't an app package or web page to work with, but would still like to learn how to use this feature.

Étape 1 : obtenir un abonnement AzureStep 1 - Get an Azure subscription

Pour obtenir un abonnement Azure, visitez la page de compte Azure.To get an Azure subscription, visit the Azure account page. Dans le cadre de ce didacticiel, vous pouvez utiliser un abonnement gratuit.For the purposes of this tutorial, you can use a free membership.

Étape 2 : créer une application web AzureStep 2 - Create an Azure Web App

Dans la page du portail Azure, cliquez sur le bouton + Créer une ressource, puis sélectionnez Application WebIn the Azure portal page, click the + Create a Resource button and then select Web App

Capture d’écran de la création d’une application Azure

Créez un nom d’application unique et laissez le reste des champs par défaut.Create a unique App name and leave the rest of the fields as default. Cliquez sur Créer pour terminer l’Assistant de création d’application web.Click Create to finish the Web App creation wizard.

Capture d’écran de la création d’une application Web

Étape 3 : héberger le package d’application et la page webStep 3 - Hosting the app package and the web page

Une fois que l’application web a été créée, vous pouvez y accéder à partir du tableau de bord sur le portail Azure.Once the web app had been created, you can access it from the dashboard on the Azure portal. Dans cette étape, nous allons créer une page web simple avec l’interface graphique utilisateur du portail Azure.In this step, we're going to create a simple web page with the GUI of the Azure portal.

Après avoir sélectionné l’application web qui vient d’être créée depuis le tableau de bord, utilisez le champ de recherche pour rechercher et ouvrir l'Éditeur App Service.After selecting the newly created web app from the dashboard, use the search field to find and open App Service Editor.

Dans l’éditeur, il y a un fichier hostingstart.html par défaut.In the editor, there is a default hostingstart.html file. Cliquez avec le bouton droit dans l’espace vide du volet de l'explorateur de fichiers et sélectionnez Télécharger les fichiers pour commencer le chargement des packages de votre application.Right-click in the empty space of file explorer panel and select Upload Files to begin uploading your app packages.

Notes

Vous pouvez utiliser le package de l’application qui fait partie du référentiel Projet de démarrage sur GitHub si vous n’avez pas de package de l’application.You can use the app package that is part of the provided Starter Project repository on GitHub if you don't have an app package available. Le certificat (MySampleApp.cer) avec lequel le package a été signé se trouve également avec l’exemple sur GitHub.The certificate (MySampleApp.cer) that the package was signed with is also with the sample on GitHub. Le certificat doit être installé sur votre appareil avant que vous puissiez installer l’application.You must have the certificate installed to your device prior to installing the app.

Capture d’écran du chargement des packages

Cliquez avec le bouton droit dans l’espace vide du volet de l'explorateur de fichiers et sélectionnez Nouveaux fichiers pour créer un nouveau fichier.Right-click in the empty space of file explorer panel and select New Files to create a new file. Nommez le fichier : default.html.Name the file: default.html.

Si vous utilisez le package de l’application fourni dans le Projet de démarrage, copiez le code HTML suivant sur la page web default.html nouvellement créée.If you're using the app package provided in the Starter Project, copy the following HTML code to the newly create web page default.html. Si vous utilisez votre propre package de l’application, modifiez l’URL du service d’application (l’URL après source=).If you're using your own app package, modify the app service URL (the URL after source=). Vous pouvez obtenir l’URL du service d’application à partir de la page de vue d’ensemble de votre application dans le portail Azure.You can get the app service URL from your app's overview page in the Azure portal.

<html>
<head>
    <meta charset="utf-8" />
    <title> Install My Sample App</title>
</head>
<body>
    <a href="ms-appinstaller:?source=https://appinstaller-azure-demo.azurewebsites.net/MySampleApp.msixbundle"> Install My Sample App</a>
</body>
</html>

Étape 4 : configurer l’application web pour les types de package de l'application MIMEStep 4 - Configure the web app for app package MIME types

Ajoutez un nouveau fichier à l'application web nommé : Web.config.Add a new file to the web app named: Web.config. Ouvrez le fichiers Web.config à partir de l’Explorateur et ajoutez les lignes suivantes.Open the Web.config file from the explorer and add the following lines.

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <!--This is to allow the web server to serve resources with the appropriate file extension-->
    <staticContent>
      <mimeMap fileExtension=".appx" mimeType="application/appx" />
      <mimeMap fileExtension=".msix" mimeType="application/msix" />
      <mimeMap fileExtension=".appxbundle" mimeType="application/appxbundle" />
      <mimeMap fileExtension=".msixbundle" mimeType="application/msixbundle" />
      <mimeMap fileExtension=".appinstaller" mimeType="application/appinstaller" />
    </staticContent>
  </system.webServer>
</configuration>

Étape 5 : Exécuter et testerStep 5 - Run and test

Pour lancer la page web que vous avez créée, utilisez l’URL de l’étape 3 dans le navigateur, suivie par /default.html.To launch the web page that you created, use the URL from step 3 into the browser followed by /default.html.

Capture d’écran de l’installation d’une application à partir d’une page Web

Cliquez sur « Installer mon exemple d’application » pour lancer le Programme d'installation d'application et installer votre package d’application.Click "Install My Sample App" to launch App Installer and install your app package.

Résolution des problèmesTroubleshooting Issues

L'application Programme d'installation d'application ne parvient pas à installerApp Installer app fails to install

L'installation de l’application échouera si le certificat avec lequel le package de l’application est signé n’est pas installé sur l’appareil.App install will fail if the certificate that the app package is signed with isn't installed on the device. Pour résoudre ce problème, vous devez installer le certificat avant l’installation de l’application.To fix this, you will need to install the certificate prior to the installation of the app. Si vous hébergez un package de l’application pour une distribution publique, nous vous recommandons de signer votre package de l’application avec un certificat émis par une autorité de certification.If you are hosting an app package for public distribution, we recommended signing your app package with a certificate from a certificate authority.

Capture d’écran de l’échec de la certification

Assurez-vous que l’application Programme d'installation d'application est installée.Ensure that the App Installer app is installed. Accédez à Paramètres -> Applications et fonctionnalités et recherchez le Programme d'installation d'application dans la liste des applications installées.Go to Settings -> Apps & Features and find App Installer in the installed apps list.