Esercizio - Creare l'app ed eseguire la distribuzione in Azure

10 minuti

Per eseguire i passaggi di un esercizio di debug remoto con il servizio app, è prima necessario creare un'applicazione e distribuirla in Azure. L'app di esempio Razor Pages che verrà creata consente agli utenti di cercare i repository GitHub in base all'organizzazione. L'app contiene, tuttavia, anche un bug poco evidente che verrà risolto usando Visual Studio dopo la distribuzione.

Creare l'app di esempio

È possibile creare l'app di esempio per questo modulo usando Visual Studio. L'app di esempio consente di cercare le organizzazioni GitHub in base al nome e visualizzare i relativi repository in una tabella semplice.

In Visual Studio selezionare File > Nuovo Progetto.
Nella finestra di dialogo Crea un nuovo progetto cercare ASP.NET e selezionare l'opzione App Web ASP.NET Core. Assicurarsi di scegliere il modello di progetto Razor Pages invece dell'opzione Model-View-Controller e quindi selezionare Avanti.
Nella finestra di dialogo Configura il nuovo progetto assegnare al progetto il nome GitHubBrowser, lasciare l'impostazione predefinita per le altre opzioni e quindi scegliere Avanti.

Importante

Assicurarsi di assegnare al progetto il nome GitHubBrowser affinché i frammenti di codice seguenti funzionino con gli spazi dei nomi corrispondenti. Se si assegna al progetto un nome diverso, sarà necessario aggiornare lo spazio dei nomi nei frammenti di codice.
Nel passaggio Informazioni aggiuntive scegliere .NET 6.0 (Long Term Support) e quindi selezionare Crea. Questo esercizio funziona anche con le versioni precedenti di .NET, ad esempio .NET 5.0 o .NET Core 3.1.

Dopo che Visual Studio ha creato il progetto, espandere la cartella Pages in Esplora soluzioni e aprire il file Index.cshtml. Sostituire il contenuto di Index.cshtml con il codice seguente:

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

Questo codice Razor fornisce un modulo di ricerca di base per cercare le organizzazioni GitHub e visualizza i risultati in una tabella.

In Esplora soluzioni espandere la freccia accanto a Index.cshtml per visualizzare il file Index.cshtml.cs. Fare doppio clic sul file Index.cshtml.cs per aprirlo e quindi sostituirne il contenuto con il codice seguente:

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

Il codice precedente contiene due metodi importanti:

Il metodo OnGet gestisce il caricamento iniziale della pagina di ricerca.
Il metodo OnPost gestisce l'invio del modulo. Il metodo esegue il pull dell'URL dell'API GitHub dal file appsettings.Development.json usando il servizio di configurazione ed effettua una richiesta HTTP usando il termine di ricerca inviato come parametro. Gli elementi restituiti dall'API vengono quindi assegnati a una proprietà e ne viene eseguito il rendering usando una tabella nel file Index.cshtml.

In Esplora soluzioni di Visual Studio espandere la freccia accanto al file appsettings.json. Aprire il file appsettings.Development.json e sostituire il contenuto con il codice seguente:
```
{
  "GitHubURL": "https://api.github.com",
  "DetailedErrors": true,
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  }
}
```
Questo file fornisce alcuni valori di configurazione essenziali per l'app, tra cui l'URL dell'API GitHub usata per recuperare i repository di un'organizzazione.
Testare l'app in locale selezionando il pulsante Esegui nella parte superiore di Visual Studio. L'app si carica nel browser e presenta un modulo da usare per le query di ricerca. Ad esempio, cercare dotnet per individuare i repository per quell’organizzazione GitHub per avere un'idea dell'aspetto dei risultati.

Distribuire l'app in Azure

Successivamente, è necessario distribuire l'app in Azure in modo che altri utenti possano usarla per esplorare i repository. È possibile distribuire l'app usando Visual Studio e la procedura seguente.

Se si usa l’ambiente sandbox di Learn, potrebbe essere necessario disconnettersi e accedere di nuovo in Visual Studio per aggiornare le informazioni sulla sottoscrizione. È possibile gestire l'account facendo clic sull'icona Nome in alto a destra in Visual Studio, scegliendo Impostazioni account, quindi Disconnetti e quindi Accedi. Assicurarsi di aver eseguito l'accesso allo stesso account usato per creare l'ambiente sandbox.
Fare clic con il pulsante destro del mouse sul nodo del progetto in Esplora soluzioni, quindi selezionare Pubblica.
Nella finestra di dialogo di pubblicazione selezionare Azure come destinazione e quindi selezionare Avanti.
Nel passaggio Destinazione specifica selezionare Servizio app di Azure (Windows) e quindi scegliere Avanti.
Per il passaggio Servizio app, assicurarsi di aver eseguito l'accesso all'account Azure corretto in alto a destra nella finestra di dialogo.

