연습 - 앱 만들기 및 Azure에 배포

10분

App Service를 사용하여 원격 디버깅 연습을 진행하려면 먼저 Azure에 애플리케이션을 만들고 배포해야 합니다. 만들게 될 Razor Pages 샘플 앱을 사용하면 사용자가 조직별로 GitHub 리포지토리를 검색할 수 있습니다. 그러나 앱에는 배포된 후 Visual Studio를 사용하여 문제를 해결할 미묘한 버그도 포함되어 있습니다.

샘플 앱 만들기

Visual Studio를 사용하여 이 모듈에 대한 샘플 앱을 만들 수 있습니다. 샘플 앱을 사용하면 이름으로 GitHub 조직을 검색하고 해당 리포지토리를 간단한 테이블에 표시할 수 있습니다.

Visual Studio 내에서 파일 > 새 프로젝트를 선택합니다.
새 프로젝트 만들기 대화 상자에서 ASP.NET을 검색하고 ASP.NET 코어 웹앱 옵션을 선택합니다. Model-View-Controller 옵션 대신 Razor Pages 프로젝트 템플릿을 선택한 후, 다음을 선택합니다.
새 프로젝트 구성 대화 상자에서 프로젝트 이름을 GitHubBrowser로 지정하고 나머지 설정을 기본값으로 두고 다음을 선택합니다.

중요

아래 코드 조각이 일치하는 네임스페이스에서 작동하려면 프로젝트 이름을 GitHubBrowser로 지정해야 합니다. 프로젝트의 이름을 다른 이름으로 지정하는 경우 코드 조각에서 네임스페이스를 업데이트해야 합니다.
추가 정보 단계에서 .NET 6.0(장기 지원)을 선택한 다음, 만들기를 선택합니다. 이 연습은 .NET 5.0 또는 .NET Core 3.1과 같은 이전 버전의 .NET에서도 사용할 수 있습니다.

Visual Studio에서 프로젝트를 만든 후 솔루션 탐색기에서 Pages 폴더를 확장하고 Index.cshtml 파일을 엽니다. Index.cshtml의 내용을 다음 코드로 바꿉니다.

@page
@model IndexModel

<h1 class="display-6">Welcome to the GitHub searcher!</h1>
<p class="mb-3">Enter the name of a GitHub organization such as "Microsoft" or "Azure" to browse its repositories.</p>

<form method="post" class="form mb-5">
    <div class="form-group mb-3">
        <input type="text" class="form-control" asp-for="@Model.SearchTerm" />
    </div>
    <input class="btn btn-success" type="submit" value="Search" />
</form>

<table class="table table-striped table-bordered">
    <thead>
        <tr>
            <td>Name</td>
            <td>Description</td>
            <td>Link</td>
        </tr>
    </thead>
    @foreach (var item in Model.Repos)
    {
        <tr>
            <td>@item.Name</td>
            <td>@Html.Raw(item.Description)</td>
            <td><a class="btn btn-secondary" href="@item.HtmlUrl">Browse</a></td>
        </tr>
    }
</table>

이 Razor 코드는 GitHub 조직을 찾아보기 위한 기본 검색 양식을 제공하고 결과를 표에 표시합니다.

솔루션 탐색기에서 Index.cshtml 옆에 있는 화살표를 확장하여 Index.cshtml.cs 파일을 표시합니다. Index.cshtml.cs 파일을 두 번 클릭하여 연 다음 해당 내용을 다음 코드로 바꿉니다.

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.Net.Http.Headers;
using System.Text.Json;
using System.Text.Json.Serialization;

namespace GitHubBrowser.Pages
{
    public class IndexModel : PageModel
    {
        private readonly IConfiguration _env;

        [BindProperty]
        public string SearchTerm { get; set; }

        public IEnumerable<GitRepo> Repos { get; set; } = new List<GitRepo>();

        public IndexModel(IConfiguration env)
        {
            _env = env;
        }

        public IActionResult OnGet()
        {
            return Page();
        }

