Orquestación de aplicaciones Node.js en .NET Aspire

En este artículo, aprendes a usar las aplicaciones Node.js y NPM (npm) en un proyecto de .NET.NET Aspire. En la aplicación de ejemplo de este artículo se muestran las experiencias de Angular, Reacty Vueclient. Existen las siguientes API de .NET.NET Aspire para dar soporte a estos escenarios y forman parte del Aspire.Hosting.NodeJS paquete NuGet:

• Node.js: AddNodeApp.
• npm aplicaciones: AddNpmApp.

La diferencia entre estas dos API es que la anterior se usa para hospedar aplicaciones Node.js, mientras que esta última se usa para hospedar aplicaciones que se ejecutan desde un paquete de .json sección scripts del archivo y el comando npm run <script-name> correspondiente.

Propina

El código fuente de ejemplo de este artículo está disponible en GitHuby hay detalles disponibles en la página ejemplos de código de : .NET Aspire con Angular, React y Vue.

Importante

Aunque este artículo se centra en Single-Page bits de front-end de la aplicación (SPA), hay un ejemplo de Node.js adicional disponible en los ejemplos de código de : .NET AspireNode.js página de ejemplo, que muestra cómo usar Node.js como una aplicación de server con express.

Prerrequisitos

Para trabajar con .NET.NET Aspire, necesita lo siguiente instalado localmente:

• .NET 8.0 o .NET 9.0
• Un entorno de ejecución de contenedor compatible con OCI, como:
  • Docker Escritorio o Podman. Para obtener más información, consulte container runtime.
• Un entorno para desarrolladores integrado (IDE) o un editor de código, como:
  • Visual Studio 2022 versión 17.9 o posterior (opcional)
  • Visual Studio Code (opcional)
    • C# Dev Kit: extensión (opcional)
  • JetBrains Rider con .NET.NET Aspire complemento (opcional)

Para obtener más información, consulte configuración y herramientas de .NET.NET Aspirey sdk de .NET.NET Aspire.

Además, debe instalar Node.js en su máquina. La aplicación de ejemplo de este artículo se creó con Node.js versión 20.12.2 y npm versión 10.5.1. Para comprobar las versiones de Node.js y npm, ejecute los siguientes comandos:

node --version

npm --version

Para descargar Node.js (incluido npm), consulte la página de descarga de Node.js.

Clonación de código fuente de ejemplo

Para clonar el código fuente de ejemplo de GitHub, ejecute el siguiente comando:

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

Después de clonar el repositorio, vaya a la carpeta samples/AspireWithJavaScript:

cd samples/AspireWithJavaScript

En este directorio, hay seis directorios secundarios que se describen en la lista siguiente:

• AspireJavaScript.Angular: una aplicación de Angular que consume la API de previsión meteorológica y muestra los datos de una tabla.
• AspireJavaScript.AppHost: un proyecto de .NET.NET Aspire que organiza las demás aplicaciones de este ejemplo. Para obtener más información, consulte .NET.NET Aspire visión general de la orquestación.
• AspireJavaScript.MinimalApi: UNA API HTTP que devuelve datos de previsión meteorológica generados aleatoriamente.
• AspireJavaScript.React: una aplicación React que consume la API de previsión meteorológica y muestra los datos de una tabla.
• AspireJavaScript.ServiceDefaults: el proyecto compartido predeterminado para proyectos de .NET.NET Aspire. Para obtener más información, consulte .NET.NET Aspire valores predeterminados del servicio.
• AspireJavaScript.Vue: una aplicación Vue que consume la API de previsión meteorológica y muestra los datos de una tabla.

Instalación de dependencias de client

La aplicación de ejemplo demuestra cómo usar aplicaciones JavaScript de client que se basan en Node.js. Cada aplicación client se escribió ya sea mediante un comando de plantilla de npm create o manualmente. En la tabla siguiente se enumeran los comandos de plantilla que se usan para crear cada aplicación client, junto con el puerto predeterminado:

Tipo de aplicación	Comando Crear plantilla	Puerto predeterminado
Angular	npm create @angular@latest	4200
React	No usó una plantilla.	PORT env var
Vue	npm create vue@latest	5173

Propina

