Megosztás a következőn keresztül:

Node.js-alkalmazások vezénylése Aspire-ben

Ebből a cikkből megtudhatja, hogyan lehet használni Node.js és a Node Package Manager (npm) alkalmazásokat egy Aspire projektben. A cikkben szereplő mintaalkalmazás Angular, Reactés Vue ügyfélélményt mutat be. Az alábbi Aspire API-k támogatják ezeket a forgatókönyveket – és a Aspire.Hosting.NodeJS NuGet-csomag részét képezik.

A két API közötti különbség az, hogy az előbbi Node.js alkalmazások üzemeltetésére szolgál, míg az utóbbi egy package.json fájl scripts szakaszából végrehajtott alkalmazások üzemeltetésére szolgál– és a megfelelő npm run <script-name> parancsra.

Tip

A cikk forráskód mintája a GitHuboldalon érhető el, és a kódminták oldalán további részletek találhatók: Aspire, Angular, React, illetve Vue, oldalon.

Important

Bár ez a cikk az Single-Page alkalmazás (SPA) előtérbitjeire összpontosít, a kódmintákban további Node.js minta érhető el: AspireNode.js minta oldalon, amely bemutatja, hogyan használható Node.js kiszolgálóalkalmazásként expressz.

Prerequisites

A használatához Aspirea következő helyi telepítésre van szükség:

További információ: Aspire beállítás, eszközhasználat és Aspire SDK.

Emellett telepítenie kell Node.js a gépére. A cikkben szereplő mintaalkalmazás Node.js 20.12.2-es és 10.5.1-es npm-es verzióval készült. A Node.js- és npm-verziók ellenőrzéséhez futtassa a következő parancsokat:

node --version

npm --version

A Node.js letöltéséhez (beleértve a npm), látogasson el a(z) Node.js letöltési oldalra.

Minta forráskód klónozása

A minta forráskódjának GitHub-ból való klónozásához futtassa a következő parancsot:

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

Az adattár klónozása után lépjen a minták/AspireWithJavaScript mappába:

cd samples/AspireWithJavaScript

Ebből a könyvtárból hat gyermekkönyvtár található a következő listában:

  • AspireJavaScript.Angular: Egy Angular alkalmazás, amely az időjárás-előrejelzési API-t használja, és megjeleníti az adatokat egy táblában.
  • AspireJavaScript.AppHost: A Aspire minta többi alkalmazását vezénylő projekt. További információért lásd az Aspire orchesztráció áttekintése.
  • AspireJavaScript.MinimalApi: Egy HTTP API, amely véletlenszerűen generált időjárás-előrejelzési adatokat ad vissza.
  • AspireJavaScript.React: Egy React alkalmazás, amely az időjárás-előrejelzési API-t használja, és megjeleníti az adatokat egy táblában.
  • AspireJavaScript.ServiceDefaults: A projektek alapértelmezett megosztott projektje Aspire . További információ: Aspire szolgáltatás alapértelmezései.
  • AspireJavaScript.Vue: Egy Vue alkalmazás, amely az időjárás-előrejelzési API-t használja, és megjeleníti az adatokat egy táblában.

Ügyfélfüggőségek telepítése

A mintaalkalmazás bemutatja, hogyan használhatók a Node.jsbeépített JavaScript-ügyfélalkalmazások. Minden ügyfélalkalmazást egy npm create sablonparancs használatával vagy manuálisan írtak. Az alábbi táblázat felsorolja az egyes ügyfélalkalmazások létrehozásához használt sablonparancsokat, valamint az alapértelmezett portot:

Alkalmazás típusa Sablon létrehozása parancs Alapértelmezett port
Angular npm create @angular@latest 4200
React Nem használt sablont. PORT env var
Vue npm create vue@latest 5173

Tip

Ezen parancsok egyikét sem kell futtatnia, mivel a mintaalkalmazás már tartalmazza az ügyfeleket. Ehelyett ez egy referenciapont, ahonnan az ügyfeleket létrehozták. További információ: npm-init.

Az alkalmazás futtatásához először telepítenie kell az egyes ügyfelek függőségeit. Ehhez lépjen be az egyes ügyfélmappákba, és futtassa a npm install (vagy a telepítési alias npm i) parancsokat.

Angular függőségek telepítése

npm i ./AspireJavaScript.Angular/

Az Angular alkalmazással kapcsolatos további információkért lásd Angular ügyfélalkalmazáscímű témakört.

React függőségek telepítése

