Condividi tramite

Orchestrare app Node.js in Aspire

Questo articolo illustra come usare Node.js e le app Node Package Manager (npm) in un Aspire progetto. L'app di esempio in questo articolo dimostra le esperienze client Angular, Reacte Vue. Le API seguenti Aspire esistono per supportare questi scenari e fanno parte di Aspire. Pacchetto NuGet Hosting.NodeJS :

La differenza tra queste due API è che la prima viene usata per ospitare app Node.js, mentre l'ultima è utilizzata per ospitare app che vengono eseguite dalla sezione di un file scripts e il comando corrispondente npm run <script-name>.

Tip

Il codice sorgente di esempio per questo articolo è disponibile in GitHube sono disponibili informazioni dettagliate nella pagina esempi di codice : Aspire con Angular, React e Vue.

Important

Anche se questo articolo è incentrato sui componenti front-end delle Single-Page App (SPA), è disponibile un campione aggiuntivo Node.js sulla pagina degli esempi di codice : AspireNode.js che illustra come usare Node.js come app server con Express.

Prerequisites

Per usare Aspire, è necessario quanto segue installato in locale:

Per altre informazioni, vedere Aspire Configurazione e strumenti e Aspire SDK.

Inoltre, è necessario installare Node.js nel computer. L'app di esempio in questo articolo è stata compilata con Node.js versione 20.12.2 e npm versione 10.5.1. Per verificare le versioni di Node.js e npm, eseguire i comandi seguenti:

node --version

npm --version

Per scaricare Node.js (incluso npm), vedere la pagina di download Node.js.

Clonare il codice sorgente di esempio

Per clonare il codice sorgente di esempio da GitHub, eseguire il comando seguente:

git clone https://github.com/dotnet/aspire-samples.git

Dopo aver clonato il repository, passare alla cartella samples/AspireWithJavaScript:

cd samples/AspireWithJavaScript

Da questa directory sono disponibili sei directory figlio descritte nell'elenco seguente:

  • AspireJavaScript.Angular: un'app Angular che usa l'API previsioni meteo e visualizza i dati in una tabella.
  • AspireJavaScript.AppHost: Aspire progetto che orchestra le altre app in questo esempio. Per altre informazioni, vedere Aspire Panoramica dell'orchestrazione.
  • AspireJavaScript.MinimalApi: UN'API HTTP che restituisce dati di previsione meteo generati in modo casuale.
  • AspireJavaScript.React: un'app React che usa l'API previsioni meteo e visualizza i dati in una tabella.
  • AspireJavaScript.ServiceDefaults: progetto condiviso predefinito per Aspire i progetti. Per altre informazioni, vedere Aspire Impostazioni predefinite del servizio.
  • AspireJavaScript.Vue: un'app Vue che usa l'API previsioni meteo e visualizza i dati in una tabella.

Installare le dipendenze client

L'app di esempio illustra come usare le app client JavaScript basate su Node.js. Ogni app client è stata scritta utilizzando un modello di comando npm create o manualmente. La tabella seguente elenca i comandi modello usati per creare ogni app client, insieme alla porta predefinita:

Tipo di app Comando Crea modello Porta predefinita
Angular npm create @angular@latest 4200
React Non è stato usato un modello. PORT env var
Vue npm create vue@latest 5173

Tip

Non è necessario eseguire nessuno di questi comandi, perché l'app di esempio include già i client. Si tratta invece di un punto di riferimento da cui sono stati creati i clienti. Per altre informazioni, vedere npm-init.

Per eseguire l'app, è prima necessario installare le dipendenze per ogni client. A tale scopo, passare a ogni cartella client ed eseguire npm install (o il comando alias di installazione npm i).

Installare le dipendenze Angular

npm i ./AspireJavaScript.Angular/

Per ulteriori informazioni sull'app Angular, consultare per esplorare il client Angular.

Installare le dipendenze React

npm i ./AspireJavaScript.React/

Per ulteriori informazioni sull'app React, consultare per esplorare il client React.

Installare le dipendenze Vue

npm i ./AspireJavaScript.Vue/

Per ulteriori informazioni sull'app Vue, consultare per esplorare il client Vue.

Eseguire l'app di esempio

Per eseguire l'app di esempio, chiamare il comando dotnet run in base all'agente di orchestrazione AppHost AspireJavaScript.AppHost.csproj come --project opzione:

dotnet run --project ./AspireJavaScript.AppHost/AspireJavaScript.AppHost.csproj

Il Aspire dashboard si apre nel browser predefinito e gli endpoint di ogni applicazione client vengono visualizzati nella colonna Endpoint della pagina Risorse. L'immagine seguente illustra il dashboard per questa app di esempio:

Aspire dashboard con più applicazioni cliente JavaScript.

L'endpoint di servizio weatherapi si risolve in una pagina Swagger UI che documenta l'API HTTP. Ogni app client usa questo servizio per visualizzare i dati delle previsioni meteo. È possibile visualizzare ogni app client passando all'endpoint corrispondente nel Aspire dashboard. Gli screenshot e le modifiche apportate dal punto di partenza del modello sono descritti in dettaglio nelle sezioni seguenti.

