Övning – Skapa appen och distribuera till Azure

10 minuter

För att kunna arbeta med en fjärrfelsökningsövning med App Service måste du först skapa ett program och distribuera det till Azure. Med exempelappen Razor Pages som du skapar kan användare söka efter GitHub-lagringsplatser efter organisation. Appen innehåller dock också en diskret bugg som du ska felsöka med Visual Studio när den har distribuerats.

Skapa exempelappen

Du kan skapa exempelappen för den här modulen med hjälp av Visual Studio. Med exempelappen kan du söka efter GitHub-organisationer efter namn och visa deras lagringsplatser i en enkel tabell.

I Visual Studio väljer du Nytt > filprojekt.
I dialogrutan Skapa ett nytt projekt söker du efter ASP.NET och väljer alternativet ASP.NET Core Web App. Välj projektmallen Razor Pages i stället för alternativet Model-View-Controller och välj sedan Nästa.
I dialogrutan Konfigurera ditt nya projekt ger du projektet namnet GitHubBrowser, lämnar resten av inställningarna som standard och väljer sedan Nästa.

Viktigt!

Se till att ge projektet namnet GitHubBrowser för kodfragmenten nedan så att det fungerar med matchande namnområden. Om du ger projektet ett annat namn måste du uppdatera namnområdet i kodfragmenten.
I steget Ytterligare information väljer du .NET 6.0 (långsiktig support)och väljer sedan Skapa. Den här övningen kan också fungera med tidigare versioner av .NET, till exempel .NET 5.0 eller .NET Core 3.1.

När Visual Studio har skapat projektet expanderar du Pages mappen i Solution Explorer och öppnar Index.cshtml filen. Ersätt innehållet i Index.cshtml med följande kod:

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

Den här Razor-koden innehåller ett grundläggande sökformulär för att söka efter GitHub-organisationer och visar resultatet i en tabell.

I Solution Explorer expanderar du pilen bredvid för att Index.cshtml visa Index.cshtml.cs filen. Dubbelklicka på Index.cshtml.cs filen för att öppna den och ersätt dess innehåll med följande kod:

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

Föregående kod innehåller två viktiga metoder:

Metoden OnGet hanterar att först läsa in söksidan.
Metoden OnPost hanterar formuläröverföringen. Metoden hämtar GitHub API-URL:en från appsettings.Development.json filen med hjälp av konfigurationstjänsten och gör en HTTP-begäran med den skickade söktermen som parameter. Objekten som returneras från API:et tilldelas sedan till en egenskap och renderas med hjälp av en tabell i Index.cshtml filen.

I Visual Studio Solution Explorer expanderar du pilen bredvid appsettings.json filen. appsettings.Development.json Öppna filen och ersätt dess innehåll med följande kod:
```
{
  "GitHubURL": "https://api.github.com",
  "DetailedErrors": true,
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  }
}
```
Den här filen innehåller några viktiga konfigurationsvärden för appen, inklusive GitHub API:s URL som används för att hämta en organisations lagringsplatser.
Testa appen lokalt genom att välja knappen Kör överst i Visual Studio. Appen bör läsas in i webbläsaren och presentera ett formulär som ska användas för sökfrågor. Du kan till exempel söka i dotnet för att bläddra bland lagringsplatser för den GitHub-organisationen för att få en uppfattning om hur resultatet ska se ut.

distribuera appen till Azure

Därefter måste du distribuera appen till Azure så att andra kan använda den för att bläddra i lagringsplatser. Du kan distribuera appen med hjälp av Visual Studio och följande steg.

Om du använder sandbox-miljön Learn kan du behöva logga ut och logga in igen i Visual Studio för att prenumerationsinformationen ska uppdateras. Du kan hantera ditt konto genom att klicka på namnikonen uppe till höger i Visual Studio, välja Kontoinställningar och sedan Logga ut och sedan Logga in. Kontrollera att du är inloggad på samma konto som du använde för att skapa sandbox-miljön.
Högerklicka på projektnoden i Solution Explorer och välj sedan Publicera.
I publiceringsdialogrutan väljer du Azure som mål och väljer sedan Nästa.
I steget Specifikt mål väljer du Azure App Service (Windows) och sedan Nästa.
För App Service-steget kontrollerar du att du är inloggad på rätt Azure-konto längst upp till höger i dialogrutan.

