Упражнение. Создание приложения и развертывание в Azure

10 мин

Чтобы пошагово выполнить упражнение удаленной отладки с помощью Службы приложений, сначала необходимо создать и развернуть приложение в Azure. Пример приложения Razor Pages, который вы создадите, позволяет пользователям выполнять поиск репозиториев GitHub по организации. Однако приложение также содержит тонкие ошибки, которые будут устранять неполадки с помощью Visual Studio после его развертывания.

Создание примера приложения

Пример приложения для этого модуля можно создать с помощью Visual Studio. Пример приложения позволяет выполнять поиск организаций GitHub по имени и отображать их репозитории в простой таблице.

В Visual Studio выберите Файл > Создать проект.
В диалоговом окне Создание проекта найдите ASP.NET и выберите параметр Веб-приложение ASP.NET Core. Не забудьте выбрать шаблон проекта Razor Pages вместо параметра Model-View-Controller , а затем нажмите кнопку "Далее".
В диалоговом окне Настройка нового проекта присвойте проекту имя GitHubBrowser, оставьте остальные параметры по умолчанию и нажмите на кнопку Далее.

Внимание

Обязательно присвойте проекту имя GitHubBrowser для приведенных ниже фрагментов кода, чтобы работать с соответствующими пространствами имен. Если вы назовете проект другим именем, необходимо обновить пространство имен в фрагментах кода.
На шаге "Дополнительные сведения " выберите .NET 6.0 (долгосрочная поддержка) и нажмите кнопку "Создать". Это упражнение также поддерживает работу с более ранними версиями .NET, такими как .NET 5.0 или .NET Core 3.1.

После создания проекта 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 обрабатывает отправку формы. Метод извлекает URL-адрес API GitHub из файла appsettings.Development.json, используя службу настройки и выполняет 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"
    }
  }
}
```
Этот файл предоставляет некоторые важные значения конфигурации для приложения, включая URL-адрес API GitHub, используемый для получения репозиториев организации.
Протестируйте приложение локально, нажав кнопку "Запустить " в верхней части Visual Studio. Приложение должно загрузиться в браузере и отобразить форму, используемую для поисковых запросов. Например, выполните поиск dotnet, чтобы просмотреть репозитории для этой организации GitHub и получить представление о том, как должны выглядеть результаты.

Развертывание приложения в Azure

Затем необходимо развернуть приложение в Azure, чтобы другие пользователи могли использовать его для просмотра репозиториев. Вы можете развернуть приложение с помощью Visual Studio и следующих действий.

Если вы используете песочницу Learn, может потребоваться выйти из системы и войти в visual Studio, чтобы обновить сведения о подписке. Вы можете управлять своей учетной записью, щелкнув значок "Имя" в правом верхнем углу Visual Studio, выберите параметры учетной записи, а затем нажмите кнопку "Выйти", а затем войти. Убедитесь, что вы вошли в ту же учетную запись, которую вы использовали для создания песочницы.
Щелкните правой кнопкой мыши узел проекта в обозревателе решений, а затем выберите " Опубликовать".
В диалоговом окне публикации выберите Azure в качестве целевого объекта, а затем нажмите кнопку "Далее".
На шаге "Конкретный целевой объект" выберите приложение Azure service (Windows), а затем нажмите кнопку "Далее".
В шаге Служба приложений убедитесь, что вы вошли в правильную учетную запись Azure (это можно проверить в правом верхнем углу диалогового окна).

Помните, что для песочницы Learn может потребоваться выйти из Visual Studio и войти в систему, чтобы сделать подписку песочницы доступной, как описано ранее.
Выберите подписку, в которую вы хотите развернуть.

Для среды песочницы Learn проверьте, загружена ли Concierge Subscription она, нажав кнопку "Обновить ". Если он доступен, выберите его. Если он недоступен, перейдите к следующему шагу.
Создайте экземпляр службы приложений, нажав кнопку +Создать новую .

Примечание.

Для среды песочницы может потребоваться подождать, пока Visual Studio загружает сведения о подписке. Это может занять некоторое время.

В диалоговом окне новой службы приложений введите или проверьте следующие значения:

Параметр	Значение
Имя	Введите`GitHubBrowser123`, где `123` — три случайно выбранных вами числа, чтобы гарантировать уникальность имени и домена Служба приложений в Azure.
Имя подписки	Если вы используете среду песочницы Learn, выберите `Concierge Subscription`значение ; в противном случае выберите свой собственный.
Группа ресурсов	Выберите группу ресурсов по умолчанию [имя группы ресурсов песочницы] , если вы используете песочницу, или нажмите кнопку "Создать", чтобы создать собственную группу с таким именем, как `mslearn-github-browser`.
План размещения	Если вы используете песочницу Learn, оставьте значение по умолчанию. Если вы используете собственную подписку, выберите "Создать" и введите имя и выберите размер экземпляра `mslearn-github-browser-plan` .

Совет

Если вы используете песочницу Learn и план размещения по умолчанию не отображается, переключите группу ресурсов на новую группу, а затем вернитесь в группу по умолчанию.)

Снимок экрана: рабочий процесс создания службы приложений.

Нажмите кнопку Создать, чтобы закрыть диалоговое окно. Visual Studio потребуется некоторое время, чтобы создать экземпляр Службы приложений.

После создания Служба приложений выберите новый экземпляр, а затем нажмите кнопку Готово. Если вместо этого отображается пустой экран, попробуйте перейти к следующему шагу.
В Visual Studio отобразится сводное представление профиля публикации. Выберите Опубликовать в правом верхнем углу, чтобы развернуть приложение в Azure. Для завершения этого процесса может потребоваться немного времени.

По завершении развертывания Visual Studio запустит веб-браузер на домашнюю страницу приложения. Сначала кажется, что все работает правильно.

Затем введите dotnet еще раз в поле поиска приложения GitHubBrowser, и на этом этапе вы получите страницу ошибок вместо таблицы результатов. Эта ошибка не возникает локально, и вы можете использовать Visual Studio, чтобы выяснить, почему это так.

Снимок экрана: ошибка приложения.

Включение удаленной отладки

Перед отладкой этой проблемы с Visual Studio необходимо включить функцию удаленной отладки Служба приложений. Этот параметр позволяет отладчику Visual Studio подключаться к основному Служба приложений процессу размещения веб-сайтов.

Если вы используете песочницу Learn, откройте песочницу Learn портал Azure. Обязательно войдите с той же учетной записью, что и вы открыли песочницу. Если вы не используете песочницу, войдите в собственный портал Azure.

Найдите развернутое приложение на портале Azure. Чтобы найти приложение, перейдите на страницу Службы приложений, а затем выберите приложение GitHubBrowser123. Вы также можете выполнить поиск экземпляра Служба приложений по имени в строке поиска вверху.
На странице параметров Служба приложений выберите "Конфигурация" в меню навигации слева, а затем перейдите на вкладку "Общие параметры".
В нижней части страницы установите для функции удаленной отладки значение "Вкл." и выберите 2022 в качестве версии удаленной visual Studio.
Нажмите кнопку "Сохранить", а затем нажмите кнопку "Продолжить " в верхней части страницы, чтобы сохранить изменения.

Экземпляр службы приложений теперь поддерживает удаленную отладку с помощью Visual Studio.

Упражнение. Создание приложения и развертывание в Azure

Создание примера приложения

Развертывание приложения в Azure

Включение удаленной отладки

Обратная связь