Nella stessa sessione del terminale usata per eseguire l'app premere CTRL + C per arrestare l'app.

Esplorare AppHost

Per comprendere in che modo ogni risorsa dell'app client viene orchestrata, esaminare il progetto AppHost. AppHost richiede .Aspire Pacchetto NuGet Hosting.NodeJS per ospitare Node.js app:

Il file di progetto definisce anche una destinazione di compilazione che garantisce l'installazione delle dipendenze npm prima della compilazione di AppHost. Il codice AppHost (AppHost.cs_) dichiara le risorse dell'app client usando l'API AddNpmApp(IDistributedApplicationBuilder, String, String, String, String[]) .

Il codice precedente:

  • Crea un DistributedApplicationBuilder.
  • Aggiunge il servizio "weatherapi" come progetto a AppHost.
    • Contrassegna gli endpoint HTTP come esterni.
  • Con riferimento al servizio "weatherapi", aggiunge le applicazioni client "angular", "react" e "vue" come applicazioni npm.
    • Ogni app client è configurata per l'esecuzione su una porta contenitore diversa e usa la variabile di ambiente PORT per determinare la porta.
    • Tutte le app client si basano anche su un Dockerfile per costruire l'immagine del loro container e sono configurate per esprimersi nel manifest di pubblicazione come container derivante dall'API PublishAsDockerFile.

Per altre informazioni sulla rete a ciclo interno, vedere Aspire La panoramica della rete del ciclo interno. Per altre informazioni sulla distribuzione delle app, vedere Aspire Formato manifesto per i generatori di strumenti di distribuzione.

Quando AppHost orchestra l'avvio di ogni app client, usa il npm run start comando . Questo comando viene definito nella sezione scripts del file package.json per ogni app client. Lo script start viene usato per avviare l'app client sulla porta specificata. Ogni app client si basa su un proxy per richiedere il servizio "weatherapi".

Il proxy è configurato in:

  • File di proxy.conf.js per il client Angular.
  • File di webpack.config.js per il client React.
  • File di vite.config.ts per il client Vue.

Esplorare il client Angular

Sono state apportate diverse modifiche chiave dal modello di Angular originale. Il primo è l'aggiunta di un file proxy.conf.js. Questo file viene usato per instradare le richieste tramite proxy dal client Angular al servizio "weatherapi".

Il Aspire AppHost stabilisce le variabili di ambiente WEATHERAPI_HTTPS e WEATHERAPI_HTTP, che sono utilizzate per risolvere gli endpoint del servizio "weatherapi". La configurazione precedente instrada le richieste HTTP che iniziano con /api verso l'URL di destinazione specificato nella variabile d'ambiente.

Includere quindi il file proxy nel file angular.json . Aggiornare la serve destinazione in modo da includere l'opzione proxyConfig, facendo riferimento al file proxy.conf.js creato. L'interfaccia della riga di comando Angular userà ora la configurazione proxy durante la gestione dell'app client Angular.

Il terzo aggiornamento consiste nel file di package.json. Questo file viene usato per configurare il client Angular per l'esecuzione su una porta diversa rispetto alla porta predefinita. A tale scopo, usare la variabile di ambiente PORT e il pacchetto npm run-script-os per impostare la porta.

La sezione scripts del file di package.json viene usata per definire lo script di start. Questo script viene usato dal comando npm start per avviare l'app client Angular. Lo script start è configurato per utilizzare il pacchetto run-script-os per impostare la porta, delegando al comando ng serve il passaggio del commutatore --port adeguato in base alla sintassi del sistema operativo in uso.

Per effettuare chiamate HTTP al servizio "weatherapi", l'app client Angular deve essere configurata per fornire il AngularHttpClient per l'iniezione delle dipendenze. Questo viene ottenuto usando la funzione helper provideHttpClient durante la configurazione dell'applicazione nel file app.config.ts.

Infine, l'app client Angular deve chiamare l'endpoint /api/WeatherForecast per recuperare i dati delle previsioni meteo. Sono disponibili diversi aggiornamenti HTML, CSS e TypeScript, tutti apportati ai file seguenti:

Angular app in esecuzione

Per visualizzare l'app client Angular, passare all'endpoint "angular" sul dashboard Aspire. L'immagine seguente illustra l'app client Angular:

Angular applicazione client con dati meteorologici falsi visualizzati in formato tabella.

Esplorare il client React

L'app React non è stata scritta usando un modello e invece è stata scritta manualmente. Il codice sorgente completo è disponibile nel repository dotnet/aspire-samples. Alcuni dei punti chiave di interesse sono disponibili nel file src/App.js:

La funzione App è il punto di ingresso per l'app client React. Usa gli hook useState e useEffect per gestire lo stato dei dati delle previsioni meteo. L'API fetch viene usata per effettuare una richiesta HTTP all'endpoint /api/WeatherForecast. La risposta viene quindi convertita in JSON e impostata come stato dei dati delle previsioni meteo.

