Ćwiczenie — tworzenie aplikacji i wdrażanie na platformie Azure

10 min

Aby wykonać ćwiczenie zdalnego debugowania w usłudze App Service, najpierw musisz utworzyć aplikację i wdrożyć ją na platformie Azure. Przykładowa aplikacja Razor Pages, którą utworzysz, umożliwia użytkownikom wyszukiwanie repozytoriów GitHub według organizacji. Jednak aplikacja zawiera również subtelną usterkę, która zostanie rozwiązana przy użyciu programu Visual Studio po jej wdrożeniu.

Tworzenie przykładowej aplikacji

Przykładową aplikację dla tego modułu można utworzyć przy użyciu programu Visual Studio. Przykładowa aplikacja umożliwia wyszukiwanie organizacji usługi GitHub według nazwy i wyświetlanie ich repozytoriów w prostej tabeli.

W programie Visual Studio wybierz pozycję Plik > nowy projekt.
W oknie dialogowym Tworzenie nowego projektu wyszukaj ASP.NET i wybierz opcję ASP.NET Core Web App. Pamiętaj, aby wybrać szablon projektu Razor Pages zamiast opcji Model-View-Controller , a następnie wybierz przycisk Dalej.
W oknie dialogowym Konfigurowanie nowego projektu nadaj projektowi nazwę GitHubBrowser, pozostaw pozostałe ustawienia domyślne, a następnie wybierz pozycję Dalej.

Ważne

Pamiętaj, aby nadać projektowi nazwę GitHubBrowser dla poniższych fragmentów kodu, aby pracować z pasującymi przestrzeniami nazw. Jeśli nadasz projektowi inną nazwę, musisz zaktualizować przestrzeń nazw w fragmentach kodu.
W kroku Dodatkowe informacje wybierz pozycję .NET 6.0 (obsługa długoterminowa), a następnie wybierz pozycję Utwórz. To ćwiczenie może również pracować z wcześniejszymi wersjami platformy .NET, takimi jak .NET 5.0 lub .NET Core 3.1.

Po utworzeniu projektu przez program Visual Studio rozwiń Pages folder w Eksploratorze rozwiązań i otwórz Index.cshtml plik. Zastąp zawartość Index.cshtml następującym kodem:

@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>

Ten kod Razor zawiera podstawowy formularz wyszukiwania umożliwiający przeglądanie organizacji usługi GitHub i wyświetlanie wyników w tabeli.

W Eksploratorze rozwiązań rozwiń strzałkę obok, aby wyświetlić Index.cshtml Index.cshtml.cs plik. Index.cshtml.cs Kliknij dwukrotnie plik, aby go otworzyć, a następnie zastąp jego zawartość następującym kodem:

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; }
    }
}

Powyższy kod zawiera dwie ważne metody:

Metoda OnGet obsługuje początkowo ładowanie strony wyszukiwania.
Metoda OnPost obsługuje przesyłanie formularza. Metoda ściąga adres URL interfejsu API usługi GitHub z appsettings.Development.json pliku przy użyciu usługi konfiguracji i wysyła żądanie HTTP z przesłanym terminem wyszukiwania jako parametrem. Elementy zwrócone z interfejsu API są następnie przypisywane do właściwości i renderowane przy użyciu tabeli w Index.cshtml pliku.

W Eksplorator rozwiązań programu Visual Studio rozwiń strzałkę obok appsettings.json pliku. appsettings.Development.json Otwórz plik i zastąp jego zawartość następującym kodem:
```
{
  "GitHubURL": "https://api.github.com",
  "DetailedErrors": true,
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  }
}
```
Ten plik zawiera podstawowe wartości konfiguracji aplikacji, w tym adres URL interfejsu API usługi GitHub używany do pobierania repozytoriów organizacji.
Przetestuj aplikację lokalnie, wybierając przycisk Uruchom w górnej części programu Visual Studio. Aplikacja powinna załadować się w przeglądarce i przedstawić formularz do użycia dla zapytań wyszukiwania. Na przykład wyszukaj dotnet, aby przeglądać repozytoria dla tej organizacji usługi GitHub, aby dowiedzieć się, jak powinny wyglądać wyniki.

Wdrażanie aplikacji na platformie Azure

Następnie należy wdrożyć aplikację na platformie Azure, aby inni mogli jej używać do przeglądania repozytoriów. Aplikację można wdrożyć przy użyciu programu Visual Studio i wykonać następujące kroki.

Jeśli używasz piaskownicy learn, może być konieczne wylogowanie się i ponowne zalogowanie się w programie Visual Studio, aby odświeżyć informacje o subskrypcji. Możesz zarządzać kontem, klikając ikonę Nazwa w prawym górnym rogu programu Visual Studio, wybierz pozycję Ustawienia konta, a następnie wybierz pozycję Wyloguj, a następnie zaloguj się. Upewnij się, że zalogowano się do tego samego konta, które zostało użyte do utworzenia piaskownicy.
Kliknij prawym przyciskiem myszy węzeł projektu w Eksploratorze rozwiązań, a następnie wybierz pozycję Publikuj.
W oknie dialogowym publikowania wybierz pozycję Azure jako element docelowy, a następnie wybierz pozycję Dalej.
W kroku Określony cel wybierz pozycję usługa aplikacja systemu Azure (Windows), a następnie wybierz pozycję Dalej.
W kroku App Service upewnij się, że zalogowano się do poprawnego konta platformy Azure w prawym górnym rogu okna dialogowego.

