使用 Azure 中继向云中的 Web 应用程序公开本地 WCF 服务Expose an on-premises WCF service to a web application in the cloud by using Azure Relay

本文演示如何使用 Azure 和 Visual Studio 生成混合云应用程序。This article shows how to build a hybrid cloud application with Azure and Visual Studio. 你将创建使用云中多个 Azure 资源的应用程序。You create an application that uses multiple Azure resources in the cloud. 本教程将帮助你了解:This tutorial helps you learn:

  • 如何创建或修改现有 Web 服务以供 Web 解决方案使用。How to create or adapt an existing web service for consumption by a web solution.
  • 如何使用 Azure Windows Communication Foundation (WCF) 中继服务在 Azure 应用程序和托管于其他某处的 Web 服务之间共享数据。How to use the Azure Windows Communication Foundation (WCF) Relay service to share data between an Azure application and a web service hosted elsewhere.

在本教程中,你将执行以下任务:You do the following tasks in this tutorial:

  • 安装本教程的必备组件。Install prerequisites for this tutorial.
  • 查看方案。Review the scenario.
  • 创建命名空间。Create a namespace.
  • 创建本地服务器。Create an on-premises server.
  • 创建 ASP .NET 应用程序。Create an ASP .NET application.
  • 在本地运行应用。Run the app locally.
  • 将 Web 应用部署到 Azure。Deploy the web app to Azure.
  • 在 Azure 上运行应用。Run the app on Azure.


若要完成本教程,需要满足以下先决条件:To complete this tutorial, you need the following prerequisites:

Azure 中继功能将为混合解决方案带来哪些帮助How Azure Relay helps with hybrid solutions

业务解决方案通常由自定义代码和现有功能组合而成。Business solutions are typically composed of a combination of custom code and existing functionality. 自定义代码处理新的和独特的业务要求。Custom code tackles new and unique business requirements. 已部署好的解决方案和系统提供现有功能。Solutions and systems that are already in place provide existing functionality.

解决方案架构师开始使用云来轻松地处理缩放需求和降低运营成本。Solution architects are starting to use the cloud for easier handling of scale requirements and lower operational costs. 在此过程中,他们发现希望用作其解决方案的构建基块的现有服务资产位于企业防火墙内,无法通过云解决方案轻松访问。In doing so, they find that existing service assets they'd like to use as building blocks for their solutions are inside the corporate firewall and out of easy reach by the cloud solution. 许多内部服务的构建或托管方式使得它们无法在企业网络边缘轻松公开。Many internal services aren't built or hosted in a way that they can be easily exposed at the corporate network edge.

Azure 中继可以利用现有的 WCF Web 服务,并使公司外部的解决方案可以安全地访问这些服务,而无需对企业网络基础结构进行侵入式更改。Azure Relay takes existing WCF web services and makes those services securely accessible to solutions that are outside the corporate perimeter without requiring intrusive changes to the corporate network infrastructure. 虽然此类中继服务仍托管在现有环境中,但它们会将侦听传入会话和请求这一任务委派给云托管的中继服务。Such relay services are still hosted inside their existing environment, but they delegate listening for incoming sessions and requests to the cloud-hosted relay service. Azure 中继还会通过使用共享访问签名 (SAS) 身份验证来保护这些服务,以阻止未经授权的访问。Azure Relay also protects those services from unauthorized access by using Shared Access Signature (SAS) authentication.

查看方案Review the scenario

在本教程中,请创建一个 ASP.NET 网站,用于查看产品库存页上的产品列表。In this tutorial, you create an ASP.NET website that enables you to see a list of products on the product inventory page.


本教程假定产品信息位于现有的本地系统中,而且你使用 Azure 中继来访问该系统。The tutorial assumes that you have product information in an existing on-premises system, and uses Azure Relay to reach into that system. 在简单的控制台应用程序中运行的 Web 服务可以模拟这种场景。A web service that runs in a simple console application simulates this situation. 该服务包含一组内存中产品。It contains an in-memory set of products. 你可以在自己的计算机上运行此控制台应用程序并将 Web 角色部署到 Azure 中。You can run this console application on your own computer and deploy the web role into Azure. 这样,便可以观察 Azure 数据中心内运行的 Web 角色如何调用计算机。By doing so, you'll see how the web role running in the Azure datacenter calls into your computer. 即使基本上可以肯定计算机位于至少一个防火墙和网络地址转换 (NAT) 层后面,也会发生此调用。This call happens even though your computer will almost certainly be behind at least one firewall and a network address translation (NAT) layer.

