使用 Azure 轉送將內部部署 WCF 服務公開至雲端中的 Web 應用程式

發行項
10/24/2023

本文說明如何使用 Microsoft Azure 和 Visual Studio 建置混合式雲端應用程式。您可以建立在雲端中使用多個 Azure 資源的應用程式。本教學課程可協助您瞭解：

如何建立或調整現有的 Web 服務，以供 Web 解決方案取用。
如何使用 Azure Windows Communication Foundation （WCF）轉送服務，在 Azure 應用程式與裝載于其他地方的 Web 服務之間共用資料。

您會在本教學課程中執行下列工作：

安裝本教學課程的必要條件。
檢閱案例。
建立命名空間。
建立內部部署伺服器。
建立 ASP .NET 應用程式。
在本機執行應用程式。
將 Web 應用程式部署至 Azure。
在 Azure 上執行應用程式。

必要條件

若要完成本教學課程，您需要下列必要條件：

Azure 訂用帳戶。如果您沒有 Azure 訂用帳戶，請在開始前建立免費帳戶。
Visual Studio 2015 或更新版本。本教學課程中的範例使用 Visual Studio 2019。
適用于 .NET 的 Azure SDK。從 SDK 下載頁面安裝它。

Azure 轉送如何協助混合式解決方案

商務解決方案通常是由自訂程式碼和現有功能的組合所組成。自訂程式碼可處理新的和獨特的商務需求。已就緒的解決方案和系統提供現有的功能。

解決方案架構設計人員已開始使用雲端，以便更輕鬆地處理規模需求，並降低營運成本。因此，他們發現想要作為解決方案建置組塊的現有服務資產位於公司防火牆內，且雲端解決方案無法輕鬆觸達。許多內部服務並未建置或裝載于公司網路邊緣，因此可以輕鬆地在公司網路邊緣公開。

Azure 轉送會採用現有的 WCF Web 服務，並讓這些服務安全地存取位於公司周邊外部的解決方案，而不需要對公司網路基礎結構進行侵入性變更。這類轉送服務仍裝載于其現有環境內，但會將接聽傳入會話和要求委派給雲端裝載的轉送服務。 Azure 轉寄也會使用共用存取簽章（SAS）驗證來保護這些服務免于未經授權的存取。

檢閱案例

在本教學課程中，您會建立一個 ASP.NET 網站，可讓您在產品庫存頁面上查看產品清單。

Scenario

本教學課程假設您在現有的內部部署系統中有產品資訊，並使用 Azure 轉寄連線到該系統。在簡單主控台應用程式中執行的 Web 服務會模擬這種情況。其中包含一組記憶體內部產品。您可以在自己的電腦上執行此主控台應用程式，並將 Web 角色部署至 Azure。如此一來，您將瞭解在 Azure 資料中心內執行的 Web 角色如何呼叫您的電腦。即使您的電腦幾乎肯定會位於至少一個防火牆和網路位址轉譯（NAT）層之後，仍會發生此呼叫。

設定開發環境

開始開發 Azure 應用程式之前，請先下載工具並設定開發環境：

從 SDK 下載頁面安裝適用于 .NET 的 Azure SDK 。
在 .NET 資料行中 ，選擇您使用的 Visual Studio 版本。本教學課程使用 Visual Studio 2019。
當系統提示您執行或儲存安裝程式時，請選取 [ 執行 ]。
在 [ Web Platform Installer ] 對話方塊中，選取 [ 安裝並繼續安裝]。

安裝完成之後，您就擁有開始開發應用程式所需的一切。 SDK 包含可讓您在 Visual Studio 中輕鬆開發 Azure 應用程式的工具。

建立命名空間

第一個步驟是建立命名空間，並取得共用存取簽章（SAS）金鑰。命名空間會針對透過轉接服務公開的每個應用程式提供應用程式界限。建立服務命名空間時，系統會自動產生 SAS 金鑰。服務命名空間和 SAS 金鑰的組合提供認證，讓 Azure 驗證應用程式的存取權。

登入 Azure 入口網站。
選取 左側功能表上的 [所有服務 ]。依序選取 [整合 ]、搜尋 [轉寄]、將滑鼠移至 [轉寄 ] 上方 ，然後選取 [ 建立 ]。
在 [ 建立命名空間] 頁面上，遵循下列步驟：
1. 選擇要在其中建立命名空間的 Azure 訂用帳戶。
2. 針對 [ 資源群組 ]，選擇要放置命名空間的現有資源群組，或建立新的資源群組。
3. 輸入轉寄命名空間的名稱。
4. 選取您的命名空間應該裝載所在的區域。
5. 選取頁面底部的 [檢閱 + 建立] 。
6. 在 [檢閱 + 建立] 頁面上，選取 [建立]。
7. 幾分鐘後，您會看到 命名空間的 [轉寄 ] 頁面。

