在 Microsoft Azure 中部署 Web 应用程序

引言

编写 Web 应用程序是第一步，但以“结构化”的方式部署应用程序要困难得多。在本文中，我想介绍如何从 Visual Studio Online (VSO) 部署应用程序。我将展示如何

• 将代码存储在 Visual Studio Online (VSO) 中
• 设置从 VSO 到 MS Azure 的自动部署
• VIP 交换

本文不包含（但可能在后续文章中包含）

• 处理 VSO 中的多个分支（通常是 DEV / ACC / PROD）。阅读本文后，应该清楚如何进行设置。
• 处理数据库结构的变化。

必备组件

我假设您已经拥有一个 MS Azure 帐户和一个 VSO 帐户。如果您还没有 MS Azure 帐户，可以在 https://account.windowsazure.com/signup?showCatalog=True 注册。创建新的（免费）帐户后，您可以轻松设置 Visual Studio Online。

对于本文，我创建了一个标准的 MVC 应用程序，未做任何修改。您可以在本文末尾（附录）找到创建此应用程序的步骤。

将代码存储在 Visual Studio Online (VSO) 中

当您的项目初始版本创建完成，并且可以在您的计算机上运行时（一如既往……），就可以将其签入 VSO 了。这将确保您的代码安全且已版本化，并且您可以与团队协作开发代码。

以下是遵循的步骤

创建 VSO 团队项目

使用您喜欢的浏览器登录 VSO。在“最近的项目和团队”下，点击“新建”以——您猜对了——创建新团队项目。

• 将项目名称设置为“SampleApp”，其他字段保留默认值，然后点击“创建项目”。当然，如果您愿意使用其他进程模板，可以随意更改此字段。
• 点击“导航到项目”按钮以进入您的项目页面。

现在我们已经在 VSO 中创建了团队项目，可以将其中的代码存储起来了。

将代码签入 VSO

• 返回 VS2013 并打开解决方案视图。
• 右键单击解决方案，然后点击“将解决方案添加到源代码管理...”。
• 从列表中选择新创建的团队项目“SampleApp”，然后点击确定。

注意，您的解决方案中的所有项都添加了绿色加号，表示它们已受版本控制，但尚未签入。现在我们来做这个。

• 右键单击解决方案，然后点击“签入”。
• VS 会带您进入“团队资源管理器”视图，您可以在其中输入签入注释。这不是强制性的，但非常明智！
• 填写有意义的注释后，点击“签入”按钮。

如果您想验证签入是否发生，请返回 VSO 并点击页面顶部的“代码”按钮。您将看到一个“$/SampleApp”文件夹，其中包含您的解决方案。选择源文件时，将在右侧的编辑器中看到它，也可以在此处进行修改。

请注意，目前 VSO 仅用作版本控制工具。尚未创建任何生成定义。您可以通过点击页面顶部的“生成”选项卡来验证这一点。我们可以从 Visual Studio 内创建生成定义，或者让 MS Azure 来完成工作……

在 VSO 中生成代码

将代码存储在 VSO 中有很多好处。当然，拥有代码备份并能在搞砸时回滚到先前的签入很方便。但在我们的例子中，我们想自动部署到 MS Azure，因此还需要能够在 VSO 中生成代码并自动部署。这将允许您尽早部署代码，以防止出现“在我电脑上可以运行”的问题。尽早部署代码，即使是在 DEV 环境中，也能确保从一开始就实现开发-部署周期，并在项目早期发现和解决问题。当您以后想将项目部署到 ACC / PROD 时，您将拥有一个稳健、可重复的流程。

我们可以让 MS Azure 来完成繁重的工作。让我们看看如何实现。

创建 Azure 网站

• 登录 https://portal.azure.com/，然后点击左下角的 + 按钮。这将允许您创建一个新网站。
• 在新的窗格中，选择“网站”。（新门户使用“垂直页面”，称为窗格）。
  
• 现在输入一个唯一的 URL，例如“SampleAppCP”，并保留所有其他值默认。
• 点击“创建”。在 Azure 中创建网站可能需要一些时间。创建完成后，您可以在门户中看到它。
• 浏览到该网站（通过使用顶部的“浏览”按钮），您将看到一个标准的占位符，证明您的网站已成功运行。

设置持续部署

在 Azure 门户中，点击新创建的图标以设置从 VSO 的部署。在“SampleappCP”窗格中，找到“部署”磁贴并点击它。

这将打开“持续部署”窗格，只有一个可用选项：点击“选择源”，然后点击“Visual Studio Online”。

现在您可以选择要部署的团队项目：选择“SampleApp”并点击确定。MS Azure 现在会在您的团队项目中创建一个生成定义，以便在执行生成时，它会自动更新网站。如果这需要一些时间完成，请不要担心。

在您的团队项目中创建了一个自定义生成定义。当此生成执行时，您的项目将被生成，运行单元测试，并将应用程序部署到此网站。

此自定义生成将自动执行，因此如果一切顺利，您的 Web 应用程序现在已经部署。生成会在 VSO 中安排，并在准备就绪时执行。根据 VSO 的当前负载，这可能需要一些时间。您可以在 VSO 门户中进行跟踪。点击项目页面顶部的“生成”，然后点击创建的生成定义。