Pamiętaj, że w przypadku piaskownicy learn może być konieczne wylogowanie się z programu Visual Studio i zalogowanie się w celu udostępnienia subskrypcji piaskownicy zgodnie z wcześniejszym opisem.
Wybierz subskrypcję, do której chcesz wdrożyć.

W środowisku piaskownicy learn sprawdź, czy Concierge Subscription plik został załadowany, klikając przycisk Odśwież . Jeśli jest dostępna, wybierz ją. Jeśli nie jest dostępna, przejdź do następnego kroku.
Utwórz nowe wystąpienie usługi App Service, wybierając przycisk + Utwórz nowy .

Uwaga

W przypadku środowiska piaskownicy może być konieczne poczekanie, gdy program Visual Studio ładuje informacje o subskrypcji. Może to potrwać jakiś czas.

W nowym oknie dialogowym usługi App Service wprowadź lub zweryfikuj następujące wartości:

Ustawienie	Wartość
Nazwa/nazwisko	Wprowadź `GitHubBrowser123`, gdzie `123` są trzy losowe liczby wybrane, aby upewnić się, że nazwa usługi App Service i domena są unikatowe na platformie Azure.
Nazwa subskrypcji	Jeśli używasz środowiska piaskownicy platformy Learn, wybierz pozycję `Concierge Subscription`; w przeciwnym razie wybierz własną.
Grupa zasobów:	Wybierz domyślną grupę zasobów [nazwa grupy zasobów piaskownicy], jeśli używasz piaskownicy, lub wybierz pozycję Nowy... , aby utworzyć własną nową grupę o nazwie takiej jak `mslearn-github-browser`.
Plan hostingu	Jeśli używasz piaskownicy platformy Learn, pozostaw wartość domyślną. Jeśli używasz własnej subskrypcji, wybierz pozycję Nowy... i wprowadź nazwę `mslearn-github-browser-plan` i wybierz rozmiar wystąpienia.

Napiwek

Jeśli używasz piaskownicy usługi Learn, a domyślny plan hostingu nie jest wyświetlany, przełącz grupę zasobów na nową grupę, a następnie wróć do grupy domyślnej.

Zrzut ekranu przedstawiający przepływ pracy tworzenia usługi App Service.

Wybierz pozycję Utwórz , aby zamknąć okno dialogowe, a program Visual Studio zajmie trochę czasu, aby utworzyć wystąpienie usługi App Service.

Po utworzeniu usługi App Service wybierz nowe wystąpienie, a następnie wybierz pozycję Zakończ. Jeśli zamiast tego zostanie wyświetlony pusty ekran, spróbuj przejść do następnego kroku.
Program Visual Studio wyświetli widok podsumowania profilu publikowania. Wybierz pozycję Publikuj w prawym górnym rogu, aby wdrożyć aplikację na platformie Azure. Ukończenie tego procesu może zająć trochę czasu.

Po zakończeniu wdrażania program Visual Studio uruchomi przeglądarkę internetową na stronie głównej aplikacji. Na początku wydaje się, że wszystko działa poprawnie.

Następnie ponownie wprowadź ciąg dotnet w polu wyszukiwania aplikacji GitHubBrowser. W tym momencie zostanie wyświetlona strona błędu zamiast tabeli wyników. Ten błąd nie wystąpił lokalnie i możesz użyć programu Visual Studio, aby dowiedzieć się, dlaczego.

Zrzut ekranu przedstawiający błąd aplikacji.

Włączanie zdalnego debugowania

Aby można było debugować ten problem w programie Visual Studio, należy włączyć funkcję zdalnego debugowania usługi App Service. To ustawienie umożliwia debugerowi programu Visual Studio nawiązanie połączenia z głównym procesem hostingu internetowego usługi App Service.

Jeśli używasz piaskownicy platformy Learn, otwórz witrynę Azure Portal piaskownicy platformy Learn. Pamiętaj, aby zalogować się przy użyciu tego samego konta, które otwarto piaskownicę. Jeśli nie używasz piaskownicy, zaloguj się do własnej witryny Azure Portal.

Znajdź wdrożona aplikację w witrynie Azure Portal. Aplikację można znaleźć, przechodząc do strony usługi App Services , a następnie wybierając aplikację GitHubBrowser123 . Możesz również wyszukać wystąpienie usługi App Service bezpośrednio według nazwy na pasku wyszukiwania u góry.
Na stronie Ustawienia usługi App Service wybierz pozycję Konfiguracja w obszarze Ustawienia w menu nawigacji po lewej stronie, a następnie wybierz kartę Ustawienia ogólne.
W dolnej części strony upewnij się, że ustawiono funkcję Debugowanie zdalne na Wł. i wybierz pozycję 2022 jako zdalną wersję programu Visual Studio.
Wybierz pozycję Zapisz, a następnie wybierz pozycję Kontynuuj w górnej części strony, aby utrwały zmiany.

Wystąpienie usługi App Service obsługuje teraz zdalne debugowanie za pośrednictwem programu Visual Studio.

Ćwiczenie — tworzenie aplikacji i wdrażanie na platformie Azure

Tworzenie przykładowej aplikacji

Wdrażanie aplikacji na platformie Azure

Włączanie zdalnego debugowania

Opinia