عرض خدمة WCF المحلية لتطبيق ويب في السحابة باستخدام Azure Relay

توضح هذه المقالة كيفية إنشاء تطبيق سحابة مختلط باستخدام Microsoft Azure وVisual Studio. يمكنك إنشاء تطبيق يستخدم موارد Azure متعددة في السحابة. يساعدك هذا البرنامج التعليمي على التعلم:

  • كيفية إنشاء خدمة ويب موجودة أو تكييفها للاستهلاك بواسطة حل ويب.
  • كيفية استخدام خدمة ترحيل Azure Windows Communication Foundation (WCF) لمشاركة البيانات بين تطبيق Azure وخدمة ويب مستضافة في مكان آخر.

ستنفذ بالمهام التالية في هذا البرنامج التعليمي:

  • قم بتثبيت المتطلبات الأساسية لهذا البرنامج التعليمي.
  • راجع السيناريو.
  • أنشئ مساحة اسم .
  • إنشاء خادم محلي.
  • إنشاء تطبيق ASP .NET.
  • قم بتشغيل التطبيق محلياً.
  • نشر تطبيق الويب لـAzure.
  • تشغيل التطبيق على Azure.

المتطلبات الأساسية

لإكمال هذا البرنامج التعليمي، تحتاج إلى المتطلبات الأساسية التالية:

كيف يساعد Azure Relay في الحلول المختلطة

تتكون حلول الأعمال عادة من مجموعة من التعليمات البرمجية المخصصة والوظائف الموجودة. تعالج التعليمات البرمجية المخصصة متطلبات العمل الجديدة والفريدة. توفر الحلول والأنظمة الموجودة بالفعل وظائف موجودة.

بدأ مهندسو الحلول في استخدام السحابة لتسهيل التعامل مع متطلبات المقياس وخفض التكاليف التشغيلية. عند القيام بذلك، يجدون أن أصول الخدمة الحالية التي يرغبون في استخدامها ككتل بناء لحلولهم موجودة داخل جدار حماية الشركة وخارج نطاق الوصول السهل من خلال الحل السحابي. لا يتم إنشاء العديد من الخدمات الداخلية أو استضافتها بطريقة يمكن عرضها بسهولة على حافة شبكة الشركة.

يأخذ Azure Relay خدمات ويب WCF الحالية ويجعل هذه الخدمات متاحة بشكل آمن للحلول خارج محيط الشركة دون الحاجة إلى تغييرات تدخلية على البنية الأساسية لشبكة الشركة. لا تزال خدمات الترحيل هذه مستضافة داخل بيئتها الحالية، ولكنها تفوض الاستماع إلى الجلسات والطلبات الواردة إلى خدمة الترحيل المستضافة على السحابة. يحمي Azure Relay أيضا هذه الخدمات من الوصول غير المصرح به باستخدام مصادقة توقيع الوصول المشترك (SAS ).

مراجعة السيناريو

في هذا البرنامج التعليمي، يمكنك إنشاء موقع ويب ASP.NET يمكنك من رؤية قائمة بالمنتجات في صفحة مخزون المنتج.

Scenario

يفترض البرنامج التعليمي أن لديك معلومات المنتج في نظام محلي موجود، ويستخدم Azure Relay للوصول إلى هذا النظام. تحاكي خدمة الويب التي تعمل في تطبيق وحدة تحكم بسيطة هذا الموقف. يحتوي على مجموعة في الذاكرة من المنتجات. يمكنك تشغيل تطبيق وحدة التحكم هذا على الكمبيوتر الخاص بك ونشر دور الويب في Azure. من خلال القيام بذلك، سترى كيف يستدعي دور الويب قيد التشغيل في مركز بيانات Azure إلى جهاز الكمبيوتر الخاص بك. يحدث هذا الاستدعاء على الرغم من أن جهاز الكمبيوتر الخاص بك سيكون بالتأكيد خلف جدار حماية واحد على الأقل وطبقة ترجمة عنوان الشبكة (NAT).

إعداد بيئة التطوير

قبل أن تتمكن من البدء في تطوير تطبيقات Azure، قم بتنزيل الأدوات وإعداد بيئة التطوير الخاصة بك:

  1. قم بتثبيت Azure SDK ل .NET من صفحة تنزيلات SDK.
  2. في العمود .NET ، اختر إصدار Visual Studio الذي تستخدمه. يستخدم هذا البرنامج التعليمي Visual Studio 2019.
  3. عند مطالبتك بتشغيل المثبت أو حفظه، حدد Run.
  4. في مربع الحوار مثبت النظام الأساسي على ويب، حدد تثبيت ومتابعة التثبيت.

بمجرد الانتهاء من التثبيت، يكون لديك كل ما يلزم للبدء في تطوير التطبيق. يتضمن SDK أدوات تتيح لك تطوير تطبيقات Azure بسهولة في Visual Studio.

