Azure web アプリから Windows 10 アプリを配布します。Distribute a Windows 10 app from an Azure web app

アプリ インストーラー アプリは、開発者と IT 担当者が、Windows 10 アプリを独自の 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). これは 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.

このトピックでは、ホストの Windows 10 アプリ パッケージに、Azure の Web サーバーとアプリのインストーラー アプリを使用して、アプリ パッケージをインストールする方法を構成する手順について説明します。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 アプリケーションが適切にアプリ パッケージをホストし、アプリ インストーラー アプリを効果的に起動して使用できることをローカルで確認する方法について説明します。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. また、現場で一般的なクラウド Web サービス (Azure および AWS) で 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. これは、使用するアプリ パッケージまたは Web ページがないが、この機能を使用する方法を確認したい場合に便利です。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 Portal ページで、 [+ Create a Resource] (+ リソースの作成) ボタンをクリックし、 [Web アプリ] を選択します。In the Azure portal page, click the + Create a Resource button and then select Web App

Azure アプリの作成のスクリーン ショット

一意の [アプリ名] を作成し、残りのフィールドは既定値のままにします。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 - アプリ パッケージと Web ページのホスト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 を備えた簡単な Web ページを作成します。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.html という名前を付けます。Name the file: default.html.

スターター プロジェクト で提供されたアプリ パッケージを使用している場合は、次の HTML コードをコピーして default.html という Web ページを新規に作成します。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. 独自のアプリ パッケージを使用している場合は、アプリ サービスの URL (source= の後の URL) を変更します。If you're using your own app package, modify the app service URL (the URL after source=). Azure ポータルで、アプリの概要ページから、アプリ サービスの 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.appxbundle"> Install My Sample App</a>
</body>
</html>

手順 4 - アプリ パッケージの MIME タイプ用の Web アプリの構成Step 4 - Configure the web app for app package MIME types

新しいファイルを Web.config という名前の Web アプリに追加します。Add 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

作成した Web ページを起動するには、手順 3 の URL を /default.html に続けてブラウザーに貼り付けます。To launch the web page that you created, use the URL from step 3 into the browser followed by /default.html.

Web ページからアプリのインストールのスクリーン ショット

[Install My Sample App] (マイ サンプル アプリのインストール) をクリックしてアプリ インストーラーを起動し、アプリ パッケージをインストールします。Click "Install My Sample App" to launch App Installer and install your app package.

問題のトラブルシューティングTroubleshooting Issues

アプリ インストーラー アプリのインストールの失敗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.

証明書のエラーのスクリーン ショット

アプリ インストーラー アプリがインストールされていることを確認します。Ensure that the App Installer app is installed. [設定] -> [アプリと機能] に移動し、インストールされたアプリの一覧でアプリ インストーラーを見つけます。Go to Settings -> Apps & Features and find App Installer in the installed apps list.