Applicazione ibrida cloud/locale (.NET) usando il servizio d'inoltro WCF di Azure.NET on-premises/cloud hybrid application using Azure WCF Relay

Questo articolo illustra come compilare un'applicazione cloud ibrida con Microsoft Azure e Visual Studio.This article shows how to build a hybrid cloud application with Microsoft Azure and Visual Studio. Nell'esercitazione si presuppone che l'utente non abbia mai usato Azure.The tutorial assumes you have no prior experience using Azure. In meno di 30 minuti si otterrà un'applicazione in esecuzione nel cloud e che usa più risorse di Azure.In less than 30 minutes, you will have an application that uses multiple Azure resources up and running in the cloud.

Si acquisiranno le nozioni seguenti:You will learn:

  • Creare o adattare un servizio Web esistente utilizzabile in una soluzione Web.How to create or adapt an existing web service for consumption by a web solution.
  • Usare il servizio d'inoltro WCF di Azure per condividere dati tra un'applicazione Azure e un servizio Web ospitato altrove.How to use the Azure WCF Relay service to share data between an Azure application and a web service hosted elsewhere.

Nota

Per completare l'esercitazione, è necessario un account Azure.To complete this tutorial, you need an Azure account. È possibile attivare i benefici della sottoscrizione MSDN o iscriversi per un account gratuito.You can activate your MSDN subscriber benefits or sign up for a free account.

Vantaggi del servizio d'inoltro di Azure con soluzioni ibrideHow Azure Relay helps with hybrid solutions

Le soluzioni aziendali sono in genere costituite da una combinazione di codice personalizzato appositamente scritto in risposta a specifici requisiti aziendali e da funzionalità esistenti fornite da soluzioni e sistemi già implementati.Business solutions are typically composed of a combination of custom code written to tackle new and unique business requirements and existing functionality provided by solutions and systems that are already in place.

Da qualche tempo gli architetti di soluzioni hanno iniziato a usare il cloud per semplificare la gestione dei requisiti di scalabilità e ridurre i costi operativi.Solution architects are starting to use the cloud for easier handling of scale requirements and lower operational costs. Nell'adottare un tale approccio hanno quindi scoperto che le risorse di servizi esistenti che desiderano sfruttare come blocchi predefiniti delle soluzioni si trovano all'interno del firewall aziendale e quindi non sono facilmente raggiungibili dalla soluzione cloud.In doing so, they find that existing service assets they'd like to leverage as building blocks for their solutions are inside the corporate firewall and out of easy reach for access by the cloud solution. Molti servizi interni non sono creati né vengono ospitati in modo tale da consentirne una agevole esposizione al perimetro della rete aziendale.Many internal services are not built or hosted in a way that they can be easily exposed at the corporate network edge.

Il servizio d'inoltro di Azure è progettato per i casi d'uso in cui i servizi Web WCF (Windows Communication Foundation) vengono resi accessibili in modo protetto a soluzioni che risiedono all'esterno del perimetro aziendale senza richiedere modifiche di notevole impatto all'infrastruttura di rete aziendale.Azure Relay is designed for the use-case of taking existing Windows Communication Foundation (WCF) web services and making those services securely accessible to solutions that reside outside the corporate perimeter without requiring intrusive changes to the corporate network infrastructure. Tali servizi d'inoltro sono comunque ospitati all'interno dell'ambiente esistente, ma delegano l'ascolto delle sessioni e delle richieste in ingresso al servizio d'inoltro ospitato nel cloud.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. Il servizio d'inoltro di Azure protegge anche quei servizi dall'accesso non autorizzato tramite l'autenticazione con firma di accesso condiviso.Azure Relay also protects those services from unauthorized access by using Shared Access Signature (SAS) authentication.

Scenario della soluzioneSolution scenario

In questa esercitazione si creerà un sito Web ASP.NET che consente di visualizzare un elenco di prodotti nella pagina relativa all'inventario dei prodotti.In this tutorial, you will create an ASP.NET website that enables you to see a list of products on the product inventory page.

In questa esercitazione si presuppone che le informazioni sui prodotti siano già disponibili in un sistema locale esistente e che per accedere a tale sistema venga usato il servizio d'inoltro di Azure.The tutorial assumes that you have product information in an existing on-premises system, and uses Azure Relay to reach into that system. Tale operazione viene simulata da un servizio Web eseguito in una semplice applicazione console ed è supportata da un insieme di prodotti in memoria.This is simulated by a web service that runs in a simple console application and is backed by an in-memory set of products. Sarà quindi possibile eseguire questa applicazione console nel computer in uso e distribuire il ruolo Web in Azure.You will be able to run this console application on your own computer and deploy the web role into Azure. In tal modo sarà possibile osservare che il ruolo Web in esecuzione nel data center di Azure verrà effettivamente chiamato nel computer in uso, anche se quest'ultimo sarà quasi certamente protetto da almeno un firewall e un livello NAT (Network Address Translation).By doing so, you will see how the web role running in the Azure datacenter will indeed call into your computer, even though your computer will almost certainly reside behind at least one firewall and a network address translation (NAT) layer.

Configurare l'ambiente di sviluppoSet up the development environment

Prima di iniziare a sviluppare applicazioni Azure, è necessario scaricare gli strumenti e configurare l'ambiente di sviluppo:Before you can begin developing Azure applications, download the tools and set up your development environment:

  1. Installare Azure SDK per .NET dalla pagina di download di SDK.Install the Azure SDK for .NET from the SDK downloads page.
  2. Nella colonna .NET fare clic sulla versione di Visual Studio in uso.In the .NET column, click the version of Visual Studio you are using. Nelle procedure di questa esercitazione viene usato Visual Studio 2017.The steps in this tutorial use Visual Studio 2017.
  3. Quando viene richiesto se eseguire o salvare il file di installazione, fare clic su Esegui.When prompted to run or save the installer, click Run.
  4. Nell'Installazione guidata piattaforma Web fare clic su Installa e procedere con l'installazione.In the Web Platform Installer, click Install and proceed with the installation.
  5. Al termine dell'installazione, saranno disponibili tutti gli strumenti necessari per avviare lo sviluppo dell’app.Once the installation is complete, you will have everything necessary to start to develop the app. Nell'SDK sono disponibili gli strumenti che consentono di sviluppare con facilità applicazioni per Azure in Visual Studio.The SDK includes tools that let you easily develop Azure applications in Visual Studio.

Creare uno spazio dei nomiCreate a namespace

Per usare le funzionalità del servizio d'inoltro di Azure, è prima necessario creare uno spazio dei nomi del servizio.To begin using the relay features in Azure, you must first create a service namespace. Uno spazio dei nomi funge da contenitore di ambito in cui indirizzare le risorse di Azure nell'applicazione.A namespace provides a scoping container for addressing Azure resources within your application. Seguire queste istruzioni per creare uno spazio dei nomi di inoltro.Follow the instructions here to create a Relay namespace.

Creare un server localeCreate an on-premises server

In primo luogo, si creerà un sistema di catalogo prodotti locale fittizio.First, you will build a (mock) on-premises product catalog system. Si tratta di un sistema locale abbastanza semplice che intende rappresentare un catalogo prodotti effettivo che include una superficie completa di servizi da integrare.It will be fairly simple; you can see this as representing an actual on-premises product catalog system with a complete service surface that we're trying to integrate.

Il progetto è un'applicazione console di Visual Studio e usa il pacchetto NuGet del bus di servizio di Azure per includere le librerie e le impostazioni di configurazione del bus di servizio.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.

Creare il progettoCreate the project

  1. Usando privilegi di amministratore, avviare Microsoft Visual.Using administrator privileges, start Microsoft Visual Studio. A tale scopo, fare clic con il tasto destro del mouse sull'icona del programma Visual Studio e quindi fare clic su Esegui come amministratore.To do so, right-click the Visual Studio program icon, and then click Run as administrator.
  2. In Visual Studio scegliere Nuovo dal menu File, quindi fare clic su Progetto.In Visual Studio, on the File menu, click New, and then click Project.
  3. Da Modelli installati in Visual C# fare clic su App console (.NET Framework).From Installed Templates, under Visual C#, click Console App (.NET Framework). Nella casella Nome digitare il nome ProductsServer:In the Name box, type the name ProductsServer:

  4. Fare clic su OK per creare il progetto ProductsServer.Click OK to create the ProductsServer project.
  5. Se Gestione pacchetti NuGet per Visual Studio è già stato installato, continuare con il passaggio successivo.If you have already installed the NuGet package manager for Visual Studio, skip to the next step. In caso contrario, visitare il sito NuGet e fare clic su Install NuGet (Installa NuGet).Otherwise, visit NuGet and click Install NuGet. Seguire le istruzioni visualizzate per installare Gestione pacchetti NuGet, quindi riavviare Visual Studio.Follow the prompts to install the NuGet package manager, then re-start Visual Studio.
  6. In Esplora soluzioni fare clic con il pulsante destro del mouse sul progetto ProductsServer e quindi scegliere Gestisci pacchetti NuGet.In Solution Explorer, right-click the ProductsServer project, then click Manage NuGet Packages.
  7. Fare clic sulla scheda Sfoglia e quindi cercare WindowsAzure.ServiceBus.Click the Browse tab, then search for WindowsAzure.ServiceBus. Selezionare il pacchetto WindowsAzure.ServiceBus.Select the WindowsAzure.ServiceBus package.
  8. Fare clic su Installae accettare le condizioni per l'utilizzo.Click Install, and accept the terms of use.

    I riferimenti agli assembly client necessari sono ora disponibili.Note that the required client assemblies are now referenced.

  9. Aggiungere una nuova classe per il contratto dei prodotti.Add a new class for your product contract. In Esplora soluzioni fare clic con il pulsante destro del mouse sul progetto ProductsServer, scegliere Aggiungi e quindi fare clic su Classe.In Solution Explorer, right-click the ProductsServer project and click Add, and then click Class.
  10. Nella casella Nome digitare il nome ProductsContract.cs.In the Name box, type the name ProductsContract.cs. Fare quindi clic su Aggiungi.Then click Add.
  11. In ProductsContract.cs sostituire la definizione dello spazio dei nomi con il codice seguente, che consente di definire il contratto per il servizio.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
        [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
        {
        }
    }
    
  12. In Program.cs sostituire la definizione dello spazio dei nomi con il codice seguente, che consente di aggiungere il servizio profili e l'host relativo.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));
                sh.Open();
    
                Console.WriteLine("Press ENTER to close");
                Console.ReadLine();
    
                sh.Close();
            }
        }
    }
    
  13. In Esplora soluzioni fare doppio clic sul file App.config per aprirlo nell'editor di Visual Studio.In Solution Explorer, double-click the App.config file to open it in the Visual Studio editor. Nella parte inferiore dell'elemento <system.ServiceModel>, ma sempre in <system.ServiceModel>, aggiungere il seguente codice XML.At the bottom of the <system.ServiceModel> element (but still within <system.ServiceModel>), add the following XML code. Assicurarsi di sostituire yourServiceNamespace con il nome del proprio spazio dei nomi e yourKey con la chiave di firma di accesso condiviso recuperata in precedenza dal portale:Be sure to replace yourServiceNamespace with the name of your namespace, and yourKey with the SAS key you retrieved earlier from the portal:

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

    L'errore causato da "transportClientEndpointBehavior" è solo un avviso e non un problema relativo a un blocco per questo esempio.The error caused by "transportClientEndpointBehavior" is just a warning and is not a blocking issue for this sample.

  14. Nell'elemento <appSettings>, sempre nel file App.config, sostituire il valore della stringa di connessione con la stringa di connessione ottenuta prima dal portale.Still in App.config, in the <appSettings> element, replace the connection string value with the connection string you previously obtained from the portal.

    <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>
    
  15. Premere CTRL+MAIUSC+B oppure scegliere Compila soluzione dal menu Compila per compilare l'applicazione e verificare la correttezza del lavoro svolto finora.Press Ctrl+Shift+B or from the Build menu, click Build Solution to build the application and verify the accuracy of your work so far.

Creare un'applicazione ASP.NETCreate an ASP.NET application

In questa sezione si creerà una semplice applicazione ASP.NET per visualizzare i dati recuperati dal servizio dei prodotti.In this section you will build a simple ASP.NET application that displays data retrieved from your product service.

Creare il progettoCreate the project

  1. Assicurarsi che Visual Studio sia in esecuzione con privilegi di amministratore.Ensure that Visual Studio is running with administrator privileges.
  2. In Visual Studio scegliere Nuovo dal menu File, quindi fare clic su Progetto.In Visual Studio, on the File menu, click New, and then click Project.
  3. Da Modelli installati in Visual C# fare clic su Applicazione Web ASP.NET (.NET Framework).From Installed Templates, under Visual C#, click ASP.NET Web Application (.NET Framework). Assegnare al progetto il nome ProductsPortal.Name the project ProductsPortal. Fare quindi clic su OK.Then click OK.

  4. Nell'elenco dei modelli ASP.NET nella finestra di dialogo Nuova applicazione Web ASP.NET fare clic su MVC.From the ASP.NET Templates list in the New ASP.NET Web Application dialog, click MVC.

  5. Fare clic sul pulsante Modifica autenticazione.Click the Change Authentication button. Nella finestra di dialogo Modifica autenticazione assicurarsi che sia selezionato Nessuna autenticazione e quindi fare clic su OK.In the Change Authentication dialog box, ensure that No Authentication is selected, and then click OK. Per questa esercitazione si distribuisce un'app che non richiede l'accesso utente.For this tutorial, you're deploying an app that does not need a user login.

  6. Nella finestra di dialogo Nuova applicazione Web ASP.NET fare clic su OK per creare l'app MVC.Back in the New ASP.NET Web Application dialog, click OK to create the MVC app.

  7. A questo punto è necessario configurare le risorse di Azure per una nuova app Web.Now you must configure Azure resources for a new web app. Seguire i passaggi nella sezione Pubblicazione in Azure di questo articolo.Follow the steps in the Publish to Azure section of this article. Tornare quindi a questa esercitazione e procedere al passaggio successivo.Then, return to this tutorial and proceed to the next step.
  8. In Esplora soluzioni fare clic con il pulsante destro del mouse su Modelli, scegliere Aggiungi e infine fare clic su Classe.In Solution Explorer, right-click Models and then click Add, then click Class. Nella casella Nome digitare il nome Product.cs.In the Name box, type the name Product.cs. Fare quindi clic su Aggiungi.Then click Add.

Modificare l'applicazione webModify the web application

  1. Nel file Product.cs in Visual Studio sostituire la definizione dello spazio dei nomi esistente con il codice seguente.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. In Esplora soluzioni espandere la cartella Controller e quindi fare doppio clic sul file HomeController.cs per aprirlo in Visual Studio.In Solution Explorer, expand the Controllers folder, then double-click the HomeController.cs file to open it in Visual Studio.
  3. In HomeController.cs sostituire la definizione dello spazio dei nomi esistente con il codice seguente.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. In Esplora soluzioni espandere la cartella Views\Shared e quindi fare doppio clic su _Layout.cshtml per aprirlo nell'editor di Visual Studio.In Solution Explorer, expand the Views\Shared folder, then double-click _Layout.cshtml to open it in the Visual Studio editor.
  5. Sostituire tutte le occorrenze di My ASP.NET Application con Northwind Traders Products.Change all occurrences of My ASP.NET Application to Northwind Traders Products.
  6. Rimuovere i collegamenti Home, About e Contact.Remove the Home, About, and Contact links. Nell'esempio seguente, eliminare il codice evidenziato.In the following example, delete the highlighted code.

  7. In Esplora soluzioni espandere la cartella Views\Home e quindi fare doppio clic su Index.cshtml per aprirlo nell'editor di Visual Studio.In Solution Explorer, expand the Views\Home folder, then double-click Index.cshtml to open it in the Visual Studio editor. Sostituire l'intero contenuto del file con il codice seguente.Replace the entire contents of the file with the following code.

    @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. Per verificare la correttezza del lavoro svolto finora, premere CTRL+MAIUSC+B per compilare il progetto.To verify the accuracy of your work so far, you can press Ctrl+Shift+B to build the project.

Eseguire l'app in localeRun the app locally

Eseguire l'applicazione per verificarne il funzionamento.Run the application to verify that it works.

  1. Assicurarsi che il progetto attivo sia ProductsPortal.Ensure that ProductsPortal is the active project. Fare clic con il pulsante destro del mouse sul nome del progetto in Esplora soluzioni, quindi scegliere Imposta come progetto di avvio.Right-click the project name in Solution Explorer and select Set As Startup Project.
  2. In Visual Studio premere F5.In Visual Studio, press F5.
  3. L'applicazione dovrebbe risultare in esecuzione in un browser.Your application should appear, running in a browser.

Combinare i diversi componentiPut the pieces together

Nel passaggio successivo si collegherà il server dei prodotti locale all'applicazione ASP.NET.The next step is to hook up the on-premises products server with the ASP.NET application.

  1. Se non è già aperto, in Visual Studio riaprire il progetto ProductsPortal creato nella sezione Creare un'applicazione ASP.NET.If it is not already open, in Visual Studio re-open the ProductsPortal project you created in the Create an ASP.NET application section.
  2. Analogamente a quanto descritto nella sezione "Creare un server locale", aggiungere il pacchetto NuGet ai riferimenti del progetto.Similar to the step in the "Create an On-Premises Server" section, add the NuGet package to the project references. In Esplora soluzioni fare clic con il pulsante destro del mouse sul progetto ProductsPortal e quindi scegliere Gestisci pacchetti NuGet.In Solution Explorer, right-click the ProductsPortal project, then click Manage NuGet Packages.
  3. Cercare WindowsAzure.ServiceBus e selezionare l'elemento WindowsAzure.ServiceBus.Search for WindowsAzure.ServiceBus and select the WindowsAzure.ServiceBus item. Completare quindi l'installazione e chiudere la finestra di dialogo.Then complete the installation and close this dialog box.
  4. In Esplora soluzioni fare clic con il pulsante destro del mouse sul progetto ProductsPortal, quindi scegliere Aggiungi e infine Elemento esistente.In Solution Explorer, right-click the ProductsPortal project, then click Add, then Existing Item.
  5. Individuare il file ProductsContract.cs nel progetto console ProductsServer.Navigate to the ProductsContract.cs file from the ProductsServer console project. Fare clic per evidenziare ProductsContract.cs.Click to highlight ProductsContract.cs. Fare clic sulla freccia rivolta verso il basso accanto ad Aggiungi, quindi fare clic su Aggiungi come collegamento.Click the down arrow next to Add, then click Add as Link.

  6. Aprire il file HomeController.cs nell'editor di Visual Studio e sostituire la definizione dello spazio dei nomi con il codice seguente.Now open the HomeController.cs file in the Visual Studio editor and replace the namespace definition with the following code. Assicurarsi di sostituire yourServiceNamespace con il nome dello spazio dei nomi servizio e yourKey con la chiave di firma di accesso condiviso.Be sure to replace yourServiceNamespace with the name of your service namespace, and yourKey with your SAS key. In tal modo il client potrà chiamare il servizio locale e restituire il risultato della chiamata.This will enable 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(),
                    "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. In Esplora soluzioni fare clic con il pulsante destro del mouse sulla soluzione ProductsPortal. Verificare di fare clic con il pulsante destro del mouse sulla soluzione, non sul progetto.In Solution Explorer, right-click the ProductsPortal solution (make sure to right-click the solution, not the project). Scegliere Aggiungi, quindi fare clic su Progetto esistente.Click Add, then click Existing Project.
  8. Individuare il progetto ProductsServer, quindi fare doppio clic sulla soluzione ProductsServer.csproj per aggiungerla.Navigate to the ProductsServer project, then double-click the ProductsServer.csproj solution file to add it.
  9. ProductsServer deve essere in esecuzione per visualizzare i dati in ProductsPortal.ProductsServer must be running in order to display the data on ProductsPortal. In Esplora soluzioni fare clic con il pulsante destro del mouse sulla soluzione ProductsPortal e scegliere Proprietà.In Solution Explorer, right-click the ProductsPortal solution and click Properties. Viene visualizzata la finestra di dialogo Pagine delle proprietà.The Property Pages dialog box is displayed.
  10. Sul lato sinistro fare clic su Progetto di avvio.On the left side, click Startup Project. Sul lato destro fare clic su Progetti di avvio multipli.On the right side, click Multiple startup projects. Assicurarsi che ProductsServer e ProductsPortal siano visualizzati in questo ordine e che l'azione Avvia sia impostata per entrambi.Ensure that ProductsServer and ProductsPortal appear, in that order, with Start set as the action for both.

  11. Sempre nella finestra di dialogo Proprietà fare clic su Dipendenze progetto sul lato sinistro.Still in the Properties dialog box, click Project Dependencies on the left side.

  12. Nell'elenco Progetti fare clic su ProductsServer.In the Projects list, click ProductsServer. Verificare che ProductsPortal non sia selezionato.Ensure that ProductsPortal is not selected.
  13. Nell'elenco Progetti fare clic su ProductsPortal.In the Projects list, click ProductsPortal. Assicurarsi che ProductsServer sia selezionato.Ensure that ProductsServer is selected.

  14. Fare clic su OK nella finestra di dialogo Pagine delle proprietà.Click OK in the Property Pages dialog box.

Eseguire il progetto in localeRun the project locally

Per testare l'applicazione in locale, in Visual Studio premere F5.To test the application locally, in Visual Studio press F5. Il server locale, ProductsServer, verrà avviato per primo, quindi verrà avviata l'applicazione ProductsPortal in una finestra del browser.The on-premises server (ProductsServer) should start first, then the ProductsPortal application should start in a browser window. Questa volta si noterà che nell'inventario dei prodotti sono elencati i dati recuperati dal sistema locale del servizio dei prodotti.This time, you will see that the product inventory lists data retrieved from the product service on-premises system.

Fare clic su Aggiorna nella pagina ProductsPortal.Press Refresh on the ProductsPortal page. Ogni volta che si aggiorna la pagina, nell'app server viene visualizzato un messaggio quando si chiama GetProducts() da ProductsServer.Each time you refresh the page, you'll see the server app display a message when GetProducts() from ProductsServer is called.

Chiudere entrambe le applicazioni prima di procedere al passaggio successivo.Close both applications before proceeding to the next step.

Distribuire il progetto ProductsPortal in un'app Web di AzureDeploy the ProductsPortal project to an Azure web app

Nel passaggio successivo si ripubblicherà il front-end ProductsPortal dell'app Web di Azure.The next step is to republish the Azure Web app ProductsPortal frontend. Eseguire le operazioni seguenti:Do the following:

  1. In Esplora soluzioni fare clic con il pulsante destro del mouse sul progetto ProductsPortal e quindi fare clic su Pubblica.In Solution Explorer, right-click the ProductsPortal project, and click Publish. Fare quindi clic su Pubblica nella pagina di pubblicazione.Then, click Publish on the Publish page.

    Nota

    È possibile che nella finestra del browser venga visualizzato un messaggio di errore quando il progetto Web ProductsPortal viene avviato automaticamente dopo la distribuzione.You may see an error message in the browser window when the ProductsPortal web project is automatically launched after the deployment. Si tratta di un comportamento previsto che si verifica perché l'applicazione ProductsServer non è ancora in esecuzione.This is expected, and occurs because the ProductsServer application isn't running yet.

  2. Copiare l'URL dell'app Web distribuita, perché sarà necessario nel passaggio successivo.Copy the URL of the deployed web app, as you will need the URL in the next step. È anche possibile ottenere l'URL dalla finestra Attività del servizio app di Azure in Visual Studio:You can also obtain this URL from the Azure App Service Activity window in Visual Studio:

  3. Chiudere la finestra del browser per arrestare l'applicazione in esecuzione.Close the browser window to stop the running application.

Impostare ProductsPortal come app WebSet ProductsPortal as web app

Prima di eseguire l'applicazione nel cloud è necessario assicurarsi che ProductsPortal venga avviato dall'interno di Visual Studio come app Web.Before running the application in the cloud, you must ensure that ProductsPortal is launched from within Visual Studio as a web app.

  1. In Visual Studio fare clic con il pulsante destro del mouse sul progetto ProductsPortal e quindi scegliere Proprietà.In Visual Studio, right-click the ProductsPortal project and then click Properties.
  2. Nella colonna sinistra fare clic su Web.In the left-hand column, click Web.
  3. Nella sezione Azione di avvio fare clic sul pulsante URL di avvio e nella casella di testo immettere l'URL dell'app Web distribuita in precedenza, ad esempio, http://productsportal1234567890.azurewebsites.net/.In the Start Action section, click the Start URL button, and in the text box enter the URL for your previously deployed web app; for example, http://productsportal1234567890.azurewebsites.net/.

  4. Scegliere Salva tutto dal menu File in Visual Studio.From the File menu in Visual Studio, click Save All.

  5. In Visual Studio scegliere Ricompila soluzione dal menu Compila.From the Build menu in Visual Studio, click Rebuild Solution.

Eseguire l'applicazioneRun the application

  1. Premere F5 per compilare ed eseguire l'applicazione.Press F5 to build and run the application. Il server locale, ovvero l'applicazione console ProductsServer, verrà avviato per primo, quindi verrà avviata l'applicazione ProductsPortal in una finestra del browser, come illustrato nella schermata seguente.The on-premises server (the ProductsServer console application) should start first, then the ProductsPortal application should start in a browser window, as shown in the following screen shot. Si noterà di nuovo che nell'inventario dei prodotti sono elencati i dati recuperati dal sistema locale del servizio dei prodotti, che vengono visualizzati nell'app Web.Notice again that the product inventory lists data retrieved from the product service on-premises system, and displays that data in the web app. Verificare l'URL per assicurarsi che ProductsPortal sia in esecuzione nel cloud come app Web di Azure.Check the URL to make sure that ProductsPortal is running in the cloud, as an Azure web app.

    Importante

    L'applicazione console ProductsServer deve essere in esecuzione e in grado di passare dati all'applicazione ProductsPortal.The ProductsServer console application must be running and able to serve the data to the ProductsPortal application. Se nel browser viene visualizzato un errore, attendere alcuni secondi che ProductsServer venga caricato e visualizzi il messaggio seguente.If the browser displays an error, wait a few more seconds for ProductsServer to load and display the following message. Fare quindi clic su Aggiorna nel browser.Then press Refresh in the browser.

  2. Nel browser fare clic su Aggiorna nella pagina ProductsPortal.Back in the browser, press Refresh on the ProductsPortal page. Ogni volta che si aggiorna la pagina, nell'app server viene visualizzato un messaggio quando si chiama GetProducts() da ProductsServer.Each time you refresh the page, you'll see the server app display a message when GetProducts() from ProductsServer is called.

Passaggi successiviNext steps

Per altre informazioni sul servizio d'inoltro di Azure, vedere le risorse seguenti:To learn more about Azure Relay, see the following resources: