如何在同一域下将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是检查此问题的理想场所。

希望这可以帮助！