從 Azure Web 應用程式散發 Windows 10 應用程式Distribute a Windows 10 app from an Azure web app

應用程式安裝程式可讓開發人員和 IT 專業人員透過在他們自己的內容傳遞網路 (CDN) 上,散發 Windows 10 應用程式。The App Installer app allows developers and IT Pros to distribute Windows 10 apps by hosting them on their own Content Delivery Network (CDN). 這對於不想要或不需要發佈其應用程式至 Microsoft Store ,但仍然想要利用 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.

本主題概述設定 Azure Web 服務器以裝載 Windows 10 應用程式套件的步驟,以及如何使用 App Installer 應用程式來安裝應用程式套件。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.

本教學課程中,我們會透過在本機設定 IIS 伺服器,確認 Web 應用程式可以正確裝載應用程式套件,以及有效叫用和使用應用程式安裝程式 App。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. 我們也有教學課程教導在領域 (Azure 和 AWS) 中熱門雲端 Web 服務上適當裝載您的 Web 應用程式,以確保符合應用程式安裝程式 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. 這個逐步教學課程不需要任何專業知識,並且很容易遵循。This step-by-step tutorial doesn't require any expertise and is very easy to follow.

安裝程式Setup

為成功遵循本教學課程,您需要:To successfully follow this tutorial, you will need the following:

  1. Microsoft Azure 訂用帳戶Microsoft Azure subscription
  2. Windows 10 應用程式套件-您將發佈的應用程式套件Windows 10 app package - The app package that you will distribute

選用:在 GitHub 上的入門專案Optional: Starter Project on GitHub. 如果您沒有要使用的應用程式套件或網頁,但仍然想要了解如何使用這項功能,這會很有幫助。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.

步驟 1 - 取得 Azure 訂用帳戶Step 1 - Get an Azure subscription

若要取得 Azure 訂用帳戶,請造訪 Azure 帳戶頁面To get an Azure subscription, visit the Azure account page. 基於本教學課程的目的,您可以使用免費的會員資格。For the purposes of this tutorial, you can use a free membership.

步驟 2 - 建立 Azure Web 應用程式Step 2 - Create an Azure Web App

在 Azure 入口網站頁面上,按一下 [+ 建立資源] 按鈕,然後選取 [Web 應用程式]In the Azure portal page, click the + Create a Resource button and then select Web App

建立 Azure 應用程式的螢幕擷取畫面

建立唯一的 App 名稱並讓剩餘的欄位使用預設值。Create a unique App name and leave the rest of the fields as default. 按一下 [建立] 以完成建立 Web 應用程式精靈。Click Create to finish the Web App creation wizard.

建立 web 應用程式的螢幕擷取畫面

步驟 3 - 裝載應用程式套件和網頁Step 3 - Hosting the app package and the web page

一旦建立 Web 應用程式,您就可以從 Azure 入口網站上儀表板進行存取。Once the web app had been created, you can access it from the dashboard on the Azure portal. 在此步驟中,我們將使用 Azure 入口網站的 GUI 建立簡單的網頁。In this step, we're going to create a simple web page with the GUI of the Azure portal.

從儀表板選取新建立的 Web 應用程式之後,請使用搜尋欄位來尋找和開啟 [App Service 編輯器]After selecting the newly created web app from the dashboard, use the search field to find and open App Service Editor.

在編輯器中,有預設的 hostingstart.html 檔案。In the editor, there is a default hostingstart.html file. 以滑鼠右鍵按一下檔案總管面板的空白區域,然後選取 [上傳檔案] 以開始上傳您的應用程式套件。Right-click in the empty space of file explorer panel and select Upload Files to begin uploading your app packages.

注意

如果您沒有可使用的應用程式套件,您可以使用 GitHub 上屬於所提供入門專案存放庫一部分的應用程式套件。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. 簽署套件的憑證 (MySampleApp.cer) 也是在 GitHub 上的範例。The certificate (MySampleApp.cer) that the package was signed with is also with the sample on GitHub. 您必須在安裝應用程式之前安裝憑證到您的裝置。You must have the certificate installed to your device prior to installing the app.

上傳套件的螢幕擷取畫面

以滑鼠右鍵按一下檔案總管面板的空白區域,然後選取 [新檔案] 以建立新的檔案。Right-click in the empty space of file explorer panel and select New Files to create a new file. 為檔案命名:default.htmlName the file: default.html.

如果您使用入門專案中提供的應用程式套件,複製下列 HTML 程式碼到新建立的網頁 default.htmlIf you're using the app package provided in the Starter Project, copy the following HTML code to the newly create web page default.html. 如果您使用您自己的應用程式套件,請修改 App 服務 URL (source= 之後的 URL)。If you're using your own app package, modify the app service URL (the URL after source=). 您可以在 Azure 入口網站中從您的應用程式的概觀頁面取得的 App 服務 URL。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>

步驟 4 - 設定應用程式套件 MIME 類型的 Web 應用程式Step 4 - Configure the web app for app package MIME types

新增檔案到 Web 應用程式,其命名為:Web.configAdd a new file to the web app named: Web.config. 從 [檔案總管]開啟 Web.config 檔案,然後新增下列行。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>

步驟 5 - 執行和測試Step 5 - Run and test

若要啟動您建立的建立網頁,請使用步驟 3 的 URL 到瀏覽器,後面跟著 /default.htmlTo launch the web page that you created, use the URL from step 3 into the browser followed by /default.html.

從網頁安裝應用程式的螢幕擷取畫面

按一下 [安裝我範例應用程式] 來啟動應用程式安裝程式,並安裝您的應用程式套件。Click "Install My Sample App" to launch App Installer and install your app package.

疑難排解問題Troubleshooting Issues

應用程式安裝程式 App 無法安裝App Installer app fails to install

如果裝置上未安裝簽署應用程式套件的憑證,應用程式安裝將會失敗。App install will fail if the certificate that the app package is signed with isn't installed on the device. 若要修正這個問題,您必須在安裝應用程式之前安裝憑證。To fix this, you will need to install the certificate prior to the installation of the app. 如果您裝載公開散發的應用程式套件,我們建議您使用憑證授權單位的憑證簽署您的應用程式套件。If you are hosting an app package for public distribution, we recommended signing your app package with a certificate from a certificate authority.

認證失敗的螢幕擷取畫面

確定已安裝應用程式安裝程式 App。Ensure that the App Installer app is installed. 移至 [設定] -> [應用程式與功能] ,並在已安裝的 app 清單中尋找應用程式安裝程式。Go to Settings -> Apps & Features and find App Installer in the installed apps list.