如何使用单个 server.js 文件运行 react 和 express，侦听单个端口以进行生产？答案

【问题标题】：How do I run react and express with a single server.js file listening to a single port for production?如何使用单个 server.js 文件运行 react 和 express，侦听单个端口以进行生产？
【发布时间】：2020-11-30 11:50:40
【问题描述】：

我的项目由一个 react 前端和一个 express 后端组成。它具有以下层次结构：

项目\

package.json
server.js
node_modules\
客户端\
- package.json
- src\
- 公开\
- node_modules\

客户端文件夹包含在 3000 端口上运行的 react 应用程序。根目录中的 server.js 在 5000 端口上运行。

目前，为了运行应用程序，我在根文件夹中使用了concurrently，并将属性"proxy": "http://localhost:5000/" 添加到客户端文件的package.json 中。为了启动这个项目，我只需要打开 localhost 的 3000 端口。我在 react 应用程序中提出的任何请求都会被代理到 server.js。

问题：

在进行生产开发时，这是一种理想的方法吗？
如果没有，是否有另一种方法可以将 react+express 组合到通过单个端口侦听的单个服务器中？

【问题讨论】：

标签： node.js reactjs express

【解决方案1】：

您需要构建您的react-app，然后将您的Express 服务器指向使用静态文件，在构建完成时获取输出。

使用 npm build 构建您的项目，然后在 Express 应用中使用 app.use(express.static(PATH))

这样，当您运行 Express 后端时，您可以在同一 port 5000 上使用您的 react 应用程序

【讨论】：

【解决方案2】：

Shivam Sood 的回答绝对正确，但我想我会写一个更详细的答案，因为我也在为此苦苦挣扎。

您的文件夹结构非常好，许多项目即使在生产中也使用这种类似的方法。但我会引导你完成整个过程。

首先，cd client 进入 react 文件夹并运行 npm run build。这将为生产环境构建您的 React 应用程序。
进入您的项目文件夹并打开server.js 文件并添加以下行。

app.use(express.static(path.join(__dirname,"client", "build")));

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

这会将您的浏览器指向客户端文件夹中由 React 生成的 index.html。

现在通过node server.js 启动server.js 并将浏览器指向localhost:PORTINBROWSER 并进行测试。

您的应用程序和服务器将侦听相同的端口。

【讨论】：