当我们使用 ReactJS 和 NodeJS 时，拥有两个运行端口的目的是什么？答案

【问题标题】：What is the purpose of having two running ports when we working with ReactJS and NodeJS?当我们使用 ReactJS 和 NodeJS 时，拥有两个运行端口的目的是什么？
【发布时间】：2019-12-13 05:25:54
【问题描述】：

作为一名前 .Net 开发人员，我刚刚开始学习 MERN Stack 开发。我想在这方面发展我的技能，经过大量研究后，我无法弄清楚为什么我们在使用 react js 时需要有两个不同的运行端口/应用程序？

首先，我使用 NodeJS、Express、EJS 视图引擎开发了一些简单的应用程序，并将其部署到 Heroku。到目前为止，这对我来说很好。以后我可以使用包括 MonoDb 在内的这些技术开发我所有的个人网站。但是为了成为完整的 MERN Stack 开发人员，我开始搜索 React 并意识到它只能与提供另一个端口来分隔它，就像客户端应用程序一样。为什么我们不能在一个端口下使用 react 和所有其他东西？

当我得到两个不同的网页时，这让我很困惑； http://localhost:5000/（反应应用） http://localhost:3000/（服务器端：打开我使用 EJS 提供的不同 html）

如果我们在 react 的 package.json 文件中给出与服务器相同的端口号（3000），那么它会给出以下警告；

某些东西已经在端口 3000 上运行。 npm run 客户端退出，代码为 0

是因为 ReactJS 的特性吗？

【问题讨论】：

Why we can't use react and all other things in under one port? 你可以！您可以做的一件事是当它是 GET 请求时，您返回 react 静态文件，其他请求转到您的 api。

标签： node.js reactjs

【解决方案1】：

您完全可以在单个端口上运行 React 和 Node - 但这并不能实现高效的工作流程。

您的问题的核心答案在于将前端路由与后端路由分开。
当使用React Router 时，您的应用程序会根据 URL 参数管理 UI。 p>

即
http://localhost:3000/some-ui-path

同时使用Node作为后端来响应HTTP请求——你将请求发送到特定的URL路径。

即
http://localhost:3000/some-api-path

轻松分离端口可让您区分哪些路由应由前端的React Router 处理，哪些路由应定向到后端的Node。

http://localhost:3000/some-ui-path = React 路由
http://localhost:9000/some-api-path = 节点 HTTP 路由

在您的配置文件中，您可以自定义前端和后端设置，以便对特定路径的任何请求都将重定向到您的节点服务器。

示例：

您可以定义任何以/api/ 为前缀的路径都应代理到端口9000：http://localhost:3000/api/some-api-path ==> http://localhost:9000/some-api-path

您可以使用您喜欢的任何端口，但 3000 5000 和 9000 是入门工具包和模块捆绑器（如 create-react-app 和 webpack）使用的常见默认值

希望这会有所帮助，如果我可以进一步解释，请告诉我！

【讨论】：

这很好地解释了我心中的一些观点，谢谢。除此之外，我只是好奇，分离服务器和客户端应用程序是否只是最佳实践。我的意思是，在 .NET 中，我过去只是通过跟踪 MVC 建模来开发一个模块中的所有部分。但是在这里，为服务器和客户端运行两个不同的模块应用程序对我来说是新的。
欢迎您！是的，将前端和后端分开绝对是最佳实践——您真的希望能够将在服务器上运行的代码与在客户端上运行的代码分开调试。通常，客户端和服务器在完全不同的运行时工作，这取决于您选择托管服务器的人 - 以及您正在编译的浏览器。将它们分开可以让您控制为一个运行时自定义您的服务器，并为另一个运行时自定义您的客户端。

【解决方案2】：

您不能在单个端口中运行 React 和 Node.js 服务器。

为什么？

React 使用webpack 将所有component 文件捆绑到一个 singleJS 文件。然后这个 JS 文件由 webpack-dev-server 是 webpack 的一部分。

这个webpack-dev-server 仅在development 期间需要。在production 中，您使用npm run build 或yarn build 将所有内容捆绑到一个名为build 的目录中，该目录将作为static asset 由您的Node.js 服务器提供。

因此，在development 期间，您需要使用两个不同的端口：

webpack-dev-server：默认情况下在 3000 上运行。如果您尝试运行 Node.js 服务器，则会收到错误消息。
Node.js 服务器：这应该在3000 以外的端口上运行。

注意：使用create-react-app 创建 React 应用程序时，webpack 用作默认模块捆绑器。

【讨论】：

React 不使用 webpack 来捆绑资产，除非开发人员选择实现它 - 或选择像 create-react-app 这样的入门工具包。
我说的是使用 'create-react-app' 创建的应用程序
我已经使用“create-react-app”安装了 React。那么，就像你说的那样，它是由 webpack 引起的吗？构建后路由到该端口会发生什么？毕竟，这不是仍然存在两个为客户端和服务器构建环境的模块吗？我主要担心的是，当我们不使用 React 时，我们安装了一个节点模块。但是当我们决定使用 React 时，我们突然需要另一个节点模块，它需要由终端单独运行。我不明白这一点。

【解决方案3】：

让我们从港口开始。 Port 是一种逻辑构造，用于标识特定进程或一种网络服务类型。端口是通信endpoint。而且您有两种不同的服务，因此通常使用不同的端口似乎是合乎逻辑的。你的问题真的很好。我正在等待新的答案。

【讨论】：

【解决方案4】：

这里也是 .Net 开发人员！我自己也有同样的问题，this article 似乎对我有点澄清。

您似乎只需要两台服务器（两个端口）来进行开发。在生产环境中，您将只运行一个 API 服务器，一些端点只是在 /build 目录中提供静态文件，例如：

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'))
})

我认为我们在开发中运行两台服务器（一台 react webpack 服务器和一台 API 服务器）端口的原因是 1）我们不想在每次更改时都运行 npm build 和 2）因为无需每次进行更改时都构建，它允许热重载以实现快速开发。

【讨论】：