练习 - 在本地运行 Web 应用

已完成 100 XP
选择集成开发环境 (IDE) 或 shell

通过学习本练习,你将能够:

  • 在本地运行 Web 应用并在浏览器中查看它。
  • 查看 Web 应用获得服务的方式。

在浏览器中运行 Web 应用并查看

在 Visual Studio Code 中运行 Web 应用并在浏览器中查看:

  1. 在 Visual Studio Code 中,按 F5 运行应用。

    Visual Studio Code:

    • 触发 dotnet run 生成和运行应用程序的 .NET CLI 命令。
    • 将调试程序附加到正在运行的应用程序。

    首次在 Visual Studio Code 中运行项目时,将显示“选择调试程序”提示

  2. 在 Visual Studio Code 用户界面顶部的“命令面板”的“选择调试程序”提示中,选择“C#”。 在下一个提示符下,选择默认启动配置 (C#: MyWebApp [Default Configuration]):

    在“命令面板”中选择“选择调试程序”的屏幕截图。

    将在 http://localhost:{PORT} 中启动默认浏览器,显示应用的响应。 {PORT} 占位符是在创建应用的项目时分配的随机端口。 如果由于本地端口冲突而需要更改端口,请更改项目的 Properties/launchSettings.json 文件中的端口

    浏览器中显示的响应:

    显示文本输出的浏览器的屏幕截图。

  3. 关闭浏览器窗口。

  4. 在 Visual Studio 中,执行以下任一操作:

    • 在“运行”菜单中,选择“停止调试”。
    • 键盘上按 Shift+F5

使用 .NET CLI 运行 Web 应用:

  1. 在终端或命令行中,导航到包含 MyWebApp.csproj 文件的 MyWebApp 项目目录

  2. 使用以下命令生成并运行应用:

    .NET CLI
    dotnet run
    

    该项目将生成、运行并在命令行上显示以下输出:

    输出
    C:\MyWebApp> dotnet run
    Building...
    info: Microsoft.Hosting.Lifetime[14]
            Now listening on: http://localhost:5267
    info: Microsoft.Hosting.Lifetime[0]
            Application started. Press Ctrl+C to shut down.
    

    由于在项目创建时,提供的 URL 中的端口号在配置中是随机设置的,因此终结点可能具有不同的端口号。

  3. 打开浏览器访问你自己的命令行输出中生成的 URL,将显示应用程序的响应 Hello World!

    显示文本输出的浏览器的屏幕截图。

  4. 在命令行上按 Ctrl+C 关闭应用。

Web 应用获得服务的方式

生成并运行应用时,将执行以下步骤:

生成和配置:

  • 调用 MSBuild 以还原依赖项并编译项目。 MSBuild 处理 MyWebApp.csproj 项目文件并将源代码编译为程序集
  • 应用将读取配置设置,包括为默认启动配置文件(列出的第一个)在 launchSettings.json 中指定的配置设置

主机设置:

  • Program.cs 中的 CreateHostBuilder 方法将设置 Web 主机。 默认情况下,WebHostBuilder 将 Kestrel 配置为 Web 服务器。 Kestrel 是适用于 ASP.NET Core 的跨平台 Web 服务器,专为高性能而设计。
  • Kestrel 开始侦听已配置 URL 上的传入 HTTP 请求,包括 HTTPS(如果指定)。

请求处理:

  • 收到请求后,Kestrel 将其转发到 ASP.NET Core 中间件管道。
  • 中间件管道通过一系列中间件组件处理请求,这些组件可以处理身份验证、事件日志和路由等任务。
  • 如果请求与定义的路由匹配,则执行相应的终结点。 在这种情况下,app.MapGet("/", () => "Hello World!") 终结点处理对根 URL 的请求,并返回字符串 Hello World!

响应:

  • 响应(在本例中为字符串“Hello World!”)通过中间件管道发送回 Kestrel,然后 Kestrel 将其发送回客户端。

下一单元: 练习 - 进行代码更改

上一篇 下一步