        public async Task<IActionResult> OnPost()
        {
            var client = new HttpClient();

            var githubUrl = _env["GitHubUrl"];
            var searchUrl = $"{githubUrl}/orgs/{SearchTerm}/repos";
            var httpRequestMessage = new HttpRequestMessage(HttpMethod.Get, searchUrl)
            {
                Headers =
                {
                    { HeaderNames.UserAgent, "dotnet" }
                }
            };

            var httpResponseMessage = await client.SendAsync(httpRequestMessage);
            var content = await httpResponseMessage.Content.ReadAsStringAsync();
            Repos = JsonSerializer.Deserialize<IEnumerable<GitRepo>>(content);

            return Page();
        }
    }

    public class GitRepo
    {
        [JsonPropertyName("name")]
        public string Name { get; set; }

        [JsonPropertyName("description")]
        public string Description { get; set; }

        [JsonPropertyName("html_url")]
        public string HtmlUrl { get; set; }
    }
}

앞의 코드에는 두 가지 중요한 메서드가 포함되어 있습니다.

OnGet 메서드는 처음에 검색 페이지 로드를 처리합니다.
OnPost 메서드는 양식 제출을 처리합니다. 이 메서드는 구성 서비스를 사용하여 appsettings.Development.json 파일에서 GitHub API URL을 끌어와 제출된 검색 용어를 매개 변수로 사용하여 HTTP 요청을 만듭니다. 그런 다음 API에서 반환된 항목이 속성에 할당되고 Index.cshtml 파일의 테이블을 사용하여 렌더링됩니다.

Visual Studio 솔루션 탐색기에서 appsettings.json 파일 옆에 있는 화살표를 확장합니다. appsettings.Development.json 파일을 열고 콘텐츠를 다음 코드로 바꿉니다.
```
{
  "GitHubURL": "https://api.github.com",
  "DetailedErrors": true,
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  }
}
```
이 파일은 조직의 리포지토리를 검색하는 데 사용되는 GitHub API의 URL을 포함하여 앱에 대한 몇 가지 필수 구성 값을 제공합니다.
Visual Studio 맨 위에 있는 실행 단추를 선택하여 앱을 로컬로 테스트합니다. 앱이 브라우저에 로드되고 검색 쿼리에 사용할 양식을 제공해야 합니다. 예를 들어 dotnet을 검색하여 해당 GitHub 조직의 리포지토리를 검색하고 결과가 어떻게 표시되는지 가늠해볼 수 있습니다.

Azure에 앱 배포

다음으로, 다른 사용자가 리포지토리를 탐색하는 데 사용할 수 있도록 Azure에 앱을 배포해야 합니다. Visual Studio 및 다음 단계를 사용하여 앱을 배포할 수 있습니다.

Learn 샌드박스를 사용하는 경우 구독 정보를 새로 고치려면 Visual Studio 내에서 로그아웃하고 다시 로그인해야 할 수 있습니다. Visual Studio의 오른쪽 위에 있는 이름 아이콘을 클릭하고 계정 설정, 로그아웃, 로그인을 차례로 선택하여 계정을 관리할 수 있습니다. 샌드박스를 만드는 데 사용한 것과 동일한 계정에 로그인했는지 확인합니다.
솔루션 탐색기에서 프로젝트 노드를 마우스 오른쪽 단추로 클릭한 다음 게시를 선택합니다.
게시 대화 상자에서 Azure를 대상으로 선택한 후, 다음을 선택합니다.
특정 대상 단계에서 Azure App Service(Windows)를 선택한 후, 다음을 선택합니다.
App Service 단계에서 대화 상자의 오른쪽 위에서 올바른 Azure 계정에 로그인했는지 확인합니다.

Learn 샌드박스의 경우 앞에서 설명한 대로 샌드박스 구독을 사용할 수 있도록 하려면 Visual Studio에서 로그아웃한 후 로그인 해야 할 수도 있습니다.
배포할 구독을 선택합니다.

Learn 샌드박스 환경의 경우 Concierge Subscription새로 고침 단추를 클릭하여 이 로드되었는지 확인합니다. 사용 가능한 경우 선택합니다. 사용할 수 없는 경우 다음 단계를 계속 진행합니다.
+ 새로 만들기 단추를 선택하여 새 앱 서비스 인스턴스를 만듭니다.

참고 항목

