Ejercicio: Creación de la aplicación e implementación en Azure

Completado

Para poder realizar un ejercicio de depuración remota con App Service, primero deberá crear una aplicación e implementarla en Azure. La aplicación de muestra Razor Pages que creará a continuación permite a los usuarios buscar repositorios de GitHub por organización. Pero la aplicación también contiene un error sutil que solucionarás mediante Visual Studio después de implementarla.

Crear la aplicación de ejemplo

Puede crear la aplicación de muestra para este módulo mediante Visual Studio. La aplicación de muestra le permite buscar organizaciones de GitHub por su nombre y mostrar sus repositorios en una tabla sencilla.

1. En Visual Studio, seleccione Archivo > Nuevo Proyecto.

2. En el cuadro de diálogo Crear un nuevo proyecto, busque ASP.NET y seleccione la opción Aplicación web de ASP.NET Core. Asegúrese de elegir la plantilla de proyecto Razor Pages en lugar de la opción Modelo-Vista-Controlador y, después, seleccione Siguiente.

   

3. En el cuadro de diálogo Configurar el nuevo proyecto, asigne el nombre GitHubBrowser al proyecto, deje el resto de la configuración en sus valores predeterminados y seleccione Siguiente.

   Importante

   Asegúrese de asignar el nombre GitHubBrowser al proyecto para que los fragmentos de código siguientes funcionen con espacios de nombres coincidentes. Si asigna otro nombre al proyecto, deberá actualizar el espacio de nombres en los fragmentos de código.

4. En el paso Información adicional, elije .NET 6.0 (Soporte técnico a largo plazo) y, después, selecciona Crear. Este ejercicio también puede funcionar con versiones anteriores de .NET, como .NET 5.0 o .NET Core 3.1.

5. Después de que Visual Studio cree el proyecto, expanda la carpeta Pages en el Explorador de soluciones y abra el archivo Index.cshtml. Reemplace el contenido de Index.cshtml por el código siguiente:

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

   Este código de Razor proporciona un formulario de búsqueda básico para buscar organizaciones de GitHub y muestra los resultados en una tabla.

6. En el Explorador de soluciones, expanda la flecha situada junto a Index.cshtml para mostrar el archivo Index.cshtml.cs. Haz doble clic en el archivo Index.cshtml.cs para abrirlo y luego reemplaza su contenido por el código siguiente:

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

   El código anterior contiene dos métodos importantes:

   • El método OnGet controla inicialmente la carga de la página de búsqueda.
   • El método OnPost controla el envío del formulario. El método extrae la dirección URL de la API de GitHub del archivo appsettings.Development.json mediante el servicio de configuración y realiza una solicitud HTTP con el término de búsqueda enviado como parámetro. Los elementos devueltos desde la API se asignan a una propiedad y se representan mediante una tabla en el archivo Index.cshtml.

7. En el Explorador de soluciones de Visual Studio, expanda la flecha situada junto al archivo appsettings.json. Abra el archivo appsettings.Development.json y reemplace el contenido por el código siguiente:

   {
     "GitHubURL": "https://api.github.com",
     "DetailedErrors": true,
     "Logging": {
       "LogLevel": {
         "Default": "Information",
         "Microsoft.AspNetCore": "Warning"
       }
     }
   }
   

   Este archivo proporciona algunos valores de configuración esenciales para la aplicación, incluida la dirección URL de la API de GitHub, que se usa para recuperar los repositorios de una organización.

8. Prueba la aplicación localmente seleccionando el botón Ejecutar en la parte superior de Visual Studio. La aplicación debe cargarse en el explorador y presentar un formulario que se usará para las consultas de búsqueda. Por ejemplo, busque dotnet para examinar los repositorios de esa organización de GitHub para hacerse una idea de cómo deberían mostrarse los resultados.

   

Implementar la aplicación en Azure

A continuación, debe implementar la aplicación en Azure para que otros usuarios puedan utilizarla para examinar repositorios. Puedes implementar la aplicación mediante Visual Studio y los pasos siguientes.

1. Si usas el espacio aislado de Learn, es posible que tengas que cerrar sesión e iniciar sesión de nuevo dentro de Visual Studio para que la información de suscripción se actualice. Para administrar la cuenta, haz clic en el icono de Nombre de la esquina superior derecha de Visual Studio, elije Configuración de la cuenta, después Cerrar sesión y, luego, Iniciar sesión. Asegúrate de que has iniciado sesión en la misma cuenta que has usado para crear el espacio aislado.

   