设置开发环境Set up the development environment

在开始开发 Azure 应用程序之前,需要下载工具并设置开发环境:Before you can begin developing Azure applications, download the tools and set up your development environment:

  1. 从 SDK 下载页安装用于 .NET 的 Azure SDK。Install the Azure SDK for .NET from the SDK downloads page.
  2. 在“.NET”列中,选择要使用的 Visual Studio 版本。In the .NET column, choose the version of Visual Studio you're using. 本教程使用 Visual Studio 2019。This tutorial uses Visual Studio 2019.
  3. 当系统提示是要运行还是保存安装程序时,选择“运行”。When prompted to run or save the installer, select Run.
  4. 在“Web 平台安装程序”对话框中,选择“安装”并继续安装。In the Web Platform Installer dialog box, select Install and continue with the installation.

安装完成后,就有了开始开发应用所需的一切。Once the installation is finished, you have everything necessary to start to develop the app. SDK 包含了一些工具,可利用这些工具在 Visual Studio 中轻松开发 Azure 应用程序。The SDK includes tools that let you easily develop Azure applications in Visual Studio.

创建命名空间Create a namespace

第一步是创建命名空间并获取共享访问签名 (SAS) 密钥。The first step is to create a namespace, and to obtain a Shared Access Signature (SAS) key. 命名空间为每个通过中继服务公开的应用程序提供应用程序边界。A namespace provides an application boundary for each application exposed through the relay service. 创建服务命名空间时,系统会自动生成 SAS 密钥。An SAS key is automatically generated by the system when a service namespace is created. 服务命名空间与 SAS 密钥的组合为 Azure 提供了用于验证应用程序访问权限的凭据。The combination of service namespace and SAS key provides the credentials for Azure to authenticate access to an application.

  1. 登录 Azure 门户Sign in to the Azure portal.

  2. 选择“创建资源”。Select Create a resource. 然后,选择“集成” > “中继”。Then, select Integration > Relay. 如果未在列表中看到“中继”,请选择右上角的“查看全部”。If you don't see Relay in the list, select See All in the top-right corner.

  3. 选择“创建”,然后在“名称”字段中输入命名空间名称。Select Create, and enter a namespace name in the Name field. Azure 门户会检查该名称是否可用。Azure portal checks to see if the name is available.

  4. 选择要在其中创建命名空间的 Azure 订阅。Choose an Azure subscription in which to create the namespace.

  5. 对于资源组,选择一个要在其中放置命名空间的现有资源组,或创建一个新资源组。For Resource group, choose an existing resource group in which to place the namespace, or create a new one.

  6. 选择应托管该命名空间的国家或地区。Select the country or region in which your namespace should be hosted.


  7. 选择“创建” 。Select Create. Azure 门户将创建该命名空间并启用它。The Azure portal creates your namespace and enables it. 几分钟后,系统将为用户的帐户预配资源。After a few minutes, the system provisions resources for your account.

获取管理凭据Get management credentials

  1. 选择“所有资源”,然后选择新建的命名空间名称。Select All resources, and then choose the newly created namespace name.

  2. 选择“共享访问策略”。Select Shared access policies.

  3. 在“共享访问策略”下,选择“RootManageSharedAccessKey”。Under Shared access policies, select RootManageSharedAccessKey.

  4. 在“SAS 策略:RootManageSharedAccessKey”下,选择“主连接字符串”旁边的“复制”按钮。Under SAS Policy: RootManageSharedAccessKey, select the Copy button next to Primary Connection String. 此操作会将连接字符串复制到剪贴板,供以后使用。This action copies the connection string to your clipboard for later use. 将此值粘贴到记事本或其他某个临时位置。Paste this value into Notepad or some other temporary location.

  5. 重复上述步骤,将主密钥的值复制和粘贴到临时位置,供以后使用。Repeat the preceding step to copy and paste the value of Primary key to a temporary location for later use.


