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

En este artículo, aprenderás a usar las herramientas Node.js y Node Package Manager (npm) en un proyecto de .NET.NET Aspire. La aplicación de ejemplo en este artículo demuestra las experiencias del cliente de Angular, Reacty Vue. Existen las siguientes APIs de .NET.NET Aspire para proveer soporte a estos escenarios y forman parte del paquete NuGet Aspire.Hosting.NodeJS.

• 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 la sección de un archivo de scripts 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 los elementos de front-end de Single-Page App (SPA), hay un ejemplo de Node.js adicional disponible en la página de ejemplo : .NET AspireNode.js, que muestra cómo usar Node.js como aplicación de servidor 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

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

La aplicación de ejemplo muestra cómo usar aplicaciones cliente de JavaScript basadas en Node.js. Cada aplicación cliente se escribió 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 cliente, 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.	Variable de entorno PORT
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 realidad, se trata de un punto de referencia desde el que se crearon los clientes. Para obtener más información, vea npm-init.

Para ejecutar la aplicación, primero debe instalar las dependencias para cada cliente. Para ello, vaya a cada carpeta de cliente 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, véase donde puede explorar el cliente Angular.

Instalación de dependencias de React

npm i ./AspireJavaScript.React/

Para obtener más información sobre la aplicación React, véase donde puede explorar el cliente React.

Instalación de dependencias de Vue

npm i ./AspireJavaScript.Vue/

Para obtener más información sobre la aplicación Vue, véase donde puede explorar el cliente Vue.

Ejecución de la aplicación de ejemplo

Para ejecutar la aplicación de ejemplo, ejecute el comando dotnet run con el host de orquestador de la aplicación AspireJavaScript.AppHost.csproj como opción --project.

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

El panel de control .NET.NET Aspire se inicia en tu navegador predeterminado, y cada punto de conexión de la aplicación cliente se muestra en la columna Puntos de conexión de en 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 aplicación cliente consume este servicio para mostrar los datos de previsión meteorológica. Para ver cada aplicación de cliente, vaya al punto de conexión correspondiente en el panel de control de .NET.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 cliente, 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.1.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.1.0" />
    <PackageReference Include="Aspire.Hosting.NodeJs" Version="9.1.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 cliente 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.
• Con una referencia al servicio "weatherapi", agrega las aplicaciones cliente "angular", "react" y "vue" como aplicaciones npm.
  • Cada aplicación cliente está configurada para ejecutarse en un puerto de contenedor diferente y usa la variable de entorno PORT para determinar el puerto.
  • Todas las aplicaciones cliente también dependen de un Dockerfile para construir su imagen de contenedor y están configuradas para aparecer en el manifiesto de publicación como un contenedor de la API 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 cliente, usa el comando npm run start. Este comando se define en la sección scripts del archivo package.json para cada aplicación cliente. El script start se usa para iniciar la aplicación cliente en el puerto especificado. Cada aplicación cliente se basa en un proxy para solicitar el servicio "weatherapi".

El proxy está configurado en:

• Archivo proxy.conf.js para el cliente de Angular.
• Archivo webpack.config.js para el cliente de React.
• Archivo vite.config.ts para el cliente Vue.

Explora el cliente de Angular

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 como intermediario para las solicitudes del cliente de Angular 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.

A continuación, incluya el archivo proxy en el archivo angular.json. Actualice el destino serve para incluir la opción proxyConfig, haciendo referencia al archivo proxy.conf.js creado. La CLI de Angular ahora usará la configuración del proxy mientras atiende la aplicación cliente Angular.

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "configurations": {
    "production": {
      "buildTarget": "weather:build:production"
    },
    "development": {
      "buildTarget": "weather:build:development"
    }
  },
  "defaultConfiguration": "development",
  "options": {
    "proxyConfig": "proxy.conf.js"
  }
},

