如何在同一端口运行前端和后端以部署在tomcat服务器中?

Question

我在前端使用reactjs，在连接到MySQL数据库的后端使用节点js，express js。

两者都是两个不同的文件夹，通常我在不同的端口上使用。

如何组合它们以部署在Tomcat服务器中。 这样做的正确方法是什么？

这是我的前端文件夹内后端文件夹中的索引文件

....
....
app.post('/data/tournament/registration',(request, response)=>{
console.log(request.body);
connection.query("INSERT INTO registrationdata VALUES ?"
,[request.body],function(error, result, fields){
if(error){
throw error;
}else{
console.log(JSON.stringify(result));
response.send(JSON.stringify(result))
}
});
});
app.listen(8080,()=>{
console.log("Connected to port 8080");
});
....
....

前端文件夹内的后端文件夹中的包 JSON 文件

{
"name": "mysql_db",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node src/index.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"body-parser": "^1.19.0",
"cors": "^2.8.5",
"express": "^4.17.1",
"mysql": "^2.18.1"
}
}

我在前端使用 axios 从后端获取数据。

import axios from 'axios';
export default axios.create({
baseURL:'http://localhost:8080'
});

我像在前端一样使用 axios 实例从后端获取。

....
....
export const fetchTournaments=()=>async(dispatch)=>{
await mysqlDB.get('/data/tournament/fetch')
.then((response)=>{
console.log(response);
if(response.data !== {}){
dispatch( {
type: ActionTypes.FETCH_TOURNAMENT_SUCCESS,
payload:response.data 
});
console.log("Fetched tournament")
History.push('/tournaments')
}else{
dispatch({type:ActionTypes.FETCH_TOURNAMENT_FAILED});
console.log("failed to Fetch tournament")
}
})
.catch((error)=>console.error(error));
};
....
....

这是前端的包json文件，基本上是根文件夹

{
"name": "chess4loudoun",
"version": "0.1.0",
"private": true,
"dependencies": {
"@date-io/moment": "^1.3.13",
"@material-ui/core": "^4.9.14",
"@material-ui/icons": "^4.9.1",
"@material-ui/pickers": "^3.2.10",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"axios": "^0.19.2",
"concurrently": "^5.2.0",
"material-table": "^1.57.2",
"moment": "^2.26.0",
"react": "^16.13.1",
"react-countdown": "^2.2.1",
"react-dom": "^16.13.1",
"react-google-login": "^5.1.20",
"react-material-ui-carousel": "^1.4.5",
"react-redux": "^7.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1",
"redux": "^4.0.5",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.3.0"
},
"scripts": {
"start": "react-scripts start ",
"build": "react-scripts build ",
"test": "react-scripts test",
"eject": "react-scripts eject",
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

Answer 1

更新

至于您在评论中讨论的关于将xml文件等放在哪里的其他问题，您将希望在Web.xml文件中使用它来按照 https://create-react-app.dev/docs/advanced-configuration/处理任何404

<error-page>
<error-code>404</error-code>
<location>/index.html</location>
</error-page>

---

对于开发，您可以使用：

将其添加到您的快速服务器中.js或 w/e

app.listen(8080)

然后在 React 应用程序package.json使用：

"proxy": "http://localhost:8080"

在生产中，您将需要使用path模块来提供静态反应文件...

const express = require('express')
const path = require('path')
const app = express()
app.use(express.static(path.join(__dirname, 'build')))