是否可以在同一个端口中运行 Node 和 React？答案

【问题标题】：Is it possible to run Node and React in the same port?是否可以在同一个端口中运行 Node 和 React？
【发布时间】：2021-07-19 02:08:42
【问题描述】：

我正在使用 React 构建一个简单的项目，我希望它连接到数据库（mongodb Atlas）。但是，我只能使用 Node.js 连接到我的数据库。是否可以在同一个 3000 端口上同时运行 Node 和 React？

我也将 Express 与 Node 一起使用，因为我发现在创建具有相同 navBar 和页脚的新页面时使用 ejs 文件非常方便。

这三个家伙可以在一个端口上一起运行吗？

【问题讨论】：

react 和 node 都不使用任何网络端口，因为它们本身没有网络功能。它是使用节点作为运行时环境的 Web 服务器（例如 express js）或使用端口的数据库服务器。您可以从同一个 Web 服务器提供您的资产（react 应用程序、html、css）。
yup 使用 node js 提供构建文件夹，静态页面
您也可以用括号编辑您的问题：是否可以在同一个端口中运行 Node 和 React？（我可以使用我的 Express ejs 页面来渲染我的 React 组件吗？）

标签： node.js reactjs

【解决方案1】：

是和不是。在生产环境中，Express 将在同一端口上提供指向您的构建文件夹的静态路由。在开发模式下，Express 和 React 需要分离端口。您可以通过在端口 5000 上设置 Express 并在端口 3000 上设置 React 来轻松实现这一点。然后您需要在 React package.json 中声明这个“代理”：“http://localhost:5000”。如果您“同时”安装软件包，您甚至可以在一个命令中同时运行 Express 和 React。

【讨论】：

node 是一个 javascript 运行时环境。它不使用任何端口，它只是在机器上执行 javascript 代码。使用该端口的是可能在也可能不会在该环境中运行的 Web 服务器。
当然，但他正在使用带节点的 express。我认为 express 需要一个端口。感谢您指出这一点，我现在已经编辑了我的答案。
好吧，您写了节点在端口 5000 上提供服务，而反应服务在端口 3000 上提供服务，但实际上这些服务都没有在任何端口上提供任何服务。您的意思可能是一个 express js web 服务器，它为生产包提供服务，也可能是与 create-react-app 捆绑在一起的开发 web 服务器？

【解决方案2】：

您可以通过将以下代理字段添加到您的 react 项目中的 package.json 来代理您的 api

  "proxy": "http://localhost:4000"

现在在前端应用程序中，您可以使用应用程序端口进行 fetch API 调用，例如

fetch('/api/user') // this calls -> http://localhost:4000/api/user

在此处阅读更多信息：：Proxying API Requests in Development

【讨论】：

【解决方案3】：

好吧，不同的服务器使用相同的端口是没有意义的。但是，如果您想替换 ejs 并在节点服务器中使用 react，那么您可以将项目托管在单端口中。但这对每个人来说都是困难的，无论是开发者还是用户。

因此，使用不同的项目目录为客户端和服务器提供服务。如果您在连接数据库时遇到问题，并且感觉只有一个端口在工作，您可以为他们更改端口。

不过我觉得this post应该可以帮你连接mongodb吧？

【讨论】：

【解决方案4】：

如果您希望您的 Express ejs 页面在同一端口上提供您的 React 代码，请创建以下文件：

src/javascripts/views/layout.ejs:

<!DOCTYPE html>
<html lang="en">
<head>
  <title><%= title %></title>
</head>
<body>
    <div class="container" >
        <h2>Server rendered EJS File</h2>
        <div id="main">
           <!--This div is where React Component Renders -->
        </div> 
    </div>
    <script src="javascripts/main.js"></script>
</body>
</html>

src/javascripts/main.js 文件：

import React from 'react'
import ReactDOM from 'react-dom'

import App from './components/App'

ReactDOM.render(<App />, document.getElementById('main'))

src/javascripts/components/App.js

import React from 'react'

export default function App() {
    return (
        <div className="react-stuff">
            <h1>My React App component</h1>            
        </div>
    )
}

在您的 Express 服务器中指定以下公用文件夹：

app.use(express.static(path.join(__dirname, 'public')))

在 webpack 中指定你的 React 源代码应该从 src/javascripts/main.js 编译到 pubic/javascripts/main.js：

  entry: {
    main: './src/javascripts/main.js'
  },
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'javascripts/main.js',
    publicPath: '/'
  },

最后，创建一个服务于 layout.ejs 的 Express 路由。说“/”（例如 http://localhost:8080）

现在，每次编译 React 代码时，它都会将 ./src/javascripts/main.js 中的代码编译/捆绑到 Express 静态目录（例如 public/javascripts/main.js）

当你请求 http://localhost:8080 时，Express 将提供 layout.ejs。由于 layout.ejs 通过指向 public/javascripts/main.js 的脚本标签连接到您的 React 包，它将为您的 App.js React 组件提供服务！

注意：上述解决方案依赖于您的 React 页面将由 Express 提供服务的架构。但是，如果您想创建一个完全独立于您的 Express 服务器（可能除了 SPA 的 API 调用）的 SPA（单页应用程序），那么解决方案将有所不同，并且将涉及（正如其他答案所建议的那样）使用package.json 中的代理行。

这里还有一个图表，概述了不同文件之间的关系：

【讨论】：

拥有实际演示这些不同解决方案的 repos 也很有帮助（例如，SPA 方法与服务于 React 组件的 ejs 文件），因为它们还依赖于 package.json 和 webpack.config.js 中的配置设置。因此，在没有工作回购/示例的情况下进行设置可能会有点挑战。特别是如果你只是习惯于使用 React 的默认开发生态系统（例如 create-react-app）。也许社区可以为您指出一些回购......