使用 Visual Studio 将 Web 应用发布到 Azure

安装必要的工作负载

准备好新站点的第一步是准备开发环境。 必须在本地计算机上安装必要的工具,才能创建和部署 ASP.NET Core Web 应用。 接下来将介绍所需的开发工具及其安装方法。

配置开发环境

必须安装 Visual Studio 中的其他工具,才能生成、调试 ASP.NET Core Web 应用,并将应用部署到 Azure。 为此,将安装两个 Visual Studio 工作负荷。

什么是 Visual Studio 工作负荷?

工作负荷是 Visual Studio 内预配置的工具捆绑包,它们已进行分组,可便于开发人员生成特定类型的应用、使用特定的开发语言或针对特定平台进行开发。

例如,“使用 C++ 的桌面开发”工作负荷包括可便于运行和调试 C++ 控制台应用的 Visual Studio 功能,“使用 .NET 的移动开发”工作负荷会安装使用 .NET 创建移动应用所需的全部工具。

用于 ASP.NET Core 开发和发布的 Visual Studio 工作负荷

Visual Studio 2022 提供了创建网站并将网站发布和部署到 Azure 所需的两个工作负荷。 这两个工作负荷包括 ASP.NET Core 网站模板,并提供将网站连接和部署到 Azure 的功能。

安装 Visual Studio 2022 后,需要确保下面的 Visual Studio 工作负荷已安装:

  • ASP.NET 和 Web 开发:Visual Studio 中的“ASP.NET 和 Web 开发”工作负荷旨在最大限度地提高使用 ASP.NET 和基于标准的技术(如 HTML 和 JavaScript)开发 Web 应用的工作效率。
  • Azure 开发:Visual Studio 中的“Azure 开发”工作负荷会安装最新的用于 .NET 的 Azure SDK 和针对 Visual Studio 的工具。 安装这些项后,可以在 Cloud Explorer 中查看资源、使用 Azure 资源管理器工具创建资源、生成适用于 Azure Web 和云服务的应用,并能使用 Azure Data Lake 工具执行大数据操作。

安装 Visual Studio 工作负荷

可以使用 Visual Studio 安装程序来修改作为 Visual Studio 的一部分安装的组件,其中包括工作负荷。

  1. 若要从 Windows“开始”菜单中启动安装程序,请向下滚动到“V”,然后单击“Visual Studio 安装程序”。 或者,打开“开始”菜单时,仅需键入 Visual Studio Installer 即可找到安装程序链接,然后按 Enter 键。
  2. Visual Studio 安装程序窗口出现。 单击“修改”按钮。
  3. 请务必在“工作负荷”选项卡中的“Web 和云”部分下选中“ASP.NET 和 Web 开发”以及“Azure 开发”工作负荷。
  4. 接下来,单击安装程序右下角的“修改”按钮。 此时,Visual Studio 安装程序会下载并安装必要的组件。
  5. 安装完成后,单击“启动”,以打开 Visual Studio。

工作负荷是添加到本地 Visual Studio 安装,且只需要安装一次。 将来可以启动 Visual Studio 安装程序,以添加其他工作负荷、自定义或删除已安装的工作负荷。

为了完成本模块中的练习,需要安装“ASP.NET 和 Web 开发”和“Azure 开发”工作负荷。

练习 – 创建新的 ASP.NET Core 应用

在本单元中,你将在本地计算机上创建、生成和运行新的 ASP.NET Core Web 应用。 需要安装 Visual Studio 2022,同时安装其中的“ASP.NET 和 Web 开发”以及“Azure 开发”工作负载。

创建 ASP.NET Core 项目

在本地计算机上,打开 Visual Studio 2022。

在 Visual Studio 登陆页面的“开始使用”下,选择“新建项目”。

在搜索框中,输入“Web”。

在搜索结果中,选择“ASP.NET Core Web 应用”。

选择“下一步” 。

在“新建项目”对话框中,将“名称”字段设置为“AlpineSkiHouse”。

为新解决方案选择“位置”。

选择“下一页”。

在框架下拉列表中选择“.NET 6.0 (长期支持)”。

选择“创建”来创建项目。 

备注

还可以在此对话框中选择不同的起始模板,具体取决于 Web 开发要求。 在对话框顶部,还可以选择 ASP.NET Core 的版本。 如果可能,应选择 ASP.NET Core 6.0,但其他最新版本的 ASP.NET Core 也适用于此练习。

你现在应该有一个新的 ASP.NET Core Web 应用解决方案。

在本地计算机上生成和测试