Il codice precedente definisce il module.exports come indicato di seguito:

  • La proprietà entry è impostata sul file src/ index.js.
  • Il devServer utilizza un proxy per inoltrare le richieste al servizio "weatherapi", imposta la porta sulla variabile di ambiente PORT e permette l'accesso a tutti gli host.
  • Il output restituisce una cartella dist con un filebundle.js.
  • Il plugins imposta il file src/index.html come modello ed espone il file favicon.ico.

Gli aggiornamenti finali sono relativi ai file seguenti:

React app in esecuzione

Per visualizzare l'app client React, passare all'endpoint "react" nel dashboard Aspire. L'immagine seguente illustra l'app client React:

React applicazione client con dati meteorologici falsi visualizzati in formato tabella.

Esplorare il client Vue

Sono state apportate diverse modifiche chiave dal modello di Vue originale. Gli aggiornamenti principali sono stati l'aggiunta della chiamata fetch nel file TheWelcome.vue per recuperare i dati delle previsioni meteo dall'endpoint /api/WeatherForecast. Il frammento di codice seguente illustra la chiamata fetch:

Poiché l'integrazione TheWelcome è mounted, chiama l'endpoint /api/weatherforecast per recuperare i dati delle previsioni meteorologiche. La risposta viene quindi impostata come proprietà di dati forecasts. Per impostare la porta del server, l'app client Vue usa la variabile di ambiente PORT. A questo scopo, aggiornare il file vite.config.ts:

Inoltre, la configurazione Vite specifica la proprietà server.proxy per inoltrare le richieste al servizio "weatherapi". A tale scopo, usare le WEATHERAPI_HTTPS variabili di ambiente e WEATHERAPI_HTTP impostate da Aspire AppHost.

L'aggiornamento del modello finale viene eseguito al file TheWelcome.vue. Questo file chiama l'endpoint /api/WeatherForecast per recuperare i dati delle previsioni meteo e visualizza i dati in una tabella. Comprende aggiornamenti CSS, HTML e TypeScript.

Vue app in esecuzione

Per visualizzare l'app client Vue, accedere all'endpoint "vue" nel pannello di controllo Aspire. L'immagine seguente illustra l'app client Vue:

Vue applicazione client con dati meteorologici falsi visualizzati in formato tabella.

Considerazioni sulla distribuzione

Il codice sorgente di esempio per questo articolo è progettato per l'esecuzione in locale. Ogni applicazione client viene distribuita come immagine di container. Il Dockerfile per ogni app client viene usato per compilare l'immagine del contenitore. Ogni Dockerfile è identico, usando una compilazione a più fasi per creare un'immagine del contenitore pronta per la produzione.

Le app client sono attualmente configurate per funzionare come vere e proprie applicazioni SPA (Single Page Application) e non sono impostate per funzionare in modalità SSR (Server-Side Rendering). Si trovano dietro nginx, che viene usato per gestire i file statici. Usano un file default.conf.template per configurare nginx per fare da proxy alle richieste verso l'app client.

Considerazioni sull'applicazione server Node.js

Anche se questo articolo è incentrato sulle app client, potrebbero essere presenti scenari in cui è necessario ospitare un'app server Node.js. Per ospitare un'app server Node.js, è necessaria la stessa semantica di un'applicazione cliente a pagina singola. Aspire AppHost richiede un riferimento al pacchetto NuGet Aspire.Hosting.NodeJS e il codice deve invocare AddNodeApp o AddNpmApp. Queste API sono utili per aggiungere app JavaScript esistenti ad Aspire AppHost.

Quando si configurano i segreti e si passano variabili di ambiente alle app basate su JavaScript, sia che si tratti di app client o server, usare i parametri. Per altre informazioni, vedere Aspire: Parametri esterni- segreti.

Utilizzare il OpenTelemetry JavaScript SDK

Per esportare OpenTelemetry log, tracce e metriche da un'app server Node.js, usare OpenTelemetry JavaScript SDK.

Per un esempio completo di un'app server Node.js usando l'SDK JavaScript OpenTelemetry, è possibile fare riferimento alla pagina esempi di codice : AspireNode.js di esempio. Considerare il file di esempio instrumentation.js, che illustra come configurare lo OpenTelemetry JavaScript SDK per esportare i log, le tracce e le metriche.

Tip

Per configurare le impostazioni INTUNE CORS del Aspire dashboard, vedere la pagina delle impostazioni INTUNE CORS delAspire dashboard.

Summary

Anche se vi sono diverse considerazioni che vanno oltre l'ambito di questo articolo, hai appreso come sviluppare progetti Aspire che utilizzano Node.js e Node Package Manager (npm). Si è anche appreso come usare le API AddNpmApp per ospitare rispettivamente app e app Node.js eseguite da un file package.json. Infine, hai imparato come usare l'interfaccia a riga di comando di npm per creare app client Angular, Reacte Vue e come configurarle per il funzionamento su porte diverse.

Vedere anche

  • Last updated on