2. Haz clic con el botón derecho en el nodo del proyecto en el Explorador de soluciones y luego selecciona Publicar.

   

3. En el cuadro de diálogo de publicación, selecciona Azure como Destino y luego Siguiente.

4. En el paso Destino específico, selecciona Azure App Service (Windows) y luego elije Siguiente.

5. En el paso App Service, asegúrese de que ha iniciado sesión en la cuenta de Azure correcta en la esquina superior derecha del cuadro de diálogo.

   No olvides que, en el espacio aislado de Learn, es posible que tengas que cerrar sesión en Visual Studio e iniciar sesión para que la suscripción del espacio aislado esté disponible, como se ha descrito antes.

6. Selecciona la suscripción en la que te gustaría realizar la implementación.

   Para el entorno de espacio aislado de Learn, haga clic en el botón Actualizar para comprobar si se ha cargado Concierge Subscription. Si está disponible, selecciónelo. Si no está disponible, continúe con el paso siguiente.

7. Selecciona el botón + Crear nuevo para crear una instancia de App Service.

   Nota:

   Para el entorno de espacio aislado, es posible que tengas que esperar mientras Visual Studio carga la información de las suscripciones. Esto puede llevar algo de tiempo.

   

8. En el cuadro de diálogo Nuevo app service, escriba los valores siguientes:

   Configuración	Value
   Nombre	Escriba GitHubBrowser123, donde 123 son tres números aleatorios de su elección para asegurarse de que el nombre y el dominio de App Service son únicos en Azure.
   Nombre de la suscripción	Si usas el entorno de espacio aislado de Learn, selecciona Concierge Subscription; en caso contrario, selecciona el tuyo propio.
   Grupo de recursos	Elije el grupo de recursos [nombre del grupo de recursos del espacio aislado] predeterminado si usas el espacio aislado o bien selecciona Nuevo... para crear tu propio grupo con un nombre como mslearn-github-browser.
   Plan de hospedaje	Si usas el espacio aislado de Learn, deja el valor predeterminado. Si usas tu propia suscripción, selecciona Nuevo..., escribe un nombre de mslearn-github-browser-plan y elije el tamaño de la instancia.

   Sugerencia

   Si usas el espacio aislado de Learn y no aparece el plan de hospedaje predeterminado, cambia el grupo de recursos a uno nuevo y luego vuelve al grupo predeterminado).

   

9. Seleccione Crear para cerrar el cuadro de diálogo y Visual Studio tardará un momento en crear la instancia de App Service.

   Una vez que se crea la instancia de App Service, selecciónala y, después, elije Finalizar. Si ve una pantalla en blanco en su lugar, intente continuar con el paso siguiente.

10. Visual Studio mostrará una vista de resumen del perfil de publicación. Seleccione Publicar en la esquina superior derecha para implementar la aplicación en Azure. Este proceso puede tardar en completarse.

    

Cuando finalice la implementación, Visual Studio iniciará un explorador web en la página principal de la aplicación. Al principio, parece que todo funciona correctamente.

A continuación, vuelva a escribir dotnet en el cuadro de búsqueda de la aplicación GitHubBrowser y, en este momento, recibirá una página de error en lugar de la tabla de resultados. Este error no se produjo localmente y puede usar Visual Studio para averiguar por qué.

Habilitar la depuración remota

Para poder depurar este problema con Visual Studio, tienes que habilitar la característica de depuración remota de App Service. Esta configuración permite que el depurador de Visual Studio se conecte al proceso principal de hospedaje web de App Service.

1. Si usa el espacio aislado de Learn, abra Azure Portal en el espacio aislado de Learn. Asegúrese de iniciar sesión con la misma cuenta con la que ha abierto el espacio aislado. Si no usa el espacio aislado, inicie sesión en una instancia propia de Azure Portal.

   Busque la aplicación implementada en Azure Portal. Para encontrar la aplicación, vaya a la página App Services y seleccione la aplicación GitHubBrowser123. También puede buscar la instancia de App Service directamente por su nombre en la barra de búsqueda de la parte superior.

   

2. En la página Configuración de App Service, selecciona Configuración en Configuración en el menú de navegación izquierdo y luego la pestaña Configuración general.

3. Hacia la parte inferior de la página, asegúrate de establecer la característica Depuración remota en Activado y selecciona 2022 como Versión remota de Visual Studio.

   

4. Selecciona Guardar y luego Continuar en la parte superior de la página para conservar los cambios.

La instancia de servicio de la aplicación ahora admite la depuración remota a través de Visual Studio.