创建本地服务器Create an on-premises server

首先,生成一个模拟的本地产品目录系统。First, you build a simulated on-premises product catalog system. 此项目是一个 Visual Studio 控制台应用程序,它使用 Azure 服务总线 NuGet 包 来包含服务总线库和配置设置。This project is a Visual Studio console application, and uses the Azure Service Bus NuGet package to include the Service Bus libraries and configuration settings.

  1. 以管理员身份启动 Microsoft Visual Studio。Start Microsoft Visual Studio as an administrator. 为此,请右键单击 Visual Studio 程序图标,并选择“以管理员身份运行”。To do so, right-click the Visual Studio program icon, and select Run as administrator.

  2. 在 Visual Studio 中,选择“新建项目”。In Visual Studio, select Create a new project.

  3. 在“创建新项目”中,选择适用于 C# 的“控制台应用(.NET Framework)”,然后选择“下一步”。In Create a new project, select Console App (.NET Framework) for C# and select Next.

  4. 将项目命名为 ProductsServer,然后选择“创建”。Name the project ProductsServer and select Create.


  5. 在“解决方案资源管理器”中,右键单击“ProductsServer”项目并选择“管理 NuGet 包”。In Solution Explorer, right-click the ProductsServer project, then select Manage NuGet Packages.

  6. 选择“浏览”,然后搜索并选择“WindowsAzure.ServiceBus”。Select Browse, then search for and choose WindowsAzure.ServiceBus. 选择“安装”并接受使用条款。Select Install, and accept the terms of use.

    选择 NuGet 包

    现已引用所需的客户端程序集。The required client assemblies are now referenced.

  7. 为产品协定添加新类。Add a new class for your product contract. 在“解决方案资源管理器”中,右键单击“ProductsServer”项目并选择“添加” > “类”。In Solution Explorer, right-click the ProductsServer project and select Add > Class.

  8. 在“名称”中输入名称 ProductsContract.cs,然后选择“添加”。In Name, enter the name ProductsContract.cs and select Add.

对解决方案进行以下代码更改:Make the following code changes to your solution:

  1. 在“ProductsContract.cs”中,将命名空间定义替换为以下代码,以定义服务的协定。In ProductsContract.cs, replace the namespace definition with the following code, which defines the contract for the service.

    namespace ProductsServer
        using System.Collections.Generic;
        using System.Runtime.Serialization;
        using System.ServiceModel;
        // Define the data contract for the service
        // Declare the serializable properties.
        public class ProductData
            public string Id { get; set; }
            public string Name { get; set; }
            public string Quantity { get; set; }
        // Define the service contract.
        interface IProducts
            IList<ProductData> GetProducts();
        interface IProductsChannel : IProducts, IClientChannel
  2. Program.cs 中,将命名空间定义替换为以下代码,以便为其添加配置文件服务和主机。In Program.cs, replace the namespace definition with the following code, which adds the profile service and the host for it.

    namespace ProductsServer
        using System;
        using System.Linq;
        using System.Collections.Generic;
        using System.ServiceModel;
        // Implement the IProducts interface.
        class ProductsService : IProducts
            // Populate array of products for display on website
            ProductData[] products =
                new []
                        new ProductData{ Id = "1", Name = "Rock",
                                         Quantity = "1"},
                        new ProductData{ Id = "2", Name = "Paper",
                                         Quantity = "3"},
                        new ProductData{ Id = "3", Name = "Scissors",
                                         Quantity = "5"},
                        new ProductData{ Id = "4", Name = "Well",
                                         Quantity = "2500"},
            // Display a message in the service console application
            // when the list of products is retrieved.
            public IList<ProductData> GetProducts()
                Console.WriteLine("GetProducts called.");
                return products;
        class Program
            // Define the Main() function in the service application.
            static void Main(string[] args)
                var sh = new ServiceHost(typeof(ProductsService));
                Console.WriteLine("Press ENTER to close");
  3. 在“解决方案资源管理器”中,双击“App.config”在 Visual Studio 编辑器中将其打开。In Solution Explorer, double-click App.config to open the file in the Visual Studio editor. <system.ServiceModel> 元素的底部(但仍在 <system.ServiceModel> 中)添加以下 XML 代码。At the bottom of the <system.ServiceModel> element, but still within <system.ServiceModel>, add the following XML code. 确保将 yourServiceNamespace 替换为你的命名空间名称,并将 yourKey 替换为前面从门户中检索到的 SAS 密钥:Be sure to replace yourServiceNamespace with the name of your namespace, and yourKey with the SAS key you retrieved earlier from the portal:

         <service name="ProductsServer.ProductsService">
           <endpoint address="sb://yourServiceNamespace.servicebus.chinacloudapi.cn/products" binding="netTcpRelayBinding" contract="ProductsServer.IProducts" behaviorConfiguration="products"/>
           <behavior name="products">
                   <sharedAccessSignature keyName="RootManageSharedAccessKey" key="yourKey" />


    在本示例中,transportClientEndpointBehavior 导致的错误只是一条警告,而不是阻碍性的问题。The error caused by transportClientEndpointBehavior is just a warning and isn't a blocking issue for this example.

  4. 仍在 App.config 文件中,在 <appSettings> 元素中,将连接字符串值替换为前面从门户获取的连接字符串。Still in App.config, in the <appSettings> element, replace the connection string value with the connection string you previously obtained from the portal.

       <!-- Service Bus specific app settings for messaging connections -->
       <add key="Microsoft.ServiceBus.ConnectionString"
  5. 按 Ctrl+Shift+B 或者选择“生成” > “生成解决方案”以生成应用程序,并验证到目前为止操作的准确性。Select Ctrl+Shift+B or select Build > Build Solution to build the application and verify the accuracy of your work so far.