샌드박스 환경의 경우 Visual Studio에서 구독 정보를 로드하는 동안 기다려야 할 수 있습니다. 이 작업에는 약간의 시간이 걸릴 수 있습니다.

새 앱 서비스 대화 상자에서 다음 값을 입력하거나 확인합니다.

설정	값
이름	`GitHubBrowser123`을 입력하되, 이때 `123`은 Azure에서 App Service 이름과 도메인이 고유하도록 선택한 세 개의 난수입니다.
구독 이름	Learn 샌드박스 환경을 사용하는 경우 `Concierge Subscription`을(를) 선택하고, 그렇지 않으면 직접 선택합니다.
리소스 그룹	샌드박스를 사용하는 경우 기본 [샌드박스 리소스 그룹 이름] 리소스 그룹을 선택하거나 새로 만들기...를 선택하여 `mslearn-github-browser`과(와)같은 이름으로 새 그룹을 만듭니다.
호스팅 계획	Learn 샌드박스를 사용하는 경우 기본값을 그대로 둡니다. 고유한 구독을 사용하는 경우 새로 만들기...를 선택하고 `mslearn-github-browser-plan`의 이름을 입력하고 인스턴스 크기를 선택합니다.

팁

Learn 샌드박스를 사용 중이고 기본 호스팅 계획이 표시되지 않는 경우 리소스 그룹을 새 그룹으로 전환한 다음 기본 그룹으로 다시 전환합니다.)

앱 서비스 만들기 워크플로의 스크린샷

만들기를 선택하여 대화 상자를 닫으면 Visual Studio에서 잠시 동안 App Service 인스턴스를 만듭니다.

App Service가 만들어지면 새 인스턴스를 선택한 다음 마침을 선택합니다. 대신 빈 화면이 표시되면 다음 단계로 진행해 보세요.
Visual Studio에서 게시 프로필의 요약 보기를 표시합니다. 오른쪽 위 모서리에서 게시를 선택하여 Azure에 앱을 배포합니다. 이 프로세스를 완료하는 데 약간의 시간이 걸릴 수 있습니다.

배포가 완료되면 Visual Studio에서 앱의 홈페이지로 웹 브라우저를 시작합니다. 처음에는 모든 것이 올바르게 작동하는 것처럼 보입니다.

다음으로, GitHubBrowser 앱의 검색 상자에 dotnet을 다시 입력하면 결과 테이블 대신 오류 페이지가 표시됩니다. 이 오류는 로컬에서 발생하지 않았으며 Visual Studio를 사용하여 이유를 파악할 수 있습니다.

애플리케이션 오류의 스크린샷

원격 디버깅 사용

Visual Studio를 사용하여 이 문제를 디버그하려면 App Service의 원격 디버깅 기능을 사용하도록 설정해야 합니다. 이 설정을 사용하면 Visual Studio 디버거가 기본 App Service 웹 호스팅 프로세스에 연결할 수 있습니다.

Learn 샌드박스를 사용하는 경우 Learn 샌드박스 Azure Portal을 엽니다. 샌드박스를 연 계정과 동일한 계정으로 로그인해야 합니다. 샌드박스를 사용하지 않는 경우 사용자 고유의 Azure Portal에 로그인합니다.

Azure Portal에서 배포된 애플리케이션을 찾습니다. App Services 페이지로 이동한 다음 GitHubBrowser123 앱을 선택하여 앱을 찾을 수 있습니다. 맨 위에 있는 검색 창에서 이름으로 직접 App Service 인스턴스를 검색할 수도 있습니다.
App Service 설정 페이지의 왼쪽 탐색 메뉴에 있는 설정 아래의 구성을 선택한 다음, 일반 설정 탭을 선택합니다.
페이지 아래쪽에서 원격 디버깅 기능을 켜짐으로 설정하고 Remote Visual Studio 버전을 2022로 선택합니다.
저장을 선택한 다음, 페이지 맨 위에서 계속을 선택하여 변경 내용을 유지합니다.

이제 앱 서비스 인스턴스는 Visual Studio를 통해 원격 디버깅을 지원합니다.

연습 - 앱 만들기 및 Azure에 배포

샘플 앱 만들기

Azure에 앱 배포

원격 디버깅 사용

피드백