在单个 Azure Web 应用程序中具有 Angular 前端的 Node/Express 后端

Question

我在 dev 中有一个 Node/Express 设置，它将数据输出为 JSON 以供使用。 在开发中，端点是 localhost:3000/data

我在前端的同一节点目录中还有一个 Angular 8 应用程序。 在开发中，我启动了两个单独的 Node 命令提示符……一个在端口 3000 运行 node/express，另一个在端口 4200 运行 angular。

目标是让 Angular 应用程序输出 Node/Express 后端提供的数据......在 Azure Web 应用程序中。

我已经阅读了说明如何将 Angular 部署到 WebApp 的文章，但是我是否可以在单个 Azure Web 应用程序中同时运行 Node/Express 后端服务数据和 Angular 应用程序...或者我是否需要创建两个单独的应用程序和使用前端的 CORS 列表与后端 Web 应用程序通话？

我猜我需要使用 Express 来启动 Angular，然后执行构建而不是 Express 和 Angular 在单独的端口上运行？

Answer 1

您可以在同一目录中使用 Angular 和 Express，并在 express 上使用中间件，因此当您发出请求时，中间件会识别它是“/data” URL 还是简单的 URL，并将 angular 生成的索引文件发送到 dist 文件夹中。

1. 将 app.js 移动到你的 Angular 应用文件夹
2. 插入此代码；

     app.use(express.static(path.join(__dirname, '/dist/<your Angular App Name>')));

     app.use('/data', <your route file>);
     app.use(function(req, res) {
     res.sendFile(path.join(__dirname, '/dist/<your Angular App Name>', 'index.html'));

有了这个，你的 Angular 和 Express 在 localhost:3000 上运行。