Sdílet prostřednictvím

Orchestrace aplikací Node.js v Aspire

V tomto článku se dozvíte, jak používat Node.js a aplikace Node Package Manager (npm) v projektu Aspire. Ukázková aplikace v tomto článku demonstruje Angular, Reacta Vue uživatelské zkušenosti klientů. Pro podporu těchto scénářů existují následující Aspire rozhraní API—jsou součástí balíčku NuGet Aspire.Hosting.NodeJS:

Rozdíl mezi těmito dvěma rozhraními API je v tom, že první z nich se používá k hostování Node.js aplikací, zatímco druhý se používá k hostování aplikací, které se spouštějí z oddílu souboru scripts, a odpovídajícího příkazu npm run <script-name>.

Tip

Ukázkový zdrojový kód pro tento článek je k dispozici na GitHuba podrobnosti o ukázkách kódu najdete na stránce : Aspire s Angular, React a Vue.

Important

Tento článek se zaměřuje na frontendové prvky Single-Page aplikace (SPA), ale na stránce s ukázkami kódu je k dispozici další ukázka Node.js: AspireNode.js, která ukazuje, jak využít Node.js jako serverovou aplikaci s express.

Prerequisites

Pokud chcete pracovat s Aspire, potřebujete místně nainstalovat následující:

Další informace najdete v tématu Aspire nastavení a nástroje a Aspire SDK.

Kromě toho je potřeba na počítač nainstalovat Node.js. Ukázková aplikace v tomto článku byla vytvořena s Node.js verze 20.12.2 a npm verze 10.5.1. Pokud chcete ověřit verze Node.js a npm, spusťte následující příkazy:

node --version

npm --version

Pokud chcete stáhnout Node.js (včetně npm), podívejte se na stránku stažení Node.js.

Klonování ukázkového zdrojového kódu

Pokud chcete naklonovat ukázkový zdrojový kód z GitHub, spusťte následující příkaz:

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

Po naklonování úložiště přejděte do složky samples/AspireWithJavaScript:

cd samples/AspireWithJavaScript

Z tohoto adresáře je v následujícím seznamu popsáno šest podřízených adresářů.

  • AspireJavaScript.Angular: Aplikace Angular, která využívá rozhraní API pro předpověď počasí a zobrazuje data v tabulce.
  • AspireJavaScript.AppHost: Aspire Projekt, který orchestruje ostatní aplikace v této ukázce. Další informace najdete v tématu Aspire Přehled orchestrace.
  • AspireJavaScript.MinimalApi: Rozhraní API HTTP, které vrací náhodně generovaná data předpovědi počasí.
  • AspireJavaScript.React: Aplikace React, která využívá rozhraní API pro předpověď počasí a zobrazuje data v tabulce.
  • AspireJavaScript.ServiceDefaults: Výchozí sdílený projekt pro Aspire projekty. Další informace najdete v tématu Aspire Výchozí hodnoty služby.
  • AspireJavaScript.Vue: Aplikace Vue, která využívá rozhraní API pro předpověď počasí a zobrazuje data v tabulce.

Nainstalujte závislosti klienta

Ukázková aplikace ukazuje, jak používat klientské aplikace JavaScriptu, které jsou postavené na Node.js. Každá klientská aplikace byla napsána buď pomocí příkazu npm create šablony, nebo ručně. Následující tabulka uvádí příkazy šablony použité k vytvoření každé klientské aplikace spolu s výchozím portem:

Typ aplikace Příkaz Vytvořit šablonu Výchozí port
Angular npm create @angular@latest 4200
React Nepoužíli jste šablonu. PORT env var
Vue npm create vue@latest 5173

Tip

Nemusíte spouštět žádné z těchto příkazů, protože ukázková aplikace už zahrnuje klienty. Místo toho je toto referenční bod, od kterého byli vytvořeni klienti. Další informace naleznete v tématu npm-init.

Abyste mohli aplikaci spustit, musíte nejprve nainstalovat závislosti pro každého klienta. Chcete-li to provést, přejděte do každé složky klienta a spusťte příkaz npm install (nebo alias instalace npm i).