npm i ./AspireJavaScript.React/

Az React alkalmazással kapcsolatos további információkért lásd React ügyfélalkalmazáscímű témakört.

Vue függőségek telepítése

npm i ./AspireJavaScript.Vue/

Az Vue alkalmazással kapcsolatos további információkért lásd Vue ügyfélalkalmazáscímű témakört.

A mintaalkalmazás futtatása

A mintaalkalmazás futtatásához hívja meg a dotnet-futtatási parancsot a vezénylő AppHost AspireJavaScript.AppHost.csproj kapcsolóként --project :

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

Az Aspire irányítópult az alapértelmezett böngészőben indul el, és minden ügyfélalkalmazás-végpont megjelenik az Erőforrások lap Végpontok oszlopában. Az alábbi képen a mintaalkalmazás irányítópultja látható:

Aspire irányítópult több JavaScript-ügyfélalkalmazással.

A weatherapi szolgáltatásvégpont a HTTP API-t dokumentáló Swagger felhasználói felületi lapra oldódik fel. Minden ügyfélalkalmazás ezt a szolgáltatást használja az időjárás-előrejelzési adatok megjelenítéséhez. Az egyes ügyfélalkalmazásokat az irányítópult megfelelő végpontjára Aspire navigálva tekintheti meg. Képernyőképeik és a sablon kiindulási pontjáról végrehajtott módosítások részletes leírása a következő szakaszokban található.

Az alkalmazás futtatásához használt terminálmunkamenetben nyomja le a Ctrl + C billentyűkombinációt az alkalmazás leállításához.

Az AppHost felfedezése

Az egyes ügyfélalkalmazás-erőforrások vezényléséhez tekintse meg az AppHost-projektet. Az AppHost megköveteli a Aspire. Hosting.NodeJS NuGet-csomag alkalmazások üzemeltetéséhez Node.js :

A projektfájl egy buildcélt is meghatároz, amely biztosítja az npm-függőségek telepítését az AppHost létrehozása előtt. Az AppHost-kód (AppHost.cs_) deklarálja az ügyfélalkalmazás erőforrásait az AddNpmApp(IDistributedApplicationBuilder, String, String, String, String[]) API használatával.

Az előző kód:

  • Létrehoz egy DistributedApplicationBuilder.
  • Projektként hozzáadja a "weatherapi" szolgáltatást az AppHosthoz.
    • A HTTP-végpontokat külsőként jelöli meg.
  • A "weatherapi" szolgáltatásra való hivatkozással npm-alkalmazásként adja hozzá az "angular", "react" és "vue" ügyfélalkalmazásokat.
    • Minden ügyfélalkalmazás úgy van konfigurálva, hogy egy másik tárolóporton fusson, és a PORT környezeti változó használatával határozza meg a portot.
    • Minden ügyfélalkalmazás támaszkodik egy Dockerfile-ra a konténerkép létrehozásához, és úgy van konfigurálva, hogy a közzétételi jegyzékben a PublishAsDockerFile API konténereként fejezze ki magát.

A belső hurkos hálózatkezeléssel kapcsolatos további információkért tekintse meg Aspire a belső hurok hálózatkezelésének áttekintését. Az alkalmazások üzembe helyezésével kapcsolatos további információkért tekintse meg Aspire az üzembehelyezési eszközkészítők jegyzékformátumát.

Amikor az AppHost vezénylik az egyes ügyfélalkalmazások indítását, a parancsot npm run start használja. Ez a parancs az egyes ügyfélalkalmazások scripts fájljának szakaszában van definiálva. A start szkripttel indíthatja el az ügyfélalkalmazást a megadott porton. Minden ügyfélalkalmazás egy proxyra támaszkodik a "weatherapi" szolgáltatás kéréséhez.

A proxy a következőben van konfigurálva:

  • A proxy.conf.js fájl a Angular ügyfélnek.
  • A webpack.config.js fájl a React klienshez.
  • A vite.config.ts fájl a Vue-ügyfél számára.

Az Angular-ügyfél megismerése

Az eredeti Angular-sablonhoz képest számos kulcsfontosságú módosítást hajtottak végre. Az első egy proxy.conf.js fájl hozzáadása. Ez a fájl a Angular-ügyféltől a "weatherapi" szolgáltatásba irányuló kérelmek proxyzására szolgál.

Az Aspire AppHost beállítja a WEATHERAPI_HTTPS és WEATHERAPI_HTTP környezeti változókat, amelyek a "weatherapi" szolgáltatásvégpontok elosztására szolgálnak. Az előző konfiguráció a környezeti változóban megadott cél URL-címre /api kezdődő HTTP-kéréseket proxyz.

Ezután vegye fel a proxyfájlt a angular.json fájlba. Frissítse a serve célhelyet a proxyConfig beállítás belefoglalásához, hivatkozva a létrehozott proxy.conf.js fájlra. A Angular parancssori felület mostantól a proxykonfigurációt fogja használni a Angular ügyfélalkalmazás kiszolgálása során.

A harmadik frissítés a package.json fájlra. Ezzel a fájllal konfigurálható, hogy a Angular-ügyfél az alapértelmezett porttól eltérő porton fusson. Ez a PORT környezeti változó és a run-script-os npm-csomag használatával érhető el a port beállításához.

A scripts fájl szakasza határozza meg a start szkriptet. Ezt a szkriptet használja a npm start parancs a Angular ügyfélalkalmazás elindításához. A start szkript úgy van konfigurálva, hogy a run-script-os csomag használatával állítsa be a portot, amely az operációs rendszernek megfelelő szintaxis alapján átadja a megfelelő ng serve kapcsolót a --port parancsnak.

Ahhoz, hogy HTTP-hívásokat lehessen indítani a "weatherapi" szolgáltatáshoz, a Angular ügyfélalkalmazást úgy kell konfigurálni, hogy biztosítsa a függőséginjektáláshoz szükséges AngularHttpClient. Ez a provideHttpClient segédfüggvény használatával érhető el, miközben konfigurálja az alkalmazást a app.config.ts fájlban.

Végül az Angular ügyfélalkalmazásnak meg kell hívnia a /api/WeatherForecast végpontot az időjárás-előrejelzés adatainak lekéréséhez. Számos HTML-, CSS- és TypeScript-frissítés érhető el, amelyek mindegyike a következő fájlokhoz készült:

Angular alkalmazás fut

Az Angular ügyfélalkalmazás megtekintéséhez navigáljon az "angular" végpontra az Aspire irányítópulton. Az alábbi képen az Angular ügyfélalkalmazás látható:

Angular táblaként megjelenített hamis előrejelzési időjárási adatokkal rendelkező ügyfélalkalmazást.

Az React-ügyfél megismerése

A React alkalmazás nem sablonnal lett megírva, hanem manuálisan lett megírva. A teljes forráskód a dotnet/aspire-samples adattárban található. Néhány fontos pont az src/App.js fájlban található:

A App függvény a React ügyfélalkalmazás belépési pontja. A useState és useEffect horgok használatával kezeli az időjárás-előrejelzési adatok állapotát. A fetch API-val HTTP-kérést lehet küldeni a /api/WeatherForecast végpontra. A válasz ezután JSON lesz, és az időjárás-előrejelzési adatok állapotaként lesz beállítva.

Az előző kód a következőképpen határozza meg a module.exports:

  • A entry tulajdonság az src/index.js fájlra van állítva.
  • A devServer egy proxy segítségével továbbítja a kéréseket a "weatherapi" szolgáltatásnak, a portot a PORT környezeti változó alapján állítja be, és minden gazdagéphez engedélyezi a hozzáférést.
  • A output egy dist mappában egy bundle.js fájlt eredményez.
  • A plugins sablonként állítsa be a src/index.html fájlt, és tegye közzé a favicon.ico fájlt.

A végleges frissítések a következő fájlokra kerülnek:

React alkalmazás fut

Az React ügyfélalkalmazás vizualizációjához lépjen a "react" végpontra a Aspire irányítópulton. Az alábbi képen az React ügyfélalkalmazás látható:

React táblaként megjelenített hamis előrejelzési időjárási adatokkal rendelkező ügyfélalkalmazást.

Az Vue-ügyfél megismerése

Az eredeti Vue-sablonhoz képest számos kulcsfontosságú módosítást hajtottak végre. Az elsődleges frissítések a fetch fájlban található hívás hozzáadása voltak, hogy lekérje az időjárás-előrejelzési adatokat a /api/WeatherForecast végpontról. A következő kódrészlet a fetch hívást mutatja be:

Mivel a TheWelcome integráció mounted, meghívja a /api/weatherforecast végpontot az időjárás-előrejelzés adatainak lekéréséhez. A válasz ezután forecasts adattulajdonságként van beállítva. A kiszolgálóport beállításához az Vue ügyfélalkalmazás a PORT környezeti változót használja. Ez a vite.config.ts fájl frissítésével érhető el:

Emellett a Vite konfiguráció megadja a server.proxy tulajdonságot, amely a kéréseket a "weatherapi" szolgáltatásnak továbbítja. Ez az WEATHERAPI_HTTPS AppHost által WEATHERAPI_HTTP beállított környezeti és Aspire környezeti változók használatával érhető el.

A sablon végleges frissítése a TheWelcome.vue fájlba történik. Ez a fájl meghívja a /api/WeatherForecast végpontot az időjárás-előrejelzés adatainak lekéréséhez, és megjeleníti az adatokat egy táblában. Tartalmazza CSS-, HTML- és TypeScript-frissítéseket.

Vue alkalmazás fut

Az Vue ügyfélalkalmazás vizualizációjához lépjen a "vue" végpontra a Aspire irányítópulton. Az alábbi képen az Vue ügyfélalkalmazás látható:

Vue táblaként megjelenített hamis előrejelzési időjárási adatokkal rendelkező ügyfélalkalmazást.

Üzembe helyezési szempontok

A cikk minta forráskódja helyileg futtatható. Minden ügyfélalkalmazás tárolólemezképként lesz üzembe helyezve. A Dockerfile minden ügyfélalkalmazás esetében a konténerkép létrehozásához használatos. Minden Dockerfile azonos, és egy többlépcsős build eredményeként termelésre kész tárolóképet hoz létre.

Az ügyfélalkalmazások jelenleg úgy vannak konfigurálva, hogy valódi SPA-alkalmazásként fussanak, és nincsenek kiszolgálóoldali renderelt (SSR) módban való futtatásra konfigurálva. nginxmögött ülnek, amely a statikus fájlok kiszolgálására szolgál. Egy default.conf.template fájlt használnak nginx konfigurálásához az ügyfélalkalmazásnak küldött proxykérésekhez.

Node.js kiszolgálóalkalmazással kapcsolatos szempontok

Bár ez a cikk az ügyfélalkalmazásokra összpontosít, előfordulhat, hogy olyan forgatókönyvek is vannak, amelyekben egy Node.js kiszolgálóalkalmazást kell üzemeltetnie. Ugyanazok a szemantikák szükségesek egy Node.js kiszolgálóalkalmazás üzemeltetéséhez, mint egy SPA-ügyfélalkalmazás. Az Aspire AppHost csomaghivatkozást igényel a Aspire.Hosting.NodeJS NuGet csomagra, és a kódnak kell hívnia vagy a AddNodeApp, vagy a AddNpmApp. Ezek az API-k akkor hasznosak, ha meglévő JavaScript-alkalmazásokat ad hozzá az Aspire AppHosthoz.

Ha titkos kulcsokat konfigurál, és környezeti változókat ad át JavaScript-alapú alkalmazásoknak, legyenek azok ügyfél- vagy kiszolgálóalkalmazások, használjon paramétereket. További információ Aspire: Külső paraméterek – titkos kódok.

A OpenTelemetry JavaScript SDK használata

Ha OpenTelemetry naplókat, nyomkövetéseket és metrikákat szeretne exportálni egy Node.js kiszolgálóalkalmazásból, használja a OpenTelemetry JavaScript SDK.

A Node.js JavaScript SDK-t használó OpenTelemetry kiszolgálóalkalmazás teljes példájáért tekintse meg a kódmintákat: AspireNode.js minta oldalt. Vegye figyelembe a minta instrumentation.js fájlját, amely bemutatja, hogyan konfigurálhatja a OpenTelemetry JavaScript SDK-t naplók, nyomkövetések és metrikák exportálására:

Tip

Az irányítópult OTEL CORS-beállításainak Aspire konfigurálásához tekintse meg az Aspire irányítópult OTEL CORS-beállítások lapját.

Summary

Bár vannak olyan szempontok, amelyek a cikk hatókörén kívül vannak, megtudhatta, hogyan hozhat létre Aspire projekteket, amelyek Node.js-et és a Node Package Manager-t (npm) használják. Azt is megtanulta, hogyan használhatja a AddNpmApp API-kat Node.js alkalmazások üzemeltetésére és a package.json fájlból végrehajtott alkalmazások esetében. Végül megtanulta, hogyan hozhat létre npm, Angularés React ügyfélalkalmazásokat a Vue parancssori felülettel, és hogyan konfigurálhatja őket különböző portokon való futtatásra.

Lásd még

  • Last updated on