取得管理認證

在 [ 轉寄 ] 頁面上，選取 左側功能表上的 [共用存取原則 ]。 `
在 [ 共用存取原則] 頁面上，選取 [RootManageSharedAccessKey ]。
在 [SAS 原則：RootManageSharedAccessKey] 下 ，選取 [主要連線ion String 旁的 [複製 ] 按鈕。此動作會將連接字串複製到剪貼簿以供稍後使用。將此值貼到記事本或其他一些暫存位置。
重複上述步驟，將 [主要金鑰 ] 的值 複製並貼到暫存位置，以供日後使用。

建立內部部署伺服器

首先，您會建置模擬的內部部署產品目錄系統。此專案是 Visual Studio 主控台應用程式，並使用 Azure 服務匯流排 NuGet 套件來包含服務匯流排程式庫和組態設定。

以系統管理員身分啟動 Microsoft Visual Studio。若要這樣做，請以滑鼠右鍵按一下 Visual Studio 程式圖示，然後選取 [ 以系統管理員 身分執行]。
在 Visual Studio 中，選取 [建立新專案 ]。
在 [建立新專案 ] 中，針對 C# 選取 [主控台應用程式][.NET Framework]， 然後選取 [ 下一步 ]。
將專案 命名為 ProductsServer ，然後選取 [ 建立 ]。
在 方案總管 中，以滑鼠右鍵按一下 ProductsServer 專案，然後選取 [ 管理 NuGet 套件 ]。
選取 [ 流覽 ]，然後搜尋並選擇 [WindowsAzure.ServiceBus ]。選取 [ 安裝 ]，並接受使用規定。

現在會參考必要的用戶端元件。
為您的產品合約新增類別。在 方案總管 中，以滑鼠右鍵按一下 ProductsServer 專案，然後選取 [ 新增 > 類別 ]。
在 [ 名稱] 中，輸入 ProductsContract.cs 名稱，然後選取 [ 新增 ]。

對您的解決方案進行下列程式碼變更：

在 ProductsContract.cs 中，將命名空間定義取代為下列程式碼，以定義服務的合約。

namespace ProductsServer
{
    using System.Collections.Generic;
    using System.Runtime.Serialization;
    using System.ServiceModel;

    // Define the data contract for the service
    [DataContract]
    // Declare the serializable properties.
    public class ProductData
    {
        [DataMember]
        public string Id { get; set; }
        [DataMember]
        public string Name { get; set; }
        [DataMember]
        public string Quantity { get; set; }
    }

    // Define the service contract.
    [ServiceContract]
    interface IProducts
    {
        [OperationContract]
        IList<ProductData> GetProducts();

    }

    interface IProductsChannel : IProducts, IClientChannel
    {
    }
}

在 Program.cs 中，將命名空間定義取代為下列程式碼，這會為其新增設定檔服務和主機。

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));
            sh.Open();

            Console.WriteLine("Press ENTER to close");
            Console.ReadLine();

            sh.Close();
        }
    }
}

在 方案總管 中，按兩下 App.config 以在 Visual Studio 編輯器中開啟檔案。在元素底部 <system.ServiceModel> ，但仍在中 <system.ServiceModel> ，新增下列 XML 程式碼。

重要

將取代為您命名空間的名稱，並以 yourKey 您稍早從入口網站擷取的 SAS 金鑰取代 yourServiceNamespace ：

  <services>
     <service name="ProductsServer.ProductsService">
       <endpoint address="sb://yourServiceNamespace.servicebus.windows.net/products" binding="netTcpRelayBinding" contract="ProductsServer.IProducts" behaviorConfiguration="products"/>
     </service>
  </services>
  <behaviors>
     <endpointBehaviors>
       <behavior name="products">
         <transportClientEndpointBehavior>
            <tokenProvider>
               <sharedAccessSignature keyName="RootManageSharedAccessKey" key="yourKey" />
            </tokenProvider>
         </transportClientEndpointBehavior>
       </behavior>
     </endpointBehaviors>
  </behaviors>

注意

所造成的 transportClientEndpointBehavior 錯誤只是警告，而且不是此範例的封鎖問題。

仍在 App.config 的元素中 <appSettings> ，將連接字串值取代為您先前從入口網站取得的連接字串。

<appSettings>
   <!-- Service Bus specific app settings for messaging connections -->
   <add key="Microsoft.ServiceBus.ConnectionString"
       value="Endpoint=sb://yourNamespace.servicebus.windows.net/;SharedAccessKeyName=RootManageSharedAccessKey;SharedAccessKey=yourKey"/>
</appSettings>

選取 Ctrl+Shift+B，或選取 [建 > 置建置方案 ] 來建置應用程式，並確認到目前為止的工作正確性。

建立 ASP.NET 應用程式

在本節中，您會建置簡單的 ASP.NET 應用程式，以顯示從產品服務擷取的資料。

建立專案

確定 Visual Studio 是以系統管理員身分執行。
在 Visual Studio 中，選取 [建立新專案 ]。
在 [建立新專案 ] 中，針對 C# 選取 [ASP.NET Web 應用程式 #.NET Framework]， 然後選取 [ 下一步 ]。
將專案 命名為 ProductsPortal ，然後選取 [ 建立 ]。
在 [建立新的 ASP.NET Web 應用程式 ] 中，選擇 [MVC ]，然後選取 [驗證 ] 下的 [ 變更 ]。
在 [變更驗證] 中，選擇 [無驗證 ]，然後選取 [ 確定 ]。在本教學課程中，您要部署不需要使用者登入的應用程式。
回到 [建立新的 ASP.NET Web 應用程式 ] 中，選取 [建立 ] 以建立 MVC 應用程式。
設定新 Web 應用程式的 Azure 資源。請遵循發佈 Web 應用程式中的步驟。然後，返回本教學課程，然後繼續進行下一個步驟。
在 方案總管中，以滑鼠右鍵按一下 [模型 ]，然後選取 [ 新增 > 類別 ]。
將類別 命名為 Product.cs ，然後選取 [ 新增 ]。

修改 Web 應用程式

在 Visual Studio 的 Product.cs 檔案中，以下列程式碼取代現有的命名空間定義：

 // 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; }
    }
 }

在 方案總管 中，展開 [控制器 ]，然後按兩下 HomeController.cs 以在 Visual Studio 中開啟檔案。

在 HomeController.cs 中，以下列程式碼取代現有的命名空間定義：

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);
        }
     }
}

在 方案總管中，展開 [ 共用檢視 > ]，然後按兩下 _Layout.cshtml ，在 Visual Studio 編輯器中開啟檔案。
將所有出現的 My ASP.NET Application 變更為 Northwind Traders 產品 。
Home移除、 About 和 Contact 連結。在下列範例中，刪除醒目提示的程式碼。

在 方案總管中，展開 [檢視 > 首頁 ]，然後按兩下 Index.cshtml 以在 Visual Studio 編輯器中開啟檔案。 以下列程式碼取代檔案的整個內容：

@model IEnumerable<ProductsWeb.Models.Product>

@{
         ViewBag.Title = "Index";
}

<h2>Prod Inventory</h2>

<table>
          <tr>
              <th>
                  @Html.DisplayNameFor(model => model.Name)
              </th>
              <th></th>
              <th>
                  @Html.DisplayNameFor(model => model.Quantity)
              </th>
          </tr>

@foreach (var item in Model) {
          <tr>
              <td>
                  @Html.DisplayFor(modelItem => item.Name)
              </td>
              <td>
                  @Html.DisplayFor(modelItem => item.Quantity)
              </td>
          </tr>
}

</table>

若要確認到目前為止工作的正確性，您可以選取 Ctrl+Shift+B 來建置專案。

在本機執行應用程式

執行應用程式以確認其運作正常。

確定 ProductsPortal 是使用中的專案。以滑鼠右鍵按一下方案總管中的 專案名稱，然後選取 [ 設定為啟始專案 ]。
在 Visual Studio 中，選取 F5。

您的應用程式應該會顯示在瀏覽器中執行。

Screenshot shows an example of the application running in a browser with the URL highlighted.

將碎片放在一起

下一個步驟是將內部部署產品伺服器與 ASP.NET 應用程式連結。

如果尚未開啟，請在 Visual Studio 中開啟 您在 [建立 ASP.NET 應用程式 ] 區段中建立的 ProductsPortal 專案。
類似于建立內部部署伺服器一節中的步驟，將 NuGet 套件新增至專案參考。在 方案總管 中，以滑鼠右鍵按一下 ProductsPortal 專案，然後選取 [ 管理 NuGet 套件 ]。
搜尋 WindowsAzure.ServiceBus ，然後選取 [WindowsAzure.ServiceBus ] 專案。然後完成安裝並關閉此對話方塊。
在 方案總管 中，以滑鼠右鍵按一下 ProductsPortal 專案，然後選取 [ 新增 > 現有專案 ]。
從 ProductsServer 主控台專案流覽至 ProductsContract.cs 檔案。反白顯示 ProductsContract.cs 。選取 [新增 ] 旁的 向下箭號，然後選擇 [ 新增為連結 ]。

現在在 Visual Studio 編輯器中開啟 HomeController.cs 檔案，並以下列程式碼取代命名空間定義。請務必以轉寄命名空間的名稱取代，並以 yourKey 您的 SAS 金鑰取代 yourServiceNamespace 。此程式碼可讓用戶端呼叫內部部署服務，並傳回呼叫的結果。

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(),
                "sb://yourServiceNamespace.servicebus.windows.net/products");
            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()
                                 select
                                     new Product { Id = prod.Id, Name = prod.Name,
                                         Quantity = prod.Quantity });
            }
        }
    }
}

在 方案總管 中，以滑鼠右鍵按一下 ProductsPortal 解決方案。請務必以滑鼠右鍵按一下方案，而不是專案。選取 [ 新增 > 現有專案]。
流覽至 ProductsServer 專案，然後按兩下 ProductsServer.csproj 方案檔來新增它。
ProductsServer 必須執行才能在 ProductsPortal 上顯示資料。在 方案總管 中，以滑鼠右鍵按一下 ProductsPortal 解決方案，然後選取 [屬性] 以顯示 [屬性 頁 ]。
選取 [ 通用屬性 > 啟始專案 ]，然後選擇 [ 多個啟始專案]。 請確定 ProductsServer 和 ProductsPortal 會依該順序顯示，且 兩者的動作 都是 \[開始 \]。
選取 左側的 [通用屬性 > 專案相依性]。
針對 [ 專案 ]，選擇 [ 產品][Portal ]。確定 已選取 ProductsServer 。
針對 [專案 ]，選擇 [ 產品][伺服器 ]。確定 未選取 ProductsPortal ，然後選取 [ 確定 ] 以儲存變更。

在本機執行專案

若要在本機測試應用程式，請在 Visual Studio 中選取 F5。內部部署伺服器 ProductsServer 應該先啟動，然後 ProductsPortal 應用程式應該會在瀏覽器視窗中啟動。這次，您會看到產品清查會列出從產品服務內部部署系統擷取的資料。

Web application

選取 ProductsPortal 頁面上的 [ 重新 整理]。每次重新整理頁面時，您會看到伺服器應用程式在 呼叫 ProductsServer 時 GetProducts() 顯示訊息。

在繼續進行下一節之前，請先關閉這兩個應用程式。

將 ProductsPortal 專案部署至 Azure Web 應用程式

下一個步驟是重新發佈 Azure Web 應用程式 ProductsPortal 前端：

在 方案總管 中，以滑鼠右鍵按一下 ProductsPortal 專案，然後選取 [ 發佈 ]。在 [發佈] 頁面中，選取 [發佈]。

注意

在部署之後自動啟動 ProductsPortal Web 專案時 ，您可能會在瀏覽器視窗中看到錯誤訊息。這是預期的情況，而且因為 ProductsServer 應用程式尚未執行而發生。
複製已部署 Web 應用程式的 URL。您稍後需要 URL。您也可以從 Visual Studio 中的 [Azure App 服務活動 ] 視窗取得此 URL：
關閉瀏覽器視窗以停止執行中的應用程式。

在雲端中執行應用程式之前，您必須確定 ProductsPortal 是從 Visual Studio 內啟動為 Web 應用程式。

在 Visual Studio 中 ，以滑鼠右鍵按一下 ProductsPortal 專案，然後選取 [ 屬性 ]。
選取 Web。在 [啟動動作] 下 ，選擇 [ 開始 URL ]。 在此範例 https://productsportal20190906122808.azurewebsites.net/ 中，輸入您先前部署 Web 應用程式的 URL。
選取 [檔案]>[儲存全部]。
選取 [ 建置 > 重建方案]。

執行應用程式

選取 F5 以建置並執行應用程式。內部部署伺服器，也就是 ProductsServer 主控台應用程式，應該先啟動，然後 ProductsPortal 應用程式應該在瀏覽器視窗中啟動，如下所示：

Run the web app on Azure

產品清查會列出從產品服務內部部署系統擷取的資料，並在 Web 應用程式中顯示該資料。檢查 URL 以確定 ProductsPortal 正在雲端中執行，做為 Azure Web 應用程式。

重要

ProductsServer 主控台應用程式必須執行且能夠將資料服務至 ProductsPortal 應用程式。如果瀏覽器顯示錯誤，請再等候幾秒 讓 ProductsServer 載入並顯示下列訊息，然後重新整理瀏覽器。

在瀏覽器中，重新整理 ProductsPortal 頁面。每次重新整理頁面時，您會看到伺服器應用程式在 呼叫 ProductsServer 時 GetProducts() 顯示訊息。

Updated output

下一步

前進到下列教學課程：

將內部部署 WCF 服務公開至網路外部的 WCF 用戶端