IIS 서버에서 Windows 10 앱 배포Distribute a Windows 10 app from an IIS server

이 자습서에서는 IIS 서버를 설정 하 고, 웹 앱이 앱 패키지를 호스트할 수 있는지 확인 하 고, 앱 설치 관리자를 효과적으로 호출 및 사용할 수 있는지 확인 하는 방법을 보여 줍니다.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 전문가는 앱 설치 관리자 앱을 사용 하 여 CDN (자체 Content Delivery Network)에서 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.

설치 프로그램Setup

이 자습서를 성공적으로 진행 하려면 다음이 필요 합니다.To successfully go through with this tutorial, you will need the following:

  1. Visual Studio 2017Visual Studio 2017
  2. 웹 개발 도구 및 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 서비스-> 응용 프로그램 개발 기능을 찾습니다.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 및 웹 개발 도구 설치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 및 웹 개발 및 관심 있는 기타 작업을 선택 합니다.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 단계-웹 앱 빌드Step 3 - Build a Web App

관리자 권한 으로 visual Studio 2017을 시작 하 고 프로젝트 템플릿을 사용 하 여 새 Visual c # 웹 응용 프로그램 프로젝트를 만듭니다.Launch Visual Studio 2017 as Administrator and create a new Visual C# Web Application project with an empty project template.

새 웹 프로젝트를 만드는 스크린샷

4 단계-웹 앱을 사용 하 여 IIS 구성Step 4 - Configure IIS with our Web App

솔루션 탐색기에서 루트 프로젝트를 마우스 오른쪽 단추로 클릭 하 고 속성을 선택 합니다.From the Solution Explorer, right click on the root project and select Properties.

웹 앱 속성에서 탭을 선택 합니다. 서버 섹션의 드롭다운 메뉴에서 로컬 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.

프로젝트 속성의 웹 탭 스크린샷

5 단계-웹 응용 프로그램에 앱 패키지 추가Step 5 - Add an app package to a web application

웹 응용 프로그램에 배포할 앱 패키지를 추가 합니다.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)도 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 웹 응용 프로그램에서 배포할 앱 패키지를 포함 하는 패키지 라는 새 폴더가 웹 앱에 추가 되었습니다.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에서 폴더를 만들려면 솔루션 탐색기에서 프로젝트 노드를 마우스 오른쪽 단추로 클릭 하 Add -> 고새 폴더 추가를 선택 하 고 패키지이름을로 설정 합니다.To create the folder in Visual Studio, right click on the project node in Solution Explorer, select Add -> New Folder and name it packages. 폴더에 앱 패키지를 추가 하려면 패키지 폴더를 마우스 오른쪽 단추로 클릭 하 고 Add -> 기존 항목 추가 ... 를 선택 하 고 앱 패키지 위치로 이동 합니다.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 단계-웹 페이지 만들기Step 6 - Create a Web Page

이 샘플 웹 앱은 간단한 HTML을 사용 합니다.This sample web app uses simple HTML. 필요에 따라 필요에 따라 웹 앱을 자유롭게 빌드할 수 있습니다.You are free to build your web app as required per your needs.

솔루션 탐색기의 루트 프로젝트를 마우스 오른쪽 단추로 클릭 하 고 , -> 새 항목추가를 선택 하 고, 섹션에서 새 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 앱을 설치 하는 데 사용 됩니다.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.

웹 페이지에 다음 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 솔루션의 웹 탭에 있는 프로젝트 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 형식에 대 한 웹 앱 구성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 단계-웹 앱 실행Step 9 - Run the Web App

아래 그림에 표시 된 것 처럼 VS 리본에서 실행 단추를 클릭 하 여 웹 응용 프로그램을 빌드하고 실행 합니다.Build and run the web application by clicking on the run button on the VS Ribbon as shown in the image below:

Visual Studio에서 실행 중인 웹 앱의 스크린샷

웹 페이지가 브라우저에서 열립니다.A web page will open in your browser:

웹 페이지에서 앱을 설치 하는 스크린샷

웹 페이지의 링크를 클릭 하 여 앱 설치 관리자 앱을 시작 하 고 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에서 웹 앱을 실행 하는 경우 "컴퓨터에서 IIS 웹 사이트에 액세스할 수 있는 충분 한 권한이 없습니다."와 같은 오류가 표시 되 면 관리자 권한으로 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

웹 앱을 실행 하는 경우 HTTP 403.14 금지 오류가 발생 하 여 브라우저가 로드 됩니다. 웹 앱에 정의 된 시작 페이지가 없기 때문입니다.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.