Azure Mobile Apps를 사용하여 .NET MAUI 앱 빌드

아티클
01/12/2024

메모

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

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

Azure App Service의 Mobile Apps 기능을 사용하여 다른 .NET MAUI 자습서 전에 이 자습서를 완료해야 합니다.

필수 구성 요소

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

다음 워크로드를 사용하여 Visual Studio 2022
.
- ASP.NET 및 웹 개발
- Azure 개발
- .NET을 사용한 모바일 개발
Azure 계정.
Azure CLI.
- az login 사용하여 로그인하고 시작하기 전에 적절한 구독을 선택합니다.
(선택 사항) Azure Developer CLI.
다음 설정을 사용하여 Android 가상 디바이스.
- 전화: 모든 휴대폰 이미지 - 테스트를 위해 Pixel 5를 사용합니다.
- 시스템 이미지: Android 11(Google API를 사용하는 API 30)
사용 가능한 Mac(iOS 버전 컴파일 및 실행용):
- XCode 설치
- 추가 필수 구성 요소를 추가할 수 있도록 설치 후 Xcode를 엽니다.
- 열리면 XCode 기본 설정...>구성 요소선택하고 iOS 시뮬레이터를 설치합니다.
- 가이드에 따라 Mac에 페어링.

mac은 iOS 버전을 컴파일하는 데 필요합니다.

Mac 또는 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).

Android 앱 빌드 및 실행

솔루션 탐색기에서 maui 폴더를 확장합니다.
프로젝트를 마우스 오른쪽 단추로 클릭하고 시작 프로젝트설정을 선택합니다.
위쪽 막대에서 적절한 Android 에뮬레이터를 선택합니다.
Android 에뮬레이터를 사용할 수 없는 경우 만들어야 합니다. 자세한 내용은 android 에뮬레이터 설정참조하세요. 새 Android 에뮬레이터를 만들려면 다음을 수행합니다.
- AndroidAndroid Device Manager도구를 선택합니다.
- + 새선택합니다.
- 왼쪽에서 다음 옵션을 선택합니다.
  - 이름: quickstart
  - 기본 디바이스: Pixel 5
  - 프로세서: x86_64
  - OS: Android 11.0 - API 30
  - Google API: 확인
- 만들기 선택합니다.
- 필요한 경우 사용권 계약에 동의합니다. 그러면 이미지가 다운로드됩니다.
- 시작 단추가 나타나면 시작누릅니다.
- Hyper-V 하드웨어 가속에 대한 메시지가 표시되면 계속하기 전에 하드웨어 가속을 사용하도록 설정하는 설명서를 참조하세요. 에뮬레이터는 하드웨어 가속을 사용하지 않고 속도가 느려집니다.
팁

계속하기 전에 Android 에뮬레이터를 시작합니다. Android 디바이스 관리자를 열고 선택한 에뮬레이터 옆에 있는 시작 눌러 이 작업을 수행할 수 있습니다.
F5 눌러 프로젝트를 빌드하고 실행합니다.

앱이 시작되면 에뮬레이터에 항목을 추가할 빈 목록과 텍스트 상자가 표시됩니다. 당신은 할 수 있어요:

상자에 텍스트를 입력한 다음 Enter 키를 눌러 새 항목을 삽입합니다.
완료된 플래그를 설정하거나 지울 항목을 선택합니다.
새로 고침 아이콘을 눌러 서비스에서 데이터를 다시 로드합니다.

실행 중인 Android 앱의 할 일 목록을 보여 주는 스크린샷

Windows 앱 빌드 및 실행

솔루션 탐색기에서 maui 폴더를 확장합니다.
프로젝트를 마우스 오른쪽 단추로 클릭하고 시작 프로젝트설정을 선택합니다.
위쪽 막대에서 windows Machine선택합니다.
F5 눌러 프로젝트를 빌드하고 실행합니다.

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

상자에 텍스트를 입력한 다음 Enter 키를 눌러 새 항목을 삽입합니다.
완료된 플래그를 설정하거나 지울 항목을 선택합니다.
새로 고침 아이콘을 눌러 서비스에서 데이터를 다시 로드합니다.

할 일 목록을 보여 주는 실행 중인 Windows 앱의 스크린샷

다음 단계

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

다음을 통해 공유