现在,先在本地计算机上生成和测试应用,再将它部署到 Azure。

运行应用:按 F5,以生成项目并在调试模式下运行项目。按 Ctrl+F5,以生成项目并在不附加调试器的情况下运行项目。 

提示

在非调试模式下启动应用,可更改代码、保存文件、刷新浏览器,并能查看代码更改。 许多开发人员更愿意使用非调试模式来快速启动应用并查看更改。

Visual Studio 启动 IIS Express Web 浏览器并加载应用。

当 Visual Studio 创建 Web 项目时,对 Web 服务器使用的是随机端口。 在上图中,端口号为 44381。 运行应用时,可能会看到不同的端口号。 重要你可能注意到网页顶部提供了隐私和 Cookie 使用策略。 选择“接受”以同意跟踪。 此应用不会跟踪个人信息。 模板生成的代码包含有助于遵守一般数据保护条例 (GDPR) 的资产。

至此,已根据示例模板创建了 Web 应用,它正在本地运行。 下一步是将应用部署到 Azure。

探索 Azure 应用服务

你已新建站点,下一步是将它部署到 Azure。 需要考虑要利用哪些 Azure 服务。 Azure 应用服务为应用提供高度可缩放、自修补的 Web 托管服务。

本单元将介绍如何使用 Visual Studio 将 ASP.NET Core Web 应用发布到 Azure 应用服务计划。

什么是 Azure 应用服务?

Azure 应用服务是用于托管 Web 应用、REST API 和后端服务的服务。 应用服务支持使用 .NET Core、.NET Framework、Java、Ruby、Node.js、PHP 和 Python 编写的代码。 应用服务是大多数网站的理想之选,特别是在不需要严格控制托管基础结构的情况下。

什么是应用服务计划?

应用服务计划定义了应用将使用的计算资源、这些资源的位置、计划可使用的附加资源数以及定价层。 这些计算资源类似于传统 Web 托管方案中的服务器场。 可以将一个或多个应用配置为在相同的应用服务计划中运行。

部署应用时,可以创建应用服务计划,也可以继续向现有计划添加应用。 不过,只有同一应用服务计划中的应用,才能共享相同的计算资源。 若要确定新应用是否拥有必要资源,必须了解现有应用服务计划的容量,以及新应用的预期负载。 重载应用服务计划可能会导致新应用和现有应用的性能降低或有故障时间。

可以使用 PowerShell 或 Azure CLI 在 Azure 门户中提前定义应用服务计划,也可以在 Visual Studio 中发布应用时设置应用服务计划。

每个应用服务计划均定义:

  • 区域(美国西部、美国东部,等等)
  • VM 实例数
  • VM 实例大小(小型、中型、大型)
  • 定价层(“免费”、“共享”、“基本”、“标准”、“高级”、“高级 V2”、“独立”)

选择区域

创建应用服务计划时,必须定义将在其中托管此计划的区域或位置。 通常会选择地理位置靠近预期客户的区域。

定价和可靠性级别

共享计算:“免费”和“共享”这两个基本层在其他应用服务应用(包括其他客户的应用)所在的同一个 Azure VM 中运行应用。 这些层为共享资源中运行的每个应用分配 CPU 配额,且资源不可横向扩展。

“免费”和“共享”计划最适用于流量需求有限(设定限制为每 24 小时 165MB 的出站数据)的小型个人项目。

专用计算:“基本、标准、高级和高级 V2”层在专用的 Azure VM 上运行应用。 只有同一应用服务计划中的应用可以共享相同的计算资源。 层越高,可用于横向扩展的 VM 实例就越多。

标准服务计划最适用于向客户发布商业应用程序的实时生产工作负荷。

高级服务计划支持无需额外花钱购买专用(隔离)计划的高容量 Web 应用。

隔离:此层在专用的 Azure 虚拟网络中运行专用 Azure VM,从而在计算隔离的基础上,为应用提供网络隔离。 此层提供最大的横向扩展能力。 只有对最高级别的安全性和性能有特定需求时,才选择隔离服务计划。

在以下情况下,请将应用隔离到新应用服务计划中:

  • 该应用占用大量资源
  • 想要独立于现有计划中的其他应用缩放该应用
  • 应用需要其他地理区域中的资源

可随时纵向扩展和缩减应用服务计划。 可以先选择较低的定价层,以后再在需要更多应用服务功能时纵向扩展它。

指定资源组

资源组是在其中部署和管理 Azure 资源(如 Web 应用、数据库和存储帐户)的逻辑容器。 它是一种资源整理机制,用于管理、监视和计费目的。 可以使用现有资源组,也可以直接在 Visual Studio 中创建一个。