La tercera actualización es para el archivo package.json. Este archivo se usa para configurar el cliente de Angular para que se ejecute en un puerto diferente al 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": "^19.2.1",
    "@angular/common": "^19.2.1",
    "@angular/compiler": "^19.2.1",
    "@angular/core": "^19.2.1",
    "@angular/forms": "^19.2.1",
    "@angular/platform-browser": "^19.2.1",
    "@angular/platform-browser-dynamic": "^19.2.1",
    "@angular/router": "^19.2.1",
    "rxjs": "~7.8.2",
    "tslib": "^2.8.1",
    "zone.js": "~0.15.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^19.2.1",
    "@angular/cli": "^19.2.1",
    "@angular/compiler-cli": "^19.2.1",
    "@types/jasmine": "~5.1.7",
    "jasmine-core": "~5.6.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.8.2",
    "run-script-os": "^1.1.6"
  }
}

La sección scripts del archivo package.json se usa para definir el script de start. El comando npm start usa este script para iniciar la aplicación cliente de Angular. El script start está configurado para utilizar el paquete run-script-os para establecer el puerto, lo cual delega al comando ng serve pasar el modificador --port adecuado según la sintaxis apropiada para el sistema operativo.

Para realizar llamadas HTTP al servicio "weatherapi", la aplicación cliente de Angular debe configurarse para proporcionar el AngularHttpClient para la inyecció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 cliente Angular 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 cliente de Angular, vaya al punto final "angular" en el panel de .NET Aspire. En la imagen siguiente se muestra la aplicación cliente Angular:

Explora el cliente de React

La aplicación React no se escribió con una plantilla y, en su lugar, se escribió manualmente. Puede encontrar el código fuente completo 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 cliente React. 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", configura el puerto según la variable de entorno PORT y permite conexiones de 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 ejecutando

Para visualizar la aplicación cliente de React, navegue al endpoint "react" en el tablero de .NET Aspire. En la imagen siguiente se muestra la aplicación cliente React:

Explora el cliente de Vue

Hay varias modificaciones clave de la plantilla de Vue original. Las principales actualizaciones consistieron en la adición de la llamada fetch en el archivo TheWelcome.vue para recuperar los datos de previsión meteorológica del endpoint /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 /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 del servidor, la aplicación cliente de Vue 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 ejecutando

Para visualizar la aplicación cliente Vue, vaya al terminal "vue" en el tablero de mandos de .NET Aspire. En la imagen siguiente se muestra la aplicación cliente Vue:

Consideraciones sobre la implementación

El código fuente de ejemplo de este artículo está diseñado para ejecutarse localmente. Cada aplicación cliente se implementa como una imagen de contenedor. El Dockerfile para cada aplicación cliente se usa para construir la imagen del 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 cliente están actualmente configuradas para ejecutarse como aplicaciones SPA y no están configuradas para ejecutarse en un modo de renderizado del lado del servidor (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 y redireccionar las solicitudes a la aplicación del cliente.

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

consideraciones sobre las aplicaciones de servidor de Node.js

Aunque este artículo se centra en las aplicaciones cliente, es posible que tenga escenarios en los que necesite hospedar una aplicación de servidor Node.js. Se requiere la misma semántica para alojar una aplicación de servidor Node.js como una aplicación cliente SPA. El host de la aplicación .NET.NET Aspire requiere una referencia de paquete al paquete NuGet Aspire.Hosting.NodeJS 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, tanto si son aplicaciones cliente como servidor, usan 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 servidor de Node.js, use el SDK de JavaScript OpenTelemetry.

Para obtener un ejemplo completo de una aplicación de servidor de Node.js mediante el SDK de JavaScript de OpenTelemetry, puede consultar la página de ejemplos de código de : .NET AspireNode.js ejemplo. 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 las configuraciones de OTEL CORS del panel de control .NET.NET Aspire, consulte la página de configuraciones de OTEL CORS del panel de control .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 aplicaciones que utilizan Node.js y que se ejecutan desde un archivo package.json, respectivamente. Por último, ha aprendido a usar la CLI de npm para crear Angular, Reacty Vue aplicaciones cliente 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