生成完成后，您的网站将在 MS Azure 中部署。您可以通过点击窗格顶部的“浏览”按钮来欣赏您的成果。

如果您的生成出现问题，或者您只想查看一些统计数据，可以转到“已完成”选项卡并打开生成。这将显示 MSBuild 进程的日志。

VIP 交换

当您的应用程序在 PROD 中运行时，VSO 部署仍然有效。如果出现问题，您可以生成项目的先前版本并重新部署。但这当然会带来一些延迟。最重要的是，您已经搞乱了您的 PROD 环境，而且运气不好（墨菲定律！）发现问题的不是您，而是您的用户。

出于所有这些原因，可以为您的 Web 应用程序创建一个暂存环境。您可以确保 VSO 生成部署到暂存环境，而您的应用程序保持不变。想法是暂存环境与实际应用程序使用所有相同的资源（是的，也包括相同的数据库），这样您就可以验证一切是否按预期工作。完成“冒烟测试”后，您可以交换这两个环境。因此，暂存环境并非旨在替代 ACC 环境（后者将拥有自己的资源，并且**不会**影响 PROD 环境）。它仅用于

• 最大限度地减少部署延迟。您部署到暂存环境，而您的应用程序保持运行。因此，即使部署耗时很长，用户也不会受到影响。实际的 VIP 交换非常快。
• 允许您在实际 PROD 环境中执行最后检查。您的暂存应用程序应具有与 PROD 应用程序完全相同的设置。否则，在 VIP 交换时，您的 PROD 环境将使用暂存资源。不要忘记您的新版本应该已经在 DEV 和 ACC 环境中进行了测试，因此您应该对它现在能正常工作非常有信心。
• 如果出现严重问题，可以轻松回滚到先前版本，只需再次进行 VIP 交换即可。

在 MS Azure 中扩展您的网站

我们将应用程序部署到了免费托管计划。不幸的是，此计划不支持 VIP 交换。所以我们必须先升级托管计划（并且从现在开始，我们的应用程序不再免费了）。

在 Azure 门户中，打开您的网站（SampleAppCP）。

• 点击“所有设置 ->”，
• 然后点击“缩放”（1），再点击“从免费计划升级...”（2）。
• 现在会弹出一个名为“选择定价层”的新窗格。
• 选择一个标准计划，例如“S1 标准”（3），然后点击“选择”（4）。

创建部署槽

• 在“设置”窗格中，点击“部署槽”，然后点击“添加槽”。
• 将槽命名为“staging”，并将其配置源设置为 SampleAppCP。
• 点击 OK 并刷新“部署槽”窗格。
• 点击“sampleappcp-staging”，然后在新的窗格中点击“浏览”。这将带您进入标准的空 Azure 网站。

执行交换

现在点击窗格顶部的“交换”按钮，然后点击“OK”确认。在几秒钟内（！），您的暂存应用程序现在将包含我们之前创建的 Web 应用程序，反之亦然。此交换如此之快的原因是 VIP 代表“虚拟 IP 地址”。因此，最终需要做的就是交换两台机器的 IP 地址。如果您想验证交换，请点击“浏览”并根据需要刷新您的浏览器页面。

再次交换以设置部署到暂存环境。

在暂存环境中，像之前一样设置从 VSO 的部署。这将生成第二个生成定义。删除我们之前创建的生成定义，我们就完成了。您可以在 Visual Studio 中删除生成定义。

所以，现在我们可以完成整个开发-部署过程了

• 在“index.cshtml”中进行一些（可见的）更改。
• 在本地生成/测试/运行您的应用程序。
• 将更改签入 VSO。
• 等待 CI 生成完成。
• 检查暂存网站。您的更改应该在此处可见。您可能需要刷新页面。
• 如果您对结果满意，请执行 VIP 交换。

结论

现在我们已经设置了开发环境，这样当我们向 VSO 签入代码时，VSO 将自动生成项目。最终的生成步骤会将生成的项目部署到 SampleAppCP-staging 网站。我们可以快速验证所有内容是否仍然正常工作，然后执行 VIP 交换。

现在我们对部署有了控制。回滚到先前版本很简单（这就是版本控制系统的作用），并且我们有生成和部署的记录。部署将始终以相同一致的方式进行。因此，一旦它在您的 DEV 网站上正常工作，相同的过程就可以重复用于更新您的 ACC 网站，以及后来的 PROD 网站。**可重复性**是这里的关键词！

请注意，本教程未涵盖数据库更改。

附录 - 创建测试网站

本文不讲创建 ASP.NET MVC 应用程序，但我们需要一个项目来测试。因此，我在这里非常简要地介绍如何创建我们将要使用的项目。

1. 启动 VS2013
2. 创建新项目 > 模板 > Visual C# > Web > ASP.NET Web 应用程序

   

3. 单击“确定”
4. 在“选择模板”页面上，选择 MVC，并勾选“添加单元测试”。
5. 单击“确定”
6. 编译并运行应用程序

关注点

令人惊讶的是设置起来如此简单。当我开始这个小项目时，我担心设置持续部署会更困难，但 VSO + MS Azure 是一个强大的组合！

历史

• 2015 年 3 月 3 日：本文初始版本