练习 – 从 Visual Studio 发布 ASP.NET 应用

必须使用沙盒,才能完成此模块。 通过使用沙盒,可访问免费资源。 个人订阅将不会收费。 沙盒仅限用于在 Microsoft Learn 上完成培训。 禁止将沙盒用于任何其他目的,否则可能会导致永远无法使用沙盒。

Microsoft 出于教育目的提供此实验室体验和相关内容。 提供的所有信息均归 Microsoft 所有,仅用于学习本 Microsoft Learn 模块中涵盖的产品和服务。登录以激活沙盒

你已有在本地运行的 ASP.NET Core Web 应用。 在本练习中,你将向 Azure 应用服务发布你的应用。

将 ASP.NET Core Web 应用发布到 Azure

在解决方案资源管理器中,右键单击“AlpineSkiHouse”项目,然后选择“发布”。

在随即显示的对话框中,选择“Azure”作为发布目标,然后选择“下一步”,继续操作。

选择“Azure 应用服务(Windows)”,然后选择“下一步”,继续操作。 

提示

ASP.NET Core 应用是跨平台的。 也就是说,它们支持在 Linux 版本的应用服务上运行,而无需更改任何代码。 不过,Linux 版本不支持共享的托管模型,因此你将在本练习中使用 Windows 应用服务。

在“订阅”下拉列表中,选择“Concierge 订阅”。

在对话框的下边缘附近,选择“新建 Azure 应用服务”链接,以打开“应用服务(Windows)”对话框。

配置新的 Azure 应用服务

如果尚未登录,请使用在 Microsoft Learn 中使用的帐户来登录 Visual Studio。

输入必填的应用服务计划信息。

名称:此应用的名称。 此名称确定已发布应用的 URL,即 https://<AppName>.azurewebsites.net。 它必须是唯一值。 可能需要尝试一些不同的名称才能找到唯一的名称。

订阅:要将应用部署到的 Azure 订阅。 选择通过沙盒提供的“Concierge 订阅”。

资源组:选择现有 [沙盒资源组名称] 资源组。

托管计划:托管计划指定了托管应用的 Web 服务器场的位置、大小和功能。 在本练习中,将创建一个新的托管计划。选择托管计划旁的“新建”。 在随即显示的“配置托管计划”窗口中,将“大小”更改为“共享”,然后选择“确定”。

选择“创建”,在 Azure 中创建应用服务资源。 此操作需要几秒钟才能完成。

几秒钟过后,“应用服务(Windows)”对话框窗口便会消失。 此时,新的应用服务显示在“发布”对话框上的应用服务资源列表中。 选择“完成”,完成发布配置文件的创建。 此时,“发布”对话框会消失。

新的发布配置文件显示在属性页顶部附近的下拉列表中。 选择“发布”,将 Web 应用发布到应用服务。

恭喜! 在“输出”窗口中看到“成功发布”消息时,表示 ASP.NET Core Web 应用程序现已发布上线。 生成输出中以及 Visual Studio 发布页面上的站点的最终 URL。

若要测试网站,请转到指示的 URL。 Visual Studio 可能还会为你自动启动此 URL。

备注

如果在输出中找不到 URL,请转到 https://<AppName>.azurewebsites.net,其中 <AppName> 是前面提供的名称。 例如,”https://alpineskihouse123.azurewebsites.net/”。

至此,Web 应用已发布! Azure 应用服务计划已创建,应用正在运行且已准备好接受更新。

探索 Visual Studio 应用项目

你已成功创建 Web 应用并将其发布到 Azure,但如果想进行更改该怎么办呢? Visual Studio 会记住应用的发布位置,这会使更新和更改都是两次单击过程。

浏览项目结构

已在 Visual Studio 中创建了 ASP.NET Core web 应用,现在需要编辑和自定义你的网站。 让我们浏览项目结构,看看 Visual Studio 创建了什么吧。

依赖项

Dependencies 文件夹包括 ASP.NET Core 内部结构,用于让应用启动并运行。 除非要添加特定的第三方包,否则无需在此文件夹中花费太多时间。

属性

属性文件夹包含托管 Web 应用的配置数据。 如果现在展开“PublishProfiles”文件夹,应该会看到 Alpine Ski Hill 网站的 URL。 每个发布配置文件都是 .xml 文件,其中包含发布配置信息,如 Visual Studio 用来上传文件的 Azure 地址。

wwwroot

wwwroot 文件包含站点的所有静态资产,如 css、js、映像和 lib 文件。 准备好为站点添加样式和更多功能后,将在此处进行操作。

页面

“Pages”文件夹包含用于站点页面的“Razor”模板。 Razor 是一种标记语法,用于将服务器代码嵌入 ASP.NET 网页中。 它包含 HTML,并且具有在站点上显示数据和执行逻辑的特殊约定。

站点中的每个页面都以两个代码文件表示:

  • .cshtml 文件,它是 Razor 标记文件。 此文件包含显示 HTML 和一些 C# 逻辑。
  • .cs 文件,它是从 PageModel 类继承的 C# 代码隐藏。 通过此文件,可以在任何数据传递至 Razor 文件之前,拦截 HTTP 请求并对相应请求执行某处理。

appsetting.json

这是用于 ASP.NET Core 的配置文件。

Program.cs

Program.cs 文件可为你的站点配置并启动 Web 主机。

Razor 模板简介

我们要对网站进行一些基本更改。 你需要对如何利用 Razor 模板来自定义 web 应用有基本的理解。

什么是 Razor?

Razor 是一种用于通过 C# 创建动态网页的 ASP.NET 语法。 当服务器读取 Razor 页面时,C# 代码将在呈现 HTML 之前运行。 基于此即可快速生成动态内容。

Razor 使用 @ 指令告知 ASP.NET 如何处理页面。

例如,可看一看 Privacy.cshtml 页中的代码:

@page
@model PrivacyModel
@{
    ViewData["Title"] = "Privacy Policy";
}
<h1>@ViewData["Title"]</h1>

<p>Use this page to detail your site's privacy policy.</p>
  • @page 指令告知 ASP.NET 将此文件作为 Razor 页处理。
  • @model 指令告知 ASP.NET 将此 Razor 页与名为 PrivacyModel 的 C# 类绑定。

Razor 还使用 @ 符号在代码与 HTML 之间切换。 如果查看上面的代码片段,你会注意到 @{ ... }。 这是一个 Razor 代码块,此代码已执行,但未呈现。

若要呈现代码语句的输出,请在 C# 表达式前面使用 @。 上面代码块中的 <h1> 标记内有一个示例。

创建和发布网站只是创建优质网站的第一步。 开始添加内容后,便需要更新网站。 将站点发布到 Azure 后,便可随时更新它。

练习:将更新发布至站点

你的 Alpine Ski House Web 应用已启动并运行,但现在你需要向老板展示该应用。 你将需要更新站点并将这些更新发布到 Azure。

更新 Web 应用

替换样本代码

  1. 在“Pages”文件夹中,打开 Privacy.cshtml 文件。
  2. 在代码底部,找到 <p>Use this page to detail your site's privacy policy.</p>
  3. 将此样本文字替换为 <p>Welcome to the Alpine Ski House!</p>
  4. 保存文件。
  5. 打开 Index.cshtml 文件。
  6. 将 <p> 标记内的内容替换为“Alpine Ski House is the premier ski hill in Northeast!”
  7. 保存文件。

发布更新

  1. 在解决方案资源管理器中,右键单击项目。
  2. 选择“发布”。 应该会打开名为“AlpineSkiHouse”的新选项卡。
  3. 选择“发布”按钮,以部署最新更改。

查看更改

在你发布更改后,Visual Studio 便会在浏览器中打开站点。 现在,你应该会在主页和隐私页面上看到新消息。

恭喜!你已在 Visual Studio 2022 中成功更新了 Web 应用。

总结

在本模块中,你从头开始新建了一个 ASP.NET Web 应用,然后直接从 Visual Studio 将它发布到 Azure。 你创建了应用服务应用,更新了应用,然后发布了更改。所有这些操作都是在 Visual Studio 中完成的。

Visual Studio 和 Azure 应用服务提供了一种强大机制,可便于开发人员创建、发布和维护 Azure 中的 Web 应用。 通过将简单性和可管理性相结合,让不断更新 Azure 中的 Web 应用成为一个简单的过程。

清理

完成本模块后,沙盒会自动清理资源。

使用自己的订阅时,最好在项目结束时确定是否仍然需要所创建的资源。 让资源保持运行状态会耗费成本。 可以逐个删除资源,也可以删除资源组以删除整个资源集。

给TA打赏
共{{data.count}}人
人已打赏
开发工具

使用 Visual Studio Code 进行调试

2022-8-23 13:45:53

开发工具程序员

代码福尼亚——零代码的真实开发者故事(一)直播全程回放

2022-9-28 22:14:27

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
搜索