Distribución de una aplicación de Windows 10 desde un servidor IISDistribute a Windows 10 app from an IIS server

En este tutorial se muestra cómo configurar un servidor IIS, comprobar que la aplicación web puede hospedar paquetes de aplicaciones e invocar y usar el instalador de aplicaciones de forma eficaz.This tutorial demonstrates how to set up an IIS server, verify that your web app can host app packages, and invoke and use App Installer effectively.

La aplicación del instalador de aplicaciones permite a los desarrolladores y profesionales de ti distribuir aplicaciones de Windows 10 mediante su hospedaje en su propio Content Delivery Network (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). Esto resulta útil para las empresas que no desean o no necesitan publicar sus aplicaciones en el Microsoft Store, pero que desean aprovechar las ventajas de la plataforma de empaquetado e implementación 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.

ConfigurarSetup

Para realizar correctamente este tutorial, necesitará lo siguiente:To successfully go through with this tutorial, you will need the following:

  1. Visual Studio 2017Visual Studio 2017
  2. Herramientas de desarrollo web e IISWeb development tools and IIS
  3. 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 resulta útil si no tiene paquetes de aplicaciones con los que trabajar, pero aún así aprenderá a usar esta característica.This is helpful if you don't have app packages to work with, but would still like to learn how to use this feature.

Paso 1: instalación de IIS y ASP.NETStep 1 - Install IIS and ASP.NET

Internet Information Services es una característica de Windows que se puede instalar a través del menú Inicio.Internet Information Services is a Windows feature that can be installed via the Start menu. En el menú Inicio , busque activar o desactivar las características de Windows.In Start menu search for Turn Windows features on or off.

Busque y seleccione Internet Information Services para instalar IIS.Find and select Internet Information Services to install IIS.

Nota

No es necesario activar todas las casillas situadas en Internet Information Services.You don't need to select all the check boxes under Internet Information Services. Solo los seleccionados al comprobar Internet Information Services son suficientes.Only the ones selected when you check Internet Information Services are sufficient.

También necesitará instalar ASP.NET 4,5 o superior.You will also need to install ASP.NET 4.5 or greater. Para instalarlo, busque características de desarrollo de aplicaciones de Internet Information Services > World Wide Web Services->.To install it, locate Internet Information Services -> World Wide Web Services -> Application Development Features. Seleccione una versión de ASP.NET que sea mayor o igual que ASP.NET 4,5.Select a version of ASP.NET that is greater than or equal to ASP.NET 4.5.

Captura de pantalla de la instalación de la característica ASP.NET

Paso 2: instalar Visual Studio 2017 y las herramientas de desarrollo webStep 2 - Install Visual Studio 2017 and Web Development tools

Instale Visual Studio 2017 si todavía no lo ha instalado.Install Visual Studio 2017 if you have not already installed it. Si ya tiene Visual Studio 2017, asegúrese de que están instaladas las siguientes cargas de trabajo.If you already have Visual Studio 2017, ensure that the following workloads are installed. Si las cargas de trabajo no están presentes en la instalación, siga el Instalador de Visual Studio (que se encuentra en el menú Inicio).If the workloads are not present on your installation, follow along using the Visual Studio Installer (found from the Start menu).

Durante la instalación, seleccione ASP.net y desarrollo web y cualquier otra carga de trabajo que le interese.During installation, select ASP.NET and Web development and any other workloads that you are interested in.

Una vez completada la instalación, inicie Visual Studio y cree un nuevo proyecto (archivo -> nuevo proyecto).Once installation is complete, launch Visual Studio and create a new project (File -> New Project).

Paso 3: compilar una aplicación WebStep 3 - Build a Web App

Inicie Visual Studio 2017 como Administrador y cree un nuevo proyecto de aplicación Web de Visual C# con una plantilla de proyecto vacía .Launch Visual Studio 2017 as Administrator and create a new Visual C# Web Application project with an empty project template.

Captura de pantalla de la creación de un nuevo proyecto web

Paso 4: configuración de IIS con nuestra aplicación WebStep 4 - Configure IIS with our Web App