Instalujte závislosti Angular

npm i ./AspireJavaScript.Angular/

Další informace o aplikaci získáte, když prozkoumáte klienta .

Instalujte závislosti React

npm i ./AspireJavaScript.React/

Další informace o aplikaci získáte, když prozkoumáte klienta .

Instalujte závislosti Vue

npm i ./AspireJavaScript.Vue/

Další informace o aplikaci získáte, když prozkoumáte klienta .

Spuštění ukázkové aplikace

Pokud chcete spustit ukázkovou aplikaci, zavolejte příkaz dotnet run s ohledem na orchestrtor AppHost AspireJavaScript.AppHost.csproj jako --project přepínač:

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

ŘídicíAspire panel se spustí ve výchozím prohlížeči a každý koncový bod klientské aplikace se zobrazí ve sloupci Koncové body na stránce Prostředky. Následující obrázek znázorňuje řídicí panel pro tuto ukázkovou aplikaci:

Aspire řídicí panel s více klientskými aplikacemi JavaScriptu

Koncový bod služby weatherapi směřuje na stránku Swagger UI, která dokumentuje rozhraní HTTP API. Každá klientská aplikace tuto službu využívá k zobrazení dat předpovědi počasí. Jednotlivé klientské aplikace můžete zobrazit tak, že přejdete na odpovídající koncový bod na řídicím panelu Aspire . Jejich snímky obrazovek a změny provedené od výchozího bodu šablony jsou podrobně popsané v následujících částech.

Ve stejné relaci terminálu, kterou jste použili ke spuštění aplikace, stiskněte kombinaci kláves Ctrl + C, abyste aplikaci zastavili.

Prozkoumání apphostu

Pokud chcete zjistit, jak se jednotlivé prostředky klientské aplikace orchestrují, podívejte se do projektu AppHost. AppHost vyžaduje Aspire. Hostování balíčku NuGet.NodeJS pro hostování Node.js aplikací:

Soubor projektu také definuje cíl sestavení, který zajistí, že se před sestavením AppHost nainstalují závislosti npm. Kód AppHost (AppHost.cs_) deklaruje prostředky klientské aplikace pomocí AddNpmApp(IDistributedApplicationBuilder, String, String, String, String[]) rozhraní API.

Předchozí kód:

  • Vytvoří DistributedApplicationBuilder.
  • Přidá službu weatherapi jako projekt do AppHost.
    • Označuje koncové body HTTP jako externí.
  • Při odkazování na službu "weatherapi" přidá klientské aplikace "angular", "react" a "vue" jako aplikace npm.
    • Každá klientská aplikace je nakonfigurovaná tak, aby běžela na jiném portu kontejneru, a k určení portu používá proměnnou prostředí PORT.
    • Všechny klientské aplikace také spoléhají na Dockerfile k sestavení image kontejneru a jsou nakonfigurované tak, aby se v manifestu publikování vyjadřovaly jako kontejner z rozhraní API PublishAsDockerFile.

Další informace o sítích vnitřních smyček najdete v přehleduAspire sítí vnitřních smyček. Další informace o nasazování aplikací najdete Aspire v tématu Formát manifestu pro tvůrce nástrojů pro nasazení.

Když AppHost orchestruje spuštění každé klientské aplikace, použije příkaz npm run start . Tento příkaz je definován v scripts části souboru package.json pro každou klientskou aplikaci. Skript start slouží ke spuštění klientské aplikace na zadaném portu. Každá klientská aplikace spoléhá na proxy server k vyžádání služby weatherapi.

Proxy server je nakonfigurovaný v:

  • Soubor proxy.conf.js pro klienta Angular.
  • Soubor webpack.config.js pro klienta React.
  • Soubor vite.config.ts pro klienta Vue.

Prozkoumání klienta Angular

Původní šablona Angular obsahuje několik klíčových úprav. První je přidání souboru proxy.conf.js. Tento soubor se používá k proxy žádostem z klienta Angular do služby weatherapi.

