Azure Mobile Apps를 사용하여 Windows(UWP) 앱 빌드

아티클
09/07/2023

메모

이 제품은 사용 중지되었습니다. .NET 8 이상을 사용하는 프로젝트를 대체하려면 Community Toolkit Datasync 라이브러리참조하세요.

이 자습서에서는 Azure Mobile Apps 및 Azure 모바일 앱 백 엔드를 사용하여 UWP(유니버설 Windows 플랫폼) 데스크톱 앱에 클라우드 기반 백 엔드 서비스를 추가하는 방법을 보여 줍니다. 새 모바일 앱 백 엔드와 Azure에 앱 데이터를 저장하는 간단한 할 일 목록 앱을 만듭니다.

이 자습서는 Azure App Service에서 Mobile Apps 기능을 사용하는 방법에 대한 다른 모든 Windows(UWP) 자습서에 필요합니다.

필수 구성 요소

이 자습서를 완료하려면 다음이 필요합니다.

Visual Studio 2022 다음 워크로드를 사용하여.
- ASP.NET 및 웹 개발
- Azure 개발
- 유니버설 Windows 플랫폼 개발
Azure 계정.
Azure CLI.
- az login 사용하여 로그인하고 시작하기 전에 적절한 구독을 선택합니다.
(선택 사항) Azure Developer CLI.

이 자습서는 Windows 시스템에서만 완료할 수 있습니다.

샘플 앱 다운로드

브라우저에서 azure-mobile-apps 리포지토리 엽니다.
코드 드롭다운을 열고 zip다운로드 선택합니다.
다운로드가 완료되면 Downloads 폴더를 열고 azure-mobile-apps-main.zip 파일을 찾습니다.
다운로드한 파일을 마우스 오른쪽 단추로 클릭하고 모두 추출...선택합니다.

원하는 경우 PowerShell을 사용하여 보관 파일을 확장할 수 있습니다.
```
C:\Temp> Expand-Archive azure-mobile-apps-main.zip
```

샘플은 추출된 파일 내의 샘플 폴더에 있습니다. 빠른 시작 샘플의 이름은 TodoApp. TodoApp.sln 파일을 두 번 클릭하여 Visual Studio에서 샘플을 열 수 있습니다.

솔루션에 대한 파일 탐색기의 스크린샷

Azure에 백 엔드 배포

메모

다른 빠른 시작에서 백 엔드를 이미 배포한 경우 동일한 백 엔드를 사용하고 이 단계를 건너뛸 수 있습니다.

백 엔드 서비스를 배포하려면 다음을 수행합니다.

Azure App Service 및 Azure SQL Database를 Azure에 프로비전합니다.
Visual Studio를 사용하여 새로 만든 Azure App Service에 서비스 코드를 배포합니다.

Azure 개발자 CLI를 사용하여 모든 단계 완료

TodoApp 샘플은 Azure 개발자 CLI를 지원하도록 구성됩니다. 모든 단계(프로비전 및 배포)를 완료하려면 다음을 수행합니다.

Azure Developer CLI설치합니다.
터미널을 열고 디렉터리를 TodoApp.sln 파일이 포함된 폴더로 변경합니다. 이 디렉터리에는 azure.yaml포함됩니다.
azd up실행합니다.

Azure에 아직 로그인하지 않은 경우 브라우저가 시작되어 로그인을 요청합니다. 그러면 구독 및 Azure 지역을 사용할지 묻는 메시지가 표시됩니다. 그런 다음 Azure 개발자 CLI는 필요한 리소스를 프로비전하고 서비스 코드를 선택한 Azure 지역 및 구독에 배포합니다. 마지막으로 Azure 개발자 CLI는 적절한 Constants.cs 파일을 작성합니다.

azd env get-values 명령을 실행하여 데이터베이스에 직접 액세스하려는 경우 SQL 인증 정보를 확인할 수 있습니다.

Azure Developer CLI를 사용하여 단계를 완료한 경우다음 단계로 . Azure 개발자 CLI를 사용하지 않으려면 수동 단계를 진행합니다.

Azure에서 리소스를 만듭니다.