En el Explorador de soluciones, haga clic con el botón derecho en el proyecto raíz y seleccione propiedades.From the Solution Explorer, right click on the root project and select Properties.

En las propiedades de la aplicación Web, seleccione la pestaña Web . En la sección servidores , elija IIS local en el menú desplegable y haga clic en Crear directorio virtual.In the web app properties, select the Web tab. In the Servers section, choose Local IIS from the drop down menu and click Create Virtual Directory.

Captura de pantalla de la pestaña Web en las propiedades del proyecto

Paso 5: agregar un paquete de aplicación a una aplicación WebStep 5 - Add an app package to a web application

Agregue el paquete de la aplicación que va a distribuir a la aplicación Web.Add the app package that you are going to distribute into the web application. Puede usar el paquete de aplicación que forma parte de los paquetes de proyecto de inicio proporcionados en github si no tiene un paquete de aplicaciones disponible.You can use the app package that is part of the provided starter project packages on GitHub if you don't have an app package available. El certificado (MySampleApp. cer) con el que se firmó el paquete también tiene el ejemplo en GitHub.The certificate (MySampleApp.cer) that the package was signed with is also with the sample on GitHub. Debe tener el certificado instalado en el dispositivo antes de instalar la aplicación (paso 9).You must have the certificate installed to your device prior to installing the app (Step 9).

En la aplicación web del proyecto de inicio, se ha agregado una nueva carpeta a la aplicación web denominada paquetes que contiene los paquetes de aplicaciones que se van a distribuir.In the starter project web application, a new folder was added to the web app called packages that contains the app packages to be distributed. Para crear la carpeta en Visual Studio, haga clic con el botón derecho en el nodo del proyecto en explorador de soluciones, seleccione Agregar -> nueva carpeta y asígnele el nombre paquetes.To create the folder in Visual Studio, right click on the project node in Solution Explorer, select Add -> New Folder and name it packages. Para agregar paquetes de aplicaciones a la carpeta, haga clic con el botón derecho en la carpeta paquetes y seleccione Agregar -> elemento existente.. . y vaya a la ubicación del paquete de aplicaciones.To add app packages to the folder, right click on the packages folder and select Add -> Existing Item... and browse to the app package location.

Captura de pantalla de la adición de un paquete

Paso 6: crear una página webStep 6 - Create a Web Page

Esta aplicación Web de ejemplo usa HTML simple.This sample web app uses simple HTML. Puede compilar la aplicación web según sea necesario.You are free to build your web app as required per your needs.

Haga clic con el botón derecho en el proyecto raíz del explorador de soluciones, seleccione Agregar -> nuevo elementoy agregue una nueva página HTML de la sección Web .Right click on the root project of the Solution explorer, select Add -> New Item, and add a new HTML Page from the Web section.

Una vez creada la página HTML, haga clic con el botón derecho en la página HTML en el Explorador de soluciones y seleccione establecer como página principal.Once the HTML page is created, right click on the HTML page in the Solution Explorer and select Set As Start Page.

Haga doble clic en el archivo HTML para abrirlo en la ventana del editor de código.Double-click the HTML file to open it in the code editor window. En este tutorial, solo se usarán los elementos de la página web necesarios en la página web para invocar la aplicación del instalador de la aplicación correctamente para instalar una aplicación de Windows 10.In this tutorial, only the elements in the required in the web page to invoke the App Installer app successfully to install a Windows 10 app will be used.

Incluya el siguiente código HTML en la Página Web.Include the following HTML code in your web page. La clave para invocar correctamente el instalador de aplicaciones es usar el esquema personalizado que el instalador de la aplicación registra con el sistema operativo: ms-appinstaller:?source= .The key to successfully invoking App Installer is to use the custom scheme that App Installer registers with the OS: ms-appinstaller:?source=. Vea el ejemplo de código siguiente para obtener más detalles.See the code example below for more details.

Nota

Asegúrese de que la ruta de acceso de la dirección URL especificada después del esquema personalizado coincida con la dirección URL del proyecto en la pestaña Web de la solución de VS.Ensure that the URL path specified after the custom scheme matches the Project Url in the web tab of your VS solution.