Tenere presente che, per la sandbox di Learn, potrebbe essere necessario disconnettersi da Visual Studio e accedere per rendere disponibile la sottoscrizione della sandbox, come descritto in precedenza.
Selezionare la sottoscrizione in cui si vuole eseguire la distribuzione.

Per l'ambiente della sandbox di Learn, verificare se è stato caricato Concierge Subscription facendo clic sul pulsante Aggiorna. Se è disponibile, selezionarlo. Se non è disponibile, continuare con il passaggio successivo.
Creare quindi una nuova istanza del Servizio app selezionando l'icona + Crea nuova.

Nota

Per l'ambiente sandbox potrebbe essere necessario attendere il caricamento delle informazioni sulla sottoscrizione in Visual Studio. Questa operazione potrebbe richiedere tempo.

Nella finestra di dialogo del Servizio app immettere o verificare i valori seguenti:

Impostazione	valore
Nome	Immettere `GitHubBrowser123`, dove `123` sono tre numeri casuali a scelta per fare in modo che il nome e il dominio del Servizio app siano univoci in Azure.
Nome della sottoscrizione	Se si usa l'ambiente sandbox di Learn, selezionare `Concierge Subscription`, altrimenti selezionare il proprio.
Gruppo di risorse	Scegliere il gruppo di risorse [nome del gruppo di risorse sandbox] predefinito se si usa la sandbox oppure selezionare Nuovo per creare un nuovo gruppo con un nome, ad esempio `mslearn-github-browser`.
Piano di hosting	Se si usa la sandbox di Learn, lasciare il valore predefinito. Se si usa la propria sottoscrizione, selezionare Nuovo, immettere il nome `mslearn-github-browser-plan` e scegliere le dimensioni dell'istanza.

Suggerimento

Se si usa la sandbox di Learn e il piano di hosting predefinito non viene visualizzato, spostare il gruppo di risorse in un nuovo gruppo e quindi tornare al gruppo predefinito.

Screenshot del flusso di lavoro per la creazione del servizio app.

Selezionare Crea per chiudere la finestra di dialogo e Visual Studio dopo qualche minuto creerà automaticamente l'istanza di Servizio app.

Dopo aver creato il servizio app, selezionare la nuova istanza e quindi scegliere Fine. Se invece viene visualizzata una schermata vuota, provare a procedere con il passaggio successivo.
Visual Studio mostrerà una visualizzazione di riepilogo del profilo di pubblicazione. Selezionare Pubblica nell'angolo in alto a destra per distribuire l'app in Azure. Il completamento del processo potrebbe richiedere alcuni minuti.

Al termine della distribuzione, Visual Studio avvierà un Web browser in cui è visualizzata la home page dell'app. Inizialmente sembra che tutto funzioni correttamente.

Immettere quindi nuovamente dotnet nella casella di ricerca dell'app GitHubBrowser. A questo punto verrà visualizzata una pagina di errore invece della tabella dei risultati. Questo errore non si è verificato in locale ed è possibile usare Visual Studio per capire il motivo.

Screenshot dell'errore dell'applicazione.

Abilitare il debug remoto

Prima di poter eseguire il debug di questo problema con Visual Studio, è necessario abilitare la funzionalità di debug remoto nel servizio app. Questa impostazione consente al debugger di Visual Studio di connettersi al processo di hosting Web principale del servizio app.

Se si usa la sandbox di Learn, aprire il portale di Azure relativo alla sandbox di Learn. Assicurarsi di accedere con lo stesso account usato per aprire la sandbox. Se non si usa la sandbox, accedere al proprio portale di Azure.

Individuare l'applicazione distribuita nel portale di Azure. Per trovare l'app, passare alla pagina Servizi app e quindi selezionare l'app GitHubBrowser123. È anche possibile cercare l'istanza di Servizio app direttamente in base al nome nella barra di ricerca nella parte superiore.
Nella pagina delle impostazioni del servizio app selezionare Configurazione in Impostazioni nel menu di spostamento a sinistra e quindi selezionare la scheda Impostazioni generali.
Nella parte inferiore della pagina, assicurarsi di impostare la funzionalità Debug remoto su Attivo e selezionare 2022 come valore di Debug remoto: versione di Visual Studio.
Selezionare Salva e quindi Continua in alto nella pagina per salvare le modifiche in modo permanente.

L'istanza del Servizio app supporta ora il debug remoto tramite Visual Studio.

Continua

Esercizio - Creare l'app ed eseguire la distribuzione in Azure

Creare l'app di esempio

Distribuire l'app in Azure

Abilitare il debug remoto

Commenti e suggerimenti