터미널을 열고 디렉터리를 TodoApp.sln 파일이 포함된 폴더로 변경합니다. 이 디렉터리에는 azuredeploy.json포함됩니다.
Azure CLI를 사용하여 로그인하고 구독 선택했는지 확인합니다.
새 리소스 그룹을 만듭니다.
```
az group create -l westus -g quickstart
```
이 명령은 미국 서부 지역에 quickstart 리소스 그룹을 만듭니다. 원하는 지역을 선택할 수 있으며, 리소스를 만들 수 있습니다. 이 자습서에서 언급된 모든 위치에서 동일한 이름과 지역을 사용해야 합니다.
그룹 배포를 사용하여 리소스를 만듭니다.
```
az deployment group create -g quickstart --template-file azuredeploy.json --parameters sqlPassword=MyPassword1234
```
SQL 관리자 암호에 대한 강력한 암호를 선택합니다. 나중에 데이터베이스에 액세스할 때 필요합니다.
배포가 완료되면 나중에 필요한 중요한 정보를 보관하므로 출력 변수를 가져옵니다.
```
az deployment group show -g quickstart -n azuredeploy --query properties.outputs
```
출력 예제는 다음과 같습니다.
나중에 사용할 수 있도록 출력의 각 값을 기록해 둡니다.

서비스 코드 게시

Visual Studio에서 TodoApp.sln 엽니다.

오른쪽 창에서 솔루션 탐색기선택합니다.
프로젝트를 마우스 오른쪽 단추로 클릭한 다음 시작 프로젝트설정을 선택합니다.
위쪽 메뉴에서 빌드>TodoAppService.NET6게시를 선택합니다.
게시 창에서 대상: Azure다음누릅니다.
특정 대상을 선택합니다. Azure App Service(Windows)다음누릅니다.
필요한 경우 로그인하고 적절한 구독 이름선택합니다.
보기 리소스 그룹설정되었는지 확인합니다.
quickstart 리소스 그룹을 확장한 다음 이전에 만든 App Service를 선택합니다.
마침선택합니다.
게시 프로필 만들기 프로세스가 완료되면 닫기를 선택합니다.
서비스 종속성 찾아 SQL Server 데이터베이스 옆에 있는 삼중 점을 선택한 다음,연결을 선택합니다.
Azure SQL Database선택한 다음선택합니다.
빠른 시작 데이터베이스를 선택한 다음선택합니다.
배포 출력에 있던 SQL 사용자 이름 및 암호를 사용하여 양식을 입력한 다음 다음선택합니다.
마침선택합니다.
완료되면 닫기를 선택합니다.
게시 선택하여 이전에 만든 Azure App Service에 앱을 게시합니다.
백 엔드 서비스가 게시되면 브라우저가 열립니다. URL에 /tables/todoitem?ZUMO-API-VERSION=3.0.0 추가합니다.

샘플 앱 구성

클라이언트 애플리케이션은 백 엔드와 통신할 수 있도록 백 엔드의 기본 URL을 알고 있어야 합니다.

azd up 사용하여 서비스를 프로비전하고 배포한 경우 Constants.cs 파일이 생성되었으며 이 단계를 건너뛸 수 있습니다.

TodoApp.Data 프로젝트를 확장합니다.
TodoApp.Data 프로젝트를 마우스 오른쪽 단추로 클릭한 다음 >클래스 추가...를 선택합니다..
이름으로 Constants.cs 입력한 다음 추가를 선택합니다.
Constants.cs.example 파일을 열고 내용(Ctrl-A, Ctrl-C)을 복사합니다.
Constants.cs전환하고 모든 텍스트(Ctrl-A)를 강조 표시한 다음 예제 파일(Ctrl-V)의 내용을 붙여넣습니다.

https://APPSERVICENAME.azurewebsites.net 서비스의 백 엔드 URL로 바꿉니다.

namespace TodoApp.Data
{
    public static class Constants
    {
        /// <summary>
        /// The base URI for the Datasync service.
        /// </summary>
        public static string ServiceUri = "https://demo-datasync-quickstart.azurewebsites.net";
    }
}

게시 탭에서 서비스의 백 엔드 URL을 가져올 수 있습니다. https URL을 사용해야 합니다.

파일을 저장합니다. (Ctrl-S).

샘플 앱 빌드 및 실행

솔루션 탐색기에서 windows 폴더를 확장합니다.
프로젝트를 마우스 오른쪽 단추로 클릭하고 시작 프로젝트설정을 선택합니다.
위쪽 표시줄에서 CPU 구성 및 TodoApp.UWP 대상을 선택합니다.

UWP 구성
F5 눌러 프로젝트를 빌드하고 실행합니다.

앱이 시작되면 텍스트 상자가 있는 빈 목록이 표시됩니다. 당신은 할 수 있어요:

텍스트를 입력한 다음 + 아이콘을 눌러 항목을 추가합니다.
모든 항목을 완료로 표시하려면 확인란을 설정하거나 선택 취소합니다.
새로 고침 아이콘을 눌러 서비스에서 데이터를 다시 로드합니다.

UWP 실행 앱

다음 단계

앱인증을 추가하는 자습서를 계속합니다.

다음을 통해 공유