Kom ihåg att för sandbox-miljön Learn kan du behöva logga ut från Visual Studio och logga in för att göra sandbox-prenumerationen tillgänglig, enligt beskrivningen tidigare.
Välj den prenumeration som du vill distribuera till.

För sandbox-miljön Learn kontrollerar du om har Concierge Subscription lästs in genom att klicka på knappen Uppdatera . Om den är tillgänglig väljer du den. Om den inte är tillgänglig fortsätter du med nästa steg.
Skapa en ny App Service-instans genom att välja knappen + Skapa ny .

Kommentar

För sandbox-miljön kan du behöva vänta medan Visual Studio läser in prenumerationsinformationen. Det kan ta lite tid.

I den nya apptjänstdialogrutan anger eller verifierar du följande värden:

Inställning	Värde
Namn	Ange `GitHubBrowser123`, där `123` är tre slumpmässiga nummer som du väljer för att se till att apptjänstens namn och domän är unika i Hela Azure.
Prenumerationsnamn	Om du använder sandbox-miljön Learn väljer du `Concierge Subscription`, annars väljer du din egen.
Resursgrupp	Välj standardresursgruppen [resursgruppsnamn för sandbox-miljö] om du använder sandbox-miljön eller välj Ny... för att skapa en egen ny grupp med ett namn som `mslearn-github-browser`.
Värdplan	Om du använder sandbox-miljön Learn lämnar du standardvärdet. Om du använder din egen prenumeration väljer du Ny... och anger ett namn på `mslearn-github-browser-plan` och väljer din instansstorlek.

Dricks

Om du använder sandbox-miljön Learn och standardvärdplanen inte visas växlar du resursgruppen till en ny grupp och växlar sedan tillbaka till standardgruppen.)

En skärmbild av arbetsflödet för att skapa apptjänsten.

Välj Skapa för att stänga dialogrutan. Visual Studio tar en stund att skapa App Service-instansen åt dig.

När App Service har skapats väljer du den nya instansen och väljer sedan Slutför. Om du ser en tom skärm i stället kan du prova att gå vidare till nästa steg.
Visual Studio visar en sammanfattningsvy av publiceringsprofilen. Välj Publicera i det övre högra hörnet för att distribuera din app till Azure. Den här processen kan ta lite tid att slutföra.

När distributionen är klar startar Visual Studio en webbläsare till appens startsida. Först verkar det som om allt fungerar som det ska.

Ange sedan dotnet igen i GitHubBrowser-appens sökruta, och nu får du en felsida i stället för resultattabellen. Det här felet inträffade inte lokalt och du kan använda Visual Studio för att ta reda på varför.

En skärmbild av programfelet.

Aktivera fjärrfelsökning

Innan du kan felsöka det här problemet med Visual Studio måste du aktivera apptjänstens fjärrfelsökningsfunktion. Med den här inställningen kan Visual Studio-felsökaren ansluta till huvudwebbvärdprocessen för App Service.

Om du använder sandbox-miljön Learn öppnar du sandbox-miljön Learn Azure Portal. Logga in med samma konto som du öppnade sandbox-miljön. Om du inte använder sandbox-miljön loggar du in på din egen Azure Portal.

Leta upp ditt distribuerade program i Azure Portal. Du hittar din app genom att bläddra till App Services-sidan och sedan välja GitHubBrowser123-appen . Du kan också söka efter App Service-instansen direkt efter namn i sökfältet längst upp.
På sidan App Service-inställningar väljer du Konfiguration under Inställningar i den vänstra navigeringsmenyn och väljer sedan fliken Allmänna inställningar .
Längst ned på sidan måste du ange funktionen Fjärrfelsökning till På och välja 2022 som Visual Studio-fjärrversion.
Välj Spara och välj sedan Fortsätt överst på sidan för att spara ändringarna.

App Service-instansen stöder nu fjärrfelsökning via Visual Studio.

Övning – Skapa appen och distribuera till Azure

Skapa exempelappen

distribuera appen till Azure

Aktivera fjärrfelsökning

Feedback