我使用express创建了一个API，我想在前端服务器中使用它，问题是，要使我的API工作，我必须不断地将其运行在服务器上。但是，我不能同时运行我的React应用程序。所以我的问题是如何同时启动React Server和API？
P.S。我同时尝试了，但是我对如何使其工作感到困惑，这是我的软件包中的一些示例代码。
{
"name": "app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^4.1.1",
"@material-ui/icons": "^4.2.0",
"axios": "^0.19.0",
"concurrently": "^4.1.0",
"express": "^4.17.1",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.1"
},
"scripts": {
"start": "node src/connection",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"react": "react-scripts start",
"dev": "concurrently "npm start" "npm react""
},
"proxy": "http://localhost:3000",
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": []
}
}
在5个步骤中：
- 安装
npm i --s concurrently软件包 - node/server/backend的 package.json 中的下面添加下面的脚本
"client": "npm start --prefix client",
"clientinstall": "npm install --prefix client",
"dev": "concurrently "npm run server" "npm run client"
- 确保您为客户和服务器提供了正确的路径
- 运行'npm运行dev'
- 微笑
安装软件包npm-run-all，它可以帮助您执行多个脚本。您可以参考以下链接：
https://www.npmjs.com/package/npm-run-all-all
安装此软件包后，在您的软件包中。
"scripts": {
"start-js": "react-scripts start",
"backend-start": "NODE_ENV=production node node_api/server.js",
"start": "concurrently "npm-run-all -p backend-start start-js"",
"build": "npm-run-all build-css && react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
在这里，当您运行命令" NPM启动"时，它首先运行启动后端服务器的"后端启动"脚本，然后启动React。
只需更改"后端启动"脚本中的路径。用路径节点启动文件替换" node_api/server.js"
一个可能的解决方案是
-
首先，您需要将代理更改为5000
'proxy;：＆quot" http：//localhost：5000＆quot"
-
确保文件夹结构为像这样的东西
-
在后端(外部(软件包中同时使用：
scripts＆quot;：{
'start'：＆quot'node backend/server.js＆quort'
'client; quot; quot; quot'
dev'：＆quot'同时'npm运行开始＆quot" npm运行客户端"
npm-run-all软件包将帮助您完成此任务。
有一个选项可以在Create React App的软件包中设置。JSON将非文本/HTML请求通过替代后端。您可以使用此功能代理在其他地方运行的应用程序，使用此功能您可以在React Project本身中运行服务器。
将下面的行添加到软件包。JSON文件："proxy": "http://localhost:3001",
修改脚本部分如下：
"scripts": {
"start": "react-scripts start",
"server": "node-env-run server --exec nodemon",
"dev": "run-p server start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
最后您的软件包。
{
"name": "frontend_backend",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.8",
"@testing-library/react": "^11.2.2",
"@testing-library/user-event": "^12.6.0",
"nodemon": "^2.0.6",
"npm-run-all": "^4.1.5",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.4"
},
"proxy": "http://localhost:3001",
"scripts": {
"start": "react-scripts start",
"server": "node-env-run server --exec nodemon",
"dev": "run-p server 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"
]
}
}
现在，使用npm run dev运行该应用程序。(您可以将' dev'更改为所需的任何东西，例如： "app": "run-p server start"，然后使用 npm run app命令运行应用程序(
-
安装NPM在后端中同时包装
-
在后端的软件包中添加下面的脚本。JSON
"start": "node server.js", "server": "nodemon server.js", "frontend": "cd ./frontend && npm run dev", "dev": "concurrently "npm run server" "npm run frontend"" -
确保您为客户端和服务器提供了正确的路径
添加"代理"：＆quot" localhost：5000"作为包装的代理。假设您的nodejs应用程序在端口5000上运行。
-
从后端root文件夹运行'npm运行dev'