No es necesario ejecutar ninguno de estos comandos, ya que la aplicación de ejemplo ya incluye los clientes. En su lugar, se trata de un punto de referencia desde el que se crearon los clientes. Para obtener más información, vea npm-init.

Primero debe instalar las dependencias para cada clientpara poder ejecutar la aplicación. Para ello, vaya a cada carpeta client y ejecute npm install (o los comandos del alias de instalación npm i).

Instalación de dependencias de Angular

npm i ./AspireJavaScript.Angular/

Para obtener más información sobre la aplicación Angular, consulte y explore el Angularclient.

Instalación de dependencias de React

npm i ./AspireJavaScript.React/

Para obtener más información sobre la aplicación React, consulte en para explorar el Reactclient.

Instalación de dependencias de Vue

npm i ./AspireJavaScript.Vue/

Para obtener más información sobre la aplicación Vue, visite y explore la sección Vueclient.

Ejecución de la aplicación de ejemplo

Para ejecutar la aplicación de ejemplo, llame al comando dotnet run dado el host de la aplicación de orquestador AspireJavaScript.AppHost.csproj como modificador de --project:

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

El panel de .NET.NET Aspire se inicia en tu navegador predeterminado, y cada punto de conexión de la aplicación client se muestra en la columna Puntos de conexión de de la página de Recursos . En la imagen siguiente se muestra el panel de esta aplicación de ejemplo:

El punto de conexión del servicio weatherapi apunta a una página Swagger UI que documenta la API HTTP. Cada client aplicación consume este servicio para mostrar los datos de previsión meteorológica. Para ver cada aplicación client, navegue hasta el endpoint correspondiente en el panel de control de .NET Aspire. Sus capturas de pantalla y las modificaciones realizadas desde el punto de partida de la plantilla se detallan en las secciones siguientes.

En la misma sesión de terminal que usó para ejecutar la aplicación, presione Ctrl + C para detener la aplicación.

Exploración del host de la aplicación

Para ayudar a comprender cómo se orquesta cada recurso de aplicación client, busque el proyecto host de la aplicación. El host de la aplicación requiere el paquete NuGet Aspire.Hosting.NodeJS para hospedar aplicaciones 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>

El archivo de proyecto también define un destino de compilación que garantiza que las dependencias de npm se instalen antes de compilar el host de la aplicación. El código de host de la aplicación (Program.cs) declara los recursos de la aplicación client mediante la API de 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();

El código anterior:

• Crea un DistributedApplicationBuilder.
• Agrega el servicio "weatherapi" como un proyecto al host de la aplicación.
  • Marca los puntos de conexión HTTP como externos.
• Haciendo referencia al servicio "weatherapi", agrega las aplicaciones "angular", "react" y "vue" client como aplicación npm.
  • Cada client aplicación está configurada para ejecutarse en un puerto de contenedor diferente y usa la variable de entorno PORT para determinar el puerto.
  • Todas las aplicaciones de client también dependen de un Dockerfile para compilar su imagen de contenedor y están configuradas para expresarse en el manifiesto de publicación como un contenedor de la API de PublishAsDockerFile.

Para obtener más información sobre las redes de bucle interno, consulte .NET.NET Aspire introducción a las redes de bucle interno. Para obtener más información sobre la implementación de aplicaciones, consulte .NET.NET Aspire formato de manifiesto para generadores de herramientas de implementación.

Cuando el host de la aplicación organiza el inicio de cada aplicación client, usa el comando npm run start. Este comando se define en la sección scripts del paquete en el archivojson para cada aplicación de client. El script start se usa para iniciar la aplicación client en el puerto especificado. Cada aplicación client se basa en un proxy para solicitar el servicio "weatherapi".

El proxy está configurado en:

• Archivo proxy.conf.js del Angularclient.
• Archivo webpack.config.js del Reactclient.
• Archivo vite.config.ts del Vueclient.

Explora el Angularclient

Hay varias modificaciones clave de la plantilla de Angular original. La primera es la adición de un archivo proxy.conf.js. Este archivo se utiliza para intermediar las solicitudes de Angularclient al servicio "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": "",
    },
  },
};

El host de la aplicación .NET.NET Aspire establece la variable de entorno services__weatherapi__http__0, que se usa para resolver el punto de conexión de servicio "weatherapi". La configuración previamente mencionada redirige solicitudes HTTP que empiezan con /api a la dirección URL de destino especificada en la variable de entorno.

