使用 Aspire 编排 Angular、React 与 Vue 前端多框架 Node.js 应用集成实战指南【免费下载链接】aspireAspire is the tool for code-first, extensible, observable dev and deploy.项目地址: https://gitcode.com/GitHub_Trending/as/aspireAspire.NET Aspire的核心能力是代码优先、可扩展、可观测的云原生应用编排而本指南聚焦其中一条高频实战路径如何在同一个 Aspire 应用中同时接入 Angular、React、Vue 等多个 JavaScript 前端并让它们与后端 API 服务无缝协作。仓库中的 playground/AspireWithJavaScript 示例正是这一场景的完整可运行样板。读完本文你将掌握AddJavaScriptApp/AddViteApp/AddNodeApp等编排 API 的用法、PORT环境变量的跨平台传递机制、前端如何借助服务发现定位后端 API以及从开发模式到 Docker 化发布的完整配置方法。示例全景四个服务组成的多前端应用本示例应用由四个服务组成构成一个典型的一个后端、三个前端架构AspireJavaScript.MinimalApi一个 HTTP API 服务返回随机生成的天气预报数据对应 MinimalApi 的 AppHost.cs 中的/api/weatherforecast端点AspireJavaScript.AngularAngular 应用消费天气 API 并将数据以表格形式展示AspireJavaScript.ReactReact 应用消费天气 API 并将数据以表格形式展示AspireJavaScript.VueVue 应用消费天气 API 并将数据以表格形式展示。三个前端各自使用不同的框架与构建工具Angular CLI、webpack-dev-server、Vite但都通过同一条路径接入 Aspire 编排。这种多框架并存的布局非常适合验证 Aspire 对 JavaScript 生态的通用集成能力也是你日后接入自己团队技术栈时的直接参照。前置条件运行该示例需要以下环境.NET 8 SDK用于构建运行 AppHost 与 MinimalApi 后端Docker Desktop用于容器化发布相关场景如PublishAsDockerFile生成的镜像Node.js版本至少为 20.7.0。注意Angular 与 React 子项目在package.json的engines字段中还声明了node 20.12低于该版本 npm 会给出警告Visual Studio 2022可选仅在需要 IDE 图形化调试时使用。运行与体验三步看到完整效果1. 安装前端依赖在启动 AppHost 之前需要先在每个 JavaScript 子项目目录中执行依赖安装cd playground/AspireWithJavaScript/AspireJavaScript.Angular npm install cd playground/AspireWithJavaScript/AspireJavaScript.React npm install cd playground/AspireWithJavaScript/AspireJavaScript.Vue npm install cd playground/AspireWithJavaScript/AspireJavaScript.Vite npm install cd playground/AspireWithJavaScript/AspireJavaScript.NodeApp npm install各前端目录下都带有package-lock.json因此也可以在 AppHost 中通过WithNpm(installCommand: ci)让编排器在启动阶段自动执行npm ci见下文代码详解。2. 启动 AppHost直接运行 AppHost 项目dotnet run --project playground/AspireWithJavaScript/AspireJavaScript.AppHost3. 在仪表盘中访问三个前端应用启动后Aspire Dashboard 会自动在浏览器中打开。从仪表盘资源列表中你可以分别导航到 Angular、React、Vue 三个前端应用它们都指向同一个天气 API 并以表格渲染数据AngularReactVue编排核心AppHost 中如何声明 JavaScript 应用整个编排逻辑集中在 AspireJavaScript.AppHost/AppHost.cs。先看后端服务声明var builder DistributedApplication.CreateBuilder(args); var weatherApi builder.AddProjectProjects.AspireJavaScript_MinimalApi(weatherapi) .WithExternalHttpEndpoints();WithExternalHttpEndpoints()将该 API 的端点暴露到 Aspire 代理外部供浏览器端跨进程直接访问。AddJavaScriptAppAngular 与 React 的接入builder.AddJavaScriptApp(angular, ../AspireJavaScript.Angular, runScriptName: start) .WithReference(weatherApi) .WaitFor(weatherApi) .WithHttpEndpoint(env: PORT) .WithExternalHttpEndpoints() .PublishAsDockerFile();AddJavaScriptApp的三个核心参数是资源名称如angular用于在仪表盘与资源引用中标识该应用项目相对路径如../AspireJavaScript.Angular指向前端源码目录runScriptName开发模式下要执行的 npm script 名称此处为start。随后链式调用的一系列方法构成了完整的生命周期与连通性配置方法作用WithReference(weatherApi)将weatherapi的引用注入前端使前端能通过服务发现机制拿到后端的连接信息写入环境变量WaitFor(weatherApi)让前端等待weatherapi进入就绪状态后再启动避免启动期请求失败WithHttpEndpoint(env: PORT)将 HTTP 端点绑定到名为PORT的环境变量即由 Aspire 分配端口并注入给 npm 进程WithExternalHttpEndpoints()将前端端点暴露到代理外部浏览器可直接访问PublishAsDockerFile()发布阶段使用项目自带的 Dockerfile 构建镜像WithEnvironment(BROWSER, none)注入环境变量禁用npm start自动打开浏览器React 示例中用于避免干扰WithBrowserDebugger()为前端附加浏览器调试能力该 API 标记为评估用途需抑制ASPIREEXTENSION001诊断React 的声明几乎相同只是额外注入了BROWSERnone并启用了浏览器调试器#pragma warning disable ASPIREEXTENSION001 builder.AddJavaScriptApp(react, ../AspireJavaScript.React, runScriptName: start) .WithReference(weatherApi) .WaitFor(weatherApi) .WithEnvironment(BROWSER, none) // Disable opening browser on npm start .WithHttpEndpoint(env: PORT) .WithExternalHttpEndpoints() .PublishAsDockerFile() .WithBrowserDebugger(); #pragma warning restore ASPIREEXTENSION001Vue 的另一种写法WithRunScript WithNpmVue 的声明展示了等效但更细粒度的写法用WithRunScript(start)指定运行脚本用WithNpm(installCommand: ci)指定使用npm ci进行干净安装要求必须存在 lock 文件builder.AddJavaScriptApp(vue, ../AspireJavaScript.Vue) .WithRunScript(start) .WithNpm(installCommand: ci) // Use npm ci for clean install, requires lock file .WithReference(weatherApi) .WaitFor(weatherApi) .WithHttpEndpoint(env: PORT) .WithExternalHttpEndpoints() .PublishAsDockerFile();专用扩展AddViteApp 与 AddNodeApp对于 Vite 应用和纯 Node.js 应用Aspire 提供了更专用的入口var reactvite builder.AddViteApp(reactvite, ../AspireJavaScript.Vite) .WithReference(weatherApi) .WithEnvironment(BROWSER, none) .WithExternalHttpEndpoints(); builder.AddNodeApp(node, ../AspireJavaScript.NodeApp, app.js) .WithRunScript(dev) // Use npm run dev for development .WithHttpEndpoint(env: PORT) .WithExternalHttpEndpoints() .PublishAsDockerFile();AddNodeApp的第三个参数指定了 Node.js 的入口脚本如app.js适用于自带服务端逻辑的 Node 应用示例中的 NodeApp 即是一个最小 Node HTTP 服务。这些扩展方法的底层实现位于 src/Aspire.Hosting.JavaScript 目录核心文件包括JavaScriptHostingExtensions.csAddJavaScriptApp、AddViteApp、AddNodeApp等入口扩展JavaScriptAppResource.csJavaScript 应用资源的抽象模型ViteAppResource.cs 与 NodeAppResource.csVite / Node 应用资源JavaScriptRunScriptAnnotation.cs、JavaScriptInstallCommandAnnotation.cs、JavaScriptPackageManagerAnnotation.cs等对应runScriptName、installCommand等配置的注解承载。跨平台端口传递PORT 环境变量与 run-script-osWithHttpEndpoint(env: PORT)意味着 Aspire 会把分配到的端口注入名为PORT的环境变量。前端package.json需要显式读取它才能在任意平台上正确监听端口。示例中的 Angular 与 React 都借助run-script-os实现跨平台scripts: { start: run-script-os, start:win32: ng serve --port %PORT%, start:default: ng serve --port $PORT }要点start委托给run-script-os它会根据运行平台挑选start:win32Windows使用%PORT%或start:defaultLinux/macOS使用$PORTReact 的 webpack-dev-server 写法是webpack-dev-server --mode development --hot --env PORT$PORT子项目package.json的engines声明了node: 20.12与 README 中的 Node 最低版本要求保持一致。前端如何找到后端服务发现与代理配置WithReference(weatherApi)会通过 Aspire 服务发现把weatherapi的地址注入前端进程。以 Angular 为例其 proxy.conf.js 读取这些环境变量把/api前缀的请求代理到真实后端module.exports { /api: { target: process.env[WEATHERAPI_HTTPS] || process.env[WEATHERAPI_HTTP], secure: process.env[NODE_ENV] ! development }, };这里WEATHERAPI_HTTP/WEATHERAPI_HTTPS正是服务发现注入的地址环境变量命名规则为资源名大写 _HTTP/_HTTPS。Angular 的angular.json中应配置proxy.conf.js作为开发服务器的代理使前端代码里可以直接请求相对路径/api/weatherforecast无需硬编码后端地址。后端 API 侧的准备MinimalApi 的 AppHost.cs 展示了后端需要做的两件事开启 CORS由于浏览器会从三个不同来源Angular/React/Vue 各自的 dev server 端口直接调用 API示例中配置了AllowAnyOrigin()的宽松 CORS 策略同时通过builder.AddServiceDefaults()引入 ServiceDefaults 的默认可观测性配置暴露数据端点/api/weatherforecast返回 5 条随机天气数据记录类型WeatherForecast同时提供摄氏与华氏温度。此外示例末尾还有一行weatherApi.PublishWithContainerFiles(reactvite, ./wwwroot)它演示了发布阶段把 Vite 构建产物复制进后端容器静态目录的另一种交付方式——后端直接托管前端静态文件。从开发到发布四种部署交付方式AppHost 代码最后一部分集中演示了 Aspire 针对 JavaScript 前端的新增发布模式覆盖了从纯静态站点到自带运行时的多种交付形态发布方式适用场景说明PublishAsDockerFile()前端自带 Dockerfile使用项目目录下的 Dockerfile 构建容器镜像PublishAsStaticWebsite(/api, weatherApi)纯静态构建产物如 Vite将构建产物作为静态站点部署由 YARP 反向代理/api/*到 weatherApi通过服务发现连通无需 CORSPublishAsNodeServer(entryPoint, outputPath)产出自包含 Node 服务端的框架如 SvelteKitadapter-node构建到build/index.js、Nuxt/TanStack构建到.output/server/index.mjsPublishAsPackageScript(scriptName, runScriptArguments)运行时需要node_modules的框架如 Remix 依赖react-router-serve、Nuxt 需要完整 Nitro 运行环境示例注释给出-- --port $PORT的传参写法静态站点发布在示例中的落地代码builder.AddViteApp(vite-static, ../AspireJavaScript.Vite) .WithExternalHttpEndpoints() .PublishAsStaticWebsite(/api, weatherApi);这三种新发布模式同样定义在 src/Aspire.Hosting.JavaScript 中如PublishAsStaticWebsiteOptions.cs承载其配置选项示例中以注释形式保留了 SvelteKit / Remix 等框架的接入模板便于你在 playground 中扩展验证。常见问题与注意事项必须先在 JS 目录执行npm installREADME 明确要求在启动 AppHost 前在每个 JavaScript 文件夹执行依赖安装若改用WithNpm(installCommand: ci)则要求存在package-lock.json诊断抑制AddJavaScriptApp、WithBrowserDebugger、PublishAsStaticWebsite等 API 在示例中标记为评估用途后续可能变更代码中通过#pragma warning disable ASPIREEXTENSION001 / ASPIREJAVASCRIPT001显式抑制对应诊断升级 SDK 时需留意这些 API 的演进端口必须显式传递WithHttpEndpoint(env: PORT)是前端监听正确端口的必要条件配合run-script-os才能保证 Windows 与 Unix 系平台行为一致Node 版本下限README 要求 Node.js 20.7.0前端子项目的engines进一步要求 20.12安装依赖前请先确认node -v。小结通过 AspireWithJavaScript 这个 playground你可以在一套 Aspire 编排中同时驱动 Angular、React、Vue、Vite 与纯 Node 应用AddJavaScriptApp/AddViteApp/AddNodeApp负责生命周期与端口管理WithReferenceWaitFor保证前端就绪与后端可达PORT环境变量 run-script-os解决跨平台启动而PublishAsDockerFile、PublishAsStaticWebsite、PublishAsNodeServer与PublishAsPackageScript则覆盖了从容器镜像、静态托管到自托管 Node 服务的完整发布矩阵。这正是 Aspire 在多语言、多前端、统一编排场景下的直接落地方案可作为你接入任意 JavaScript 框架时的最小可运行起点。【免费下载链接】aspireAspire is the tool for code-first, extensible, observable dev and deploy.项目地址: https://gitcode.com/GitHub_Trending/as/aspire创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
