如何在同一域下將Nodejs API與ReactJs應用程序集成

Question

我正在嘗試了解MERN應用程序如何完全運行，我一直在閱讀有關MongoDB，ExpressJ，ReactJ和NodeJ的信息，我也了解MongoDB，ExpressJ和NodeJ的交互方式以及ReactJ如何獨立工作，我的問題很簡單（我認為）。

問題：如果我使用Node，Express和Mongo創建一個API，並且我有一個由React管理的APP，兩者都需要一個服務器（通過Express，據我所知），那么我應該如何在以下位置運行API和React應用同一時間。 我需要不同的URL嗎？ 我應該配置其他端口嗎？ 我應該如何整合它們？

我確實讀了很多書，但是幾乎每個教程都是本地制作的（而且我正在與Passenger一起在服務器上工作，我無法更改其啟動方式），僅用於Node / Express（帶有pug或其他）/ Mongo或只是React，而我不了解如何連接API和React。

謝謝

Answer 1

它取決於幾個因素：環境（例如，開發，生產）以及對服務器的控制。 為了進行開發，您可以有兩個不同的URL並使用Webpack Dev Server之類的東西。 通常，您將使用模塊捆綁器（例如Webpack）來監視React代碼中的更改。 但是，如果您具有服務器端渲染，這可能會變得更加復雜。

對於生產，通常您已經優化和縮小了客戶端應用程序的捆綁文件。 如果可以更改API，則可以在新端點（例如/static/bundle.js靜態為其提供服務，並從您的index.html文件請求該端點，該文件將由Express.js服務器在訪問/時發送。

但是，由於您可能希望在React應用程序中包含路由，因此您的服務器將需要知道如何處理客戶端應用程序路由（例如app.get('/*', () => ...) ，以及它們可能與您的API端點沖突。要解決此問題，您可以：

• 給API端點添加名稱空間前綴，例如/api/v1/...
• 將API放在其他URL，端口或子域中。 在這種情況下，您確實需要並行運行這兩個服務器。 使用Node.js，可以使用一些幫助程序來使此操作更加方便，例如， 並發 。

Answer 2

消除您的疑慮：針對MERN應用的API ， React和Integration 。

我用三種方法

1）使用工頭 。 這樣，您可以在Procfile中指定您的API和Web客戶端。 我在這里用過

2）使用代理處理需要您的API的請求。 因此，在package.json ，您指定您的API URL（您的API必須正在運行）

// package.json
 .......
 .......
 "proxy": "<path to url:[port no if you're developing locally]>"

在這里檢查。 你可以簡單地添加一個腳本來運行你的API ，並React 的同時 。

3）在Docker容器中設置API和React應用。 mern-starter是檢查此問題的理想場所。

希望這可以幫助！