La segunda actualización es para el paquete . Archivojson. Este archivo se usa para configurar el Angularclient para que se ejecute en un puerto diferente del puerto predeterminado. Esto se logra mediante la variable de entorno PORT y el paquete de npm de run-script-os para establecer el puerto.

{
  "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": "^18.1.1",
    "@angular/common": "^18.1.1",
    "@angular/compiler": "^18.1.1",
    "@angular/core": "^18.1.1",
    "@angular/forms": "^18.1.1",
    "@angular/platform-browser": "^18.1.1",
    "@angular/platform-browser-dynamic": "^18.1.1",
    "@angular/router": "^18.1.1",
    "rxjs": "~7.8.0",
    "tslib": "^2.6.3",
    "zone.js": "~0.14.8"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^18.1.1",
    "@angular/cli": "^18.1.1",
    "@angular/compiler-cli": "^18.1.1",
    "@types/jasmine": "~5.1.0",
    "jasmine-core": "~5.2.0",
    "karma": "~6.4.3",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.5.3",
    "run-script-os": "^1.1.6"
  }
}

Sección scripts del paquete . El archivojson se utiliza para definir el script start. El comando npm start usa este script para iniciar la aplicación Angularclient. El script start está configurado para utilizar el paquete run-script-os para establecer el puerto, delegando en el comando ng serve el paso del modificador --port correspondiente según la sintaxis del sistema operativo.

Para realizar llamadas HTTP al servicio "weatherapi", la aplicación Angularclient debe configurarse para proporcionar el AngularHttpClient para la inserción de dependencias. Esto se logra mediante el uso de la función auxiliar provideHttpClient al configurar la aplicación en el archivo 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()
  ]
};

Por último, la aplicación Angularclient debe llamar al punto de conexión de /api/WeatherForecast para recuperar los datos de previsión meteorológica. Hay varias actualizaciones HTML, CSS y TypeScript, todas las cuales se realizan en los siguientes archivos:

• app.component.css: Actualizar el CSS para aplicar estilo a la tabla.
• app.component.html: Actualizar el CÓDIGO HTML para mostrar los datos de previsión meteorológica en una tabla.
• app.component.ts: Actualice el TypeScript para llamar al endpoint de /api/WeatherForecast y mostrar los datos en la tabla.

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 aplicación ejecutando

Para visualizar la aplicación Angularclient, vaya al punto de conexión "angular" en el panel de control de .NET Aspire. En la imagen siguiente se muestra la aplicación Angularclient:

Explora el Reactclient

La aplicación React no se escribió con una plantilla y, en su lugar, se escribió manualmente. El código fuente completo se puede encontrar en el repositorio dotnet/aspire-samples. Algunos de los puntos clave de interés se encuentran en el archivo 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 función App es el punto de entrada de la aplicación Reactclient. Usa los enlaces useState y useEffect para administrar el estado de los datos de previsión meteorológica. La API de fetch se usa para realizar una solicitud HTTP al punto de conexión de /api/WeatherForecast. A continuación, la respuesta se convierte en JSON y se establece como el estado de los datos de previsión meteorológica.

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"],
        },
      ],
    },
  };
};

El código anterior define el module.exports de la siguiente manera:

• La propiedad entry se establece en el archivo src/index.js.
• El devServer se basa en un proxy para reenviar solicitudes al servicio "weatherapi", establece el puerto en la variable de entorno PORT y permite todos los hosts.
• El output da como resultado una carpeta dist con un archivo bundle.js.
• El plugins establece el archivo src/index.html como plantilla y expone el archivo favicon.ico.

Las actualizaciones finales son para los siguientes archivos:

• App.css: Actualizar el CSS para aplicar estilo a la tabla.
• App.js: Actualizar JavaScript para llamar al punto de conexión de /api/WeatherForecast y mostrar los datos en la tabla.

React aplicación en ejecución

Para visualizar la aplicación Reactclient, diríjase al endpoint "react" en el tablero de .NET Aspire. En la imagen siguiente se muestra la aplicación Reactclient:

Explora el Vueclient

Hay varias modificaciones clave de la plantilla de Vue original. Las actualizaciones principales fueron la adición de la llamada fetch en el archivo TheWelcome.vue para recuperar los datos de previsión meteorológica desde el punto de conexión /api/WeatherForecast. El siguiente fragmento de código muestra la llamada 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>

