Distribución de una aplicación de Windows 10 desde una aplicación web de AzureDistribute a Windows 10 app from an Azure web app

La aplicación del Instalador de aplicación permite a los desarrolladores y profesionales de TI distribuir aplicaciones de Windows 10 hospedándolas en su propia red de entrega de contenido (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). Estos es útil para empresas que no desean o necesitan publicar sus aplicaciones en Microsoft Store, pero quieres sacar provecho de la plataforma de implementación y el paquete de Windows 10.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.

En este tema se describen los pasos para configurar un servidor Web de Azure para hospedar paquetes de aplicaciones de Windows 10 y cómo usar la aplicación del instalador de aplicaciones para instalar los paquetes de la aplicación.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.

En este tutorial, analizaremos la configuración de un servidor IIS para comprobar localmente que tu aplicación web puede hospedar correctamente los paquetes de aplicaciones e invocar y usar de manera eficaz la aplicación del Instalador de aplicación.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. También ofreceremos tutoriales para hospedar tus aplicaciones web de manera adecuadas en los servicios web de nube populares en el campo (Azure y AWS) para garantizar que cumplen los requisitos de instalación web del Instalador de aplicación.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. Este tutorial paso a paso no requiere experiencia y es muy sencillo de seguir.This step-by-step tutorial doesn't require any expertise and is very easy to follow.

InstalaciónSetup

Para seguir correctamente este tutorial, necesitarás lo siguiente:To successfully follow this tutorial, you will need the following:

  1. Una suscripción a Microsoft AzureMicrosoft Azure subscription
  2. Paquete de aplicaciones de Windows 10: el paquete de la aplicación que se va a distribuirWindows 10 app package - The app package that you will distribute

Opcional: Proyecto de inicio en GitHub.Optional: Starter Project on GitHub. Esto es útil si no tienes un paquete de la aplicación o página web con la que trabajar, pero aun así deseas obtener información acerca de cómo usar esta característica.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.

Paso 1: obtener una suscripción de AzureStep 1 - Get an Azure subscription

Para obtener una suscripción de Azure, visita la página de la cuenta de Azure.To get an Azure subscription, visit the Azure account page. En el contexto de este tutorial, puedes usar una suscripción gratuita.For the purposes of this tutorial, you can use a free membership.

Paso 2: crear una aplicación web de AzureStep 2 - Create an Azure Web App

En la página de Azure Portal, haz clic en el botón + Crear un recurso y, a continuación, selecciona Aplicación webIn the Azure portal page, click the + Create a Resource button and then select Web App

Captura de pantalla de la creación de una aplicación de Azure

Crea un Nombre de la aplicación único y deja el resto de los campos de manera predeterminada.Create a unique App name and leave the rest of the fields as default. Haz clic en Crear para finalizar el Asistente para la creación de aplicaciones web.Click Create to finish the Web App creation wizard.

Captura de pantalla de la creación de una aplicación Web

Paso 3: hospedar el paquete de la aplicación y la página webStep 3 - Hosting the app package and the web page

Una vez que se ha creado la aplicación web, puedes obtener acceso a ella desde el panel del Azure Portal.Once the web app had been created, you can access it from the dashboard on the Azure portal. En este paso, vamos a crear una página web sencilla con la GUI del Azure Portal.In this step, we're going to create a simple web page with the GUI of the Azure portal.

Tras seleccionar la aplicación web recién creada en el panel, usa el campo de búsqueda para buscar y abrir el Editor de App Service.After selecting the newly created web app from the dashboard, use the search field to find and open App Service Editor.

En el editor, hay un archivo hostingstart.html predeterminado.In the editor, there is a default hostingstart.html file. Haz clic con el botón derecho en el espacio vacío del panel del Explorador de archivos y selecciona Cargar archivos para empezar a cargar los paquetes de la aplicación.Right-click in the empty space of file explorer panel and select Upload Files to begin uploading your app packages.

Nota

Puedes usar el paquete de la aplicación que forma parte del repositorio del Proyecto de inicio proporcionado de GitHub si no tienes un paquete de la aplicación disponible.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. El certificado (MySampleApp.cer) con el que se firmó el paquete también está con la muestra en GitHub.The certificate (MySampleApp.cer) that the package was signed with is also with the sample on GitHub. También debes tener el certificado instalado en el dispositivo antes de instalar la aplicación.You must have the certificate installed to your device prior to installing the app.

Captura de pantalla de la carga de paquetes

Haz clic con el botón derecho en el espacio vacío del panel del Explorador de archivos y selecciona Nuevos archivos para crear un archivo nuevo.Right-click in the empty space of file explorer panel and select New Files to create a new file. Asigna el nombre default.html al archivo.Name the file: default.html.

Si estás usando el paquete de la aplicación proporcionado en el Proyecto de inicio, copia el siguiente código HTML en la página web default.html recién creada.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 estás usando tu propio paquete de la aplicación, modifica la dirección URL del servicio de la aplicación (la dirección URL después de source=).If you're using your own app package, modify the app service URL (the URL after source=). Puedes obtener la dirección URL del servicio de la aplicación de la página de introducción de la aplicación en el Azure Portal.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>

Paso 4: configurar la aplicación web para tipos MIME del paquete de aplicaciónStep 4 - Configure the web app for app package MIME types

Agrega un nuevo archivo a la aplicación web: Web.config.Add a new file to the web app named: Web.config. Abre el archivo Web.config desde el explorador y agrega las siguientes líneas.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>

Paso 5: ejecutar y probarStep 5 - Run and test

Para iniciar la página web que has creado, usa la dirección URL del paso 3 en el explorador seguido de /default.html.To launch the web page that you created, use the URL from step 3 into the browser followed by /default.html.

Captura de pantalla de la página de instalación de la aplicación Web

Haz clic en la opción para instalar mi aplicación de muestra para iniciar el Instalador de aplicación e instalar el paquete de la aplicación.Click "Install My Sample App" to launch App Installer and install your app package.

Problemas de la solución de problemasTroubleshooting Issues

No se puede instalar la aplicación Instalador de aplicaciónApp Installer app fails to install

Se producirá un error en la instalación de la aplicación si el certificado con el que se firmó el paquete de la aplicación no está instalado en el dispositivo.App install will fail if the certificate that the app package is signed with isn't installed on the device. Para corregir esto, debes instalar el certificado antes de instalar la aplicación.To fix this, you will need to install the certificate prior to the installation of the app. Si hospedas un paquete de la aplicación para distribución pública, te recomendamos firmar el paquete de la aplicación con un certificado de una entidad de certificación.If you are hosting an app package for public distribution, we recommended signing your app package with a certificate from a certificate authority.

Captura de pantalla de error de certificación

Asegúrate de que la aplicación Instalador de aplicación está instalada.Ensure that the App Installer app is installed. Ve a Configuración -> Aplicaciones y características y busca Instalador de aplicación en la lista de aplicaciones instaladas.Go to Settings -> Apps & Features and find App Installer in the installed apps list.