Orchestrare le app Node.js in .NET Aspire
Questo articolo illustra come usare app Node.js e Node Package Manager (npm
) in un progetto di .NET.NET Aspire. L'app di esempio in questo articolo dimostra le esperienze client Angular, Reacte Vue. Le API .NET.NET Aspire seguenti esistono per supportare questi scenari e fanno parte del pacchetto NuGet Aspire.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 scripts
di un file package.json e il comando corrispondente npm run <script-name>
.
Suggerimento
Il codice sorgente di esempio per questo articolo è disponibile in GitHube sono disponibili informazioni dettagliate nella pagina esempi di codice : .NET Aspire con Angular, React e Vue.
Importante
Anche se questo articolo è incentrato sui bit front-end Single-Page app (SPA), è disponibile un esempio aggiuntivo Node.js negli esempi di codice : .NET AspireNode.js pagina di esempio, che illustra come usare Node.js come un'app server con express.
Prerequisiti
Per usare .NET.NET Aspire, è necessario che il codice seguente sia installato in locale:
- .NET 8.0 o .NET 9.0
- Un runtime conforme a OCI per container, ad esempio:
- Docker Desktop o Podman. Per ulteriori informazioni, vedere Container runtime.
- Un ambiente di sviluppo integrato (IDE) o un editor di codice, ad esempio:
- Visual Studio 2022 versione 17.9 o successiva (facoltativo)
-
Visual Studio Code (facoltativo)
- C# Dev Kit: Estensione (Facoltativo)
- JetBrains Rider con .NET.NET Aspire plug-in (facoltativo)
Per altre informazioni, vedere .NET.NET Aspire configurazione e strumentie .NET.NET 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: un progetto di .NET.NET Aspire che orchestra le altre app in questo esempio. Per altre informazioni, vedere panoramica dell'orchestrazione .NET.NET Aspire.
- 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 i progetti .NET.NET Aspire. Per altre informazioni, vedere impostazioni predefinite del servizio .NET.NET Aspire.
- 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 |
Suggerimento
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 altre informazioni sull'app React, vedere esplorare il client React.
Installare le dipendenze Vue
npm i ./AspireJavaScript.Vue/
Per ulteriori informazioni sull'app Vue, consultare la sezione ed esplorare il client Vue.
Eseguire l'app di esempio
Per eseguire l'app di esempio, eseguire il comando dotnet run con l'host dell'app dell'agente di orchestrazione AspireJavaScript.AppHost.csproj come switch --project
.
dotnet run --project ./AspireJavaScript.AppHost/AspireJavaScript.AppHost.csproj
Il dashboard .NET.NET Aspire viene avviato nel browser predefinito e ogni endpoint dell'app client viene visualizzato nella colonna Endpoint della pagina Risorse. L'immagine seguente illustra il dashboard per questa app di esempio:
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 dashboard di .NET.NET Aspire. 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.
Esplora l'host dell'app
Per aiutarti a comprendere come viene orchestrata ogni risorsa dell'app client, puoi fare riferimento al progetto host dell'app. L'host dell'app richiede il pacchetto NuGet Aspire.Hosting.NodeJS per ospitare le app Node.js.
<Project Sdk="Microsoft.NET.Sdk">
<Sdk Name="Aspire.AppHost.Sdk" Version="9.0.0" />
<PropertyGroup>
<OutputType>Exe</OutputType>
<TargetFramework>net8.0</TargetFramework>
<ImplicitUsings>enable</ImplicitUsings>
<Nullable>enable</Nullable>
<IsAspireHost>true</IsAspireHost>
</PropertyGroup>
<ItemGroup>
<PackageReference Include="Aspire.Hosting.AppHost" Version="9.0.0" />
<PackageReference Include="Aspire.Hosting.NodeJs" Version="9.0.0" />
</ItemGroup>
<ItemGroup>
<ProjectReference Include="..\AspireJavaScript.MinimalApi\AspireJavaScript.MinimalApi.csproj" />
</ItemGroup>
<Target Name="RestoreNpm" BeforeTargets="Build" Condition=" '$(DesignTimeBuild)' != 'true' ">
<ItemGroup>
<PackageJsons Include="..\*\package.json" />
</ItemGroup>
<!-- Install npm packages if node_modules is missing -->
<Message Importance="Normal" Text="Installing npm packages for %(PackageJsons.RelativeDir)" Condition="!Exists('%(PackageJsons.RootDir)%(PackageJsons.Directory)/node_modules')" />
<Exec Command="npm install" WorkingDirectory="%(PackageJsons.RootDir)%(PackageJsons.Directory)" Condition="!Exists('%(PackageJsons.RootDir)%(PackageJsons.Directory)/node_modules')" />
</Target>
</Project>
Il file di progetto definisce anche una destinazione di compilazione che garantisce l'installazione delle dipendenze npm prima della compilazione dell'host dell'app. Il codice host dell'app (Program.cs) dichiara le risorse dell'app client usando l'API AddNpmApp(IDistributedApplicationBuilder, String, String, String, String[]).
var builder = DistributedApplication.CreateBuilder(args);
var weatherApi = builder.AddProject<Projects.AspireJavaScript_MinimalApi>("weatherapi")
.WithExternalHttpEndpoints();
builder.AddNpmApp("angular", "../AspireJavaScript.Angular")
.WithReference(weatherApi)
.WaitFor(weatherApi)
.WithHttpEndpoint(env: "PORT")
.WithExternalHttpEndpoints()
.PublishAsDockerFile();
builder.AddNpmApp("react", "../AspireJavaScript.React")
.WithReference(weatherApi)
.WaitFor(weatherApi)
.WithEnvironment("BROWSER", "none") // Disable opening browser on npm start
.WithHttpEndpoint(env: "PORT")
.WithExternalHttpEndpoints()
.PublishAsDockerFile();
builder.AddNpmApp("vue", "../AspireJavaScript.Vue")
.WithReference(weatherApi)
.WaitFor(weatherApi)
.WithHttpEndpoint(env: "PORT")
.WithExternalHttpEndpoints()
.PublishAsDockerFile();
builder.AddNpmApp("reactvite", "../AspireJavaScript.Vite")
.WithReference(weatherApi)
.WithEnvironment("BROWSER", "none")
.WithHttpEndpoint(env: "VITE_PORT")
.WithExternalHttpEndpoints()
.PublishAsDockerFile();
builder.Build().Run();
Il codice precedente:
- Crea un DistributedApplicationBuilder.
- Aggiunge il servizio "weatherapi" come progetto all'app host.
- 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.
- Ogni app client è configurata per l'esecuzione su una porta contenitore diversa e usa la variabile di ambiente
Per altre informazioni sul networking a ciclo interno, vedere .NET.NET Aspire panoramica del networking a ciclo interno. Per altre informazioni sulla distribuzione di app, vedere .NET.NET Aspire formato manifesto per i generatori di strumenti di distribuzione.
Quando l'host dell'app orchestra l'avvio di ogni app client, usa il comando npm run start
. 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".
module.exports = {
"/api": {
target:
process.env["services__weatherapi__https__0"] ||
process.env["services__weatherapi__http__0"],
secure: process.env["NODE_ENV"] !== "development",
pathRewrite: {
"^/api": "",
},
},
};
L'host dell'app .NET.NET Aspire imposta la variabile di ambiente services__weatherapi__http__0
, usata per risolvere l'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.
Il secondo aggiornamento riguarda il file 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.
{
"name": "angular-weather",
"version": "0.0.0",
"engines": {
"node": ">=20.12"
},
"scripts": {
"ng": "ng",
"start": "run-script-os",
"start:win32": "ng serve --port %PORT%",
"start:default": "ng serve --port $PORT",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"@angular/animations": "^19.1.4",
"@angular/common": "^19.1.4",
"@angular/compiler": "^19.1.4",
"@angular/core": "^19.1.4",
"@angular/forms": "^19.1.4",
"@angular/platform-browser": "^19.1.4",
"@angular/platform-browser-dynamic": "^19.1.4",
"@angular/router": "^19.1.4",
"rxjs": "~7.8.1",
"tslib": "^2.8.1",
"zone.js": "~0.15.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^19.1.4",
"@angular/cli": "^19.1.4",
"@angular/compiler-cli": "^19.1.4",
"@types/jasmine": "~5.1.5",
"jasmine-core": "~5.5.0",
"karma": "~6.4.4",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.1",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"typescript": "~5.7.3",
"run-script-os": "^1.1.6"
}
}
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'inserimento delle dipendenze. Questo viene ottenuto usando la funzione helper provideHttpClient
durante la configurazione dell'applicazione nel file app.config.ts.
import { ApplicationConfig } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
export const appConfig: ApplicationConfig = {
providers: [
provideRouter(routes),
provideHttpClient()
]
};
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:
- app.component.css: Aggiornare il codice CSS allo stile della tabella.
- app.component.html: Aggiornare il codice HTML per visualizzare i dati delle previsioni meteo in una tabella.
-
app.component.ts: Aggiornare TypeScript per chiamare l'endpoint
/api/WeatherForecast
e visualizzare i dati nella tabella.
import { Component, Injectable } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { WeatherForecasts } from '../types/weatherForecast';
@Injectable()
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, RouterOutlet],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
title = 'weather';
forecasts: WeatherForecasts = [];
constructor(private http: HttpClient) {
http.get<WeatherForecasts>('api/weatherforecast').subscribe({
next: result => this.forecasts = result,
error: console.error
});
}
}
Angular app in esecuzione
Per visualizzare l'app client Angular, passare all'endpoint "angular" nel dashboard .NET Aspire. L'immagine seguente illustra l'app client Angular:
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:
import { useEffect, useState } from "react";
import "./App.css";
function App() {
const [forecasts, setForecasts] = useState([]);
const requestWeather = async () => {
const weather = await fetch("api/weatherforecast");
console.log(weather);
const weatherJson = await weather.json();
console.log(weatherJson);
setForecasts(weatherJson);
};
useEffect(() => {
requestWeather();
}, []);
return (
<div className="App">
<header className="App-header">
<h1>React Weather</h1>
<table>
<thead>
<tr>
<th>Date</th>
<th>Temp. (C)</th>
<th>Temp. (F)</th>
<th>Summary</th>
</tr>
</thead>
<tbody>
{(
forecasts ?? [
{
date: "N/A",
temperatureC: "",
temperatureF: "",
summary: "No forecasts",
},
]
).map((w) => {
return (
<tr key={w.date}>
<td>{w.date}</td>
<td>{w.temperatureC}</td>
<td>{w.temperatureF}</td>
<td>{w.summary}</td>
</tr>
);
})}
</tbody>
</table>
</header>
</div>
);
}
export default App;
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.
const HTMLWebpackPlugin = require("html-webpack-plugin");
module.exports = (env) => {
return {
entry: "./src/index.js",
devServer: {
port: env.PORT || 4001,
allowedHosts: "all",
proxy: [
{
context: ["/api"],
target:
process.env.services__weatherapi__https__0 ||
process.env.services__weatherapi__http__0,
pathRewrite: { "^/api": "" },
secure: false,
},
],
},
output: {
path: `${__dirname}/dist`,
filename: "bundle.js",
},
plugins: [
new HTMLWebpackPlugin({
template: "./src/index.html",
favicon: "./src/favicon.ico",
}),
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: [
"@babel/preset-env",
["@babel/preset-react", { runtime: "automatic" }],
],
},
},
},
{
test: /\.css$/,
exclude: /node_modules/,
use: ["style-loader", "css-loader"],
},
],
},
};
};
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 ambientePORT
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:
- App.css: Aggiornare il codice CSS allo stile della tabella.
-
App.js: Aggiornare il JavaScript per chiamare l'endpoint
/api/WeatherForecast
e visualizzare i dati nella tabella.
React app in esecuzione
Per visualizzare l'app client React, passare all'endpoint "react" nel dashboard .NET Aspire. L'immagine seguente illustra l'app client React:
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
:
<script lang="ts">
interface WeatherForecast {
date: string
temperatureC: number
temperatureF: number
summary: string
};
type Forecasts = WeatherForecast[];
export default {
name: 'TheWelcome',
data() {
return {
forecasts: [],
loading: true,
error: null
}
},
mounted() {
fetch('api/weatherforecast')
.then(response => response.json())
.then(data => {
this.forecasts = data
})
.catch(error => {
this.error = error
})
.finally(() => (this.loading = false))
}
}
</script>
<template>
<table>
<thead>
<tr>
<th>Date</th>
<th>Temp. (C)</th>
<th>Temp. (F)</th>
<th>Summary</th>
</tr>
</thead>
<tbody>
<tr v-for="forecast in (forecasts as Forecasts)">
<td>{{ forecast.date }}</td>
<td>{{ forecast.temperatureC }}</td>
<td>{{ forecast.temperatureF }}</td>
<td>{{ forecast.summary }}</td>
</tr>
</tbody>
</table>
</template>
<style>
table {
border: none;
border-collapse: collapse;
}
th {
font-size: x-large;
font-weight: bold;
border-bottom: solid .2rem hsla(160, 100%, 37%, 1);
}
th,
td {
padding: 1rem;
}
td {
text-align: center;
font-size: large;
}
tr:nth-child(even) {
background-color: var(--vt-c-black-soft);
}
</style>
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:
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
server: {
host: true,
port: parseInt(process.env.PORT ?? "5173"),
proxy: {
'/api': {
target: process.env.services__weatherapi__https__0 || process.env.services__weatherapi__http__0,
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, ''),
secure: false
}
}
}
})
Inoltre, la configurazione Vite specifica la proprietà server.proxy
per inoltrare le richieste al servizio "weatherapi". A tale scopo, usare la variabile di ambiente services__weatherapi__http__0
, impostata dall'host dell'app .NET.NET Aspire.
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, passare all'endpoint "vue" nel dashboard .NET Aspire. L'immagine seguente illustra l'app client Vue:
Considerazioni sulla distribuzione
Il codice sorgente di esempio per questo articolo è progettato per l'esecuzione in locale. Ogni app client viene distribuita come immagine 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.
FROM node:20 as build
WORKDIR /app
COPY package.json package.json
COPY package-lock.json package-lock.json
RUN npm install
COPY . .
RUN npm run build
FROM nginx:alpine
COPY --from=build /app/default.conf.template /etc/nginx/templates/default.conf.template
COPY --from=build /app/dist/weather/browser /usr/share/nginx/html
# Expose the default nginx port
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
Le app client sono attualmente configurate per funzionare come vere app SPA (Single Page Application) e non sono configurate 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 alle richieste proxy all'app client.
server {
listen ${PORT};
listen [::]:${PORT};
server_name localhost;
access_log /var/log/nginx/server.access.log main;
location / {
root /usr/share/nginx/html;
try_files $uri $uri/ /index.html;
}
location /api/ {
proxy_pass ${services__weatherapi__https__0};
proxy_http_version 1.1;
proxy_ssl_server_name on;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
rewrite ^/api(/.*)$ $1 break;
}
}
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. L'host dell'app .NET.NET Aspire richiede un riferimento al pacchetto Aspire.Hosting.NodeJS NuGet e il codice deve chiamare AddNodeApp
o AddNpmApp
. Queste API sono utili per aggiungere app JavaScript esistenti all'host dell'app .NET.NET Aspire.
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 .NET.NET Aspire: Parametri esterni: segreti.
Usare lo 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 : .NET 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.
import { env } from 'node:process';
import { NodeSDK } from '@opentelemetry/sdk-node';
import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-grpc';
import { OTLPMetricExporter } from '@opentelemetry/exporter-metrics-otlp-grpc';
import { OTLPLogExporter } from '@opentelemetry/exporter-logs-otlp-grpc';
import { SimpleLogRecordProcessor } from '@opentelemetry/sdk-logs';
import { PeriodicExportingMetricReader } from '@opentelemetry/sdk-metrics';
import { HttpInstrumentation } from '@opentelemetry/instrumentation-http';
import { ExpressInstrumentation } from '@opentelemetry/instrumentation-express';
import { RedisInstrumentation } from '@opentelemetry/instrumentation-redis-4';
import { diag, DiagConsoleLogger, DiagLogLevel } from '@opentelemetry/api';
import { credentials } from '@grpc/grpc-js';
const environment = process.env.NODE_ENV || 'development';
// For troubleshooting, set the log level to DiagLogLevel.DEBUG
//diag.setLogger(new DiagConsoleLogger(), environment === 'development' ? DiagLogLevel.INFO : DiagLogLevel.WARN);
const otlpServer = env.OTEL_EXPORTER_OTLP_ENDPOINT;
if (otlpServer) {
console.log(`OTLP endpoint: ${otlpServer}`);
const isHttps = otlpServer.startsWith('https://');
const collectorOptions = {
credentials: !isHttps
? credentials.createInsecure()
: credentials.createSsl()
};
const sdk = new NodeSDK({
traceExporter: new OTLPTraceExporter(collectorOptions),
metricReader: new PeriodicExportingMetricReader({
exportIntervalMillis: environment === 'development' ? 5000 : 10000,
exporter: new OTLPMetricExporter(collectorOptions),
}),
logRecordProcessor: new SimpleLogRecordProcessor({
exporter: new OTLPLogExporter(collectorOptions)
}),
instrumentations: [
new HttpInstrumentation(),
new ExpressInstrumentation(),
new RedisInstrumentation()
],
});
sdk.start();
}
Suggerimento
Per configurare le impostazioni CORS del dashboard .NET.NET Aspire OTEL, vedere la pagina delle impostazioni CORS del dashboard .NET.NET Aspire.
Sommario
Anche se vi sono diverse considerazioni che vanno oltre l'ambito di questo articolo, hai appreso come sviluppare progetti .NET 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
- esempi di codice : .NET Aspire con Angular, Reacte Vue
- Esempi di Codice : .NET AspireNode.js App