如何通过侦听单个端口进行生产的单个server.js文件运行反应和表达？

问题描述

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

项目\

• package.json
• server.js
• node_modules \
• 客户\
  • package.json
  • src \
  • public \
  • node_modules \

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

当前，要运行该应用程序，我在根文件夹中使用了concurrently，并将属性"proxy": "http://localhost:5000/"添加到了客户端文件的package.json中。要启动项目，我只需打开本地主机的端口3000。然后，我在react应用中发出的所有请求都会被代理到server.js。

问题：

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

解决方法

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

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

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

,

Shivam Sood的答案绝对正确，但我想我也将为此写一个更详细的答案。

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

1. 首先，将cd client放入react文件夹并运行npm run build。这将为生产环境构建您的react应用。

2. 进入项目文件夹并打开server.js文件并添加以下行。

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

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

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

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

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