Cuando la integración TheWelcome es mounted, llama al endpoint de /api/weatherforecast para recuperar los datos de previsión meteorológica. A continuación, la respuesta se establece como la propiedad de datos forecasts. Para establecer el puerto de server, la aplicación Vueclient usa la variable de entorno PORT. Esto se logra actualizando el archivo 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
      }
    }
  }
})

Además, la configuración de Vite especifica la propiedad server.proxy para reenviar solicitudes al servicio "weatherapi". Esto se logra mediante la variable de entorno services__weatherapi__http__0, que establece el host de la aplicación .NET.NET Aspire.

La actualización final de la plantilla se realiza en el archivo TheWelcome.vue. Este archivo llama al punto de conexión de /api/WeatherForecast para recuperar los datos de previsión meteorológica y muestra los datos de una tabla. Incluye actualizaciones CSS, HTML y TypeScript.

Vue aplicación en ejecución

Para visualizar la aplicación Vueclient, navegue hasta el punto de conexión "vue" en el panel de control .NET Aspire. En la imagen siguiente se muestra la aplicación Vueclient:

Consideraciones sobre la implementación

El código fuente de ejemplo de este artículo está diseñado para ejecutarse localmente. Cada aplicación client se implementa como una imagen de contenedor. El Dockerfile de cada aplicación client se usa para compilar la imagen de contenedor. Cada Dockerfile es idéntico, utilizando un proceso de construcción en varias etapas para crear una imagen de contenedor lista para producción.

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;"]

Las aplicaciones de client están configuradas actualmente para ejecutarse como aplicaciones SPA verdaderas y no están configuradas para ejecutarse en un modo de serverrepresentado por el lado (SSR). Se encuentran detrás de nginx, que se usa para servir los archivos estáticos. Usan un archivo default.conf.template para configurar nginx para reenviar las solicitudes a la aplicación 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;
    }
}

Node.js server consideraciones sobre aplicaciones

Aunque este artículo se centra en las aplicaciones client, es posible que tenga escenarios donde necesite hospedar una aplicación Node.jsserver. Se requiere la misma semántica para hospedar una aplicación Node.jsserver que una aplicación SPA client. El host de la aplicación .NET.NET Aspire requiere una referencia de paquete al Aspire.Hosting.NodeJS paquete NuGet y el código debe llamar a AddNodeApp o AddNpmApp. Estas APIs son útiles para agregar aplicaciones de JavaScript existentes al servidor de aplicaciones .NET.NET Aspire.

Al configurar secretos y pasar variables de entorno a aplicaciones basadas en JavaScript, ya sea client o aplicaciones server, use parámetros. Para obtener más información, vea .NET.NET Aspire: Parámetros externos: secretos.

Utilice el SDK de JavaScript de OpenTelemetry

Para exportar registros, seguimientos y métricas de OpenTelemetry desde una aplicación de Node.jsserver, use el SDK de JavaScript OpenTelemetry.

Para obtener un ejemplo completo de una aplicación de Node.jsserver que utiliza el SDK de JavaScript de OpenTelemetry, puede consultar los ejemplos de código en la página de : muestra de .NET AspireNode.js. Considere el archivo instrumentation.js del ejemplo, que muestra cómo configurar el SDK de JavaScript de OpenTelemetry para exportar registros, seguimientos y métricas:

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();
}

Propina

Para configurar los ajustes de OTEL CORS del dashboard .NET.NET Aspire, consulte la página de configuraciones de OTEL CORS del dashboard .NET.NET Aspire.

Resumen

Aunque hay varias consideraciones que están fuera del ámbito de este artículo, has aprendido a construir proyectos .NET Aspire que usan Node.js y el Administrador de paquetes de Node (npm). También ha aprendido a usar las API de AddNpmApp para hospedar aplicaciones y aquellas de Node.js que se ejecutan desde un paquete de , archivojson, respectivamente. Por último, ha aprendido a usar la CLI de npm para crear Angular, Reacty Vueclient aplicaciones y cómo configurarlas para que se ejecuten en puertos diferentes.

Consulte también

• Ejemplos de código de : .NET Aspire con Angular, Reacty Vue
• Ejemplos de código de : .NET AspireNode.js App