如何在同一域下将Nodejs API与ReactJs应用程序集成-Java 学习之路

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

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

我真的读了很多，但几乎每个教程都是在本地制作的（而且我在使用Passenger的服务器上工作，我无法改变它的启动方式），仅适用于Node / Express（带有哈巴狗或其他）/ Mongo或者只是React，我不明白如何连接API和React .

谢谢

2 回答

2
这取决于几个因素：环境（例如开发，生产环境）以及您对服务器的控制 . 对于开发，您可以使用两个不同的URL并使用类似Webpack Dev Server的内容 . 通常你会有模块捆绑器，例如Webpack，注意React代码的变化 . 但是，如果您有服务器端渲染，这可能会变得更复杂 .

对于生产环境，通常您的客户端应用程序的捆绑文件已经优化和缩小 . 如果您可以更改API，则可以在新 endpoints 中静态地提供API，例如： /static/bundle.js 并从 index.html 文件请求此 endpoints ，该文件将在访问 / 时由Express.js服务器发送 .

但是，因为您可能希望在React应用程序中有路由，所以您的服务器需要知道如何处理客户端应用程序路由（例如 app.get('/*', () => ...) ，它们可能会与您的API endpoints 发生冲突 . 要解决此问题，您可以：
- 使用命名空间前缀API endpoints ，例如 /api/v1/...
- 将API放在不同的URL，端口或子域中 . 在这种情况下，您确实需要并行运行这两个服务器 . 使用Node.js，有助手使这更方便，例如concurrently .
回复于 2024-04-26T17:01:03+08:00
1
解决您的问题： API ， React 和 Integration for MERN app .

我用三种方法

1）使用foreman . 这样，您可以在Procfile中指定API和Web Client . 我用它here

2）使用代理处理需要您的API的请求 . 所以在 package.json 中，您指定了您的API网址（您的API必须正在运行）
```
// package.json
 .......
 .......
 "proxy": "<path to url:[port no if you're developing locally]>"
```
检查here . 您只需添加脚本即可运行 API 和 React concurrently .

3）在Docker容器中设置API和React应用程序 . mern-starter是检查这个的完美场所 .

希望这可以帮助！
回复于 2024-04-26T17:01:03+08:00

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

2 回答

相关问题