创建 ASP.NET 应用程序Create an ASP.NET application

在本部分,请生成一个简单的 ASP.NET 应用程序,以便显示产品服务中检索到的数据。In this section, you build a simple ASP.NET application that displays data retrieved from your product service.

创建项目Create the project

  1. 确保 Visual Studio 正在以管理员身份运行。Ensure that Visual Studio is running as administrator.

  2. 在 Visual Studio 中,选择“新建项目”。In Visual Studio, select Create a new project.

  3. 在“创建新项目”中,选择适用于 C# 的“ASP.NET Web 应用程序(.NET Framework)”,然后选择“下一步” 。In Create a new project, select ASP.NET Web Application (.NET Framework) for C# and select Next.

  4. 将项目命名为 ProductsPortal,然后选择“创建”。Name the project ProductsPortal and select Create.

  5. 在“创建新 ASP.NET Web 应用程序”中选择“MVC”,然后选择“身份验证”下的“更改”。In Create a new ASP.NET Web Application, choose MVC and select Change under Authentication.

    选择 ASP .NET Web 应用程序

  6. 在“更改身份验证”中,依次选择“无身份验证”、“确定”。In Change Authentication, choose No Authentication then select OK. 在本教程中,你将部署无需用户登录的应用。For this tutorial, you're deploying an app that doesn't need a user to sign in.


  7. 返回“创建新 ASP.NET Web 应用程序”,选择“创建”以创建 MVC 应用。Back in Create a new ASP.NET Web Application, select Create to create the MVC app.

  8. 配置新 Web 应用的 Azure 资源。Configure Azure resources for a new web app. 遵循发布 Web 应用中的步骤。Follow the steps in Publish your web app. 然后,返回本教程并继续执行下一步。Then, return to this tutorial and continue to the next step.

  9. 在“解决方案资源管理器”中,右键单击“模型”并选择“添加” > “类”。In Solution Explorer, right-click Models and then select Add > Class.

  10. 将类命名为 Product.cs,然后选择“添加”。Name the class Product.cs, then select Add.