<html>
<head>
    <meta charset="utf-8" />
    <title> Install Page </title>
</head>
<body>
    <a href="ms-appinstaller:?source=http://localhost/SampleWebApp/packages/MySampleApp.msixbundle"> Install My Sample App</a>
</body>
</html>

Paso 7: configuración de los tipos MIME de la aplicación web para el paquete de aplicacionesStep 7 - Configure the web app for app package MIME types

Abra el archivo de Web.config desde el explorador de soluciones y agregue las líneas siguientes dentro del <configuration> elemento.Open the Web.config file from the solution explorer and add the following lines within the <configuration> element.

<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>

Paso 8: agregar una exención de bucle invertido para el instalador de la aplicaciónStep 8 - Add loopback exemption for App Installer

Debido al aislamiento de red, las aplicaciones de Windows 10 como el instalador de aplicaciones están restringidas para usar direcciones de bucle invertido IP como http://localhost/ .Due to network isolation, Windows 10 apps like App Installer are restricted to use IP loopback addresses like http://localhost/. Al usar el servidor IIS local, se debe agregar el instalador de la aplicación a la lista de exenciones de bucle invertido.When using local IIS Server, App Installer must be added to the loopback exempt list.

Para ello, abra el símbolo del sistema como Administrador y escriba lo siguiente:To do this, open Command Prompt as an Administrator and enter the following:

CheckNetIsolation.exe LoopbackExempt -a -n=microsoft.desktopappinstaller_8wekyb3d8bbwe

Para comprobar que la aplicación se agrega a la lista de exenciones, use el siguiente comando para mostrar las aplicaciones en la lista de exenciones de bucle invertido:To verify that the app is added to the exempt list, use the following command to display the apps in the loopback exempt list:

CheckNetIsolation.exe LoopbackExempt -s

Debería encontrar microsoft.desktopappinstaller_8wekyb3d8bbwe en la lista.You should find microsoft.desktopappinstaller_8wekyb3d8bbwe in the list.

Una vez completada la validación local de la instalación de la aplicación a través de App Installer, puede quitar la exención de bucle invertido que agregó en este paso:Once the local validation of app installation via App Installer is complete, you can remove the loopback exemption that you added in this step by:

CheckNetIsolation.exe LoopbackExempt -d -n=microsoft.desktopappinstaller_8wekyb3d8bbwe

Paso 9: ejecución de la aplicación WebStep 9 - Run the Web App

Compile y ejecute la aplicación web haciendo clic en el botón ejecutar de la cinta de opciones de VS, tal como se muestra en la imagen siguiente:Build and run the web application by clicking on the run button on the VS Ribbon as shown in the image below:

Captura de pantalla de la ejecución de una aplicación web en Visual Studio

Se abrirá una página web en el explorador:A web page will open in your browser:

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

Haga clic en el vínculo de la página web para iniciar la aplicación del instalador de la aplicación e instalar el paquete de la aplicación de Windows 10.Click on the link in the web page to launch the App Installer app and install your Windows 10 app package.

Solución de problemasTroubleshooting issues

Privilegios insuficientesNot sufficient privilege

Si al ejecutar la aplicación web en Visual Studio aparece un error como "no tiene suficientes privilegios para tener acceso a los sitios web de IIS en el equipo", deberá ejecutar Visual Studio como administrador.If running the web app in Visual Studio displays an error such as "You do not have sufficient privilege to access IIS web sites on your machine", you will need to run Visual Studio as an administrator. Cierre la instancia actual de Visual Studio y vuelva a abrirla como administrador.Close the current instance of Visual Studio and reopen it as an admin.

Establecer página de inicioSet start page

Si la ejecución de la aplicación web hace que el explorador se cargue con un error HTTP 403,14-prohibido, se debe a que la aplicación web no tiene una página de inicio definida.If running the web app causes the browser to load with an HTTP 403.14 - Forbidden error, it's because the web app doesn't have a defined start page. Consulte el paso 6 de este tutorial para obtener información sobre cómo definir una página de inicio.Refer to Step 6 in this tutorial to learn how to define a start page.