Aspire AppHost nastaví WEATHERAPI_HTTPS a WEATHERAPI_HTTP proměnné prostředí, které se používají k rozlišení koncových bodů služby "weatherapi". Předchozí konfigurace proxy serverů přesměrovává HTTP požadavky, které začínají na /api, na cílovou adresu URL zadanou s proměnnou prostředí.

Potom do souboruangular.json zahrňte proxy soubor. serve Aktualizujte cíl tak, aby zahrnoval proxyConfig možnost odkazující na vytvořený souborproxy.conf.js. Rozhraní příkazového řádku Angular nyní použije proxy konfiguraci při obsluze Angular klientské aplikace.

Třetí aktualizací je soubor package.json. Tento soubor slouží ke konfiguraci klienta Angular tak, aby běžel na jiném portu než na výchozím portu. Toho dosáhnete pomocí proměnné prostředí PORT a balíčku run-script-os npm k nastavení portu.

Část scripts souboru package.json slouží k definování skriptu start. Tento skript používá příkaz npm start ke spuštění Angular klientské aplikace. Skript start je nakonfigurovaný tak, aby pomocí balíčku run-script-os nastavil port, který deleguje na příkaz ng serve a předává příslušný přepínač --port na základě syntaxe odpovídající danému operačnímu systému.

Aby bylo možné provádět volání HTTP do služby weatherapi, musí být klientská aplikace Angular nakonfigurovaná tak, aby poskytovala AngularHttpClient pro injektáž závislostí. Toho dosáhnete pomocí pomocné funkce provideHttpClient při konfiguraci aplikace v souboru app.config.ts.

Nakonec musí klientská aplikace Angular zavolat koncový bod /api/WeatherForecast, aby načetla data předpovědi počasí. Existuje několik aktualizací HTML, CSS a TypeScript, z nichž všechny jsou provedeny v následujících souborech:

spuštěná aplikace Angular

Pokud chcete vizualizovat klientskou aplikaci Angular, přejděte na "angular" v řídicím panelu Aspire. Následující obrázek znázorňuje Angular klientskou aplikaci:

Angular klientská aplikace s falešnými předpověďmi dat o počasí zobrazených jako tabulka.

Prozkoumání klienta React

Aplikace React nebyla napsána pomocí šablony a místo toho byla napsána ručně. Kompletní zdrojový kód najdete v úložišti dotnet/aspire-samples. Některé klíčové body zájmu najdete v souboru src/App.js:

Funkce App je vstupním bodem klientské aplikace React. Používá hooky useState a useEffect ke správě stavu dat o předpovědi počasí. Rozhraní API fetch slouží k odeslání HTTP požadavku na koncový bod /api/WeatherForecast. Odpověď se pak převede na JSON a nastaví jako stav dat pro předpověď počasí.

Předchozí kód definuje module.exports následujícím způsobem:

  • Vlastnost entry je nastavena na soubor src/index.js.
  • devServer spoléhá na proxy server, který předává požadavky ke službě "weatherapi", nastaví port na proměnnou prostředí PORT a povolí všechny hostitele.
  • Výsledkem output je složka dist se souborem bundle.js.
  • Sada plugins nastavila soubor src/index.html jako šablonu a zpřístupnila soubor favicon.ico.

Poslední aktualizace se týkají následujících souborů:

spuštěná aplikace React

Pokud chcete vizualizovat React klientskou aplikaci, přejděte na koncový bod React na řídicím panelu Aspire. Následující obrázek znázorňuje React klientskou aplikaci:

React klientská aplikace s falešnými předpověďmi dat o počasí zobrazených jako tabulka.

Prozkoumání klienta Vue

Původní šablona Vue obsahuje několik klíčových úprav. Primární aktualizací bylo přidání volání fetch v souboru TheWelcome.vue pro načtení dat předpovědi počasí z endpointu /api/WeatherForecast. Následující fragment kódu ukazuje volání fetch:

Jakmile je integrace TheWelcomemounted, zavolá se koncový bod /api/weatherforecast k získání dat o předpovědi počasí. Odpověď se pak nastaví jako vlastnost dat forecasts. K nastavení portu serveru používá klientská aplikace Vue proměnnou prostředí PORT. Toho dosáhnete aktualizací souboru vite.config.ts:

Kromě toho konfigurace Vite určuje vlastnost server.proxy pro předávání požadavků do služby weatherapi. Toho dosáhnete pomocí proměnných prostředí WEATHERAPI_HTTPS a WEATHERAPI_HTTP, které nastaví Aspire AppHost.

Poslední aktualizace ze šablony se provede do souboru TheWelcome.vue. Tento soubor volá koncový bod /api/WeatherForecast, který načte data předpovědi počasí a zobrazí data v tabulce. Zahrnuje aktualizace CSS, HTML a TypeScript.

spuštěná aplikace Vue

Pokud chcete zobrazit aplikaci klienta Vue, přejděte v řídicím panelu Aspire na endpoint "vue". Následující obrázek znázorňuje Vue klientskou aplikaci:

Vue klientská aplikace s falešnými předpověďmi dat o počasí zobrazených jako tabulka.

Aspekty nasazení

Ukázkový zdrojový kód pro tento článek je navržený tak, aby běžel místně. Každá klientská aplikace se nasadí jako image kontejneru. K sestavení image kontejneru se používá Dockerfile pro každou klientskou aplikaci. Každá Dockerfile je identická a používá vícestupňové sestavení k vytvoření obrazu kontejneru připraveného pro produkci.

Klientské aplikace jsou aktuálně nakonfigurované tak, aby běžely jako skutečné aplikace SPA a nejsou nakonfigurované tak, aby běžely v režimu vykreslování na straně serveru (SSR). Sedí za nginx, který slouží k obsluhě statických souborů. Používají soubor default.conf.template k nastavení nginx tak, aby směroval požadavky na klientskou aplikaci.

Důležité informace o serverové aplikaci Node.js

I když se tento článek zaměřuje na klientské aplikace, můžete mít scénáře, ve kterých potřebujete hostovat serverovou aplikaci Node.js. Stejná sémantika se vyžaduje k hostování serverové aplikace Node.js jako klientská aplikace SPA. AppHost Aspire vyžaduje odkaz na balíček Aspire.Hosting.NodeJS NuGet a kód potřebuje zavolat buď AddNodeApp, nebo AddNpmApp. Tato rozhraní API jsou užitečná pro přidání existujících javascriptových aplikací do Aspire AppHostu.

Při konfiguraci tajných kódů a předávání proměnných prostředí aplikacím založeným na JavaScriptu použijte parametry bez ohledu na to, jestli se jedná o klientské nebo serverové aplikace. Další informace najdete v tématu Aspire: Externí parametry – tajné kódy.

Použití sady OpenTelemetry JavaScript SDK

K exportu OpenTelemetry protokolů, trasování a metrik ze serverové aplikace Node.js použijete OpenTelemetry JavaScript SDK.

Úplný příklad serverové aplikace Node.js pomocí sady OpenTelemetry JavaScript SDK najdete na stránce ukázky kódu : AspireNode.js. Podívejte se na ukázkový soubor instrumentation.js, který ukazuje, jak nakonfigurovat sadu OpenTelemetry JavaScript SDK pro export protokolů, tras a metrik.

Tip

Informace o konfiguraci nastavení řídicího panelu Aspire OTEL CORS najdete na stránce nastavení řídicího paneluAspire OTEL CORS.

Summary

I když existuje několik aspektů, které jsou nad rámec tohoto článku, naučili jste se vytvářet Aspire projekty, které používají Node.js a Node Package Manager (npm). Také jste se naučili používat rozhraní API AddNpmApp k hostování Node.js aplikací a aplikací, které se spouštějí z package.json souboru. Nakonec jste zjistili, jak pomocí rozhraní příkazového řádku npm vytvořit Angular, Reacta Vue klientské aplikace a jak je nakonfigurovat tak, aby běžely na různých portech.

Viz také

  • Last updated on