如何在同一域下将 Nodejs API 与 ReactJs 应用程序集成答案

【问题标题】：How to integrate a Nodejs API with ReactJs app under the same domain如何在同一域下将 Nodejs API 与 ReactJs 应用程序集成
【发布时间】：2017-08-11 22:23:01
【问题描述】：

我正在尝试了解 MERN 应用程序是如何完全工作的，我一直在阅读有关 MongoDB、ExpressJs、ReactJs 和 NodeJs 的信息，我还了解 MongoDB、ExpressJs 和 NodeJs 如何交互以及 ReactJs 如何独立工作，我的问题很简单（我认为）。

问题：如果我使用 Node、Express 和 Mongo 创建一个 API，并且我有一个由 React 管理的 APP，两者都需要一个服务器（通过 express，我理解），那么，我应该如何同时运行 API 和 React 应用程序.我需要不同的网址吗？我应该配置不同的端口吗？我应该如何整合它们？

我确实阅读了很多，但几乎每个教程都是在本地制作的（我正在使用 Passenger 的服务器中工作，我无法更改它的启动方式），仅适用于 Node/Express（使用 pug 或其他)/Mongo 或者只是 React，我不明白如何连接 API 和 React。

谢谢

【问题讨论】：

那么，我应该将 API 和 React 分开吗？至少在不同的子域中？这是它的设计方式吗？

标签： node.js mongodb reactjs express passenger

【解决方案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，有一些助手可以让这更方便，例如concurrently。

【讨论】：

【解决方案2】：

提出您的疑虑：API、React 和 Integration 用于 MERN 应用。

我使用三种方法

1) 使用foreman。有了这个，您可以在 Procfile 中指定您的 API 和 Web 客户端。我用过here

2) 使用代理来处理需要您的 API 的请求。所以在package.json，你指定你的API URL（你的API必须正在运行）

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

检查here。你可以简单地添加一个脚本来运行你的API和Reactconcurrently。

3) 在 Docker 容器中设置您的 API 和 React 应用程序。 mern-starter 是检查此问题的理想场所。

希望这会有所帮助！

【讨论】：