إنشاء مساحة اسم

تتمثل الخطوة الأولى في إنشاء مساحة اسم، والحصول على مفتاح توقيع الوصول المشترك (SAS). توفر مساحة الاسم حدود التطبيق لكل تطبيق يتم عرضه من خلال خدمة الترحيل. يتم إنشاء مفتاح SAS تلقائيًّا بواسطة النظام عند إنشاء مساحة اسم خدمة. توفر مجموعة مساحة اسم الخدمة ومفتاح SAS بيانات اعتماد Azure لمصادقة الوصول إلى أحد التطبيقات.

  1. سجل الدخول إلى مدخل Azure.

  2. حدد كل الخدمات في القائمة اليسرى. حدد Integration، وابحث عن Relays، وحرك الماوس فوق Relays، ثم حدد Create.

    Screenshot showing the selection of Relays -> Create button.

  3. في صفحة Create namespace ، اتبع الخطوات التالية:

    1. بالنسبة إلى Subscription، اختر اشتراك Azure لإنشاءnamespace.

    2. بالنسبة لـ "مجموعة الموارد"، اختر مجموعة موارد موجودة حيث توجد namespace، أو إنشاء مجموعة موارد جديدة.

    3. أدخل اسما لمساحة اسم الترحيل.

    4. حدد المنطقة التي يجب استضافة مساحة الاسم فيها.

    5. حدد مراجعة + إنشاء عند أسفل الصفحة.

      Screenshot showing the Create namespace page.

    6. في صفحة مراجعة+ إنشاء حدد إنشاء.

    7. بعد بضع دقائق، سترى صفحة Relay لمساحة الاسم.

      Screenshot showing the home page for Relay namespace.

الحصول على بيانات اعتماد الإدارة

  1. في صفحة Relay ، حدد Shared access policies في القائمة اليمنى. `

  2. في إطارShared access policies، حدد RootManageSharedAccessKey.

  3. في إطار سياسةSAS: RootManageSharedAccessKey، حدد زر نسخ سلسلة الاتصال الأساسية. يقوم هذا الإجراء بنسخ سلسلة الاتصال إلى الحافظة لاستخدامها لاحقاً. وقم بلصق هذه القيمة في المفكرة أو بعض المواقع المؤقتة الأخرى.

  4. كرر الخطوة السابقة، وهي نسخ قيمة المفتاح الأساسي ولصقها إلى موقع مؤقت للاستخدام لاحقاً.

    Screenshot showing the connection info for Relay namespace.

إنشاء خادم محلي

أولا، يمكنك إنشاء نظام كتالوج منتجات محلي محاكى. هذا المشروع هو تطبيق وحدة تحكم Visual Studio، ويستخدم حزمة ناقل خدمة Azure NuGet لتضمين مكتبات ناقل خدمة Microsoft Azure وإعدادات التكوين.

  1. ابدأ تشغيل Microsoft Visual Studio كمسؤول. للقيام بذلك، انقر بزر الماوس الأيمن فوق التعليمة البرمجية لبرنامج Visual Studio، وحدد Run as administrator.

  2. في Visual Studio، حدد Create a new project.

  3. في Create a new project، حدد Console App (.NET Framework) ل C# وحدد Next.

  4. قم بتسمية المشروع ProductsServer وحدد Create.

    Configure your new project

  5. في مستكشف الحلول، انقر بزر الماوس الأيمن فوق مشروع ProductsServer، ثم حدد Manage NuGet Packages.

  6. حدد Browse، ثم ابحث عن واختر WindowsAzure.ServiceBus. حدد Install، واقبل شروط الاستخدام.

    Select NuGet package

    يتم الآن الرجوع إلى تجميعات العميل المطلوبة.

  7. إضافة فئة جديدة لعقد المنتج الخاص بك. في مستكشف الحلول، انقر بزر الماوس الأيمن فوق مشروع ProductsServer وحدد إضافة>فئة.

  8. في Name، أدخل الاسم ProductsContract.cs وحدد Add.

قم بإجراء تغييرات التعليمات البرمجية التالية على الحل الخاص بك:

  1. في 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
        {
        }
    }
    
  2. في 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();
            }
        }
    }
    
  3. في Solution Explorer، انقر نقرًا مزدوجًا على App.config لفتح الملف في محرر Visual Studio. في الجزء السفلي من <system.ServiceModel> العنصر، ولكن لا يزال داخل <system.ServiceModel>، أضف التعليمة البرمجية XML التالية.

    هام

    استبدل yourServiceNamespace باسم مساحة الاسم الخاصة بك، ومفتاح yourKey SAS الذي قمت باسترداده سابقا من المدخل:

      <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 هو مجرد تحذير وليس مشكلة حظر لهذا المثال.

  4. لا يزال في 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>
    
  5. حدد Ctrl+Shift+B أو حدد Build>Build Solution لإنشاء التطبيق والتحقق من دقة عملك حتى الآن.

إنشاء تطبيق ASP.NET

في هذا القسم، يمكنك إنشاء تطبيق ASP.NET بسيط يعرض البيانات التي تم استردادها من خدمة المنتج.

إنشاء مشروع

  1. تأكد من تشغيل Visual Studio كمسؤول.

  2. في Visual Studio، حدد Create a new project.

  3. في Create a new project، حدد ASP.NET Web Application (.NET Framework) ل C# وحدد Next.

  4. قم بتسمية المشروع ProductsPortal وحدد Create.

  5. في Create a new ASP.NET Web Application، اختر MVC وحدد Change ضمن Authentication.

    Select ASP .NET Web Application

  6. في تغيير المصادقة، اختر بلا مصادقة ثم حدد موافق. في هذا البرنامج التعليمي، تقوم بنشر تطبيق لا يحتاج إلى مستخدم لتسجيل الدخول.

    Specify authentication

  7. مرة أخرى في Create a new ASP.NET Web Application، حدد Create لإنشاء تطبيق MVC.

  8. تكوين موارد Azure لتطبيق ويب جديد. اتبع الخطوات الواردة في نشر تطبيق الويب الخاص بك. ثم ارجع إلى هذا البرنامج التعليمي وتابع إلى الخطوة التالية.

  9. في مستكشف الحلول، انقر بزر الماوس الأيمن فوق Models ثم حدد Add>Class.

  10. قم بتسمية الفئة Product.cs، ثم حدد Add.

    Create Product model

تعديل تطبيق الويب

  1. في ملف Product.cs في Visual Studio، استبدل تعريف مساحة الاسم الموجودة بالتعليمات البرمجية التالية:

     // 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.

  3. في 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);
            }
         }
    }
    
  4. في مستكشف الحلول، قم بتوسيع طرق العرض>المشتركة، ثم انقر نقرا مزدوجا فوق _Layout.cshtml لفتح الملف في محرر Visual Studio.

  5. تغيير كافة تكرارات My ASP.NET Application إلى منتجات Northwind Traders.

  6. قم بإزالة الارتباطات HomeAboutو وContact. في المثال التالي، احذف التعليمات البرمجية المميزة.

    Delete the generated list items

  7. في مستكشف الحلول، قم بتوسيع Views>Home، ثم انقر نقرا مزدوجا فوق 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>
    
  8. للتحقق من دقة عملك حتى الآن، يمكنك تحديد Ctrl+Shift+B لإنشاء المشروع.

تشغيل التطبيق محليًا

قم بتشغيل التطبيق للتحقق من أنه يعمل.

  1. تأكد من أن ProductsPortal هو المشروع النشط. انقر بزر الماوس الأيمن فوق اسم المشروع في مستكشف الحلول وحدد تعيين كمشروع بدء تشغيل.
  2. في Visual Studio، حدد F5.

يجب أن يظهر التطبيق الخاص بك، قيد التشغيل في مستعرض.

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

وضع القطع معا

الخطوة التالية هي ربط خادم المنتجات المحلية بتطبيق ASP.NET.

  1. إذا لم يكن مفتوحا بالفعل، في Visual Studio، افتح مشروع ProductsPortal الذي أنشأته في قسم إنشاء تطبيق ASP.NET.

  2. على غرار الخطوة في قسم إنشاء خادم محلي، أضف حزمة NuGet إلى مراجع المشروع. في مستكشف الحلول، انقر بزر الماوس الأيمن فوق مشروع ProductsPortal، ثم حدد Manage NuGet Packages.

  3. ابحث عن WindowsAzure.ServiceBus وحدد عنصر WindowsAzure.ServiceBus . ثم قم بإنهاء التثبيت وإغلاق مربع الحوار هذا.

  4. في مستكشف الحلول، انقر بزر الماوس الأيمن فوق مشروع ProductsPortal، ثم حدد إضافة>عنصر موجود.

  5. انتقل إلى ملف ProductsContract.cs من مشروع وحدة تحكم ProductsServer . تمييز ProductsContract.cs. حدد السهم لأسفل إلى جانب إضافة، ثم اختر إضافة كارتباط.

    Add as a link

  6. الآن افتح ملف HomeController.cs في محرر Visual Studio واستبدل تعريف مساحة الاسم بالتعليمات البرمجية التالية. تأكد من استبدال yourServiceNamespace باسم مساحة اسم Relay، ومفتاح yourKey SAS الخاص بك. تتيح هذه التعليمة البرمجية للعميل الاتصال بالخدمة المحلية، مع إرجاع نتيجة المكالمة.

    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 });
                }
            }
        }
    }
    
  7. في مستكشف الحلول، انقر بزر الماوس الأيمن فوق الحل ProductsPortal. تأكد من النقر بزر الماوس الأيمن فوق الحل، وليس المشروع. حدد إضافة>مشروع موجود.

  8. انتقل إلى مشروع ProductsServer ، ثم انقر نقرا مزدوجا فوق ملف الحل ProductsServer.csproj لإضافته.

  9. يجب تشغيل ProductsServer لعرض البيانات على ProductsPortal. في مستكشف الحلول، انقر بزر الماوس الأيمن فوق الحل ProductsPortal وحدد خصائص لعرض صفحات الخصائص.

  10. حدد Common Properties>Startup Project واختر Multiple startup projects. تأكد من ظهور ProductsServer و ProductsPortal، بهذا الترتيب، وأن الإجراء لكليهما هو Start.

    Multiple startup projects

  11. حدد Common Properties>Project Dependencies على الجانب الأيسر.

  12. بالنسبة إلى المشاريع، اختر ProductsPortal. تأكد من تحديد ProductsServer.

    Project dependencies

  13. بالنسبة إلى المشاريع، اختر ProductsServer. تأكد من عدم تحديد ProductsPortal ، ثم حدد موافق لحفظ التغييرات.

قم بتشغيل المشروع محلياً

لاختبار التطبيق محليا، في Visual Studio حدد F5. يجب أن يبدأ الخادم المحلي، ProductsServer، أولا، ثم يجب أن يبدأ تطبيق ProductsPortal في نافذة المستعرض. هذه المرة، ترى أن مخزون المنتج يسرد البيانات التي تم استردادها من النظام المحلي لخدمة المنتج.

Web application

حدد تحديث في صفحة ProductsPortal . في كل مرة تقوم فيها بتحديث الصفحة، سترى تطبيق الخادم يعرض رسالة عند GetProducts() استدعاء ProductsServer.

أغلق كلا التطبيقين قبل الانتقال إلى القسم التالي.

نشر مشروع ProductsPortal إلى تطبيق ويب Azure

الخطوة التالية هي إعادة نشر واجهة Azure Web App ProductsPortal الأمامية :

  1. في مستكشف الحلول، انقر بزر الماوس الأيمن فوق مشروع ProductsPortal، وحدد Publish. في صفحة "Publish"، حدد "Publish".

    إشعار

    قد ترى رسالة خطأ في نافذة المستعرض عند تشغيل مشروع ويب ProductsPortal تلقائيا بعد النشر. هذا متوقع، ويحدث لأن تطبيق ProductsServer لا يعمل بعد.

  2. انسخ عنوان URL لتطبيق الويب المنشور. ستحتاج إلى عنوان URL لاحقا. يمكنك أيضا الحصول على عنوان URL هذا من نافذة نشاط خدمة تطبيقات Azure في Visual Studio:

    URL of the deployed app

  3. أغلق نافذة المستعرض لإيقاف تشغيل التطبيق.

قبل تشغيل التطبيق في السحابة، يجب التأكد من تشغيل ProductsPortal من داخل Visual Studio كتطبيق ويب.

  1. في Visual Studio، انقر بزر الماوس الأيمن فوق مشروع ProductsPortal وحدد Properties.

  2. حدد الويب. ضمن بدء الإجراء، اختر بدء URL. أدخل عنوان URL لتطبيق الويب الذي تم نشره مسبقا، في هذا المثال، https://productsportal20190906122808.azurewebsites.net/.

    Start URL

  3. حدد File>Save All.

  4. حدد Build>Rebuild Solution.

شغّل التطبيق

حدد F5 لإنشاء التطبيق وتشغيله. يجب أن يبدأ الخادم المحلي، وهو تطبيق وحدة تحكم ProductsServer ، أولا، ثم يجب أن يبدأ تطبيق ProductsPortal في نافذة المستعرض، كما هو موضح هنا:

Run the web app on Azure

يسرد مخزون المنتج البيانات التي تم استردادها من النظام المحلي لخدمة المنتج، ويعرض تلك البيانات في تطبيق الويب. تحقق من عنوان URL للتأكد من تشغيل ProductsPortal في السحابة، كتطبيق ويب Azure.

هام

يجب أن يكون تطبيق وحدة تحكم ProductsServer قيد التشغيل وقادرا على تقديم البيانات إلى تطبيق ProductsPortal. إذا كان المستعرض يعرض خطأ، فانتظر بضع ثوان إضافية حتى يقوم ProductsServer بتحميل الرسالة التالية وعرضها، ثم قم بتحديث المستعرض.

في المستعرض، قم بتحديث صفحة ProductsPortal . في كل مرة تقوم فيها بتحديث الصفحة، سترى تطبيق الخادم يعرض رسالة عند GetProducts() استدعاء ProductsServer.

Updated output

الخطوات التالية

تقدم إلى البرنامج التعليمي التالي: