IIS サーバーからの Windows 10 アプリの配布Distribute a Windows 10 app from an IIS server

このチュートリアルでは、IIS サーバーを設定する方法、web アプリがアプリケーションパッケージをホストできることを確認する方法、およびアプリインストーラーを効果的に呼び出す方法について説明します。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.

アプリ インストーラー アプリは、開発者と 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.

セットアップSetup

このチュートリアルを正常に実行するには、次のものが必要です。To successfully go through with this tutorial, you will need the following:

  1. Visual Studio 2017Visual Studio 2017
  2. Web 開発ツールと IISWeb development tools and IIS
  3. 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 have app packages to work with, but would still like to learn how to use this feature.

手順 1-IIS と ASP.NET をインストールするStep 1 - Install IIS and ASP.NET

インターネットインフォメーションサービス は、[スタート] メニューを使用してインストールできる Windows の機能です。Internet Information Services is a Windows feature that can be installed via the Start menu. [ スタート] メニュー で、 [Windows の機能の有効化または無効化] を検索します。In Start menu search for Turn Windows features on or off.

IIS をインストールするには、[ インターネットインフォメーションサービス を検索して選択します。Find and select Internet Information Services to install IIS.

注意

インターネットインフォメーションサービスの下のすべてのチェックボックスをオンにする必要はありません。You don't need to select all the check boxes under Internet Information Services. インターネットインフォメーションサービスを確認するときに選択したものだけが十分です。Only the ones selected when you check Internet Information Services are sufficient.

また、ASP.NET 4.5 以上をインストールする必要があります。You will also need to install ASP.NET 4.5 or greater. インストールするには、[ インターネットインフォメーションサービス-> World Wide Web Services-> アプリケーション開発機能] を見つけます。To install it, locate Internet Information Services -> World Wide Web Services -> Application Development Features. ASP.NET 4.5 以上のバージョンの ASP.NET を選択します。Select a version of ASP.NET that is greater than or equal to ASP.NET 4.5.

ASP.NET 機能のインストールのスクリーンショット

手順 2-Visual Studio 2017 と Web 開発ツールをインストールするStep 2 - Install Visual Studio 2017 and Web Development tools

まだインストールしていない場合は、 Visual Studio 2017 をインストールします。Install Visual Studio 2017 if you have not already installed it. Visual Studio 2017 を既にお持ちの場合は、次のワークロードがインストールされていることを確認してください。If you already have Visual Studio 2017, ensure that the following workloads are installed. ワークロードがインストールに存在しない場合は、Visual Studio インストーラー ([スタート] メニューから見た) を使用して操作を進めます。If the workloads are not present on your installation, follow along using the Visual Studio Installer (found from the Start menu).

インストール中に、[ ASP.NET And Web development ] (関心のあるその他のワークロード) を選択します。During installation, select ASP.NET and Web development and any other workloads that you are interested in.

インストールが完了したら、Visual Studio を起動し、新しいプロジェクトを作成します ([ファイル] [ -> 新しいプロジェクト])。Once installation is complete, launch Visual Studio and create a new project (File -> New Project).

手順 3-Web アプリを構築するStep 3 - Build a Web App

管理者として visual Studio 2017 を起動し、のプロジェクトテンプレートを使用して新しいvisual C# Web アプリケーションプロジェクトを作成します。Launch Visual Studio 2017 as Administrator and create a new Visual C# Web Application project with an empty project template.

新しい web プロジェクトの作成のスクリーンショット

手順 4-Web アプリを使用して IIS を構成するStep 4 - Configure IIS with our Web App

ソリューションエクスプローラーから、ルートプロジェクトを右クリックし、[ プロパティ] を選択します。From the Solution Explorer, right click on the root project and select Properties.

Web アプリのプロパティで、[ web ] タブを選択します。[ サーバー ] セクションで、ドロップダウンメニューから [ ローカル IIS ] を選択し、[ 仮想ディレクトリの作成] をクリックします。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.

プロジェクトのプロパティの [web] タブのスクリーンショット

手順 5-web アプリケーションへのアプリパッケージの追加Step 5 - Add an app package to a web application

Web アプリケーションに配布するアプリケーションパッケージを追加します。Add the app package that you are going to distribute into the web application. 利用可能なアプリパッケージがない場合は、GitHub の提供された スタータープロジェクトパッケージ の一部であるアプリパッケージを使用できます。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. パッケージの署名に使用された証明書 (MySampleApp.cer) も GitHub のサンプルに含まれています。The certificate (MySampleApp.cer) that the package was signed with is also with the sample on GitHub. アプリをインストールする前に、デバイスに証明書がインストールされている必要があります (手順 9)。You must have the certificate installed to your device prior to installing the app (Step 9).

Starter project web アプリケーションで、配布されるアプリケーションパッケージを含む パッケージ と呼ばれる新しいフォルダーが web アプリに追加されました。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. Visual Studio でフォルダーを作成するには、ソリューションエクスプローラーでプロジェクトノードを右クリックし、[追加] [ -> 新しいフォルダー ] の順に選択して、パッケージに名前を指定します。To create the folder in Visual Studio, right click on the project node in Solution Explorer, select Add -> New Folder and name it packages. アプリパッケージをフォルダーに追加するには、[パッケージ] フォルダーを右クリックし、[既存項目の追加...] を選択して -> Existing Item... 、アプリパッケージの場所を参照します。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.

パッケージの追加のスクリーンショット

手順 6-Web ページを作成するStep 6 - Create a Web Page

このサンプル web アプリでは、単純な HTML を使用します。This sample web app uses simple HTML. 必要に応じて web アプリを自由に構築できます。You are free to build your web app as required per your needs.

ソリューションエクスプローラーのルートプロジェクトを右クリックし、[追加] [新しい項目] の順に選択し、 -> New Item Webセクションから新しいHTML ページを追加します。Right click on the root project of the Solution explorer, select Add -> New Item, and add a new HTML Page from the Web section.

HTML ページが作成されたら、ソリューションエクスプローラーの HTML ページを右クリックし、[ スタートページとして設定] を選択します。Once the HTML page is created, right click on the HTML page in the Solution Explorer and select Set As Start Page.

HTML ファイルをダブルクリックして、コードエディターウィンドウで開きます。Double-click the HTML file to open it in the code editor window. このチュートリアルでは、Windows 10 アプリを正常にインストールするために、web ページで必要なの要素のみが、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.

Web ページに次の HTML コードを含めます。Include the following HTML code in your web page. アプリインストーラーを正常に呼び出すには、アプリインストーラーが OS に登録するカスタムスキームを使用することが重要です 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=. 詳細については、次のコード例を参照してください。See the code example below for more details.

注意

カスタムスキームの後に指定された URL パスが、VS ソリューションの [web] タブのプロジェクト Url と一致することを確認します。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>

手順 7-アプリパッケージの MIME の種類の web アプリを構成するStep 7 - Configure the web app for app package MIME types

ソリューションエクスプローラーから Web.config ファイルを開き、要素内に次の行を追加し <configuration> ます。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>

手順 8-アプリインストーラーのループバック除外を追加するStep 8 - Add loopback exemption for App Installer

ネットワークの分離のため、アプリインストーラーなどの Windows 10 アプリは、のような IP ループバックアドレスを使用するように制限されてい http://localhost/ ます。Due to network isolation, Windows 10 apps like App Installer are restricted to use IP loopback addresses like http://localhost/. ローカル IIS サーバーを使用する場合は、アプリケーションインストーラーをループバック除外リストに追加する必要があります。When using local IIS Server, App Installer must be added to the loopback exempt list.

これを行うには、管理者としてコマンドプロンプトを開き、次のように入力します。To do this, open Command Prompt as an Administrator and enter the following:

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

アプリが除外リストに追加されていることを確認するには、次のコマンドを使用して、ループバック除外リストにアプリを表示します。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

一覧にはがあり microsoft.desktopappinstaller_8wekyb3d8bbwe ます。You should find microsoft.desktopappinstaller_8wekyb3d8bbwe in the list.

アプリインストーラーによるアプリのインストールのローカル検証が完了したら、この手順で追加したループバックの除外を削除できます。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

手順 9-Web アプリを実行するStep 9 - Run the Web App

次の図に示すように、VS リボンの [実行] ボタンをクリックして、web アプリケーションをビルドして実行します。Build and run the web application by clicking on the run button on the VS Ribbon as shown in the image below:

Visual Studio での web アプリの実行のスクリーンショット

ブラウザーで web ページが開きます。A web page will open in your browser:

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

Web ページのリンクをクリックして、アプリインストーラーアプリを起動し、Windows 10 アプリパッケージをインストールします。Click on the link in the web page to launch the App Installer app and install your Windows 10 app package.

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

十分な特権がありませんNot sufficient privilege

Visual Studio で web アプリを実行すると、"コンピューター上の IIS web サイトにアクセスするための十分な特権がありません" などのエラーが表示される場合は、Visual Studio を管理者として実行する必要があります。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. Visual Studio の現在のインスタンスを閉じ、管理者として再度開きます。Close the current instance of Visual Studio and reopen it as an admin.

スタートページの設定Set start page

Web アプリを実行すると、ブラウザーが HTTP 403.14-許可されていないエラーで読み込まれる場合は、web アプリにスタートページが定義されていないことが原因です。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. スタートページを定義する方法については、このチュートリアルの手順6を参照してください。Refer to Step 6 in this tutorial to learn how to define a start page.