修改 Web 应用程序Modify the web application

  1. 在 Visual Studio 的 Product.cs 文件中将现有命名空间定义替换为以下代码:In the Product.cs file in Visual Studio, replace the existing namespace definition with the following code:

    // Declare properties for the products inventory.
    namespace ProductsWeb.Models
        public class Product
            public string Id { get; set; }
            public string Name { get; set; }
            public string Quantity { get; set; }
  2. 在“解决方案资源管理器”中展开“控制器”,然后双击“HomeController.cs”在 Visual Studio 中打开该文件。In Solution Explorer, expand Controllers, then double-click HomeController.cs to open the file in Visual Studio.

  3. HomeController.cs 中,将现有命名空间定义替换为以下代码:In HomeController.cs, replace the existing namespace definition with the following code:

    namespace ProductsWeb.Controllers
        using System.Collections.Generic;
        using System.Web.Mvc;
        using Models;
        public class HomeController : Controller
            // Return a view of the products inventory.
            public ActionResult Index(string Identifier, string ProductName)
                var products = new List<Product>
                    {new Product {Id = Identifier, Name = ProductName}};
                return View(products);
  4. 在“解决方案资源管理器”中展开“视图” > “共享”,然后双击“_Layout.cshtml”在 Visual Studio 编辑器中打开该文件。In Solution Explorer, expand Views > Shared, then double-click _Layout.cshtml to open the file in the Visual Studio editor.

  5. 将出现的所有 My ASP.NET Application 更改为“Northwind Traders 产品”。Change all occurrences of My ASP.NET Application to Northwind Traders Products.

  6. 删除 HomeAboutContact 链接。Remove the Home, About, and Contact links. 在以下示例中,删除突出显示的代码。In the following example, delete the highlighted code.


  7. 在“解决方案资源管理器”中展开“视图” > “主目录”,然后双击“Index.cshtml”在 Visual Studio 编辑器中打开该文件。In Solution Explorer, expand Views > Home, then double-click Index.cshtml to open the file in the Visual Studio editor. 将文件的全部内容替换为以下代码:Replace the entire contents of the file with the following code:

    @model IEnumerable<ProductsWeb.Models.Product>
             ViewBag.Title = "Index";
    <h2>Prod Inventory</h2>
                      @Html.DisplayNameFor(model => model.Name)
                      @Html.DisplayNameFor(model => model.Quantity)
    @foreach (var item in Model) {
                      @Html.DisplayFor(modelItem => item.Name)
                      @Html.DisplayFor(modelItem => item.Quantity)
  8. 若要验证到目前为止操作的准确性,可以按 Ctrl+Shift+B 生成项目。To verify the accuracy of your work so far, you can select Ctrl+Shift+B to build the project.

在本地运行应用Run the app locally

运行应用程序以验证其是否正常运行。Run the application to verify that it works.

  1. 确保 ProductsPortal 是活动项目。Ensure that ProductsPortal is the active project. 在“解决方案资源管理器”中,右键单击项目名称并选择“设置为启动项目” 。Right-click the project name in Solution Explorer and select Set As Startup Project.
  2. 在 Visual Studio 中按 F5。In Visual Studio, select F5.

应用程序应在浏览器中显示为正在运行。Your application should appear, running in a browser.

屏幕截图显示了在浏览器中运行的应用程序示例,其中突出显示了 URL。

将各个部分组合在一起Put the pieces together

下一步是将本地产品服务器与 ASP.NET 应用程序挂钩。The next step is to hook up the on-premises products server with the ASP.NET application.

  1. 如果尚未打开在 创建 ASP.NET 应用程序部分中创建的 ProductsPortal 项目,请在 Visual Studio 中重新打开该项目。If it isn't already open, in Visual Studio, open the ProductsPortal project you created in the Create an ASP.NET application section.

  2. 采用与创建本地服务器部分类似的步骤,将 NuGet 包添加到项目引用中。Similar to the step in the Create an on-premises server section, add the NuGet package to the project references. 在“解决方案资源管理器”中,右键单击“ProductsPortal”项目并选择“管理 NuGet 包”。In Solution Explorer, right-click the ProductsPortal project, then select Manage NuGet Packages.

  3. 搜索“WindowsAzure.ServiceBus”,然后选择“WindowsAzure.ServiceBus”项。Search for WindowsAzure.ServiceBus and select the WindowsAzure.ServiceBus item. 然后完成安装过程并关闭此对话框。Then finish the installation and close this dialog box.

  4. 在“解决方案资源管理器”中,右键单击“ProductsPortal”项目并选择“添加” > “现有项”。In Solution Explorer, right-click the ProductsPortal project, then select Add > Existing Item.

  5. ProductsServer 控制台项目导航到 ProductsContract.cs 文件。Navigate to the ProductsContract.cs file from the ProductsServer console project. 突出显示“ProductsContract.cs”。Highlight ProductsContract.cs. 选择“添加”旁边的向下箭头,然后选择“添加为链接”。Select the down arrow next to Add, then choose Add as Link.


  6. 现在,在 Visual Studio 编辑器中打开 HomeController.cs 文件,并将命名空间定义替换为以下代码。Now open the HomeController.cs file in the Visual Studio editor and replace the namespace definition with the following code. 请确保将 yourServiceNamespace 替换为你的服务命名空间名称,并将 yourKey 替换为你的 SAS 密钥。Be sure to replace yourServiceNamespace with the name of your service namespace, and yourKey with your SAS key. 此代码使客户端能够调用本地服务,并返回调用结果。This code lets the client to call the on-premises service, returning the result of the call.

    namespace ProductsWeb.Controllers
        using System.Linq;
        using System.ServiceModel;
        using System.Web.Mvc;
        using Microsoft.ServiceBus;
        using Models;
        using ProductsServer;
        public class HomeController : Controller
            // Declare the channel factory.
            static ChannelFactory<IProductsChannel> channelFactory;
            static HomeController()
                // Create shared access signature token credentials for authentication.
                channelFactory = new ChannelFactory<IProductsChannel>(new NetTcpRelayBinding(),
                channelFactory.Endpoint.Behaviors.Add(new TransportClientEndpointBehavior {
                    TokenProvider = TokenProvider.CreateSharedAccessSignatureTokenProvider(
                        "RootManageSharedAccessKey", "yourKey") });
            public ActionResult Index()
                using (IProductsChannel channel = channelFactory.CreateChannel())
                    // Return a view of the products inventory.
                    return this.View(from prod in channel.GetProducts()
                                         new Product { Id = prod.Id, Name = prod.Name,
                                             Quantity = prod.Quantity });
  7. 在“解决方案资源管理器”中右键单击“ProductsPortal”解决方案。In Solution Explorer, right-click the ProductsPortal solution. 请务必右键单击该解决方案而不是项目。Make sure to right-click the solution, not the project. 选择“添加” > “现有项目”。Select Add > Existing Project.

  8. 导航到 ProductsServer 项目,然后双击“ProductsServer.csproj”解决方案文件将其添加。Navigate to the ProductsServer project, then double-click the ProductsServer.csproj solution file to add it.

  9. ProductsServer 必须正在运行才能显示 ProductsPortal 中的数据。ProductsServer must be running to display the data on ProductsPortal. 在“解决方案资源管理器”中,右键单击“ProductsPortal”解决方案并选择“属性”以显示“属性页”。In Solution Explorer, right-click the ProductsPortal solution and select Properties to display Property Pages.

  10. 选择“通用属性” > “启动项目”,然后选择“多个启动项目”。Select Common Properties > Startup Project and choose Multiple startup projects. 确保 ProductsServerProductsPortal 按此顺序显示,并且两者的操作为“启动”。Ensure that ProductsServer and ProductsPortal appear, in that order, and that the Action for both is Start.


  11. 选择左侧的“通用属性” > “项目依赖项”。Select Common Properties > Project Dependencies on the left side.

  12. 对于“项目”,请选择“ProductsPortal”。For Projects, choose ProductsPortal. 确保已选择 ProductsServerEnsure that ProductsServer is selected.


  13. 对于“项目”,请选择“ProductsServer”。For Projects, choose ProductsServer. 确保未选择“ProductsPortal”,然后选择“确定”保存更改。Ensure that ProductsPortal isn't selected, and then select OK to save your changes.

在本地运行项目Run the project locally

若要在本地测试应用程序,请在 Visual Studio 中按 F5。To test the application locally, in Visual Studio select F5. 本地服务器 (ProductsServer) 应该会先启动,然后 ProductsPortal 应用程序应该会在浏览器窗口中启动。The on-premises server, ProductsServer, should start first, then the ProductsPortal application should start in a browser window. 这次,会看到产品清单列出了从产品服务本地系统中检索到的数据。This time, you see that the product inventory lists data retrieved from the product service on-premises system.

Web 应用程序

在“ProductsPortal”页上选择“刷新”。Select Refresh on the ProductsPortal page. 每次刷新该页面时,都会看到服务器应用在调用来自 ProductsServerGetProducts() 时显示一条消息。Each time you refresh the page, you see the server app display a message when GetProducts() from ProductsServer is called.

关闭这两个应用程序,然后转到下一部分。Close both applications before proceeding to the next section.

将 ProductsPortal 项目部署到 Azure Web 应用Deploy the ProductsPortal project to an Azure web app

下一步是重新发布 Azure Web 应用 ProductsPortal 前端:The next step is to republish the Azure Web app ProductsPortal front end:

  1. 在“解决方案资源管理器”中,右键单击“ProductsPortal”项目并选择“发布” 。In Solution Explorer, right-click the ProductsPortal project, and select Publish. 在“发布”页上选择“发布” 。On the Publish page, select Publish.


    在部署后自动启动 ProductsPortal Web 项目时,可能会在浏览器窗口中看到错误消息。You may see an error message in the browser window when the ProductsPortal web project is automatically launched after the deployment. 这在意料之中,因为 ProductsServer 应用程序尚未运行。This is expected, and occurs because the ProductsServer application isn't running yet.

  2. 复制已部署的 Web 应用的 URL。Copy the URL of the deployed web app. 稍后需要使用该 URL。You'll need the URL later. 也可以从 Visual Studio 的“Azure 应用服务活动”窗口获取此 URL:You can also get this URL from the Azure App Service Activity window in Visual Studio:

    已部署应用的 URL

  3. 关闭浏览器窗口,停止正在运行的应用程序。Close the browser window to stop the running application.

    在云中运行应用程序之前,必须确保将 ProductsPortal 作为 Web 应用从 Visual Studio 中启动。Before running the application in the cloud, you must ensure that ProductsPortal is launched from within Visual Studio as a web app.

  4. 在 Visual Studio 中,右键单击“ProductsPortal”项目并选择“属性” 。In Visual Studio, right-click the ProductsPortal project and select Properties.

  5. 选择“Web”。Select Web. 在“启动操作”下,选择“启动 URL”。Under Start Action, choose Start URL. 输入以前部署的 Web 应用的 URL,在本示例中为 https://productsportal20190906122808.chinacloudsites.cn/Enter the URL for your previously deployed web app, in this example, https://productsportal20190906122808.chinacloudsites.cn/.

    启动 URL

  6. 选择“文件” > “全部保存”。Select File > Save All.

  7. 选择“生成” > “重新生成解决方案”。Select Build > Rebuild Solution.

运行应用程序Run the application

按 F5 生成并运行应用程序。Select F5 to build and run the application. 本地服务器(ProductsServer 控制台应用程序)应该会先启动,然后 ProductsPortal 应用程序应会在浏览器窗口中启动,如下所示:The on-premises server, which is the ProductsServer console application, should start first, then the ProductsPortal application should start in a browser window, as shown here:

在 Azure 上运行 Web 应用

产品库存列表会列出从产品服务本地系统检索到的数据,并在 Web 应用中显示该数据。The product inventory lists data retrieved from the product service on-premises system, and displays that data in the web app. 请检查 URL,确保 ProductsPortal 正在云中以 Azure Web 应用的形式运行。Check the URL to make sure that ProductsPortal is running in the cloud, as an Azure web app.


ProductsServer 控制台应用程序必须正在运行,而且能够为 ProductsPortal 应用程序提供数据。The ProductsServer console application must be running and able to serve the data to the ProductsPortal application. 如果浏览器显示错误,请多等几秒钟,让 ProductsServer 加载并显示以下消息;然后刷新浏览器。If the browser displays an error, wait a few more seconds for ProductsServer to load and display the following message, then refresh the browser.

在浏览器中刷新“ProductsPortal”页。In the browser, refresh the ProductsPortal page. 每次刷新该页面时,都会看到服务器应用在调用来自 ProductsServerGetProducts() 时显示一条消息。Each time you refresh the page, you see the server app display a message when GetProducts() from ProductsServer is called.


后续步骤Next steps

转到以下教程:Advance to the following tutorial: