Göra en lokal WCF-tjänst tillgänglig för en webbapp i molnet med Azure Relay

Den här artikeln visar hur du skapar ett hybridprogram i molnet med Microsoft Azure och Visual Studio. Du skapar ett program som använder flera Azure-resurser i molnet. Den här självstudien hjälper dig att lära dig:

  • Hur du skapar eller anpassar en befintlig webbtjänst för att den ska kunna användas av en webblösning.
  • Så här använder du Tjänsten Azure Windows Communication Foundation (WCF) Relay för att dela data mellan ett Azure-program och en webbtjänst som finns någon annanstans.

Du utför följande uppgifter i den här självstudien:

  • Installera förhandskrav för den här självstudien.
  • Granska scenariot.
  • Skapa ett namnområde.
  • Skapa en lokal server.
  • Skapa ett ASP .NET-program.
  • Kör appen lokalt.
  • Distribuera webbappen till Azure.
  • Kör appen på Azure.

Förutsättningar

För att slutföra den här självstudien, finns följande förhandskrav:

Så här hjälper Azure Relay dig med hybridlösningar

Affärslösningar består vanligtvis av en kombination av anpassad kod och befintliga funktioner. Anpassad kod tar itu med nya och unika affärskrav. Lösningar och system som redan finns ger befintliga funktioner.

Lösningsarkitekter har börjat använda molnet för enklare hantering av skalkrav och lägre driftskostnader. När de gör det upptäcker de att befintliga tjänsttillgångar som de vill använda som byggstenar för sina lösningar finns inuti företagets brandvägg och är inte lätt att nå av molnlösningen. Många interna tjänster är inte byggda eller värdar på ett sätt som gör att de enkelt kan exponeras vid företagets nätverks edge.

Azure Relay befintliga WCF-webbtjänster och gör dessa tjänster på ett säkert sätt tillgängliga för lösningar som är utanför företagets perimeter utan att det krävs störande ändringar i företagets nätverksinfrastruktur. Sådana relätjänster finns fortfarande i deras befintliga miljö, men de delegerar lyssnandet efter inkommande sessioner och förfrågningar till relätjänsten i molnet. Azure Relay skyddar även tjänsterna mot obehörig åtkomst med hjälp av signatur för delad åtkomst (SAS)-autentisering.

Granska scenariot

I den här självstudiekursen kommer du att skapa en ASP.NET-webbplats som gör att du kan se en lista över produkter på sidan för inventarieförteckningar.

Scenario

I självstudiekursen förutsätter vi att du har produktinformation i ett befintligt, lokalt system och använder Azure Relay för att få åtkomst till det systemet. En webbtjänst som körs i ett enkelt konsolprogram simulerar den här situationen. Den innehåller en minnes in memory-uppsättning produkter. Du kan köra det här konsolprogrammet på din egen dator och distribuera webbrollen till Azure. När du gör det ser du hur webbrollen som körs i Azure-datacentret anropar datorn. Det här anropet sker även om datorn nästan säkert finns bakom minst en brandvägg och ett NAT-lager (Network Address Translation).

Konfigurera utvecklingsmiljön

Innan du kan börja utveckla Azure-program måste du hämta de verktyg som krävs och ställa in din utvecklingsmiljö:

  1. Installera Azure SDK för .NET från hämtningssidan för SDK.
  2. I kolumnen .NET väljer du den version Visual Studio som du använder. I den här självstudien används Visual Studio 2019.
  3. När du uppmanas att köra eller spara installationsprogrammet väljer du Kör.
  4. I dialogrutan Installationsprogram för webbplattform väljer du Installera och fortsätter med installationen.

När installationen är klar har du allt som behövs för att börja utveckla appen. SDK inkluderar verktyg som låter dig utveckla Azure-program i Visual Studio på ett enkelt sätt.

Skapa ett namnområde

Det första steget är att skapa ett namnområde och hämta en SAS-nyckel (signatur för delad åtkomst). Ett namnområde ger en appgräns för varje app som exponeras via Relay-tjänsten. En SAS-nyckel genereras automatiskt av systemet när ett namnområde för tjänsten skapas. Kombinationen av tjänstens namnområde och SAS-nyckeln ger referensen för Azure som används för att tillåta åtkomst till ett program.

  1. Logga in på Azure-portalen.

  2. Välj Skapa en resurs. Välj sedan Integration > Relay. Om du inte ser Relay i listan väljer du Visa alla i det övre högra hörnet.

  3. Välj Skapa och ange ett namn för namnområdet i fältet Namn. Azure Portal kontrollerar om namnet är tillgängligt.

  4. Välj en Azure-prenumeration där du vill skapa namnområdet.

  5. För Resursgruppväljer du en befintlig resursgrupp där namnområdet ska placeras eller skapar en ny.

  6. Välj land eller region där namnområdet ska finnas.

    Skapa namnområde

  7. Välj Skapa. Den Azure Portal skapar ditt namnområde och aktiverar det. Efter ett par minuter etableras resurser för ditt konto i systemet.

Få autentiseringsuppgifter för hantering

  1. Välj Alla resurser och välj sedan namnet på den nyligen skapade namnrymden.

  2. Välj Principer för delad åtkomst.

  3. Under Principer för delad åtkomst väljer du RootManageSharedAccessKey.

  4. Under SAS-princip: RootManageSharedAccessKey väljer du knappen Kopiera bredvid Primär anslutningssträng. Den här åtgärden kopierar anslutningssträngen till Urklipp för senare användning. Klistra in det här värdet i Anteckningar eller på en tillfällig plats.

  5. Upprepa föregående steg för att kopiera och klistra in värdet för primärnyckeln till en tillfällig plats för senare användning.

    connection-string

Skapa en lokal server

Först skapar du ett simulerat lokalt produktkatalogsystem. Det här projektet är ett konsolprogram för Visual Studio som använder Azure Service Bus NuGet-paketet för att inkludera Service Bus-bibliotek och -konfigurationsinställningar.

  1. Starta Microsoft Visual Studio som administratör. Det gör du genom att högerklicka Visual Studio programikonen och välja Kör som administratör.

  2. I Visual Studio du Skapa ett nytt projekt.

  3. I Skapa ett nytt projekt väljer du Konsolapp (.NET Framework) för C# och väljer Nästa.

  4. Ge projektet namnet ProductsServer och välj Skapa.

    Konfigurera det nya projektet

  5. I Solution Explorer högerklickar du på projektet ProductsServer och väljer sedan Hantera NuGet-paket.

  6. Välj Bläddra och sök sedan efter och välj WindowsAzure.ServiceBus. Välj Installera och godkänn användningsvillkoren.

    Välj NuGet-paket

    Alla nödvändiga klientsammansättningar nu är refererade.

  7. Lägg till en ny klass för ditt produktkontrakt. I Solution Explorer högerklickar du på projektet ProductsServer och väljer Lägg till > klass.

  8. I Namn anger du namnet ProductsContract.cs och väljer Lägg till.

Gör följande kodändringar i din lösning:

  1. I ProductsContract.cs ersätter du definitionen för namnområdet med följande kod. Den definierar kontraktet för tjänsten.

    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. I Program.cs ersätter du definitionen för namnområdet med följande kod, som lägger till profiltjänsten och värden för den.

    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. I Solution Explorer dubbelklickar du påApp.config för att öppna filen i Visual Studio redigeringsprogram. Längst ned i elementet, <system.ServiceModel> men fortfarande i , lägger du till följande <system.ServiceModel> XML-kod. Ersätt med yourServiceNamespace namnet på ditt namnområde och med den yourKey SAS-nyckel som du hämtade tidigare från portalen:

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

    Anteckning

    Felet som orsakas av transportClientEndpointBehavior är bara en varning och är inte ett blockeringsproblem i det här exemplet.

  4. När du App.config i elementet ersätter du värdet för <appSettings> anslutningssträngen med den anslutningssträng som du tidigare fick från portalen.

    <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. Välj Ctrl+Skift+B eller välj Build Build Solution (Skapa lösning) för att skapa programmet och kontrollera > att ditt arbete hittills är korrekt.

Skapa ett ASP.NET-program

I det här avsnittet skapar du ett enkelt ASP.NET-program som visar data som hämtats från din produkttjänst.

Skapa projektet

  1. Kontrollera Visual Studio körs som administratör.

  2. I Visual Studio du Skapa ett nytt projekt.

  3. I Skapa ett nytt projekt väljer du ASP.NET Web Application (.NET Framework) för C# och väljer Nästa.

  4. Ge projektet namnet ProductsPortal och välj Skapa.

  5. I Skapa en ASP.NET webbapp väljer du MVC och sedan Ändra under Autentisering.

    Välj ASP.NET-webbprogram

  6. I Ändra autentisering väljer du Ingen autentisering och sedan OK. I den här självstudien distribuerar du en app som inte behöver någon användare för att logga in.

    Ange autentisering

  7. När du är tillbaka i Skapa ASP.NET en ny webbapp väljer du Skapa för att skapa MVC-appen.

  8. Konfigurera Azure-resurser för en ny webbapp. Följ stegen i Publicera webbappen. Gå sedan tillbaka till den här självstudien och fortsätt till nästa steg.

  9. I Solution Explorer högerklickar du på Modeller och väljer sedan Lägg till > klass.

  10. Ge klassen namnet Product.cs och välj sedan Lägg till.

    Skapa produktmodell

Göra ändringar i webbprogrammet

  1. I filen Product.cs i Visual Studio ersätter du den befintliga definitionen för namnområdet med följande kod:

     // 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. I Solution Explorer expanderar du Styrenheter och dubbelklickar sedan på HomeController.cs för att öppna filen i Visual Studio.

  3. Ersätt den befintliga definitionen för namnområdet med följande kod i 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. I Solution Explorer expanderar du Vyer delat och dubbelklickar sedan på > _Layout.cshtml för att öppna filen i Visual Studio redigeringsprogram.

  5. Ändra alla förekomster av My ASP.NET Application till Northwind Traders Produkter.

  6. Ta bort Home länkarna About , och Contact . Ta bort den markerade koden i följande exempel.

    Ta bort de genererade listobjekten

  7. I Solution Explorer expanderar du Vyer start och dubbelklickar sedan på > Index.cshtml för att öppna filen i Visual Studio redigeraren. Ersätt hela innehållet i filen med följande kod:

    @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. Om du vill kontrollera att ditt arbete hittills är korrekt kan du välja Ctrl+Skift+B för att skapa projektet.

Köra appen lokalt

Kör programmet för att kontrollera att det fungerar.

  1. Se till att ProductsPortal är det aktiva projektet. Högerklicka på projektnamnet i Solution Explorer och välj Set As Startup Project.
  2. I Visual Studio väljer du F5.

Programmet bör visas och körs i en webbläsare.

Skärmbild som visar ett exempel på programmet som körs i en webbläsare med URL:en markerad.

Knyta ihop säcken

Nästa steg är att koppla samman den lokala produktservern med ASP.NET-programmet.

  1. Om det inte redan är öppet öppnar Visual Studio öppna projektet ProductsPortal som du skapade i avsnittet Skapa ett ASP.NET-program.

  2. Precis som i steget i avsnittet Skapa en lokal server lägger du till NuGet-paketet i projektreferenserna. I Solution Explorer högerklickar du på projektet ProductsPortal och väljer sedan Hantera NuGet-paket.

  3. Sök efter WindowsAzure.ServiceBus och markera posten WindowsAzure.ServiceBus. Slutför sedan installationen och stäng den här dialogrutan.

  4. I Solution Explorer högerklickar du på projektet ProductsPortal och väljer sedan Lägg till > befintligt objekt.

  5. Navigera till filen ProductsContract.cs från konsolprojektet ProductsServer. Markera ProductsContract.cs. Välj nedåtpilen bredvid Lägg till och välj sedan Lägg till som länk.

    Lägg till som en länk

  6. Öppna nu filen HomeController.cs i Visual Studio-redigeraren och ersätt definitionen för namnområde med följande kod. Se till att ersätta yourServiceNamespace med namnet på ditt namnområde för tjänsten och med din yourKey SAS-nyckel. Med den här koden kan klienten anropa den lokala tjänsten och returnera resultatet av anropet.

    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. I Solution Explorer högerklickar du på lösningen ProductsPortal. Se till att högerklicka på lösningen, inte på projektet. Välj Lägg > till befintlig Project.

  8. Navigera till projektet ProductsServer och dubbelklicka sedan på lösningsfilen ProductsServer.csproj för att lägga till den.

  9. ProductsServer måste köras för att visa data på ProductsPortal. I Solution Explorer högerklickar du på lösningen ProductsPortal och väljer Egenskaper för att visa Egenskapssidor.

  10. Välj Common Properties Startup > Project (Start av vanliga egenskaper) och välj Multiple startup projects (Flera startprojekt). Kontrollera att ProductsServer och ProductsPortal visas i den ordningen och att åtgärden för båda är Starta.

    Flera startprojekt

  11. Välj Vanliga > Project beroenden till vänster.

  12. För Projekt väljer du ProductsPortal. Se till att ProductsServer är markerat.

    Projektberoenden

  13. För Projekt väljer du ProductsServer. Kontrollera att ProductsPortal inte är markerat och spara ändringarna genom att välja OK.

Köra projektet lokalt

Om du vill testa programmet lokalt går du Visual Studio väljer F5. Den lokala servern, ProductsServer, bör starta först och sedan ska programmet ProductsPortal starta i ett webbläsarfönster. Den här gången ser du att data för produktinventarielistorna hämtats från det lokala systemet för produkttjänster.

Webbprogram

Välj Uppdaterasidan ProductsPortal. Varje gång du uppdaterar sidan kommer du att se att appservern visar ett meddelande när GetProducts() från ProductsServer anropas.

Stäng båda programmen innan du fortsätter till nästa avsnitt.

Distribuera ProductsPortal-projektet till en Azure-webbapp

Nästa steg är att publicera om Azure-webbappens ProductsPortal-frontend:

  1. I Solution Explorer högerklickar du på projektet ProductsPortal och väljer Publicera. På sidan Publicera väljer du Publicera.

    Anteckning

    Du kanske får upp ett felmeddelande i webbläsarfönstret när webbprojektet ProductsPortal startas automatiskt efter distributionen. Detta är normalt och beror på att ProductsServer-programmet ännu inte körs.

  2. Kopiera URL:en för den distribuerade webbappen. Du behöver URL:en senare. Du kan också hämta url:en från Azure App Service aktivitetsfönster i Visual Studio:

    Webbadressen för den distribuerade appen

  3. Stäng webbläsarfönstret för att stoppa programmet som körs.

Innan du kör programmet i molnet måste du se till att ProductsPortal startas inifrån Visual Studio som en webbapp.

  1. I Visual Studio högerklickar du på projektet ProductsPortal och väljer Egenskaper.

  2. Välj Webb. Under Starta åtgärd väljer du Start-URL. Ange URL:en för din tidigare distribuerade webbapp, i det här exemplet https://productsportal20190906122808.azurewebsites.net/ .

    Start-URL

  3. Välj Arkiv > Spara alla.

  4. Välj Build Rebuild Solution > (Bygg om lösning).

Kör programmet

Välj F5 för att skapa och köra programmet. Den lokala servern, som är konsolprogrammet ProductsServer, bör starta först och sedan ska Programmet ProductsPortal starta i ett webbläsarfönster, som du ser här:

Köra webbappen i Azure

Produktinventeringen visar data som hämtats från det lokala systemet för produkttjänster och visar dessa data i webbappen. Kontrollera URL:en för att se till att ProductsPortal körs i molnet, som en Azure-webbapp.

Viktigt

Konsolprogrammet ProductsServer måste köras och det måste kunna skicka data till programmet ProductsPortal. Om ett fel visas i webbläsaren väntar du några sekunder tills ProductsServer har läses in och visar följande meddelande. Uppdatera sedan webbläsaren.

Uppdatera sidan ProductsPortal i webbläsaren. Varje gång du uppdaterar sidan kommer du att se att appservern visar ett meddelande när GetProducts() från ProductsServer anropas.

Uppdaterade utdata

Nästa steg

Fortsätt till följande självstudie: