Esercizio - Integrare un'app Web ASP.NET Core esistente

  • 8 minuti

Si esaminerà ora come aggiungere .NET Aspire a un'app Web ASP.NET Core esistente. Nel corso della procedura si apprenderà come aggiungere lo stack .NET Aspire a un'app Web ASP.NET Core esistente e quindi eseguire l'app. Si vedrà anche come chiamare i microservizi dall'app ASP.NET Core.

Configurazione dell'ambiente

Per aggiungere .NET Aspirare a una demo esistente app Web ASP.NET Core, è prima necessario ottenere l'app esistente.

In una finestra del terminale:

  1. Impostare la directory di lavoro corrente su dove archiviare il codice.

  2. Clonare il repository in una nuova cartella denominata ExampleApp:

    git clone https://github.com/MicrosoftDocs/mslearn-aspire-starter ExampleApp

Esplorare l'app di esempio

Usare Visual Studio per esplorare l'app demo.

  1. Aprire Visual Studio e selezionare Apri un progetto o una soluzione.

  2. Nella finestra di dialogo Apri progetto/soluzione passare alla cartella ExampleApp/eShopAdmin e quindi selezionare EShopAdmin.sln.

  3. Selezionare Apri.

    Screenshot di Visual Studio che mostra i tre progetti nella soluzione demo.

    L'app demo è una soluzione .NET 8 con tre progetti:

    • Entità dati. Libreria di classi che definisce la classe Prodotto usata nell'app Web e nell'API Web.
    • Prodotti. API Web che restituisce un elenco di prodotti nel catalogo con le relative proprietà.
    • Store. Un'app Web Blazor visualizza questi prodotti per i visitatori del sito Web.

Per eseguire correttamente l'app, modificare i progetti che vengono avviati:

  1. Dal menu selezionare Progetto>Configura progetti di avvio....

  2. Nella finestra di dialogo Pagine delle proprietà della soluzione selezionare Più progetti di avvio.

    Screenshot della finestra di dialogo per scegliere i progetti di avvio. I Prodotti e lo Store sono impostati su Start.

  3. Nela colonna Azione impostare Prodotti e Store su Start.

  4. Seleziona OK.

  5. Eseguire l'app premendo F5o selezionando Start sulla barra degli strumenti.

    L'app apre due istanze del Web browser predefinito. Uno mostra l'output JSON dell'API Web e l'altro mostra l'app Web Blazor.

  6. Nell'app Web selezionare Prodotti dal menu. Verrà visualizzato questo errore.

    Screenshot che mostra che i prodotti non possono essere caricati.

  7. Arrestare l'app premendo MAIUSC+F5oppure selezionare Arresta debug sulla barra degli strumenti.

Questa app è ancora nuova. Non si è certi della configurazione degli endpoint e dei servizi. Aggiungere l'orchestrazione .NET Aspire e verificare se può aiutare a diagnosticare il problema.

Integrare l'app esistente nell'orchestrazione .NET Aspire

In Visual Studio:

  1. In Esplora soluzioni, fare clic con il pulsante destro del mouse su Store, selezionare Aggiungi>.NET Aspire Orchestrator Support....

    Screenshot della finestra di dialogo di orchestrazione in Visual Studio.

  2. Nella finestra di dialogo Aggiungi .NET Aspire Orchestrator Support, selezionare OK.

    Ora è possibile vedere che i progetti AppHost e ServiceDefaults vengono aggiunti alla soluzione. Il progetto AppHost viene impostato anche come progetto di avvio.

  3. Eseguire l'app premendo F5o selezionando Start sulla barra degli strumenti.

    Questa volta, la soluzione apre una singola finestra del browser che mostra il dashboard .NET Aspira.

    Screenshot della dashboard .NET Aspire.

  4. Selezionare l'endpoint per il progetto >Store e quindi selezionare Prodotti. Dovrebbe essere visualizzato lo stesso errore di prima.

  5. Tornare alla dashboard.

    Screenshot che mostra una notifica di errore nel progetto Store.

  6. Selezionare la notifica di errore rossa accanto a In esecuzione e quindi nella colonna Dettagli selezionare Visualizza.

    Screenshot della dashboard che mostra i dettagli dell'errore.

  7. Scorrere i dettagli dell'errore fino a visualizzare il file exception.message. L'app Web ha difficoltà a connettersi a localhost:5200. La porta 5200 è la porta in cui il front-end ritiene che l'API dei prodotti sia in esecuzione.

  8. Arrestare l'app premendo MAIUSC+F5oppure selezionare Arresta debug sulla barra degli strumenti.

Aggiornare l'orchestrazione per includere l'API products

Esistono molti modi per risolvere questo problema. È possibile esplorare il codice, scoprire come è configurato il front-end, modificare il codice o modificare il file launchSettings.json o appsettings.json.

Con .NET Aspire, è possibile modificare l'orchestrazione in modo che l'API dei podotti risponda sulla porta 5200.

In Visual Studio:

  1. Per aggiungere il progetto Prodotti all'orchestrazione, in Esplora soluzioni, fare clic con il pulsante destro del mouse sul progetto Prodotti e quindi scegliere Aggiungi>.NET Aspire Orchestrator Support....

    Screenshot della finestra di dialogo di Visual Studio. Nella soluzione esiste già un progetto dell'agente di orchestrazione .NET Aspire.

  2. Nella finestra di dialogo selezionare OK.

  3. In Esplora soluzioni, aprire il progetto AppHost, quindi aprire il file Program.cs.

    Esplorare il codice e vedere come viene aggiunto il progetto Prodotti all'orchestrazione:

    var builder = DistributedApplication.CreateBuilder(args);

builder.AddProject<Projects.Store>("store");

builder.AddProject<Projects.Products>("products");

builder.Build().Run();

    Configurare quindi .NET Aspire per aggiungere un nuovo endpoint per l'API dei prodotti.

  4. Sostituire la riga builder.AddProject<Projects.Products>("products"); con il codice seguente:

    builder.AddProject<Projects.Products>("products")
       .WithHttpEndpoint(port: 5200, name: "products");

  5. Eseguire l'app premendo F5o selezionando Start sulla barra degli strumenti.

    Il progetto Prodotti è ora elencato nella dashboard con due endpoint.

    Screenshot del dashboard che mostra i prodotti e i progetti dello store.

  6. Selezionare l'endpoint per il progetto Store e quindi selezionare Prodotti.

    I prodotti sono ora visualizzati nell'app Web.

    Screenshot che mostra i prodotti nell'app Web.

  7. Arrestare l'app premendo MAIUSC+F5oppure selezionare Arresta debug sulla barra degli strumenti.

Questo approccio risolve il problema di configurazione, ma non è il modo migliore per risolvere il problema. Se si decide di usare .NET Aspire, è consigliabile usare anche l'individuazione del servizio .NET Aspire.

Aggiornare l'app Web per usare l'individuazione del servizio .NET Aspire

In Visual Studio:

  1. In Esplora soluzioni, aprire il progetto AppHost, quindi aprire il file Program.cs.

  2. Sostituire il codice nel file con il seguente:

    var builder = DistributedApplication.CreateBuilder(args);

var products = builder.AddProject<Projects.Products>("products");

builder.AddProject<Projects.Store>("store")
       .WithReference(products);

builder.Build().Run();

    Il codice precedente riordina i progetti. L'API dei prodotti viene ora passata come riferimento al progetto all'app Web dello Store front-end.

  3. In Esplora soluzioni, aprire il progetto Store, quindi aprire il file appsettings.json.

  4. Eliminare le righe di configurazione dell'endpoint:

    "ProductEndpoint": "http://localhost:5200",
"ProductEndpointHttps": "https://localhost:5200"

    Le impostazioni sono ora:

    {
  "DetailedErrors": true,
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*"
}

  5. In Esplora soluzioni, nel progetto Store, aprire il file Program.cs.

  6. Sostituire questa riga:

    var url = builder.Configuration["ProductEndpoint"] 
     ?? throw new InvalidOperationException("ProductEndpoint is not set");

    con questa riga:

    var url = "http://products";

  7. Eseguire l'app premendo F5o selezionando Start sulla barra degli strumenti.

  8. Selezionare l'endpoint per il progetto Store e quindi selezionare Prodotti.

L'app funziona ancora come previsto, ma il front-end usa ora l'individuazione del servizio .NET Aspire per ottenere informazioni sull'endpoint API dei prodotti.