如何同时运行服务器和React应用程序?

Question

在之前一个更复杂的项目中，我和其他人一起构建了一个类，我们能够对react应用程序运行npm start，同时对服务器运行nodemon而没有问题。我现在试图用create-react-app构建一个简单的单页web应用程序，并意识到我不能在同一端口上运行我的服务器和我的React应用程序。我收到一条消息说"有些东西已经在端口3000上运行了"。不知道以前是怎么做到的。

它们甚至需要在同一个端口上运行以进行通信吗?

如果是或否，最佳实践是什么?

不确定要显示什么代码，所以我包含了我的包。Json和我的server.js代码到目前为止。任何帮助或提示感谢!

const express = require('express')
const app = express()
const cors = require("cors")
app.use(cors)
app.use(express.json()) 
app.listen(3000, () => {
console.log("Server is running")
})

{
"name": "project",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"cors": "^2.8.5",
"dotenv": "^16.0.3",
"express": "^4.18.2",
"pg": "^8.8.0",
"pg-hstore": "^2.3.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"sequelize": "^6.27.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"main": "./server/server.js"
}

到目前为止，我已经尝试使用并发，和npm-run-all，但这似乎打破了react应用程序和服务器。

不幸的是，除了npm start命令外，以前构建的应用程序已经损坏修复(至少以我目前的技能集)。旧项目和我的新项目之间的主要区别是旧项目有不同的包。在这两个包之间，我对我当前的项目有相同的依赖关系。除此之外，我能找到的唯一区别是，与"main": "/server/server.js"在我的单包里。在react应用程序的react package.json中有以下内容:

"proxy": "http://127.0.0.1:4000"

不确定这是否起作用，因为旧项目中的react应用程序仍然在端口3000上启动。我已经尝试使用"代理"运行我当前的项目。代码，但它没有任何影响。

Answer 1

当您在同一台机器或计算机上运行服务器和客户端(React App)时(意味着它们可以通过localhost使用)，它们应该在不同的端口上运行。

当"proxy": "http://127.0.0.1:4000"在React App的package.json中被发现时，这意味着你的客户端(React App)试图在端口4000上调用服务器。您可以在https://create-react-app.dev/docs/proxying-api-requests-in-development/中阅读更多关于"proxy"字段的信息。

默认情况下，React App运行在端口3000上。因此，我建议将您的server.js中的端口号更改为4000。

Answer 2

如果要制作并行命令。我推荐勒纳这对monorepo很有帮助。例如:用一个命令我们可以下载所有项目的npm模块，同样可以用一个cmd和相同的方式启动所有项目。流动这个来得到一些想法lerna工作样本

这个循环有更多关于公共节点模块的信息

在我看来，最好的选择是在开发环境中使用两个端口来服务客户端应用程序和服务器。