在單個 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 上運行。