练习 - 创建应用并部署到 Azure

10 分钟

若要使用应用服务完成远程调试练习，首先需要创建应用程序并部署到 Azure。你将创建的 Razor Pages 示例应用使用户能够按组织搜索 GitHub 存储库。但是，应用还包含一个不明显的 bug，你将在部署后使用 Visual Studio 进行故障排除。

创建示例应用

可以使用 Visual Studio 为此模块创建示例应用。使用示例应用可以按名称搜索 GitHub 组织，并在简单的表格中显示其存储库。

从 Visual Studio 中选择“文件”>“新建项目”。
在“新建项目”对话框中，搜索 ASP.NET 并选择“ASP.NET Core Web 应用”选项。确保选择 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 方法可提交表单。该方法使用配置服务从 appsettings.Development.json 文件提取 GitHub API URL，并使用提交的搜索词作为参数发出 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"
    }
  }
}
```
此文件提供应用的一些基本配置值，包括用于检索组织存储库的 GitHub API URL。
通过选择 Visual Studio 顶部的“运行”按钮在本地测试应用。应用应在浏览器中加载，并显示用于搜索查询的表单。例如，搜索 dotnet 以浏览 GitHub 组织的存储库，了解结果的外观。

将应用部署到 Azure

接下来，需要将应用部署到 Azure，以便其他人可以使用它浏览存储库。可以使用 Visual Studio 和以下步骤部署应用。

如果使用 Learn 沙盒，可能需要在 Visual Studio 内注销并再次登录，以便刷新订阅信息。可以通过单击 Visual Studio 右上角的“名称”图标来管理帐户，选择“帐户设置”，然后选择“注销”，然后再选择“登录”。请确保登录到用于创建沙盒的同一帐户。
在解决方案资源管理器中，右键单击项目节点，然后选择“发布”。
在发布对话框中，选择“Azure”作为目标，然后选择“下一步”。
在“特定目标”步骤中，选择“Azure 应用服务(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 将启动到应用主页的 Web 浏览器。起初，似乎一切都正常工作。

接下来，在 GitHubBrowser 应用的搜索框中再次输入 dotnet，此时将收到错误页，而不是结果表。此错误未在本地发生，可以使用 Visual Studio 找出原因。

应用程序错误的屏幕截图。

启用远程调试

在使用 Visual Studio 调试此问题之前，需要启用应用服务的远程调试功能。此设置允许 Visual Studio 调试程序连接到主应用服务 Web 托管进程。

如果正在使用 Learn 沙盒，请打开 Learn 沙盒 Azure 门户。请确保使用打开沙盒时所用的帐户登录。如果未使用沙盒，请登录到自己的 Azure 门户。

在 Azure 门户中找到已部署的应用程序。可以通过浏览到“应用服务”页，然后选择 GitHubBrowser123 应用来查找应用。还可以在顶部的搜索栏中直接按名称搜索应用服务实例。
在“应用服务设置”页上，选择左侧导航菜单中“设置”下的“配置”，然后选择“常规设置”选项卡。
在页面底部，确保将“远程调试”功能设置为“打开”，并选择“2022”作为“远程 Visual Studio 版本”。
选择“保存”，然后选择页面顶部的“继续”以保存更改。

应用服务实例现在支持通过 Visual Studio 进行远程调试。

继续

练习 - 创建应用并部署到 Azure

创建示例应用

将应用部署到 Azure

启用远程调试

反馈